toSignal via Gemini

bookie/src/app/sales/choose-customer/choose-customer.component.ts

@@ -1,7 +1,6 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { AsyncPipe } from '@angular/common';
-import { Component, inject } from '@angular/core';
-import { FormArray, FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { Component, inject, signal, computed, effect, debounced } from '@angular/core';
+import { form, FormField } from '@angular/forms/signals';
 import { MatAutocompleteSelectedEvent, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -10,18 +9,25 @@ import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/materia
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { round } from 'mathjs';
-import { Observable, of as observableOf } from 'rxjs';
-import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
 
 import { Customer } from '../../core/customer';
 import { CustomerService } from '../../customers/customer.service';
 
+export interface ChooseCustomerFormData {
+  name: string;
+  phone: string;
+  address: string;
+  printInBill: boolean;
+  discounts: {
+    discount: number | null;
+  }[];
+}
+
 @Component({
   selector: 'app-choose-customer',
   templateUrl: './choose-customer.component.html',
   styleUrls: ['./choose-customer.component.css'],
   imports: [
-    AsyncPipe,
     CdkScrollableModule,
     MatAutocompleteModule,
     MatButtonModule,
@@ -30,74 +36,67 @@ import { CustomerService } from '../../customers/customer.service';
     MatFormFieldModule,
     MatInputModule,
     MatOptionModule,
-    ReactiveFormsModule,
+    FormField,
   ],
 })
 export class ChooseCustomerComponent {
-  dialogRef = inject<MatDialogRef<ChooseCustomerComponent>>(MatDialogRef);
   data = inject(MAT_DIALOG_DATA);
   private ser = inject(CustomerService);
+  dialogRef = inject<MatDialogRef<ChooseCustomerComponent>>(MatDialogRef);
+  formModel = signal<ChooseCustomerFormData>({
+    name: '',
+    phone: '',
+    address: '',
+    printInBill: false,
+    discounts: [],
+  });
 
-  form: FormGroup<{
-    name: FormControl<string>;
-    phone: FormControl<string>;
-    address: FormControl<string | null>;
-    printInBill: FormControl<boolean>;
-    discounts: FormArray<
-      FormGroup<{
-        discount: FormControl<number | null>;
-      }>
-    >;
-  }>;
+  form = form(this.formModel);
 
   item: Customer = new Customer();
-  customers: Observable<Customer[]>;
+  phoneSignal = computed(() => {
+    const p = this.formModel().phone;
+    return p === this.item.phone ? '' : p;
+  });
+
+  debouncedPhone = debounced(this.phoneSignal, 150);
+
+  customersResource = this.ser.autocomplete(computed(() => this.debouncedPhone.value()));
+  customers = computed(() => {
+    if (!this.debouncedPhone.value()) return [];
+    return this.customersResource.value() ?? [];
+  });
 
   constructor() {
     const data = this.data;
 
-    // Create form
-    this.form = new FormGroup({
-      name: new FormControl<string>('', { nonNullable: true }),
-      phone: new FormControl<string>('', { nonNullable: true }),
-      address: new FormControl<string | null>(null),
-      printInBill: new FormControl<boolean>(false, { nonNullable: true }),
-      discounts: new FormArray<FormGroup<{ discount: FormControl<number | null> }>>([]),
-    });
-    // Setup Account Autocomplete
-    this.customers = this.form.controls.phone.valueChanges.pipe(
-      startWith(null),
-      map((x) => (x === this.item.phone ? '' : x)),
-      map((x) => (x !== null && x.length >= 1 ? x : null)),
-      debounceTime(150),
-      distinctUntilChanged(),
-      switchMap((x) => (x === null ? observableOf([]) : this.ser.autocomplete(x))),
-    );
     if (data) {
-      this.ser.get(data).subscribe((x) => this.showItem(x));
+      const res = this.ser.get(data);
+      effect(() => {
+        const x = res.value();
+        if (x) {
+          this.showItem(x);
+        }
+      });
     }
   }
 
   showItem(item: Customer) {
     this.item = item;
-    this.form.controls.name.setValue(item.name);
-    this.form.controls.phone.setValue(item.phone);
-    this.form.controls.address.setValue(item.address);
-    this.form.controls.printInBill.setValue(item.printInBill);
-    this.form.controls.discounts.clear();
-    this.item.discounts.forEach((x) =>
-      this.form.controls.discounts.push(
-        new FormGroup({
-          discount: new FormControl<number | null>(x.discount ? x.discount * 100 : null),
-        }),
-      ),
-    );
-    this.form.markAsPristine();
+    this.formModel.set({
+      name: item.name,
+      phone: item.phone,
+      address: item.address ?? '',
+      printInBill: item.printInBill,
+      discounts: item.discounts.map((x) => ({
+        discount: x.discount ? x.discount * 100 : null,
+      })),
+    });
   }
 
   save() {
     const customer = this.getItem();
-    const promise = this.form.pristine ? observableOf(customer) : this.ser.saveOrUpdate(customer);
+    const promise = this.ser.saveOrUpdate(customer);
     promise.subscribe((x) => this.dialogRef.close(x));
   }
 
@@ -114,23 +113,24 @@ export class ChooseCustomerComponent {
   }
 
   getItem(): Customer {
-    const formModel = this.form.value;
-    this.item.id = this.item.phone.trim() !== formModel.phone?.trim() ? '' : this.item.id;
-    this.item.name = formModel.name ?? '';
-    this.item.phone = formModel.phone ?? '';
-    this.item.address = formModel.address ?? '';
-    this.item.printInBill = formModel.printInBill ?? false;
+    const formModel = this.formModel();
     const array = formModel.discounts;
-    if (array) {
-      this.item.discounts.forEach((item, index) => {
-        const array_item = array.at(index);
-        if (array_item && array_item?.discount) {
-          item.discount = Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0);
-        } else {
-          item.discount = 0;
-        }
-      });
-    }
-    return this.item;
+
+    return new Customer({
+      ...this.item,
+      id: this.item.phone.trim() !== formModel.phone?.trim() ? '' : this.item.id,
+      name: formModel.name ?? '',
+      phone: formModel.phone ?? '',
+      address: formModel.address ?? '',
+      printInBill: formModel.printInBill ?? false,
+      discounts: this.item.discounts.map((item, index) => {
+        const array_item = array?.[index];
+        return {
+          ...item,
+          discount:
+            array_item && array_item?.discount ? Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0) : 0,
+        };
+      }),
+    });
   }
 }