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/angular.json
+12 -5
View File
@@ -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",
"maximumError": "1mb"
"maximumWarning": "1000kb",
"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
+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);