Task/improve type safety for admin platform component (#6892)

* fix(client): make platform as optional for platform creation

* feat(client): resolve errors

* feat(client): migrate constructor based DI to inject function

* feat(client): implement view child signal

* feat(client): replace deprecated getDeviceInfo

* fix(client): enforce encapsulation

* feat(client): implement input signal

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

@@ -54,7 +54,7 @@
     <td *matCellDef="let element" class="px-1 text-right" mat-cell>
       <gf-value
         class="d-inline-block justify-content-end"
-        [locale]="locale"
+        [locale]="locale()"
         [value]="element.accountCount"
       />
     </td>

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

@@ -11,10 +11,12 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   DestroyRef,
-  Input,
+  inject,
+  input,
   OnInit,
-  ViewChild
+  viewChild
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatButtonModule } from '@angular/material/button';
@@ -54,27 +56,29 @@ import { CreateOrUpdatePlatformDialogParams } from './create-or-update-platform-
   templateUrl: './admin-platform.component.html'
 })
 export class GfAdminPlatformComponent implements OnInit {
-  @Input() locale = getLocale();
+  public readonly locale = input(getLocale());
-
+
-  @ViewChild(MatSort) sort: MatSort;
+  protected dataSource = new MatTableDataSource<Platform>();
-
+  protected readonly displayedColumns = ['name', 'url', 'accounts', 'actions'];
-  public dataSource = new MatTableDataSource<Platform>();
+  protected platforms: Platform[];
-  public deviceType: string;
+
-  public displayedColumns = ['name', 'url', 'accounts', 'actions'];
+  private readonly deviceType = computed(
-  public platforms: Platform[];
+    () => this.deviceDetectorService.deviceInfo().deviceType
-
+  );
-  public constructor(
+  private readonly sort = viewChild.required(MatSort);
-    private adminService: AdminService,
+
-    private changeDetectorRef: ChangeDetectorRef,
+  private readonly adminService = inject(AdminService);
-    private dataService: DataService,
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
-    private destroyRef: DestroyRef,
+  private readonly dataService = inject(DataService);
-    private deviceDetectorService: DeviceDetectorService,
+  private readonly destroyRef = inject(DestroyRef);
-    private dialog: MatDialog,
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
-    private notificationService: NotificationService,
+  private readonly dialog = inject(MatDialog);
-    private route: ActivatedRoute,
+  private readonly notificationService = inject(NotificationService);
-    private router: Router,
+  private readonly route = inject(ActivatedRoute);
-    private userService: UserService
+  private readonly router = inject(Router);
-  ) {
+  private readonly userService = inject(UserService);
+
+  public constructor() {
     this.route.queryParams
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
@@ -86,7 +90,9 @@ export class GfAdminPlatformComponent implements OnInit {
               return id === params['platformId'];
             });
 
-            this.openUpdatePlatformDialog(platform);
+            if (platform) {
+              this.openUpdatePlatformDialog(platform);
+            }
           } else {
             this.router.navigate(['.'], { relativeTo: this.route });
           }
@@ -97,12 +103,10 @@ export class GfAdminPlatformComponent implements OnInit {
   }
 
   public ngOnInit() {
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
-
     this.fetchPlatforms();
   }
 
-  public onDeletePlatform(aId: string) {
+  protected onDeletePlatform(aId: string) {
     this.notificationService.confirm({
       confirmFn: () => {
         this.deletePlatform(aId);
@@ -112,7 +116,7 @@ export class GfAdminPlatformComponent implements OnInit {
     });
   }
 
-  public onUpdatePlatform({ id }: Platform) {
+  protected onUpdatePlatform({ id }: Platform) {
     this.router.navigate([], {
       queryParams: { editPlatformDialog: true, platformId: id }
     });
@@ -142,7 +146,7 @@ export class GfAdminPlatformComponent implements OnInit {
         this.platforms = platforms;
 
         this.dataSource = new MatTableDataSource(platforms);
-        this.dataSource.sort = this.sort;
+        this.dataSource.sort = this.sort();
         this.dataSource.sortingDataAccessor = get;
 
         this.dataService.updateInfo();
@@ -156,15 +160,9 @@ export class GfAdminPlatformComponent implements OnInit {
       GfCreateOrUpdatePlatformDialogComponent,
       CreateOrUpdatePlatformDialogParams
     >(GfCreateOrUpdatePlatformDialogComponent, {
-      data: {
+      data: {} satisfies CreateOrUpdatePlatformDialogParams,
-        platform: {
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
-          id: null,
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
-          name: null,
-          url: null
-        }
-      },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef
@@ -191,15 +189,7 @@ export class GfAdminPlatformComponent implements OnInit {
       });
   }
 
-  private openUpdatePlatformDialog({
+  private openUpdatePlatformDialog({ id, name, url }: Platform) {
-    id,
-    name,
-    url
-  }: {
-    id: string;
-    name: string;
-    url: string;
-  }) {
     const dialogRef = this.dialog.open<
       GfCreateOrUpdatePlatformDialogComponent,
       CreateOrUpdatePlatformDialogParams
@@ -210,9 +200,9 @@ export class GfAdminPlatformComponent implements OnInit {
           name,
           url
         }
-      },
+      } satisfies CreateOrUpdatePlatformDialogParams,
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef

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

@@ -46,8 +46,8 @@ export class GfCreateOrUpdatePlatformDialogComponent {
     private formBuilder: FormBuilder
   ) {
     this.platformForm = this.formBuilder.group({
-      name: [this.data.platform.name, Validators.required],
+      name: [this.data.platform?.name, Validators.required],
-      url: [this.data.platform.url ?? 'https://', Validators.required]
+      url: [this.data.platform?.url ?? 'https://', Validators.required]
     });
   }
 
@@ -62,7 +62,7 @@ export class GfCreateOrUpdatePlatformDialogComponent {
         url: this.platformForm.get('url')?.value
       };
 
-      if (this.data.platform.id) {
+      if (this.data.platform?.id) {
         (platform as UpdatePlatformDto).id = this.data.platform.id;
         await validateObjectForForm({
           classDto: UpdatePlatformDto,

apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html

@@ -4,7 +4,7 @@
   (keyup.enter)="platformForm.valid && onSubmit()"
   (ngSubmit)="onSubmit()"
 >
-  @if (data.platform.id) {
+  @if (data.platform?.id) {
     <h1 i18n mat-dialog-title>Update platform</h1>
   } @else {
     <h1 i18n mat-dialog-title>Add platform</h1>

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

@@ -1,5 +1,5 @@
 import { Platform } from '@prisma/client';
 
 export interface CreateOrUpdatePlatformDialogParams {
-  platform: Platform;
+  platform?: Platform;
 }