toSignal via Gemini

bookie/src/app/sales/receive-payment/receive-payment.component.ts

@@ -1,20 +1,26 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
 import { CurrencyPipe } from '@angular/common';
-import { Component, ElementRef, ViewChild, inject } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, ElementRef, ViewChild, inject, signal, computed } 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 { BehaviorSubject } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 
 import { ReceivePaymentItem } from '../../core/receive-payment-item';
 import { SettleOption } from '../../core/settle-option';
 import { SettleOptionService } from '../../settle-option/settle-option.service';
 import { VoucherType } from '../bills/voucher-type';
-import { ReceivePaymentDatasource } from './receive-payment-datasource';
+
+export interface ReceivePaymentFormData {
+  amounts: {
+    name: string;
+    amount: number;
+  }[];
+  son: string;
+}
 
 @Component({
   selector: 'app-receive-payment',
@@ -28,93 +34,69 @@ import { ReceivePaymentDatasource } from './receive-payment-datasource';
     MatFormFieldModule,
     MatInputModule,
     MatTableModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
 export class ReceivePaymentComponent {
-  dialogRef = inject<MatDialogRef<ReceivePaymentComponent>>(MatDialogRef);
+  @ViewChild('son', { static: true }) son?: ElementRef;
   private ser = inject(SettleOptionService);
+  dialogRef = inject<MatDialogRef<ReceivePaymentComponent>>(MatDialogRef);
   data = inject<{
     type: VoucherType;
     amount: number;
   }>(MAT_DIALOG_DATA);
 
-  @ViewChild('son', { static: true }) son?: ElementRef;
-  choices: ReceivePaymentItem[] = [];
-  choicesSubject = new BehaviorSubject<ReceivePaymentItem[]>([]);
+  choices = signal<ReceivePaymentItem[]>([]);
+  choicesWithAmount = computed(() => {
+    const amounts = this.formModel().amounts;
+    return this.choices().map((c, i) => ({ ...c, amount: amounts[i]?.amount ?? 0 }));
+  });
 
   type: VoucherType;
   amount: number;
-  balance: number;
-  reason = '';
-  displayReason: boolean;
-  displayTable: boolean;
-  form: FormGroup<{
-    amounts: FormArray<
-      FormGroup<{
-        name: FormControl<string>;
-        amount: FormControl<number>;
-      }>
-    >;
-    son: FormControl<string>;
-  }>;
+  balance = computed(() => {
+    return this.amount - this.formModel().amounts.reduce((a, c) => a + (c.amount ?? 0), 0);
+  });
 
-  dataSource: ReceivePaymentDatasource = new ReceivePaymentDatasource(this.choicesSubject);
+  reason = '';
+  displayReason = signal<boolean | undefined>(undefined);
+  displayTable = signal<boolean | undefined>(undefined);
+  formModel = signal<ReceivePaymentFormData>({
+    amounts: [],
+    son: '',
+  });
+
+  form = form(this.formModel);
+
+  dataSource = this.choicesWithAmount;
 
   displayedColumns = ['name', 'amount'];
 
   constructor() {
     const data = this.data;
-
-    this.form = new FormGroup({
-      amounts: new FormArray<
-        FormGroup<{
-          name: FormControl<string>;
-          amount: FormControl<number>;
-        }>
-      >([]),
-      son: new FormControl<string>('', { nonNullable: true }),
-    });
     this.type = data.type;
     this.amount = data.amount;
-    this.balance = data.amount;
-    this.displayReason = false;
-    this.displayTable = false;
-    this.choicesSubject.subscribe((x) => (this.choices = x));
+    this.displayReason.set(false);
+    this.displayTable.set(false);
     this.ser
       .listForType(data.type)
       .pipe(
-        tap((x: SettleOption[]) => (this.displayReason = x.reduce((o, n) => o || n.hasReason, this.displayReason))),
-        tap((x: SettleOption[]) => (this.displayTable = x.length > 1)),
+        tap((x: SettleOption[]) => this.displayReason.set(x.reduce((o, n) => o || n.hasReason, this.displayReason()))),
+        tap((x: SettleOption[]) => this.displayTable.set(x.length > 1)),
         map((x: SettleOption[]) =>
-          x.map((y) => ({ ...y, amount: !this.displayTable ? this.amount : 0 }) as ReceivePaymentItem),
+          x.map((y) => ({ ...y, amount: !this.displayTable() ? this.amount : 0 }) as ReceivePaymentItem),
         ),
       )
       .subscribe((x) => {
-        this.choicesSubject.next(x);
-        this.form.controls.amounts.clear();
-        x.forEach((y: ReceivePaymentItem) =>
-          this.form.controls.amounts.push(
-            new FormGroup({
-              name: new FormControl<string>(y.name, { nonNullable: true }),
-              amount: new FormControl<number>(y.amount === 0 ? 0 : this.amount, {
-                nonNullable: true,
-              }),
-            }),
-          ),
-        );
+        this.choices.set(x);
+        this.formModel.update((f) => ({
+          ...f,
+          amounts: x.map((y) => ({
+            name: y.name,
+            amount: y.amount === 0 ? 0 : this.amount,
+          })),
+        }));
       });
-    this.form.valueChanges.subscribe((x) => this.listenToAmountChange(x.amounts));
-  }
-
-  listenToAmountChange(amounts?: Partial<{ name: string; amount: number }>[]) {
-    if (!amounts) {
-      return;
-    }
-    amounts.forEach((z, i) => {
-      this.choices[i].amount = z.amount ?? 0;
-    });
-    this.balance = this.amount - this.choices.reduce((a, c) => a + c.amount, 0);
   }
 
   select(reason: string) {
@@ -123,12 +105,16 @@ export class ReceivePaymentComponent {
   }
 
   accept(): void {
-    this.dialogRef.close({ choices: this.choices, reason: this.reason });
+    this.dialogRef.close({ choices: this.choicesWithAmount(), reason: this.reason });
   }
 
   maxAmount(row: ReceivePaymentItem, index: number) {
-    const array = this.form.controls.amounts;
-    const ctrl = array.controls[index].controls.amount;
-    ctrl.setValue(row.amount + this.balance);
+    this.formModel.update((f) => {
+      const newAmounts = [...f.amounts];
+      if (newAmounts[index]) {
+        newAmounts[index] = { ...newAmounts[index], amount: row.amount + this.balance() };
+      }
+      return { ...f, amounts: newAmounts };
+    });
   }
 }