79 lines
2.9 KiB
TypeScript
79 lines
2.9 KiB
TypeScript
import { Component, OnInit, ViewChild } from '@angular/core';
|
|
import { FormControl, FormGroup } from '@angular/forms';
|
|
import { MatPaginator } from '@angular/material/paginator';
|
|
import { MatSort } from '@angular/material/sort';
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
import { Period } from 'src/app/period/period';
|
|
|
|
import { ProductGroup } from '../../core/product-group';
|
|
import { Recipe } from '../recipe';
|
|
|
|
import { RecipeListDatasource } from './recipe-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-role-list',
|
|
templateUrl: './recipe-list.component.html',
|
|
styleUrls: ['./recipe-list.component.css'],
|
|
})
|
|
export class RecipeListComponent implements OnInit {
|
|
@ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
|
|
@ViewChild(MatSort, { static: true }) sort?: MatSort;
|
|
form: FormGroup<{
|
|
period: FormControl<Period>;
|
|
productGroup: FormControl<ProductGroup | string | null>;
|
|
}>;
|
|
|
|
productGroups: ProductGroup[] = [];
|
|
periods: Period[] = [];
|
|
periodFilter: BehaviorSubject<Period> = new BehaviorSubject<Period>(new Period());
|
|
productGroupFilter: BehaviorSubject<string> = new BehaviorSubject('');
|
|
list: Recipe[] = [];
|
|
data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
|
|
dataSource: RecipeListDatasource = new RecipeListDatasource(this.productGroupFilter, this.data);
|
|
period: Period = new Period();
|
|
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['name', 'yield', 'date', 'source'];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private router: Router,
|
|
) {
|
|
this.form = new FormGroup({
|
|
period: new FormControl(new Period(), { nonNullable: true }),
|
|
productGroup: new FormControl<ProductGroup | string | null>(null),
|
|
});
|
|
// Listen to Payment Account Change
|
|
this.form.controls.period.valueChanges.subscribe((x) => {
|
|
this.router.navigate([], {
|
|
relativeTo: this.route,
|
|
queryParams: { p: x.id },
|
|
replaceUrl: true,
|
|
});
|
|
this.period = x;
|
|
});
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.dataSource = new RecipeListDatasource(this.productGroupFilter, this.data, this.paginator, this.sort);
|
|
// this.dataSource = new RecipeListDatasource(this.validFromFilter, this.validTillFilter, this.productGroupFilter, this.data);
|
|
this.route.data.subscribe((value) => {
|
|
const data = value as { list: Recipe[]; productGroups: ProductGroup[]; periods: Period[] };
|
|
this.productGroups = data.productGroups;
|
|
this.periods = data.periods;
|
|
const period = this.periods.find((x) => x.id === this.route.snapshot.queryParamMap.get('p')) || this.periods[0];
|
|
|
|
this.form.setValue({
|
|
period: period,
|
|
productGroup: '',
|
|
});
|
|
this.data.next(data.list);
|
|
});
|
|
}
|
|
|
|
filterProductGroup(val: string) {
|
|
this.productGroupFilter.next(val || '');
|
|
}
|
|
}
|