105 lines
3.7 KiB
TypeScript
105 lines
3.7 KiB
TypeScript
import { Component, inject, OnInit, ViewChild } from '@angular/core';
|
|
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatOptionModule } from '@angular/material/core';
|
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
|
|
import { MatSelectModule } from '@angular/material/select';
|
|
import { MatSort, MatSortModule } from '@angular/material/sort';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { ActivatedRoute, Router, RouterModule } 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'],
|
|
imports: [
|
|
MatIconModule,
|
|
RouterModule,
|
|
ReactiveFormsModule,
|
|
MatDatepickerModule,
|
|
MatFormFieldModule,
|
|
MatSelectModule,
|
|
MatOptionModule,
|
|
MatTableModule,
|
|
MatSortModule,
|
|
MatPaginatorModule,
|
|
MatButtonModule,
|
|
],
|
|
})
|
|
export class RecipeListComponent implements OnInit {
|
|
private route = inject(ActivatedRoute);
|
|
private router = inject(Router);
|
|
|
|
@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 = new BehaviorSubject<string>('');
|
|
list: Recipe[] = [];
|
|
data: BehaviorSubject<Recipe[]> = new BehaviorSubject<Recipe[]>([]);
|
|
dataSource: RecipeListDatasource = new RecipeListDatasource(
|
|
this.productGroupFilter,
|
|
this.data,
|
|
this.paginator,
|
|
this.sort,
|
|
);
|
|
|
|
period: Period = new Period();
|
|
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns = ['name', 'yield', 'date', 'source'];
|
|
|
|
constructor() {
|
|
this.form = new FormGroup({
|
|
period: new FormControl(new Period(), { nonNullable: true }),
|
|
productGroup: new FormControl<ProductGroup | string | null>(null),
|
|
});
|
|
// Listen to Period Change
|
|
this.form.controls.period.valueChanges.subscribe((x) => {
|
|
this.router.navigate([], {
|
|
relativeTo: this.route,
|
|
queryParams: { p: x.id },
|
|
replaceUrl: true,
|
|
queryParamsHandling: 'merge',
|
|
});
|
|
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 || '');
|
|
}
|
|
}
|