toSignal via Gemini

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.html

@@ -1,40 +1,43 @@
 <h2>Modifier</h2>
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Name</mat-label>
-      <input matInput #name formControlName="name" />
+      <input matInput #name [formField]="form.name" />
     </mat-form-field>
   </div>
   <div class="row-container">
-    <mat-checkbox formControlName="showInBill">Show In Bill?</mat-checkbox>
+    <mat-checkbox [formField]="form.showInBill">Show In Bill?</mat-checkbox>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Price</mat-label>
-      <input matInput type="number" formControlName="price" />
+      <input matInput type="number" [formField]="form.price" />
     </mat-form-field>
   </div>
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Category</mat-label>
-      <mat-select formControlName="modifierCategory">
-        @for (mc of modifierCategories; track mc) {
+      <mat-select [formField]="form.modifierCategory">
+        @for (mc of modifierCategories(); track mc) {
           <mat-option [value]="mc.id">
             {{ mc.name }}
           </mat-option>
         }
       </mat-select>
+      @for (error of form.modifierCategory().errors(); track error) {
+        <mat-error>{{ error.message }}</mat-error>
+      }
     </mat-form-field>
   </div>
   <div class="row-container">
-    <mat-checkbox formControlName="isActive">Is Active?</mat-checkbox>
+    <mat-checkbox [formField]="form.isActive">Is Active?</mat-checkbox>
   </div>
 </form>
 
 <div class="row-container">
-  <button mat-raised-button color="primary" class="" (click)="save()">Save</button>
-  @if (!!item.id) {
-    <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+  <button type="button" mat-raised-button color="primary" [disabled]="form().invalid()" (click)="save()">Save</button>
+  @if (!!item().id) {
+    <button type="button" mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
   }
 </div>

bookie/src/app/modifiers/modifier-detail/modifier-detail.component.ts

@@ -1,5 +1,5 @@
-import { AfterViewInit, Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AfterViewInit, Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
+import { form, FormField, required } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatOptionModule } from '@angular/material/core';
@@ -12,73 +12,64 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 import { Modifier } from '../../core/modifier';
 import { ModifierCategory } from '../../core/modifier-category';
+import { ModifierCategoryService } from '../../modifier-categories/modifier-category.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { ModifierService } from '../modifier.service';
 
+export interface ModifierDetailFormData {
+  name: string;
+  showInBill: boolean;
+  price: number;
+  modifierCategory: string;
+  isActive: boolean;
+}
+
 @Component({
   selector: 'app-modifier-detail',
   templateUrl: './modifier-detail.component.html',
   styleUrls: ['./modifier-detail.component.css'],
   imports: [
     MatButtonModule,
-
     MatCheckboxModule,
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
-
-    ReactiveFormsModule,
+    FormField,
   ],
 })
-export class ModifierDetailComponent implements OnInit, AfterViewInit {
+export class ModifierDetailComponent implements AfterViewInit {
+  @ViewChild('name', { static: true }) nameElement?: ElementRef;
+  private modifierCategoryService = inject(ModifierCategoryService);
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(ModifierService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
 
-  @ViewChild('name', { static: true }) nameElement?: ElementRef;
-  form: FormGroup<{
-    name: FormControl<string>;
-    showInBill: FormControl<boolean>;
-    price: FormControl<number>;
-    modifierCategory: FormControl<string>;
-    isActive: FormControl<boolean>;
-  }>;
+  modifierCategoriesResource = this.modifierCategoryService.list();
+  modifierCategories = computed(() => this.modifierCategoriesResource.value() ?? []);
 
-  modifierCategories: ModifierCategory[] = [];
-  item: Modifier = new Modifier();
+  itemResource = this.ser.get(this.id);
 
-  constructor() {
-    // Create form
-    this.form = new FormGroup({
-      name: new FormControl<string>('', { nonNullable: true }),
-      showInBill: new FormControl<boolean>(true, { nonNullable: true }),
-      price: new FormControl<number>(0, { nonNullable: true }),
-      modifierCategory: new FormControl<string>('', { nonNullable: true }),
-      isActive: new FormControl<boolean>(true, { nonNullable: true }),
-    });
-  }
+  item = computed(() => this.itemResource.value() ?? new Modifier());
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): ModifierDetailFormData => {
+      return {
+        name: itemVal.name ?? '',
+        showInBill: itemVal.showInBill,
+        price: itemVal.price ?? 0,
+        isActive: itemVal.isActive,
+        modifierCategory: itemVal.modifierCategory ? (itemVal.modifierCategory.id as string) : '',
+      };
+    },
+  });
 
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Modifier; modifierCategories: ModifierCategory[] };
-      this.modifierCategories = data.modifierCategories;
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Modifier) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name ?? '',
-      showInBill: this.item.showInBill,
-      price: this.item.price ?? 0,
-      isActive: this.item.isActive,
-      modifierCategory: this.item.modifierCategory ? (this.item.modifierCategory.id as string) : '',
-    });
-  }
+  form = form(this.formModel, (schema) => {
+    required(schema.modifierCategory, { message: 'Modifier Category is required' });
+  });
 
   ngAfterViewInit() {
     setTimeout(() => {
@@ -94,20 +85,20 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/modifiers');
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
 
   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('/modifiers');
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
@@ -126,12 +117,14 @@ export class ModifierDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Modifier {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.showInBill = formModel.showInBill ?? false;
-    this.item.price = formModel.price ?? 0;
-    this.item.isActive = formModel.isActive ?? true;
-    this.item.modifierCategory = new ModifierCategory({ id: formModel.modifierCategory });
-    return this.item;
+    const formModel = this.formModel();
+    return new Modifier({
+      ...this.item(),
+      name: formModel.name ?? '',
+      showInBill: formModel.showInBill ?? false,
+      price: formModel.price ?? 0,
+      isActive: formModel.isActive ?? true,
+      modifierCategory: new ModifierCategory({ id: formModel.modifierCategory }),
+    });
   }
 }