From ddf60e86e2b478ac54e6e1967148536a4b0a74e6 Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Wed, 15 Apr 2026 09:46:33 +0700
Subject: [PATCH] feat(client): implement form type

---
 .../components/admin-jobs/admin-jobs.component.ts   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts b/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts
index b9f4d590d..cbe52e3a3 100644
--- a/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts
+++ b/apps/client/src/app/components/admin-jobs/admin-jobs.component.ts
@@ -26,6 +26,7 @@ import {
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import {
   FormBuilder,
+  FormControl,
   FormGroup,
   FormsModule,
   ReactiveFormsModule
@@ -84,7 +85,9 @@ export class GfAdminJobsComponent implements OnInit {
 
   public dataSource = new MatTableDataSource<AdminJobs['jobs'][0]>();
   public defaultDateTimeFormat: string;
-  public filterForm: FormGroup;
+  public filterForm: FormGroup<{
+    status: FormControl<JobStatus | null>;
+  }>;
 
   public displayedColumns = [
     'index',
@@ -149,13 +152,13 @@ export class GfAdminJobsComponent implements OnInit {
 
   public ngOnInit() {
     this.filterForm = this.formBuilder.group({
-      status: []
+      status: new FormControl<JobStatus | null>(null)
     });
 
     this.filterForm.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
-        const currentFilter = this.filterForm.get('status').value;
+        const currentFilter = this.filterForm.controls.status.value;
         this.fetchJobs(currentFilter ? [currentFilter] : undefined);
       });
 
@@ -172,10 +175,10 @@ export class GfAdminJobsComponent implements OnInit {
   }
 
   public onDeleteJobs() {
-    const currentFilter = this.filterForm.get('status').value;
+    const currentFilter = this.filterForm.controls.status.value;
 
     this.adminService
-      .deleteJobs({ status: currentFilter ? [currentFilter] : undefined })
+      .deleteJobs({ status: currentFilter ? [currentFilter] : [] })
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(() => {
         this.fetchJobs(currentFilter ? [currentFilter] : undefined);