barker/bookie/src/app/product/product-list/product-list.component.ts

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);
  }
}