toSignal via Gemini

bookie/src/app/header-footer/header-footer.component.ts

@@ -1,5 +1,5 @@
-import { Component, ElementRef, OnInit, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, ElementRef, ViewChild, computed, inject, linkedSignal, input } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatOptionModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -9,92 +9,82 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectChange, MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute, Router } from '@angular/router';
-import { map } from 'rxjs/operators';
 
 import { HeaderFooter } from './header-footer';
 import { HeaderFooterService } from './header-footer.service';
 
+export interface HeaderFooterFormData {
+  id: string;
+  text: string;
+}
+
 @Component({
   selector: 'app-section-printer',
   templateUrl: './header-footer.component.html',
   styleUrls: ['./header-footer.component.css'],
   imports: [
     MatButtonModule,
-
     MatDividerModule,
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
     MatSelectModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
-export class HeaderFooterComponent implements OnInit {
+export class HeaderFooterComponent {
+  @ViewChild('section', { static: true }) sectionElement?: ElementRef;
   private route = inject(ActivatedRoute);
   private router = inject(Router);
   private snackBar = inject(MatSnackBar);
   private dialog = inject(MatDialog);
   private ser = inject(HeaderFooterService);
+  id = input(null, { transform: (v: string | null | undefined) => v ?? null });
+  listResource = this.ser.list();
 
-  @ViewChild('section', { static: true }) sectionElement?: ElementRef;
-  form: FormGroup<{
-    id: FormControl<string>;
-    text: FormControl<string>;
-  }>;
+  list = computed(() => this.listResource.value() ?? []);
 
-  list: HeaderFooter[] = [];
-  id = '';
+  formModel = linkedSignal({
+    source: () => {
+      const list = this.list();
+      let currentId = this.id();
+      if (!currentId && list.length > 0) {
+        currentId = list[0].id;
+      }
+      return { list, id: currentId };
+    },
+    computation: ({ list, id }): HeaderFooterFormData => {
+      const val = list.find((v) => v.id === id);
+      return {
+        id: id ?? '',
+        text: val?.text ?? '',
+      };
+    },
+  });
 
-  constructor() {
-    const route = this.route;
-
-    // Create form
-    this.form = new FormGroup({
-      id: new FormControl<string>('', { nonNullable: true }),
-      text: new FormControl<string>('', { nonNullable: true }),
-    });
-    route.params.pipe(map((p) => p['id'])).subscribe((x) => {
-      this.id = x;
-    });
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((value) => {
-      const data = value as { list: HeaderFooter[] };
-      this.showItem(data.list);
-    });
-  }
-
-  showItem(list: HeaderFooter[]) {
-    this.list = list;
-    this.id = this.id ?? this.list[0].id;
-    const val = this.list.find((v) => v.id === this.id) as HeaderFooter;
-    this.form.setValue({
-      id: this.id,
-      text: val.text,
-    });
-  }
+  form = form(this.formModel);
 
   save() {
     this.ser.save(this.getItem()).subscribe({
       next: (result: HeaderFooter[]) => {
         this.snackBar.open('', 'Success');
-        this.showItem(result);
+        this.listResource.value.set(result);
       },
-      error: (error) => {
-        this.snackBar.open(error, 'Error');
+      error: (error: unknown) => {
+        this.snackBar.open(error as string, 'Error');
       },
     });
   }
 
   getItem(): HeaderFooter {
-    const formModel = this.form.value;
-    const item = this.list.find((v) => v.id === this.id);
+    const formModel = this.formModel();
+    const item = this.list().find((v) => v.id === formModel.id);
     if (item === undefined) {
       return new HeaderFooter();
     }
-    item.text = formModel.text ?? '';
-    return item;
+    const clonedItem = Object.assign(new HeaderFooter(), item);
+    clonedItem.text = formModel.text ?? '';
+    return clonedItem;
   }
 
   show(val: MatSelectChange) {