csdxz

bookie/src/app/sales/bills/bill.ts

@@ -1,3 +1,4 @@
+import { Customer } from '../../core/customer';
 import { Table } from '../../core/table';
 import { User } from '../../core/user';
 import { GuestBook } from '../../guest-book/guest-book';
@@ -17,7 +18,7 @@ export class Bill {
   kotId: string;
   billId: string;
   table: Table;
-  customer: { id: string; name: string } | null;
+  customer: Customer | null;
   guest: GuestBook;
   reason: string;
   voucherType: VoucherType;

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

@@ -137,7 +137,7 @@ export class BillsComponent implements OnInit {
     const dialogRef = this.dialog.open(ChooseCustomerComponent, {
       maxWidth: '100%',
       width: '50%',
-      data: this.bs.bill.customer?.id,
+      data: this.bs.bill.customer,
     });
 
     dialogRef.afterClosed().subscribe((result: boolean | Customer) => {

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,
         };

bookie/src/app/sales/discount/customer-discounts.service.ts

@@ -1,5 +1,5 @@
 import { httpResource, HttpResourceRef } from '@angular/common/http';
-import { Injectable, inject, Injector } from '@angular/core';
+import { Injectable, inject, Injector, Signal } from '@angular/core';
 
 import { DiscountItem } from './discount-item';
 
@@ -11,8 +11,11 @@ const url = '/api/customer-discounts';
 export class CustomerDiscountsService {
   private injector = inject(Injector);
 
-  list(id: string | undefined): HttpResourceRef<DiscountItem[] | undefined> {
-    return httpResource<DiscountItem[]>(() => (id === undefined ? url : `${url}/${id}`), {
+  list(id: Signal<string | undefined>): HttpResourceRef<DiscountItem[] | undefined> {
+    return httpResource<DiscountItem[]>(() => {
+      const idVal = id();
+      return idVal === undefined ? url : `${url}/${idVal}`;
+    }, {
       injector: this.injector,
     });
   }

bookie/src/app/sales/home/sales-home.component.ts

@@ -1,4 +1,4 @@
-import { Component, inject, computed } from '@angular/core';
+import { Component, inject, computed, signal } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 import { MatRippleModule } from '@angular/material/core';
 import { MatDialog } from '@angular/material/dialog';
@@ -87,7 +87,7 @@ export class SalesHomeComponent {
     if (this.discountAllowed()) {
       const dialogRef = this.dialog.open(DiscountComponent, {
         // width: '750px',
-        data: this.customerDiscountsService.list(this.bs.bill.customer?.id),
+        data: this.customerDiscountsService.list(signal(this.bs.bill.customer?.id)),
       });
       return dialogRef.afterClosed();
     }

bookie/src/app/sales/menu-categories/menu-categories.component.ts

@@ -13,7 +13,7 @@ import { MenuCategoryService } from '../../menu-category/menu-category.service';
 })
 export class MenuCategoriesComponent {
   private menuCategoryService = inject(MenuCategoryService);
-  listResource = this.menuCategoryService.list(undefined);
+  listResource = this.menuCategoryService.list();
 
   list = computed(() => this.listResource.value() ?? []);
 }