toSignal via Gemini

bookie/src/app/regimes/regime-detail/regime-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 } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -11,52 +11,42 @@ import { Regime } from '../../core/regime';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
 import { RegimeService } from '../regime.service';
 
+export interface RegimeDetailFormData {
+  name: string;
+  header: string;
+  prefix: string;
+}
+
 @Component({
   selector: 'app-regime-detail',
   templateUrl: './regime-detail.component.html',
   styleUrls: ['./regime-detail.component.css'],
-  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule],
+  imports: [MatButtonModule, MatFormFieldModule, MatInputModule, FormField],
 })
-export class RegimeDetailComponent implements OnInit, AfterViewInit {
+export class RegimeDetailComponent implements AfterViewInit {
+  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private dialog = inject(MatDialog);
   private snackBar = inject(MatSnackBar);
   private ser = inject(RegimeService);
+  id = input(null, { transform: (v: string | null | undefined) => (v ? +v : null) });
 
-  @ViewChild('nameElement', { static: true }) nameElement?: ElementRef;
-  form: FormGroup<{
-    name: FormControl<string>;
-    header: FormControl<string>;
-    prefix: FormControl<string>;
-  }>;
+  itemResource = this.ser.get(this.id);
 
-  item: Regime = new Regime();
+  item = computed(() => this.itemResource.value() ?? new Regime());
+  formModel = linkedSignal({
+    source: this.item,
+    computation: (itemVal): RegimeDetailFormData => {
+      return {
+        name: itemVal.name ?? '',
+        header: itemVal.header ?? '',
+        prefix: itemVal.prefix ?? '',
+      };
+    },
+  });
 
-  constructor() {
-    // Create form
-    this.form = new FormGroup({
-      name: new FormControl<string>('', { nonNullable: true }),
-      header: new FormControl<string>('', { nonNullable: true }),
-      prefix: new FormControl<string>('', { nonNullable: true }),
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { item: Regime };
-      this.showItem(data.item);
-    });
-  }
-
-  showItem(item: Regime) {
-    this.item = item;
-    this.form.setValue({
-      name: this.item.name ?? '',
-      header: this.item.header ?? '',
-      prefix: this.item.prefix ?? '',
-    });
-  }
+  form = form(this.formModel);
 
   ngAfterViewInit() {
     setTimeout(() => {
@@ -72,20 +62,20 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/regimes');
       },
-      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 number).subscribe({
+    this.ser.delete(this.item().id as number).subscribe({
       next: () => {
         this.snackBar.open('', 'Success');
         this.router.navigateByUrl('/regimes');
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
@@ -104,10 +94,12 @@ export class RegimeDetailComponent implements OnInit, AfterViewInit {
   }
 
   getItem(): Regime {
-    const formModel = this.form.value;
-    this.item.name = formModel.name ?? '';
-    this.item.header = formModel.header ?? '';
-    this.item.prefix = formModel.prefix ?? '';
-    return this.item;
+    const formModel = this.formModel();
+    return new Regime({
+      ...this.item(),
+      name: formModel.name ?? '',
+      header: formModel.header ?? '',
+      prefix: formModel.prefix ?? '',
+    });
   }
 }