Updated tracking in template and choose customer fixing.

bookie/src/app/sales/bill-number/bill-number.component.html

@@ -4,7 +4,7 @@
       <mat-form-field class="flex-auto basis-15">
         <mat-label>Regime</mat-label>
         <mat-select [formField]="form.regime">
-          @for (r of regimes; track r) {
+          @for (r of regimes; track r.id) {
             <mat-option [value]="r">
               {{ r.name }}
             </mat-option>

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

@@ -19,7 +19,7 @@
         [displayWith]="displayFn"
         (optionSelected)="selected($event)"
       >
-        @for (customer of customers(); track customer) {
+        @for (customer of customers(); track customer.id) {
           <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
         }
       </mat-autocomplete>

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

@@ -66,11 +66,15 @@ export class ChooseCustomerComponent {
     return typeof p === 'string' ? p.trim() : null;
   });
 
-  debouncedPhone = debounced(this.phoneSignal, 150);
+  debouncedPhone = debounced(this.phoneSignal, 300);
 
   customersResource = this.ser.autocomplete(this.debouncedPhone.value);
-  customers = computed(() => {
-    return this.customersResource.value() ?? [];
+  customers = linkedSignal<Customer[] | undefined, Customer[]>({
+    source: () => this.customersResource.value(),
+    computation: (newVal, previous) => {
+      if (!this.debouncedPhone.value()) return [];
+      return newVal ?? previous?.value ?? [];
+    },
   });
 
   save() {

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

@@ -7,7 +7,7 @@
     <mat-card class="flex-col square-button warn" matRipple [routerLink]="['../']" queryParamsHandling="preserve">
       <h3>Back</h3>
     </mat-card>
-    @for (item of list(); track item) {
+    @for (item of list(); track item.id) {
       <mat-card
         class="primary flex-col square-button"
         matRipple

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

@@ -12,7 +12,7 @@
     >
       <h3>Back</h3>
     </mat-card>
-    @for (item of list(); track item) {
+    @for (item of list(); track item.id) {
       <mat-card
         class="flex-col square-button"
         matRipple

bookie/src/app/sales/running-tables/running-tables.component.html

@@ -6,7 +6,7 @@
   <h2>Running Tables</h2>
 
   <div class="tables-grid">
-    @for (table of list(); track table) {
+    @for (table of list(); track table.id) {
       <mat-card
         class="flex-col square-button"
         matRipple

bookie/src/app/sales/split-bill/split-bill.component.html

@@ -2,7 +2,7 @@
 <mat-dialog-content>
   <form class="flex-col">
     <div>
-      @for (sc of list(); track sc; let i = $index) {
+      @for (sc of list(); track sc.id; let i = $index) {
         <div class="row-container">
           <mat-checkbox [formField]="form.saleCategories[i].saleCategory" class="flex-auto">{{ sc.name }}</mat-checkbox>
         </div>

bookie/src/app/sales/tables-dialog/tables-dialog.component.html

@@ -1,7 +1,7 @@
 <h2 mat-dialog-title>Tables</h2>
 <mat-dialog-content>
   <div class="tables-grid">
-    @for (table of list.value(); track table) {
+    @for (table of list.value(); track table.id) {
       <mat-card
         class="flex-col square-button"
         matRipple