Consolidated commit message to v22 signals

overlord/src/app/product-group/product-group-detail/product-group-detail.component.ts

@@ -1,67 +1,66 @@
-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 { MatCheckboxModule } from '@angular/material/checkbox';
 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 { ProductGroup } from '../../core/product-group';
+import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
+import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 import { ProductGroupService } from '../product-group.service';
 
+export interface ProductGroupDetailFormData {
+  name: string;
+  nutritional: boolean;
+  iceCream: boolean;
+}
+
 @Component({
   selector: 'app-product-group-detail',
   templateUrl: './product-group-detail.component.html',
   styleUrls: ['./product-group-detail.component.css'],
-  imports: [ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatCheckboxModule, MatButtonModule],
+  imports: [
+    FormField,
+    FormRoot,
+    MatFormFieldModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    SkeletonLoaderComponent,
+    ErrorStateComponent,
+  ],
 })
-export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
-  private route = inject(ActivatedRoute);
+export class ProductGroupDetailComponent {
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ProductGroupService);
 
-  @ViewChild('nameElement', { static: true }) nameElement!: ElementRef<HTMLInputElement>;
-  form: FormGroup<{
-    name: FormControl<string | null>;
-    nutritional: FormControl<boolean>;
-    iceCream: FormControl<boolean>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: ProductGroup = new ProductGroup();
+  item = computed(() => this.itemResource.value() ?? new ProductGroup());
+
+  model = linkedSignal({
+    source: this.item,
+    computation: (itemVal): ProductGroupDetailFormData => ({
+      name: itemVal.name ?? '',
+      nutritional: itemVal.nutritional ?? false,
+      iceCream: itemVal.iceCream ?? false,
+    }),
+  });
+
+  form = createForm(this.model);
 
   constructor() {
-    this.form = new FormGroup({
-      name: new FormControl<string | null>(null),
-      nutritional: new FormControl<boolean>(false, { nonNullable: true }),
-      iceCream: new FormControl<boolean>(false, { nonNullable: true }),
+    afterNextRender(() => {
+      this.form().focusBoundControl();
     });
   }
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: ProductGroup };
-
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: ProductGroup) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name,
-      nutritional: this.item.nutritional,
-      iceCream: this.item.iceCream,
-    });
-  }
-
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.nameElement.nativeElement.focus();
-    }, 0);
-  }
-
   save() {
     this.ser.saveOrUpdate(this.getItem()).subscribe({
       next: () => {
@@ -69,16 +68,17 @@ export class ProductGroupDetailComponent implements OnInit, AfterViewInit {
         this.router.navigateByUrl('/product-groups');
       },
       error: (error) => {
-        this.snackBar.open(error, 'Danger');
+        this.snackBar.open(error as string, 'Danger');
       },
     });
   }
 
   getItem(): ProductGroup {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.nutritional = formModel.nutritional ?? false;
-    this.item.iceCream = formModel.iceCream ?? false;
-    return this.item;
+    const formModel = this.model();
+    const item = this.item();
+    item.name = formModel.name ?? '';
+    item.nutritional = formModel.nutritional ?? false;
+    item.iceCream = formModel.iceCream ?? false;
+    return item;
   }
 }