Consolidated commit message to v22 signals

overlord/src/app/account/account-detail/account-detail.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, afterNextRender, linkedSignal, input, computed } from '@angular/core';
+import { form, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -9,13 +9,24 @@ import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { Account } from '../../core/account';
-import { AccountType } from '../../core/account-type';
 import { AccountService } from '../../core/account.service';
-import { CostCentre } from '../../core/cost-centre';
+import { CostCentreService } from '../../cost-centre/cost-centre.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
+import { AccountTypeService } from '../account-type.service';
+
+export interface AccountDetailFormData {
+  code: string;
+  name: string;
+  type: number;
+  isActive: boolean;
+  isReconcilable: boolean;
+  costCentre: string;
+}
 
 @Component({
   selector: 'app-account-detail',
@@ -23,79 +34,59 @@ import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dial
   styleUrls: ['./account-detail.component.css'],
   imports: [
     MatIconModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatInputModule,
     MatSelectModule,
     MatOptionModule,
     MatCheckboxModule,
     MatButtonModule,
+    FormField,
+    FormRoot,
+
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
   ],
 })
-export class AccountDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class AccountDetailComponent {
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(AccountService);
+  private accountTypeService = inject(AccountTypeService);
+  private costCentreService = inject(CostCentreService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    code: FormControl<number | string>;
-    name: FormControl<string | null>;
-    type: FormControl<number>;
-    isActive: FormControl<boolean>;
-    isReconcilable: FormControl<boolean>;
-    costCentre: FormControl<string | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  accountTypes: AccountType[] = [];
-  costCentres: CostCentre[] = [];
-  item: Account = new Account();
+  item = computed(() => this.itemResource.value() ?? new Account());
+
+  accountModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): AccountDetailFormData => {
+      return {
+        code: (itemVal.code || '(Auto)').toString(),
+        name: itemVal.name || '',
+        type: itemVal.type ?? 0,
+        isActive: itemVal.isActive ?? true,
+        isReconcilable: itemVal.isReconcilable ?? false,
+        costCentre: itemVal.costCentre?.id ?? '',
+      };
+    },
+  });
+
+  accountForm = form(this.accountModel);
+
+  accountTypesResource = this.accountTypeService.list();
+  costCentresResource = this.costCentreService.list();
+  accountTypes = computed(() => this.accountTypesResource.value() || []);
+  costCentres = computed(() => this.costCentresResource.value() || []);
 
   constructor() {
-    this.form = new FormGroup({
-      code: new FormControl<string | number>({ value: 0, disabled: true }, { nonNullable: true }),
-      name: new FormControl<string | null>(null),
-      type: new FormControl<number>(0, { nonNullable: true }),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-      isReconcilable: new FormControl<boolean>(false, { nonNullable: true }),
-      costCentre: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.accountForm.name().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as {
-        item: Account;
-        accountTypes: AccountType[];
-        costCentres: CostCentre[];
-      };
-
-      this.accountTypes = data.accountTypes;
-      this.costCentres = data.costCentres;
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Account) {
-    this.item = item;
-    this.form.setValue({
-      code: this.item.code || '(Auto)',
-      name: this.item.name || '',
-      type: this.item.type,
-      isActive: this.item.isActive,
-      isReconcilable: this.item.isReconcilable,
-      costCentre: this.item.costCentre.id ?? '',
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -103,19 +94,19 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/accounts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   delete() {
-    this.ser.delete(this.item.id as string).subscribe({
+    this.ser.delete(this.item().id as string).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/accounts');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
@@ -134,12 +125,13 @@ export class AccountDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Account {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.type = formModel.type ?? 0;
-    this.item.isActive = formModel.isActive ?? true;
-    this.item.isReconcilable = formModel.isReconcilable ?? false;
-    this.item.costCentre.id = formModel.costCentre ?? '';
-    return this.item;
+    const formModel = this.accountModel();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.type = formModel.type ?? 0;
+    item.isActive = formModel.isActive ?? true;
+    item.isReconcilable = formModel.isReconcilable ?? false;
+    item.costCentre.id = formModel.costCentre ?? '';
+    return item;
   }
 }