100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import { CurrencyPipe } from '@angular/common';
|
|
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatAnchor } from '@angular/material/button';
|
|
import { MatCard, MatCardHeader, MatCardTitleGroup, MatCardTitle, MatCardContent } from '@angular/material/card';
|
|
import { MatOption } from '@angular/material/core';
|
|
import { MatFormField, MatLabel } from '@angular/material/form-field';
|
|
import { MatIcon } from '@angular/material/icon';
|
|
import { MatSelectChange, MatSelect } from '@angular/material/select';
|
|
import {
|
|
MatTable,
|
|
MatColumnDef,
|
|
MatHeaderCellDef,
|
|
MatHeaderCell,
|
|
MatCellDef,
|
|
MatCell,
|
|
MatHeaderRowDef,
|
|
MatHeaderRow,
|
|
MatRowDef,
|
|
MatRow,
|
|
} from '@angular/material/table';
|
|
import { ActivatedRoute, Router, RouterLink } from '@angular/router';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
|
|
import { Modifier } from '../../core/modifier';
|
|
import { ModifierCategory } from '../../core/modifier-category';
|
|
|
|
import { ModifierListDataSource } from './modifier-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-modifier-list',
|
|
templateUrl: './modifier-list.component.html',
|
|
styleUrls: ['./modifier-list.component.css'],
|
|
imports: [
|
|
MatCard,
|
|
MatCardHeader,
|
|
MatCardTitleGroup,
|
|
MatCardTitle,
|
|
MatAnchor,
|
|
RouterLink,
|
|
MatIcon,
|
|
MatCardContent,
|
|
ReactiveFormsModule,
|
|
MatFormField,
|
|
MatLabel,
|
|
MatSelect,
|
|
MatOption,
|
|
MatTable,
|
|
MatColumnDef,
|
|
MatHeaderCellDef,
|
|
MatHeaderCell,
|
|
MatCellDef,
|
|
MatCell,
|
|
MatHeaderRowDef,
|
|
MatHeaderRow,
|
|
MatRowDef,
|
|
MatRow,
|
|
CurrencyPipe,
|
|
],
|
|
})
|
|
export class ModifierListComponent implements OnInit {
|
|
@ViewChild('table', { static: true }) table?: MatTable<Modifier>;
|
|
filter = new BehaviorSubject<string>('');
|
|
data: BehaviorSubject<Modifier[]> = new BehaviorSubject<Modifier[]>([]);
|
|
dataSource: ModifierListDataSource = new ModifierListDataSource(this.filter, this.data);
|
|
form: FormGroup<{
|
|
modifierCategory: FormControl<string | null>;
|
|
}>;
|
|
|
|
list: Modifier[] = [];
|
|
modifierCategories: ModifierCategory[] = [];
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns: string[] = ['name', 'showInBill', 'price', 'isActive', 'modifierCategory'];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
) {
|
|
this.form = new FormGroup({
|
|
modifierCategory: new FormControl<string | null>(''),
|
|
});
|
|
this.data.subscribe((data: Modifier[]) => {
|
|
this.list = data;
|
|
});
|
|
}
|
|
|
|
filterOn(val: MatSelectChange) {
|
|
this.filter.next(val.value);
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.route.data.subscribe((value) => {
|
|
const data = value as { list: Modifier[]; modifierCategories: ModifierCategory[] };
|
|
this.data.next(data.list);
|
|
this.modifierCategories = data.modifierCategories;
|
|
});
|
|
this.dataSource = new ModifierListDataSource(this.filter, this.data);
|
|
}
|
|
}
|