116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import { Component, Inject } from '@angular/core';
|
|
import { FormArray, FormControl, FormGroup } from '@angular/forms';
|
|
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
|
|
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
|
|
import { round } from 'mathjs';
|
|
import { Observable, of as observableOf } from 'rxjs';
|
|
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
|
|
|
|
import { Customer } from '../../core/customer';
|
|
import { CustomerService } from '../../customers/customer.service';
|
|
|
|
@Component({
|
|
selector: 'app-choose-customer',
|
|
templateUrl: './choose-customer.component.html',
|
|
styleUrls: ['./choose-customer.component.css'],
|
|
})
|
|
export class ChooseCustomerComponent {
|
|
form: FormGroup<{
|
|
name: FormControl<string>;
|
|
phone: FormControl<string>;
|
|
address: FormControl<string | null>;
|
|
printInBill: FormControl<boolean>;
|
|
discounts: FormArray<
|
|
FormGroup<{
|
|
discount: FormControl<number | null>;
|
|
}>
|
|
>;
|
|
}>;
|
|
|
|
item: Customer = new Customer();
|
|
customers: Observable<Customer[]>;
|
|
|
|
constructor(
|
|
public dialogRef: MatDialogRef<ChooseCustomerComponent>,
|
|
@Inject(MAT_DIALOG_DATA) public data: string | undefined,
|
|
private ser: CustomerService,
|
|
) {
|
|
// Create form
|
|
this.form = new FormGroup({
|
|
name: new FormControl<string>('', { nonNullable: true }),
|
|
phone: new FormControl<string>('', { nonNullable: true }),
|
|
address: new FormControl<string | null>(null),
|
|
printInBill: new FormControl<boolean>(false, { nonNullable: true }),
|
|
discounts: new FormArray<FormGroup<{ discount: FormControl<number | null> }>>([]),
|
|
});
|
|
// Setup Account Autocomplete
|
|
this.customers = this.form.controls.phone.valueChanges.pipe(
|
|
startWith(null),
|
|
map((x) => (x === this.item.phone ? '' : x)),
|
|
map((x) => (x !== null && x.length >= 1 ? x : null)),
|
|
debounceTime(150),
|
|
distinctUntilChanged(),
|
|
switchMap((x) => (x === null ? observableOf([]) : this.ser.autocomplete(x))),
|
|
);
|
|
if (data) {
|
|
this.ser.get(data).subscribe((x) => this.showItem(x));
|
|
}
|
|
}
|
|
|
|
showItem(item: Customer) {
|
|
this.item = item;
|
|
this.form.controls.name.setValue(item.name);
|
|
this.form.controls.phone.setValue(item.phone);
|
|
this.form.controls.address.setValue(item.address);
|
|
this.form.controls.printInBill.setValue(item.printInBill);
|
|
this.form.controls.discounts.clear();
|
|
this.item.discounts.forEach((x) =>
|
|
this.form.controls.discounts.push(
|
|
new FormGroup({
|
|
discount: new FormControl<number | null>(x.discount ? x.discount * 100 : null),
|
|
}),
|
|
),
|
|
);
|
|
this.form.markAsPristine();
|
|
}
|
|
|
|
save() {
|
|
const customer = this.getItem();
|
|
const promise = this.form.pristine ? observableOf(customer) : this.ser.saveOrUpdate(customer);
|
|
promise.subscribe((x) => this.dialogRef.close(x));
|
|
}
|
|
|
|
displayFn(customer?: Customer | string): string {
|
|
if (!customer) {
|
|
return '';
|
|
}
|
|
return typeof customer === 'string' ? customer : customer.phone;
|
|
}
|
|
|
|
selected(event: MatAutocompleteSelectedEvent): void {
|
|
const customer: Customer = event.option.value;
|
|
this.showItem(customer);
|
|
}
|
|
|
|
getItem(): Customer {
|
|
const formModel = this.form.value;
|
|
this.item.id = this.item.phone.trim() !== formModel.phone?.trim() ? '' : this.item.id;
|
|
this.item.name = formModel.name ?? '';
|
|
this.item.phone = formModel.phone ?? '';
|
|
this.item.address = formModel.address ?? '';
|
|
this.item.printInBill = formModel.printInBill ?? false;
|
|
const array = formModel.discounts;
|
|
if (array) {
|
|
this.item.discounts.forEach((item, index) => {
|
|
const array_item = array.at(index);
|
|
if (array_item && array_item?.discount) {
|
|
item.discount = Math.max(Math.min(round(array_item.discount / 100, 5), 100), 0);
|
|
} else {
|
|
item.discount = 0;
|
|
}
|
|
});
|
|
}
|
|
return this.item;
|
|
}
|
|
}
|