From 2cb45589d8acb53cb214b6832177f12e4017e230 Mon Sep 17 00:00:00 2001 From: Kenrick Tandrian <60643640+KenTandrian@users.noreply.github.com> Date: Mon, 18 May 2026 19:24:30 +0700 Subject: [PATCH] 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 --- .../admin-platform.component.html | 2 +- .../admin-platform.component.ts | 90 +++++++++---------- ...ate-or-update-platform-dialog.component.ts | 6 +- .../create-or-update-platform-dialog.html | 2 +- .../interfaces/interfaces.ts | 2 +- 5 files changed, 46 insertions(+), 56 deletions(-) diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.html b/apps/client/src/app/components/admin-platform/admin-platform.component.html index 7370a19ae..44f5a6eab 100644 --- a/apps/client/src/app/components/admin-platform/admin-platform.component.html +++ b/apps/client/src/app/components/admin-platform/admin-platform.component.html @@ -54,7 +54,7 @@ diff --git a/apps/client/src/app/components/admin-platform/admin-platform.component.ts b/apps/client/src/app/components/admin-platform/admin-platform.component.ts index 1c117b983..a9d135068 100644 --- a/apps/client/src/app/components/admin-platform/admin-platform.component.ts +++ b/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(); - - @ViewChild(MatSort) sort: MatSort; - - public dataSource = new MatTableDataSource(); - public deviceType: string; - public displayedColumns = ['name', 'url', 'accounts', 'actions']; - public platforms: Platform[]; - - public constructor( - private adminService: AdminService, - 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(); + protected readonly displayedColumns = ['name', 'url', 'accounts', 'actions']; + protected platforms: Platform[]; + + private readonly deviceType = computed( + () => this.deviceDetectorService.deviceInfo().deviceType + ); + private readonly sort = viewChild.required(MatSort); + + private readonly adminService = inject(AdminService); + 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) => { @@ -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: { - platform: { - id: null, - name: null, - url: null - } - }, - height: this.deviceType === 'mobile' ? '98vh' : undefined, - width: this.deviceType === 'mobile' ? '100vw' : '50rem' + data: {} satisfies CreateOrUpdatePlatformDialogParams, + height: this.deviceType() === 'mobile' ? '98vh' : undefined, + width: this.deviceType() === 'mobile' ? '100vw' : '50rem' }); dialogRef @@ -191,15 +189,7 @@ export class GfAdminPlatformComponent implements OnInit { }); } - private openUpdatePlatformDialog({ - id, - name, - url - }: { - id: string; - name: string; - url: string; - }) { + private openUpdatePlatformDialog({ id, name, url }: Platform) { const dialogRef = this.dialog.open< GfCreateOrUpdatePlatformDialogComponent, CreateOrUpdatePlatformDialogParams @@ -210,9 +200,9 @@ export class GfAdminPlatformComponent implements OnInit { name, url } - }, - height: this.deviceType === 'mobile' ? '98vh' : undefined, - width: this.deviceType === 'mobile' ? '100vw' : '50rem' + } satisfies CreateOrUpdatePlatformDialogParams, + height: this.deviceType() === 'mobile' ? '98vh' : undefined, + width: this.deviceType() === 'mobile' ? '100vw' : '50rem' }); dialogRef diff --git a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts b/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts index 0cfe026a4..b0364f1e3 100644 --- a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.component.ts +++ b/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], - url: [this.data.platform.url ?? 'https://', Validators.required] + name: [this.data.platform?.name, 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, diff --git a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html b/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html index 50193c2cc..f923b95a6 100644 --- a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/create-or-update-platform-dialog.html +++ b/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) {

Update platform

} @else {

Add platform

diff --git a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/interfaces/interfaces.ts b/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/interfaces/interfaces.ts index be4af5407..d3b9ae528 100644 --- a/apps/client/src/app/components/admin-platform/create-or-update-platform-dialog/interfaces/interfaces.ts +++ b/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; }