Choose customer would refresh while fetching customers.

bookie/angular.json

@@ -32,7 +32,9 @@
                 "input": "public"
               }
             ],
-            "styles": ["src/styles.sass"],
+            "styles": [
+              "src/styles.sass"
+            ],
             "allowedCommonJsDependencies": [
               "typed-function",
               "javascript-natural-sort",
@@ -46,8 +48,8 @@
               "budgets": [
                 {
                   "type": "initial",
-                  "maximumWarning": "500kb",
+                  "maximumWarning": "1000kb",
-                  "maximumError": "1mb"
+                  "maximumError": "2mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -86,14 +88,19 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
   },
   "cli": {
-    "schematicCollections": ["@angular-eslint/schematics"],
+    "schematicCollections": [
+      "@angular-eslint/schematics"
+    ],
     "analytics": false
   },
   "schematics": {

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

@@ -1,63 +1,57 @@
-@if (customersResource.isLoading()) {
+<h2 mat-dialog-title>Customer</h2>
-  <app-skeleton-loader type="card" [count]="1" />
+<mat-dialog-content>
-} @else if (customersResource.error()) {
+  <form class="flex-col">
-  <app-error-state (retryAction)="customersResource.reload()" />
+    <div class="row-container">
-} @else {
+      <mat-form-field class="flex-auto">
-  <h2 mat-dialog-title>Customer</h2>
+        <mat-label>Phone</mat-label>
-  <mat-dialog-content>
+        <input
-    <form class="flex-col">
+          matInput
-      <div class="row-container">
+          type="text"
-        <mat-form-field class="flex-auto">
+          [formField]="form.phone"
-          <mat-label>Phone</mat-label>
+          [matAutocomplete]="auto"
-          <input
+          autocomplete="off"
-            matInput
+          cdkFocusInitial
-            type="text"
+        />
-            [formField]="form.phone"
+      </mat-form-field>
-            [matAutocomplete]="auto"
+      <mat-autocomplete
-            autocomplete="off"
+        #auto="matAutocomplete"
-            cdkFocusInitial
+        autoActiveFirstOption
-          />
+        [displayWith]="displayFn"
-        </mat-form-field>
+        (optionSelected)="selected($event)"
-        <mat-autocomplete
+      >
-          #auto="matAutocomplete"
+        @for (customer of customers(); track customer) {
-          autoActiveFirstOption
+          <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
-          [displayWith]="displayFn"
+        }
-          (optionSelected)="selected($event)"
+      </mat-autocomplete>
-        >
+    </div>
-          @for (customer of customers(); track customer) {
+    <div class="row-container">
-            <mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
+      <mat-form-field class="flex-auto">
+        <mat-label>Name</mat-label>
+        <input matInput [value]="formModel().name" readonly />
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-form-field class="flex-auto">
+        <mat-label>Address</mat-label>
+        <textarea matInput [value]="formModel().address" readonly> </textarea>
+      </mat-form-field>
+    </div>
+    <div class="row-container">
+      <mat-checkbox [checked]="formModel().printInBill" [disabled]="true">Print in Bill?</mat-checkbox>
+    </div>
+    <p></p>
+    <div class="discounts">
+      <ul>
+        @for (r of formModel().discounts; track r.id) {
+          @if (r.discount > 0) {
+            <li>{{ r.name }} - {{ r.discount | percent: '1.2-2' }}</li>
           }
-        </mat-autocomplete>
+        }
-      </div>
+      </ul>
-      <div class="row-container">
+    </div>
-        <mat-form-field class="flex-auto">
+  </form>
-          <mat-label>Name</mat-label>
+</mat-dialog-content>
-          <input matInput [value]="formModel().name" readonly />
+<mat-dialog-actions align="end">
-        </mat-form-field>
+  <button mat-button [mat-dialog-close]="false">Cancel</button>
-      </div>
+  <button type="button" mat-raised-button color="primary" (click)="save()">Select</button>
-      <div class="row-container">
+</mat-dialog-actions>
-        <mat-form-field class="flex-auto">
-          <mat-label>Address</mat-label>
-          <textarea matInput [value]="formModel().address" readonly> </textarea>
-        </mat-form-field>
-      </div>
-      <div class="row-container">
-        <mat-checkbox [checked]="formModel().printInBill" [disabled]="true">Print in Bill?</mat-checkbox>
-      </div>
-      <p></p>
-      <div class="discounts">
-        <ul>
-          @for (r of formModel().discounts; track r.id) {
-            @if (r.discount > 0) {
-              <li>{{ r.name }} - {{ r.discount | percent: '1.2-2' }}</li>
-            }
-          }
-        </ul>
-      </div>
-    </form>
-  </mat-dialog-content>
-  <mat-dialog-actions align="end">
-    <button mat-button [mat-dialog-close]="false">Cancel</button>
-    <button type="button" mat-raised-button color="primary" (click)="save()">Select</button>
-  </mat-dialog-actions>
-}

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

@@ -13,8 +13,6 @@ import { MatInputModule } from '@angular/material/input';
 import { Customer } from '../../core/customer';
 import { CustomerDiscount } from '../../core/customer-discount';
 import { CustomerService } from '../../customers/customer.service';
-import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
-import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
 
 export interface ChooseCustomerFormData {
   id: string;
@@ -40,8 +38,6 @@ export interface ChooseCustomerFormData {
     MatOptionModule,
     PercentPipe,
     FormField,
-    ErrorStateComponent,
-    SkeletonLoaderComponent,
   ],
 })
 export class ChooseCustomerComponent {
@@ -66,7 +62,8 @@ export class ChooseCustomerComponent {
   form = form(this.formModel);
 
   phoneSignal = computed(() => {
-    return this.formModel().phone;
+    const p = this.formModel().phone;
+    return typeof p === 'string' ? p.trim() : null;
   });
 
   debouncedPhone = debounced(this.phoneSignal, 150);