Refactoring

apps/client/src/app/components/admin-platform/admin-platform.component.html

@@ -1,6 +1,17 @@
 <div class="container">
   <div class="row">
     <div class="col">
+      <div class="d-flex justify-content-end">
+        <a
+          color="primary"
+          i18n
+          mat-flat-button
+          [queryParams]="{ createPlatformDialog: true }"
+          [routerLink]="[]"
+        >
+          Add Platform
+        </a>
+      </div>
       <table
         class="gf-table w-100"
         mat-table
@@ -91,16 +102,4 @@
       </table>
     </div>
   </div>
-
-  <div *ngIf="hasPermissionToCreatePlatform">
-    <a
-      color="primary"
-      i18n
-      mat-button
-      [queryParams]="{ createDialog: true }"
-      [routerLink]="[]"
-    >
-      Add Platform
-    </a>
-  </div>
 </div>

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -1,4 +1,5 @@
 import {
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   OnDestroy,
@@ -13,8 +14,7 @@ import { CreatePlatformDto } from '@ghostfolio/api/app/platform/create-platform.
 import { UpdatePlatformDto } from '@ghostfolio/api/app/platform/update-platform.dto';
 import { AdminService } from '@ghostfolio/client/services/admin.service';
 import { UserService } from '@ghostfolio/client/services/user/user.service';
-import { hasPermission, permissions } from '@ghostfolio/common/permissions';
+import { Platform } from '@prisma/client';
-import { Platform, Platform as PlatformModel } from '@prisma/client';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
@@ -22,6 +22,7 @@ import { Subject, takeUntil } from 'rxjs';
 import { CreateOrUpdatePlatformDialog } from './create-or-update-platform-dialog/create-or-update-account-platform.component';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'gf-admin-platform',
   styleUrls: ['./admin-platform.component.scss'],
   templateUrl: './admin-platform.component.html'
@@ -32,9 +33,7 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
   public dataSource: MatTableDataSource<Platform> = new MatTableDataSource();
   public deviceType: string;
   public displayedColumns = ['name', 'url', 'accounts', 'actions'];
-  public hasPermissionToCreatePlatform: boolean;
+  public platforms: Platform[];
-  public hasPermissionToDeletePlatform: boolean;
-  public platforms: PlatformModel[];
 
   private unsubscribeSubject = new Subject<void>();
 
@@ -50,9 +49,9 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     this.route.queryParams
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe((params) => {
-        if (params['createDialog'] && this.hasPermissionToCreatePlatform) {
+        if (params['createPlatformDialog']) {
           this.openCreatePlatformDialog();
-        } else if (params['editDialog']) {
+        } else if (params['editPlatformDialog']) {
           if (this.platforms) {
             const platform = this.platforms.find(({ id }) => {
               return id === params['platformId'];
@@ -69,25 +68,6 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;
 
-    this.userService.stateChanged
-      .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((state) => {
-        if (state?.user) {
-          const user = state.user;
-
-          this.hasPermissionToCreatePlatform = hasPermission(
-            user.permissions,
-            permissions.createPlatform
-          );
-          this.hasPermissionToDeletePlatform = hasPermission(
-            user.permissions,
-            permissions.deletePlatform
-          );
-
-          this.changeDetectorRef.markForCheck();
-        }
-      });
-
     this.fetchPlatforms();
   }
 
@@ -101,9 +81,9 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
     }
   }
 
-  public onUpdatePlatform(aPlatform: PlatformModel) {
+  public onUpdatePlatform({ id }: Platform) {
     this.router.navigate([], {
-      queryParams: { platformId: aPlatform.id, editDialog: true }
+      queryParams: { editPlatformDialog: true, platformId: id }
     });
   }
 

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-account-platform.component.ts

@@ -5,9 +5,9 @@ import { Subject } from 'rxjs';
 import { CreateOrUpdatePlatformDialogParams } from './interfaces/interfaces';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'h-100' },
   selector: 'gf-create-or-update-platform-dialog',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./create-or-update-platform-dialog.scss'],
   templateUrl: 'create-or-update-platform-dialog.html'
 })

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -5,9 +5,11 @@
       <gf-admin-platform></gf-admin-platform>
     </div>
   </div>
+  <!--
   <div class="row">
     <div class="col">
       <h3 class="text-center" i18n>Tags</h3>
     </div>
   </div>
+  -->
 </div>

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -1,7 +1,13 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  OnDestroy,
+  OnInit
+} from '@angular/core';
 import { Subject } from 'rxjs';
 
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'page' },
   selector: 'gf-admin-settings',
   styleUrls: ['./admin-settings.component.scss'],