diff --git a/bookie/src/app/modifier-categories/modifier-categories.module.ts b/bookie/src/app/modifier-categories/modifier-categories.module.ts
index a6edf77..d20126a 100644
--- a/bookie/src/app/modifier-categories/modifier-categories.module.ts
+++ b/bookie/src/app/modifier-categories/modifier-categories.module.ts
@@ -4,6 +4,7 @@ import {CommonModule} from '@angular/common';
import {ModifierCategoryListComponent} from './modifier-category-list/modifier-category-list.component';
import {ModifierCategoryDetailComponent} from './modifier-category-detail/modifier-category-detail.component';
import {ModifierCategoriesRoutingModule} from './modifier-categories-routing.module';
+import {CdkTreeModule} from '@angular/cdk/tree';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
@@ -12,7 +13,8 @@ import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
-import {CdkTableModule} from '@angular/cdk/table';
+import { MatTreeModule } from '@angular/material/tree';
+import { CdkTableModule } from '@angular/cdk/table';
import {ReactiveFormsModule} from '@angular/forms';
import {SharedModule} from '../shared/shared.module';
import {FlexLayoutModule} from '@angular/flex-layout';
@@ -21,6 +23,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
imports: [
CommonModule,
CdkTableModule,
+ CdkTreeModule,
FlexLayoutModule,
MatButtonModule,
MatCardModule,
@@ -30,6 +33,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
MatInputModule,
MatProgressSpinnerModule,
MatTableModule,
+ MatTreeModule,
ReactiveFormsModule,
SharedModule,
ModifierCategoriesRoutingModule
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.css b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.css
index 82c7afd..ea419e0 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.css
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.css
@@ -1,3 +1,14 @@
.example-card {
max-width: 400px;
}
+
+.example-tree-invisible {
+ display: none;
+}
+
+.example-tree ul,
+.example-tree li {
+ margin-top: 0;
+ margin-bottom: 0;
+ list-style-type: none;
+}
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
index 528385e..c045725 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html
@@ -24,18 +24,37 @@
-
-
-
{{mc.name}}
-
-
-
{{p.name}}
+
+
+
+
+
+
+ {{node.name}}
+
+
+
+
+
+
+
+ {{node.name}}
-
-
-
+
+
+
+
diff --git a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
index 0361d72..0f1d927 100644
--- a/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
+++ b/bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
@@ -1,11 +1,14 @@
-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 { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+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({
@@ -14,9 +17,13 @@ import {Product} from "../../core/product";
styleUrls: ['./modifier-category-detail.component.css']
})
export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
- @ViewChild('nameElement', { static: true }) nameElement: ElementRef;
+ @ViewChild('nameElement', {static: true}) nameElement: ElementRef;
form: FormGroup;
item: ModifierCategory;
+ treeControl = new NestedTreeControl(node => node.products);
+ dataSource = new MatTreeNestedDataSource();
+ products: Map;
+ productsOfMenuCategory: Map;
constructor(
private route: ActivatedRoute,
@@ -27,37 +34,15 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
private ser: ModifierCategoryService
) {
this.createForm();
+ this.dataSource.data = [];
}
createForm() {
this.form = this.fb.group({
name: '',
minimum: '',
- maximum: '',
- menuCategories: this.fb.array([])
+ maximum: ''
});
- // this.setMenuCategories();
- }
-
- setMenuCategories(){
- this.form.setControl('menuCategories', this.fb.array(
- this.item.menuCategories.map(
- x => this.fb.group({
- menuCategory: x.enabled,
- products: new FormArray(
- x.products.map(
- y => this.fb.group({
- product: y.enabled
- })
- )
- )
- })
- )
- ));
- }
-
- setProducts(x: any[]){
- return ;
}
ngOnInit() {
@@ -69,20 +54,24 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
showItem(item: ModifierCategory) {
this.item = item;
- console.log(item);
+ this.dataSource.data = item.menuCategories;
this.form.patchValue({
name: this.item.name || '',
minimum: '' + this.item.minimum,
maximum: '' + this.item.maximum
});
- this.setMenuCategories();
- // this.form.setControl('menuCategories', this.fb.array(
- // this.item.menuCategories.map(
- // x => this.fb.group({
- // product: x.enabled
- // })
- // )
- // ));
+ 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() {
@@ -91,6 +80,10 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
}, 0);
}
+ isExpanded(mc: MenuCategory) {
+ return true;
+ }
+
save() {
this.ser.saveOrUpdate(this.getItem())
.subscribe(
@@ -135,12 +128,36 @@ export class ModifierCategoryDetailComponent implements OnInit, AfterViewInit {
this.item.name = formModel.name;
this.item.minimum = +formModel.minimum;
this.item.maximum = +formModel.maximum;
- const mc = this.form.get('menuCategories') as FormArray;
- this.item.menuCategories.forEach((item, i) => {
- item.products.forEach((prod, j) => {
- prod.enabled = mc.value[i].products[j].product;
- });
- });
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
+ }
}