From d3608311402819a07ae510470031101c0055f3c7 Mon Sep 17 00:00:00 2001 From: KenTandrian Date: Tue, 31 Mar 2026 23:11:37 +0700 Subject: [PATCH 1/6] fix(ts): resolve types error --- .../src/app/components/access-table/access-table.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts index 76548c45d..11758f410 100644 --- a/apps/client/src/app/components/access-table/access-table.component.ts +++ b/apps/client/src/app/components/access-table/access-table.component.ts @@ -56,7 +56,7 @@ export class GfAccessTableComponent implements OnChanges { public baseUrl = window.location.origin; public dataSource: MatTableDataSource; - public displayedColumns = []; + public displayedColumns: string[] = []; public constructor( private clipboard: Clipboard, From e50588fec2c97db06d3b325e64cf6fa086a3b19b Mon Sep 17 00:00:00 2001 From: KenTandrian Date: Tue, 31 Mar 2026 23:24:19 +0700 Subject: [PATCH 2/6] feat(client): migrate constructor based injection to inject function --- .../components/access-table/access-table.component.ts | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts index 11758f410..15f1367ef 100644 --- a/apps/client/src/app/components/access-table/access-table.component.ts +++ b/apps/client/src/app/components/access-table/access-table.component.ts @@ -9,6 +9,7 @@ import { Component, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, + inject, Input, OnChanges, Output @@ -58,11 +59,11 @@ export class GfAccessTableComponent implements OnChanges { public dataSource: MatTableDataSource; public displayedColumns: string[] = []; - public constructor( - private clipboard: Clipboard, - private notificationService: NotificationService, - private snackBar: MatSnackBar - ) { + private readonly clipboard = inject(Clipboard); + private readonly notificationService = inject(NotificationService); + private readonly snackBar = inject(MatSnackBar); + + public constructor() { addIcons({ copyOutline, createOutline, From 65a469fca851376835b8889e3272cb8193e08e52 Mon Sep 17 00:00:00 2001 From: KenTandrian Date: Tue, 31 Mar 2026 23:27:32 +0700 Subject: [PATCH 3/6] feat(client): implement output signals --- .../components/access-table/access-table.component.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts index 15f1367ef..117d685fd 100644 --- a/apps/client/src/app/components/access-table/access-table.component.ts +++ b/apps/client/src/app/components/access-table/access-table.component.ts @@ -8,11 +8,10 @@ import { ChangeDetectionStrategy, Component, CUSTOM_ELEMENTS_SCHEMA, - EventEmitter, inject, Input, OnChanges, - Output + output } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatMenuModule } from '@angular/material/menu'; @@ -52,10 +51,10 @@ export class GfAccessTableComponent implements OnChanges { @Input() showActions: boolean; @Input() user: User; - @Output() accessDeleted = new EventEmitter(); - @Output() accessToUpdate = new EventEmitter(); + public readonly accessDeleted = output(); + public readonly accessToUpdate = output(); - public baseUrl = window.location.origin; + public readonly baseUrl = window.location.origin; public dataSource: MatTableDataSource; public displayedColumns: string[] = []; From 8cdbc0df30741861ccff9117f794d1dec157b0de Mon Sep 17 00:00:00 2001 From: KenTandrian Date: Tue, 31 Mar 2026 23:41:22 +0700 Subject: [PATCH 4/6] feat(client): migrate to input and computed signals --- .../access-table/access-table.component.html | 10 ++-- .../access-table/access-table.component.ts | 52 ++++++++++--------- 2 files changed, 32 insertions(+), 30 deletions(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html index cb41904d3..a66e7460f 100644 --- a/apps/client/src/app/components/access-table/access-table.component.html +++ b/apps/client/src/app/components/access-table/access-table.component.html @@ -39,7 +39,7 @@ getPublicUrl(element.id) }} - @if (user?.settings?.isExperimentalFeatures) { + @if (user()?.settings?.isExperimentalFeatures) {
GET {{ baseUrl }}/api/v1/public/{{ @@ -69,7 +69,7 @@ class="no-max-width" xPosition="before" > - @if (user?.settings?.isExperimentalFeatures) { + @if (user()?.settings?.isExperimentalFeatures) { } @if ( - user?.settings?.isExperimentalFeatures || element.type === 'PUBLIC' + user()?.settings?.isExperimentalFeatures || element.type === 'PUBLIC' ) {
} @@ -100,7 +100,7 @@ - - + +
diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts index 117d685fd..6c7532343 100644 --- a/apps/client/src/app/components/access-table/access-table.component.ts +++ b/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, - OnChanges, + input, 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 { - @Input() accesses: Access[]; - @Input() showActions: boolean; - @Input() user: User; +export class GfAccessTableComponent { + public readonly accesses = input.required(); + public readonly showActions = input(false); + public readonly user = input.required(); public readonly accessDeleted = output(); public readonly accessToUpdate = output(); - public readonly baseUrl = window.location.origin; - public dataSource: MatTableDataSource; - public displayedColumns: string[] = []; + protected readonly baseUrl = window.location.origin; + protected readonly dataSource = new MatTableDataSource(); + + 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() { - this.displayedColumns = ['alias', 'grantee', 'type', 'details']; - - if (this.showActions) { - this.displayedColumns.push('actions'); - } - - if (this.accesses) { - this.dataSource = new MatTableDataSource(this.accesses); - } + effect(() => { + this.dataSource.data = this.accesses() ?? []; + }); } - public getPublicUrl(aId: string): string { - const languageCode = this.user.settings.language; + protected getPublicUrl(aId: string): string { + 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); } } From 24f819c742a4c839c68037ec1b10dd6d7e6458b4 Mon Sep 17 00:00:00 2001 From: KenTandrian Date: Tue, 31 Mar 2026 23:44:22 +0700 Subject: [PATCH 5/6] fix(client): formatting --- .../app/components/access-table/access-table.component.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.html b/apps/client/src/app/components/access-table/access-table.component.html index a66e7460f..4283d7860 100644 --- a/apps/client/src/app/components/access-table/access-table.component.html +++ b/apps/client/src/app/components/access-table/access-table.component.html @@ -86,7 +86,8 @@ } @if ( - user()?.settings?.isExperimentalFeatures || element.type === 'PUBLIC' + user()?.settings?.isExperimentalFeatures || + element.type === 'PUBLIC' ) {
} From 7842bdba7318c2d5ebb013862dadfe245cf662e0 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Tue, 31 Mar 2026 19:00:40 +0200 Subject: [PATCH 6/6] Clean up --- .../src/app/components/access-table/access-table.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/client/src/app/components/access-table/access-table.component.ts b/apps/client/src/app/components/access-table/access-table.component.ts index 6c7532343..122b4f88b 100644 --- a/apps/client/src/app/components/access-table/access-table.component.ts +++ b/apps/client/src/app/components/access-table/access-table.component.ts @@ -88,13 +88,13 @@ export class GfAccessTableComponent { }); } - protected getPublicUrl(aId: string): string { + protected getPublicUrl(aId: string) { const languageCode = this.user().settings.language; return `${this.baseUrl}/${languageCode}/${publicRoutes.public.path}/${aId}`; } - protected onCopyUrlToClipboard(aId: string): void { + protected onCopyUrlToClipboard(aId: string) { this.clipboard.copy(this.getPublicUrl(aId)); this.snackBar.open(