toSignal via Gemini

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

@@ -1,9 +1,9 @@
-<form [formGroup]="form" class="flex-col">
+<form class="flex-col">
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Header / Footer</mat-label>
-      <mat-select formControlName="id" (selectionChange)="show($event)">
-        @for (s of list; track s) {
+      <mat-select [formField]="form.id" (selectionChange)="show($event)">
+        @for (s of list(); track s) {
           <mat-option [value]="s.id">
             {{ s.name }}
           </mat-option>
@@ -14,10 +14,10 @@
   <div class="row-container">
     <mat-form-field class="flex-auto">
       <mat-label>Text</mat-label>
-      <textarea matInput matAutosizeMinRows="5" formControlName="text"></textarea>
+      <textarea matInput matAutosizeMinRows="5" [formField]="form.text"></textarea>
     </mat-form-field>
   </div>
 </form>
 <div class="row-container">
-  <button mat-raised-button color="primary" (click)="save()">Save</button>
+  <button type="button" mat-raised-button color="primary" (click)="save()">Save</button>
 </div>

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) {

bookie/src/app/header-footer/header-footer.resolver.spec.ts

@@ -1,15 +0,0 @@
-import { inject, TestBed } from '@angular/core/testing';
-
-import { HeaderFooterResolver } from './header-footer-resolver.service';
-
-describe('HeaderFooterResolver', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [HeaderFooterResolver],
-    });
-  });
-
-  it('should be created', inject([HeaderFooterResolver], (service: HeaderFooterResolver) => {
-    expect(service).toBeTruthy();
-  }));
-});

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

@@ -1,9 +0,0 @@
-import { inject } from '@angular/core';
-import { ResolveFn } from '@angular/router';
-
-import { HeaderFooter } from './header-footer';
-import { HeaderFooterService } from './header-footer.service';
-
-export const headerFooterResolver: ResolveFn<HeaderFooter[]> = () => {
-  return inject(HeaderFooterService).list();
-};

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

@@ -2,7 +2,6 @@ import { Routes } from '@angular/router';
 
 import { authGuard } from '../auth/auth-guard.service';
 import { HeaderFooterComponent } from './header-footer.component';
-import { headerFooterResolver } from './header-footer.resolver';
 
 export const routes: Routes = [
   {
@@ -12,9 +11,6 @@ export const routes: Routes = [
     data: {
       permission: 'Owner',
     },
-    resolve: {
-      list: headerFooterResolver,
-    },
   },
   {
     path: ':id',
@@ -23,8 +19,5 @@ export const routes: Routes = [
     data: {
       permission: 'Owner',
     },
-    resolve: {
-      list: headerFooterResolver,
-    },
   },
 ];

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

@@ -1,4 +1,4 @@
-import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, httpResource, HttpResourceRef } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError } from 'rxjs/operators';
@@ -19,10 +19,8 @@ export class HeaderFooterService {
   private http = inject(HttpClient);
   private log = inject(ErrorLoggerService);
 
-  list(): Observable<HeaderFooter[]> {
-    return this.http.get<HeaderFooter[]>(url).pipe(catchError(this.log.handleError(serviceName, 'list'))) as Observable<
-      HeaderFooter[]
-    >;
+  list(): HttpResourceRef<HeaderFooter[] | undefined> {
+    return httpResource<HeaderFooter[]>(() => url);
   }
 
   save(item: HeaderFooter): Observable<HeaderFooter[]> {