Consolidated commit message to v22 signals

overlord/src/app/cost-centre/cost-centre-detail/cost-centre-detail.component.ts

@@ -1,60 +1,60 @@
-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 as createForm, FormField, FormRoot } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Router } from '@angular/router';
 
 import { CostCentre } from '../../core/cost-centre';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { CostCentreService } from '../cost-centre.service';
 
+export interface CostCentreDetailFormData {
+  name: string;
+}
+
 @Component({
   selector: 'app-cost-centre-detail',
   templateUrl: './cost-centre-detail.component.html',
   styleUrls: ['./cost-centre-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class CostCentreDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class CostCentreDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(CostCentreService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: CostCentre = new CostCentre();
+  item = computed(() => this.itemResource.value() ?? new CostCentre());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal): CostCentreDetailFormData => ({
+      name: itemVal.name ?? '',
+    }),
+  });
+
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: CostCentre };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: CostCentre) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -62,14 +62,15 @@ export class CostCentreDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/cost-centres');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getItem(): CostCentre {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    return this.item;
+    const formModel = this.model();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    return item;
   }
 }