118 lines
3.8 KiB
TypeScript
118 lines
3.8 KiB
TypeScript
import { AsyncPipe, CurrencyPipe } from '@angular/common';
|
|
import { Component, OnInit, inject } from '@angular/core';
|
|
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatOptionModule } from '@angular/material/core';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatSelectModule } from '@angular/material/select';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { ActivatedRoute, RouterModule } from '@angular/router';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
|
|
import { MenuCategory } from '../../core/menu-category';
|
|
import { ToCsvService } from '../../shared/to-csv.service';
|
|
import { Bundle } from '../bundle';
|
|
import { BundleListDataSource } from './bundle-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-bundle-list',
|
|
templateUrl: './bundle-list.component.html',
|
|
styleUrls: ['./bundle-list.component.css'],
|
|
imports: [
|
|
AsyncPipe,
|
|
CurrencyPipe,
|
|
MatButtonModule,
|
|
MatFormFieldModule,
|
|
MatIconModule,
|
|
MatInputModule,
|
|
MatOptionModule,
|
|
MatSelectModule,
|
|
MatTableModule,
|
|
ReactiveFormsModule,
|
|
RouterModule,
|
|
],
|
|
})
|
|
export class BundleListComponent implements OnInit {
|
|
private route = inject(ActivatedRoute);
|
|
private toCsv = inject(ToCsvService);
|
|
|
|
searchFilter = new BehaviorSubject<string>('');
|
|
menuCategoryFilter = new BehaviorSubject<string>('');
|
|
data: BehaviorSubject<Bundle[]> = new BehaviorSubject<Bundle[]>([]);
|
|
dataSource: BundleListDataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
|
|
|
|
form: FormGroup<{
|
|
menuCategory: FormControl<string | null>;
|
|
filter: FormControl<string>;
|
|
}>;
|
|
|
|
list: Bundle[] = [];
|
|
menuCategories: MenuCategory[] = [];
|
|
displayedColumns: string[] = ['name', 'price', 'menuCategory', 'info', 'items'];
|
|
|
|
constructor() {
|
|
this.form = new FormGroup({
|
|
menuCategory: new FormControl<string | null>(''),
|
|
filter: new FormControl<string>('', { nonNullable: true }),
|
|
});
|
|
|
|
this.data.subscribe((data: Bundle[]) => {
|
|
this.list = data;
|
|
});
|
|
|
|
this.form.controls.filter.valueChanges.pipe(debounceTime(150), distinctUntilChanged()).subscribe((value) => {
|
|
this.searchFilter.next(value ?? '');
|
|
});
|
|
}
|
|
|
|
filterOn(val: string) {
|
|
this.menuCategoryFilter.next(val);
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.dataSource = new BundleListDataSource(this.searchFilter, this.menuCategoryFilter, this.data);
|
|
this.route.data.subscribe((value) => {
|
|
const data = value as { list: Bundle[]; menuCategories: MenuCategory[] };
|
|
this.loadData(data.list, data.menuCategories);
|
|
});
|
|
}
|
|
|
|
loadData(list: Bundle[], menuCategories: MenuCategory[]) {
|
|
this.menuCategories = menuCategories;
|
|
this.data.next(list);
|
|
}
|
|
|
|
exportCsv() {
|
|
const headers = {
|
|
Name: 'name',
|
|
Units: 'units',
|
|
Price: 'salePrice',
|
|
MenuCategory: 'menuCategory',
|
|
Items: 'items',
|
|
};
|
|
|
|
// Map items to count for csv (simple)
|
|
const csvList = this.dataSource.filteredData.map((b) => ({
|
|
...b,
|
|
menuCategory: b.menuCategory?.name ?? '',
|
|
items: (b.items ?? [])
|
|
.map((i) => `${i.name}${i.quantity && i.quantity !== 1 ? ` x${i.quantity}` : ''}`)
|
|
.join(' | '),
|
|
}));
|
|
|
|
const csvData = new Blob([this.toCsv.toCsv(headers, csvList as unknown as Bundle[])], {
|
|
type: 'text/csv;charset=utf-8;',
|
|
});
|
|
|
|
const link = document.createElement('a');
|
|
link.href = window.URL.createObjectURL(csvData);
|
|
link.setAttribute('download', 'bundles.csv');
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
}
|