Consolidated commit message to v22 signals

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

@@ -1,14 +1,21 @@
 <h2>Cost Center</h2>
 
-<form [formGroup]="form" class="flex-col wrapped">
-  <div class="row-container">
-    <mat-form-field class="flex-auto">
-      <mat-label>Name</mat-label>
-      <input matInput #nameElement formControlName="name" (keyup.enter)="save()" />
-    </mat-form-field>
-  </div>
-</form>
+@if (itemResource.isLoading()) {
+  <app-skeleton-loader type="card" [count]="1" />
+  <app-skeleton-loader type="line" [count]="10" />
+} @else if (itemResource.error()) {
+  <app-error-state [message]="'Failed to load data.'" (retryAction)="itemResource.reload()" />
+} @else {
+  <form class="flex-col wrapped" [formRoot]="form">
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [formField]="form.name" (keyup.enter)="save()" />
+      </mat-form-field>
+    </div>
+  </form>
 
-<div class="row-container">
-  <button mat-raised-button (click)="save()" color="primary">Save</button>
-</div>
+  <div class="row-container">
+    <button mat-raised-button (click)="save()" color="primary">Save</button>
+  </div>
+}

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;
   }
 }