tanshu/barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Choose customer would refresh while fetching customers.

Browse Source
This commit is contained in:
tanshu
2026-09-04 03:33:17 +00:00
parent 227f5b5f74
commit 30cbb60efe
3 changed files with 70 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bookie/src/app/sales/choose-customer/choose-customer.component.html
+56 -62
View File
@@ -1,63 +1,57 @@
@if (customersResource.isLoading()) {
<app-skeleton-loader type="card" [count]="1" />
} @else if (customersResource.error()) {
<app-error-state (retryAction)="customersResource.reload()" />
} @else {
<h2 mat-dialog-title>Customer</h2>
<mat-dialog-content>
<form class="flex-col">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Phone</mat-label>
<input
matInput
type="text"
[formField]="form.phone"
[matAutocomplete]="auto"
autocomplete="off"
cdkFocusInitial
/>
</mat-form-field>
<mat-autocomplete
#auto="matAutocomplete"
autoActiveFirstOption
[displayWith]="displayFn"
(optionSelected)="selected($event)"
>
@for (customer of customers(); track customer) {
<mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
<h2 mat-dialog-title>Customer</h2>
<mat-dialog-content>
<form class="flex-col">
<div class="row-container">
<mat-form-field class="flex-auto">
<mat-label>Phone</mat-label>
<input
matInput
type="text"
[formField]="form.phone"
[matAutocomplete]="auto"
autocomplete="off"
cdkFocusInitial
/>
</mat-form-field>
<mat-autocomplete
#auto="matAutocomplete"
autoActiveFirstOption
[displayWith]="displayFn"
(optionSelected)="selected($event)"
>
@for (customer of customers(); track customer) {
<mat-option [value]="customer">{{ customer.name }} - {{ customer.phone }}</mat-option>
}
</mat-autocomplete>
</div>
<div class="row-container">
<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>
<div class="row-container">
<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>
}
}
</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>
}
}
</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
+2 -5
View File
@@ -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);