Task/improve type safety for admin tag component (#6893)

* fix(client): make tag as optional to cover tag creation use case

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

* feat(client): implement view child signal

* feat(client): replace deprecated getDeviceInfo

* feat(client): implement input signal

* fix(client): enforce encapsulation

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

@@ -47,7 +47,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.activityCount"
       />
     </td>

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

@@ -10,10 +10,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';
@@ -52,26 +54,33 @@ import { CreateOrUpdateTagDialogParams } from './create-or-update-tag-dialog/int
   templateUrl: './admin-tag.component.html'
 })
 export class GfAdminTagComponent implements OnInit {
-  @Input() locale = getLocale();
-
-  @ViewChild(MatSort) sort: MatSort;
-
-  public dataSource = new MatTableDataSource<Tag>();
-  public deviceType: string;
-  public displayedColumns = ['name', 'userId', 'activities', 'actions'];
-  public tags: Tag[];
-
-  public constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private dataService: DataService,
-    private destroyRef: DestroyRef,
-    private deviceDetectorService: DeviceDetectorService,
-    private dialog: MatDialog,
-    private notificationService: NotificationService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private userService: UserService
-  ) {
+  public readonly locale = input(getLocale());
+
+  protected dataSource = new MatTableDataSource<Tag>();
+  protected readonly displayedColumns = [
+    'name',
+    'userId',
+    'activities',
+    'actions'
+  ];
+  protected tags: Tag[];
+
+  private readonly deviceType = computed(
+    () => this.deviceDetectorService.deviceInfo().deviceType
+  );
+  private readonly sort = viewChild.required(MatSort);
+
+  private readonly changeDetectorRef = inject(ChangeDetectorRef);
+  private readonly dataService = inject(DataService);
+  private readonly destroyRef = inject(DestroyRef);
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
+  private readonly dialog = inject(MatDialog);
+  private readonly notificationService = inject(NotificationService);
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly userService = inject(UserService);
+
+  public constructor() {
     this.route.queryParams
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe((params) => {
@@ -83,7 +92,9 @@ export class GfAdminTagComponent implements OnInit {
               return id === params['tagId'];
             });
 
+            if (tag) {
               this.openUpdateTagDialog(tag);
+            }
           } else {
             this.router.navigate(['.'], { relativeTo: this.route });
           }
@@ -94,12 +105,10 @@ export class GfAdminTagComponent implements OnInit {
   }
 
   public ngOnInit() {
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
-
     this.fetchTags();
   }
 
-  public onDeleteTag(aId: string) {
+  protected onDeleteTag(aId: string) {
     this.notificationService.confirm({
       confirmFn: () => {
         this.deleteTag(aId);
@@ -109,7 +118,7 @@ export class GfAdminTagComponent implements OnInit {
     });
   }
 
-  public onUpdateTag({ id }: Tag) {
+  protected onUpdateTag({ id }: Tag) {
     this.router.navigate([], {
       queryParams: { editTagDialog: true, tagId: id }
     });
@@ -139,7 +148,7 @@ export class GfAdminTagComponent implements OnInit {
         this.tags = tags;
 
         this.dataSource = new MatTableDataSource(this.tags);
-        this.dataSource.sort = this.sort;
+        this.dataSource.sort = this.sort();
         this.dataSource.sortingDataAccessor = get;
 
         this.dataService.updateInfo();
@@ -153,14 +162,9 @@ export class GfAdminTagComponent implements OnInit {
       GfCreateOrUpdateTagDialogComponent,
       CreateOrUpdateTagDialogParams
     >(GfCreateOrUpdateTagDialogComponent, {
-      data: {
-        tag: {
-          id: null,
-          name: null
-        }
-      },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      data: {} satisfies CreateOrUpdateTagDialogParams,
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef
@@ -197,9 +201,9 @@ export class GfAdminTagComponent implements OnInit {
           id,
           name
         }
-      },
-      height: this.deviceType === 'mobile' ? '98vh' : undefined,
-      width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+      } satisfies CreateOrUpdateTagDialogParams,
+      height: this.deviceType() === 'mobile' ? '98vh' : undefined,
+      width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
     });
 
     dialogRef

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

@@ -43,7 +43,7 @@ export class GfCreateOrUpdateTagDialogComponent {
     private formBuilder: FormBuilder
   ) {
     this.tagForm = this.formBuilder.group({
-      name: [this.data.tag.name]
+      name: [this.data.tag?.name]
     });
   }
 
@@ -57,7 +57,7 @@ export class GfCreateOrUpdateTagDialogComponent {
         name: this.tagForm.get('name')?.value
       };
 
-      if (this.data.tag.id) {
+      if (this.data.tag?.id) {
         (tag as UpdateTagDto).id = this.data.tag.id;
         await validateObjectForForm({
           classDto: UpdateTagDto,

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

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

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

@@ -1,5 +1,5 @@
 import { Tag } from '@prisma/client';
 
 export interface CreateOrUpdateTagDialogParams {
-  tag: Pick<Tag, 'id' | 'name'>;
+  tag?: Pick<Tag, 'id' | 'name'>;
 }