133 lines
4.0 KiB
TypeScript
133 lines
4.0 KiB
TypeScript
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
|
|
import { Component, OnInit } from '@angular/core';
|
|
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
|
|
import { ActivatedRoute } from '@angular/router';
|
|
import { BehaviorSubject } from 'rxjs';
|
|
import { Observable } from 'rxjs/internal/Observable';
|
|
import { debounceTime, distinctUntilChanged, startWith } from 'rxjs/operators';
|
|
|
|
import { MenuCategory } from '../../core/menu-category';
|
|
import { Product } from '../../core/product';
|
|
import { ToasterService } from '../../core/toaster.service';
|
|
import { ToCsvService } from '../../shared/to-csv.service';
|
|
import { ProductService } from '../product.service';
|
|
|
|
import { ProductListDataSource } from './product-list-datasource';
|
|
|
|
@Component({
|
|
selector: 'app-product-list',
|
|
templateUrl: './product-list.component.html',
|
|
styleUrls: ['./product-list.component.css'],
|
|
})
|
|
export class ProductListComponent implements OnInit {
|
|
searchFilter: Observable<string> = new Observable();
|
|
menuCategoryFilter: BehaviorSubject<string> = new BehaviorSubject('');
|
|
data: BehaviorSubject<Product[]> = new BehaviorSubject<Product[]>([]);
|
|
dataSource: ProductListDataSource = new ProductListDataSource(
|
|
this.searchFilter,
|
|
this.menuCategoryFilter,
|
|
this.data,
|
|
);
|
|
|
|
form: FormGroup;
|
|
list: Product[] = [];
|
|
menuCategories: MenuCategory[] = [];
|
|
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
|
|
displayedColumns: string[] = [
|
|
'name',
|
|
'price',
|
|
'menuCategory',
|
|
'saleCategory',
|
|
'info',
|
|
'quantity',
|
|
];
|
|
|
|
constructor(
|
|
private route: ActivatedRoute,
|
|
private fb: FormBuilder,
|
|
private toaster: ToasterService,
|
|
private toCsv: ToCsvService,
|
|
private ser: ProductService,
|
|
) {
|
|
this.form = this.fb.group({
|
|
menuCategory: '',
|
|
filter: '',
|
|
});
|
|
this.data.subscribe((data: Product[]) => {
|
|
this.list = data;
|
|
});
|
|
this.searchFilter = (this.form.get('filter') as FormControl).valueChanges.pipe(
|
|
startWith(''),
|
|
debounceTime(150),
|
|
distinctUntilChanged(),
|
|
);
|
|
}
|
|
|
|
filterOn(val: string) {
|
|
this.menuCategoryFilter.next(val);
|
|
}
|
|
|
|
ngOnInit() {
|
|
this.dataSource = new ProductListDataSource(
|
|
this.searchFilter,
|
|
this.menuCategoryFilter,
|
|
this.data,
|
|
);
|
|
this.route.data.subscribe((value) => {
|
|
const data = value as { list: Product[]; menuCategories: MenuCategory[] };
|
|
this.loadData(data.list, data.menuCategories);
|
|
});
|
|
}
|
|
|
|
loadData(list: Product[], menuCategories: MenuCategory[]) {
|
|
this.menuCategories = menuCategories;
|
|
this.data.next(list);
|
|
}
|
|
|
|
updateSortOrder() {
|
|
this.ser.updateSortOrder(this.dataSource.filteredData).subscribe(
|
|
(result: Product[]) => {
|
|
this.toaster.show('Success', '');
|
|
this.loadData(result, this.menuCategories);
|
|
},
|
|
(error) => {
|
|
this.toaster.show('Error', error);
|
|
},
|
|
);
|
|
}
|
|
|
|
dropTable(event: CdkDragDrop<ProductListDataSource>) {
|
|
const prevIndex = this.dataSource.filteredData.indexOf(event.item.data);
|
|
moveItemInArray(this.dataSource.filteredData, prevIndex, event.currentIndex);
|
|
if (this.dataSource.menuCategory === undefined) {
|
|
this.list = this.dataSource.filteredData;
|
|
} else {
|
|
this.list = this.list
|
|
.filter((x) => (x.menuCategory as MenuCategory).id !== this.dataSource.menuCategory)
|
|
.concat(this.dataSource.filteredData);
|
|
}
|
|
this.data.next(this.list);
|
|
}
|
|
|
|
exportCsv() {
|
|
const headers = {
|
|
Code: 'code',
|
|
Name: 'name',
|
|
Units: 'units',
|
|
Price: 'price',
|
|
MenuCategory: 'menuCategory',
|
|
SaleCategory: 'saleCategory',
|
|
};
|
|
|
|
const csvData = new Blob([this.toCsv.toCsv(headers, this.dataSource.filteredData)], {
|
|
type: 'text/csv;charset=utf-8;',
|
|
});
|
|
const link = document.createElement('a');
|
|
link.href = window.URL.createObjectURL(csvData);
|
|
link.setAttribute('download', 'products.csv');
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
}
|
|
}
|