feat(client): migrate to input and computed signals

apps/client/src/app/components/access-table/access-table.component.html

@@ -39,7 +39,7 @@
               getPublicUrl(element.id)
             }}</a>
           </div>
-          @if (user?.settings?.isExperimentalFeatures) {
+          @if (user()?.settings?.isExperimentalFeatures) {
             <div>
               <code
                 >GET {{ baseUrl }}/api/v1/public/{{
@@ -69,7 +69,7 @@
           class="no-max-width"
           xPosition="before"
         >
-          @if (user?.settings?.isExperimentalFeatures) {
+          @if (user()?.settings?.isExperimentalFeatures) {
             <button mat-menu-item (click)="onUpdateAccess(element.id)">
               <span class="align-items-center d-flex">
                 <ion-icon class="mr-2" name="create-outline" />
@@ -86,7 +86,7 @@
             </button>
           }
           @if (
-            user?.settings?.isExperimentalFeatures || element.type === 'PUBLIC'
+            user()?.settings?.isExperimentalFeatures || element.type === 'PUBLIC'
           ) {
             <hr class="my-0" />
           }
@@ -100,7 +100,7 @@
       </td>
     </ng-container>
 
-    <tr *matHeaderRowDef="displayedColumns" mat-header-row></tr>
+    <tr *matHeaderRowDef="displayedColumns()" mat-header-row></tr>
-    <tr *matRowDef="let row; columns: displayedColumns" mat-row></tr>
+    <tr *matRowDef="let row; columns: displayedColumns()" mat-row></tr>
   </table>
 </div>

apps/client/src/app/components/access-table/access-table.component.ts

@@ -7,10 +7,11 @@ import { Clipboard, ClipboardModule } from '@angular/cdk/clipboard';
 import {
   ChangeDetectionStrategy,
   Component,
+  computed,
   CUSTOM_ELEMENTS_SCHEMA,
+  effect,
   inject,
-  Input,
+  input,
-  OnChanges,
   output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
@@ -46,17 +47,26 @@ import ms from 'ms';
   templateUrl: './access-table.component.html',
   styleUrls: ['./access-table.component.scss']
 })
-export class GfAccessTableComponent implements OnChanges {
+export class GfAccessTableComponent {
-  @Input() accesses: Access[];
+  public readonly accesses = input.required<Access[]>();
-  @Input() showActions: boolean;
+  public readonly showActions = input<boolean>(false);
-  @Input() user: User;
+  public readonly user = input.required<User>();
 
   public readonly accessDeleted = output<string>();
   public readonly accessToUpdate = output<string>();
 
-  public readonly baseUrl = window.location.origin;
+  protected readonly baseUrl = window.location.origin;
-  public dataSource: MatTableDataSource<Access>;
+  protected readonly dataSource = new MatTableDataSource<Access>();
-  public displayedColumns: string[] = [];
+
+  protected readonly displayedColumns = computed(() => {
+    const columns = ['alias', 'grantee', 'type', 'details'];
+
+    if (this.showActions()) {
+      columns.push('actions');
+    }
+
+    return columns;
+  });
 
   private readonly clipboard = inject(Clipboard);
   private readonly notificationService = inject(NotificationService);
@@ -72,27 +82,19 @@ export class GfAccessTableComponent implements OnChanges {
       lockOpenOutline,
       removeCircleOutline
     });
-  }
 
-  public ngOnChanges() {
+    effect(() => {
-    this.displayedColumns = ['alias', 'grantee', 'type', 'details'];
+      this.dataSource.data = this.accesses() ?? [];
-
+    });
-    if (this.showActions) {
-      this.displayedColumns.push('actions');
-    }
-
-    if (this.accesses) {
-      this.dataSource = new MatTableDataSource(this.accesses);
-    }
   }
 
-  public getPublicUrl(aId: string): string {
+  protected getPublicUrl(aId: string): string {
-    const languageCode = this.user.settings.language;
+    const languageCode = this.user().settings.language;
 
     return `${this.baseUrl}/${languageCode}/${publicRoutes.public.path}/${aId}`;
   }
 
-  public onCopyUrlToClipboard(aId: string): void {
+  protected onCopyUrlToClipboard(aId: string): void {
     this.clipboard.copy(this.getPublicUrl(aId));
 
     this.snackBar.open(
@@ -104,7 +106,7 @@ export class GfAccessTableComponent implements OnChanges {
     );
   }
 
-  public onDeleteAccess(aId: string) {
+  protected onDeleteAccess(aId: string) {
     this.notificationService.confirm({
       confirmFn: () => {
         this.accessDeleted.emit(aId);
@@ -114,7 +116,7 @@ export class GfAccessTableComponent implements OnChanges {
     });
   }
 
-  public onUpdateAccess(aId: string) {
+  protected onUpdateAccess(aId: string) {
     this.accessToUpdate.emit(aId);
   }
 }