csdxz

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

@@ -1,5 +1,5 @@
 import { CdkScrollableModule } from '@angular/cdk/scrolling';
-import { Component, inject, signal, computed, effect, debounced } from '@angular/core';
+import { Component, inject, computed, debounced, linkedSignal, signal } from '@angular/core';
 import { form, FormField } from '@angular/forms/signals';
 import { MatAutocompleteSelectedEvent, MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
@@ -14,6 +14,7 @@ import { Customer } from '../../core/customer';
 import { CustomerService } from '../../customers/customer.service';
 
 export interface ChooseCustomerFormData {
+  id: string;
   name: string;
   phone: string;
   address: string;
@@ -40,59 +41,36 @@ export interface ChooseCustomerFormData {
   ],
 })
 export class ChooseCustomerComponent {
-  data = inject(MAT_DIALOG_DATA);
+  data = inject<Customer | null>(MAT_DIALOG_DATA); // Customer ID
   private ser = inject(CustomerService);
   dialogRef = inject<MatDialogRef<ChooseCustomerComponent>>(MatDialogRef);
-  formModel = signal<ChooseCustomerFormData>({
-    name: '',
-    phone: '',
-    address: '',
-    printInBill: false,
-    discounts: [],
+
+  item = signal<Customer>(this.data ?? new Customer());
+
+  formModel = linkedSignal<Customer, ChooseCustomerFormData>({
+    source: () => this.item(),
+    computation: (data) => ({
+      id: data.id,
+      name: data.name,
+      phone: data.phone,
+      address: data.address ?? '',
+      printInBill: data.printInBill,
+      discounts: data.discounts.map((x) => ({
+        discount: x.discount ? x.discount * 100 : null,
+      })),
+    }),
   });
 
   form = form(this.formModel);
 
-  item: Customer = new Customer();
   phoneSignal = computed(() => {
-    const p = this.formModel().phone;
-    return p === this.item.phone ? '' : p;
+    return this.formModel().phone;
   });
 
   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;
-
-    if (data) {
-      const res = this.ser.get(data);
-      effect(() => {
-        const x = res.value();
-        if (x) {
-          this.showItem(x);
-        }
-      });
-    }
-  }
-
-  showItem(item: Customer) {
-    this.item = item;
-    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,
-      })),
-    });
-  }
+  customersResource = this.ser.autocomplete(this.debouncedPhone.value);
+  customers = computed(() => { return this.customersResource.value() ?? [] });
 
   save() {
     const customer = this.getItem();
@@ -109,7 +87,7 @@ export class ChooseCustomerComponent {
 
   selected(event: MatAutocompleteSelectedEvent): void {
     const customer: Customer = event.option.value;
-    this.showItem(customer);
+    this.item.set(customer);
   }
 
   getItem(): Customer {
@@ -117,16 +95,15 @@ export class ChooseCustomerComponent {
     const array = formModel.discounts;
 
     return new Customer({
-      ...this.item,
-      id: this.item.phone.trim() !== formModel.phone?.trim() ? '' : this.item.id,
+      id: formModel.id,
       name: formModel.name ?? '',
       phone: formModel.phone ?? '',
       address: formModel.address ?? '',
       printInBill: formModel.printInBill ?? false,
-      discounts: this.item.discounts.map((item, index) => {
+      discounts: formModel.discounts.map((item, index) => {
         const array_item = array?.[index];
         return {
-          ...item,
+          ...this.item().discounts?.[index],
           discount:
             array_item && array_item?.discount ? Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0) : 0,
         };