barker/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts

import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router';
import {ModifierCategoryService} from '../modifier-category.service';
import {ModifierCategory} from '../modifier-category';
import {ToasterService} from '../../core/toaster.service';
import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
import {MatDialog} from '@angular/material/dialog';
import {FormBuilder, FormGroup} from '@angular/forms';
import {MenuCategory} from "../../core/menu-category";
import {NestedTreeControl} from "@angular/cdk/tree";
import {MatTreeNestedDataSource} from "@angular/material";
import {Product} from "../../core/product";

@Component({
  selector: 'app-role-detail',
  templateUrl: './modifier-category-detail.component.html',
  styleUrls: ['./modifier-category-detail.component.css']
})
export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
  @ViewChild('nameElement', {static: true}) nameElement: ElementRef;
  form: FormGroup;
  item: ModifierCategory;
  treeControl = new NestedTreeControl<any>(node => node.products);
  dataSource = new MatTreeNestedDataSource<any>();
  products: Map<string, Product>;
  productsOfMenuCategory: Map<string, Product[]>;

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private fb: FormBuilder,
    private toaster: ToasterService,
    private dialog: MatDialog,
    private ser: ModifierCategoryService
  ) {
    this.createForm();
    this.dataSource.data = [];
  }

  createForm() {
    this.form = this.fb.group({
      name: '',
      minimum: '',
      maximum: ''
    });
  }

  ngOnInit() {
    this.route.data
      .subscribe((data: { item: ModifierCategory }) => {
        this.showItem(data.item);
      });
  }

  showItem(item: ModifierCategory) {
    this.item = item;
    this.dataSource.data = item.menuCategories;
    this.form.patchValue({
      name: this.item.name || '',
      minimum: '' + this.item.minimum,
      maximum: '' + this.item.maximum
    });
    this.products = new Map();
    this.productsOfMenuCategory = new Map();
    this.item.menuCategories.forEach((mc: MenuCategory) => {
      mc.products.forEach((p: Product) => {
        this.products.set(p.id, p);
        if (!this.productsOfMenuCategory.has(mc.id)) {
          this.productsOfMenuCategory.set(mc.id, [])
        }
        this.productsOfMenuCategory.get(mc.id).push(p);
      })
    });
    // this.setMenuCategories();
  }

  ngAfterViewInit() {
    setTimeout(() => {
      this.nameElement.nativeElement.focus();
    }, 0);
  }

  isExpanded(mc: MenuCategory) {
    return true;
  }

  save() {
    this.ser.saveOrUpdate(this.getItem())
      .subscribe(
        (result) => {
          this.toaster.show('Success', '');
          this.router.navigateByUrl('/modifier-categories');
        },
        (error) => {
          this.toaster.show('Danger', error.error);
        }
      );
  }

  delete() {
    this.ser.delete(this.item.id)
      .subscribe(
        (result) => {
          this.toaster.show('Success', '');
          this.router.navigateByUrl('/modifier-categories');
        },
        (error) => {
          this.toaster.show('Danger', error.error);
        }
      );
  }

  confirmDelete(): void {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      width: '250px',
      data: {title: 'Delete Modifier Category?', content: 'Are you sure? This cannot be undone.'}
    });

    dialogRef.afterClosed().subscribe((result: boolean) => {
      if (result) {
        this.delete();
      }
    });
  }

  getItem(): ModifierCategory {
    const formModel = this.form.value;
    this.item.name = formModel.name;
    this.item.minimum = +formModel.minimum;
    this.item.maximum = +formModel.maximum;
    return this.item;
  }

  hasChild = (_: number, node: any) => !!node.products && node.products.length > 0;

  isProductSelected(node: Product) {
    return this.products.get(node.id).enabled;
  }

  isMenuCategorySelected(node: MenuCategory) {
    return this.productsOfMenuCategory.get(node.id).reduce((acc, current) => { return acc && current.enabled}, true);
  }

  isMenuCategoryPartiallySelected(node: MenuCategory) {
    let total = this.productsOfMenuCategory.get(node.id).length;
    let ticked = this.productsOfMenuCategory.get(node.id).reduce((acc, current) => {
      if (current.enabled)
        acc += 1;
      return acc
    }, 0);
    return ticked > 0 && ticked < total;
  }

  toggleProductSelection(node: Product) {
    return this.products.get(node.id).enabled = !this.products.get(node.id).enabled;
  }

  toggleMenuCategorySelection(node: MenuCategory) {
    let sel = !this.isMenuCategorySelected(node);
    this.productsOfMenuCategory.get(node.id).forEach((p) => {p.enabled = sel;});
    return sel
  }
}