toSignal via Gemini

bookie/src/app/sales/reason/reason-datasource.ts

@@ -1,14 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { Observable, of as observableOf } from 'rxjs';
-
-export class ReasonDatasource extends DataSource<string> {
-  constructor(private data: string[]) {
-    super();
-  }
-
-  connect(): Observable<string[]> {
-    return observableOf(this.data);
-  }
-
-  disconnect() {}
-}

bookie/src/app/sales/reason/reason.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>{{ title }}</h2>
 <mat-dialog-content>
-  <form [formGroup]="form">
-    <mat-table [dataSource]="dataSource">
+  <form>
+    <mat-table [dataSource]="dataSource()">
       <!-- Reason Column -->
       <ng-container matColumnDef="reason">
         <mat-cell *matCellDef="let row" (click)="select(row)">{{ row }}</mat-cell>
@@ -12,7 +12,7 @@
               type="text"
               matInput
               #son
-              formControlName="son"
+              [formField]="form.son"
               autocomplete="off"
               (focus)="select(son.value) && son.select()"
               (input)="select(son.value)"
@@ -28,5 +28,5 @@
 </mat-dialog-content>
 <mat-dialog-actions align="end">
   <button mat-button [mat-dialog-close]="false">Cancel</button>
-  <button mat-button (click)="accept()" color="primary" [disabled]="!selected">Ok</button>
+  <button type="button" mat-button (click)="accept()" color="primary" [disabled]="!selected">Ok</button>
 </mat-dialog-actions>

bookie/src/app/sales/reason/reason.component.ts

@@ -1,13 +1,15 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, ElementRef, ViewChild, inject } from '@angular/core';
-import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, ElementRef, ViewChild, inject, computed, signal } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatTableModule } from '@angular/material/table';
 
-import { ReasonDatasource } from './reason-datasource';
+export interface ReasonFormData {
+  son: string;
+}
 
 @Component({
   selector: 'app-reason',
@@ -20,22 +22,24 @@ import { ReasonDatasource } from './reason-datasource';
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
 export class ReasonComponent {
+  @ViewChild('son', { static: true }) son?: ElementRef;
   dialogRef = inject<MatDialogRef<ReasonComponent>>(MatDialogRef);
   private data = inject<{
     title: string;
     reasons: string[];
   }>(MAT_DIALOG_DATA);
 
-  @ViewChild('son', { static: true }) son?: ElementRef;
-  form: FormGroup<{
-    son: FormControl<string>;
-  }>;
+  formModel = signal<ReasonFormData>({
+    son: '',
+  });
 
-  dataSource: ReasonDatasource;
+  form = form(this.formModel);
+
+  dataSource = computed(() => this.reasons);
   title: string;
   selected = '';
   reasons: string[];
@@ -46,10 +50,6 @@ export class ReasonComponent {
 
     this.reasons = data.reasons ?? [];
     this.title = data.title;
-    this.form = new FormGroup({
-      son: new FormControl<string>('', { nonNullable: true }),
-    });
-    this.dataSource = new ReasonDatasource(this.reasons);
   }
 
   select(reason: string) {