93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
import { PercentPipe } from '@angular/common';
|
|
import { Component, inject } from '@angular/core';
|
|
import { FormArray, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { round } from 'mathjs';
|
|
import { BehaviorSubject, Observable } from 'rxjs';
|
|
|
|
import { DiscountDataSource } from './discount-datasource';
|
|
import { DiscountItem } from './discount-item';
|
|
|
|
@Component({
|
|
selector: 'app-modifiers',
|
|
templateUrl: './discount.component.html',
|
|
styleUrls: ['./discount.component.css'],
|
|
imports: [
|
|
CdkScrollableModule,
|
|
MatButtonModule,
|
|
MatDialogModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatTableModule,
|
|
PercentPipe,
|
|
ReactiveFormsModule,
|
|
],
|
|
})
|
|
export class DiscountComponent {
|
|
dialogRef = inject<MatDialogRef<DiscountComponent>>(MatDialogRef);
|
|
data = inject<Observable<DiscountItem[]>>(MAT_DIALOG_DATA);
|
|
|
|
list: DiscountItem[] = [];
|
|
form: FormGroup<{
|
|
discounts: FormArray<
|
|
FormGroup<{
|
|
name: FormControl<string>;
|
|
discount: FormControl<number>;
|
|
}>
|
|
>;
|
|
}>;
|
|
|
|
public listObservable = new BehaviorSubject<DiscountItem[]>([]);
|
|
dataSource: DiscountDataSource = new DiscountDataSource(this.listObservable);
|
|
|
|
displayedColumns = ['name', 'discount'];
|
|
|
|
constructor() {
|
|
this.form = new FormGroup({
|
|
discounts: new FormArray<
|
|
FormGroup<{
|
|
name: FormControl<string>;
|
|
discount: FormControl<number>;
|
|
}>
|
|
>([]),
|
|
});
|
|
|
|
this.data.subscribe((list: DiscountItem[]) => {
|
|
this.list = list;
|
|
this.form.controls.discounts.clear();
|
|
|
|
this.list.forEach((x) => {
|
|
this.form.controls.discounts.push(
|
|
new FormGroup({
|
|
name: new FormControl(x.name, { nonNullable: true }),
|
|
discount: new FormControl(x.discount * 100, {
|
|
validators: [Validators.min(0), Validators.max(x.limit * 100)],
|
|
nonNullable: true,
|
|
}),
|
|
}),
|
|
);
|
|
});
|
|
this.listObservable.next(this.list);
|
|
});
|
|
}
|
|
|
|
accept(): void {
|
|
const array = this.form.controls.discounts;
|
|
for (let i = this.list.length - 1; i >= 0; i--) {
|
|
const item = this.list[i];
|
|
const control = array.controls[i].controls.discount;
|
|
if (control.pristine && control.value === 0) {
|
|
this.list.splice(i, 1);
|
|
} else {
|
|
item.discount = Math.max(Math.min(round(control.value / 100, 5), item.limit), 0);
|
|
}
|
|
}
|
|
this.dialogRef.close(this.list);
|
|
}
|
|
}
|