Modifier categories works

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

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

bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.html

@@ -24,18 +24,37 @@
           </mat-form-field>
         </div>
         <mat-divider></mat-divider>
-        <div formArrayName="menuCategories">
+        <mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
-          <div *ngFor="let mc of item.menuCategories; index as i" [formGroupName]="i">
+          <!-- This is the tree node template for leaf nodes -->
-            <mat-checkbox formControlName="menuCategory" fxFlex>{{mc.name}}</mat-checkbox>
+          <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
-            <div formArrayName="products">
+            <li class="mat-tree-node">
-              <div fxLayout="row" *ngFor="let p of mc.products; index as j" [formGroupName]="j" fxLayout="row"
+              <!-- use a disabled button to provide padding for tree leaf -->
-                   fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
+              <button mat-icon-button disabled></button>
-                   fxLayoutGap.lt-md="0px">
+                  <mat-checkbox class="checklist-leaf-node"
-                <mat-checkbox formControlName="product" fxFlex>{{p.name}}</mat-checkbox>
+                  [checked]="isProductSelected(node)"
+                                (change)="toggleProductSelection(node)">{{node.name}}</mat-checkbox>
+            </li>
+          </mat-tree-node>
+          <!-- This is the tree node template for expandable nodes -->
+          <mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
+            <li>
+              <div class="mat-tree-node">
+                <button mat-icon-button matTreeNodeToggle
+                        [attr.aria-label]="'toggle ' + node.name">
+                  <mat-icon class="mat-icon-rtl-mirror">
+                    {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
+                  </mat-icon>
+                </button>
+                <mat-checkbox [checked]="isMenuCategorySelected(node)"
+                  [indeterminate]="isMenuCategoryPartiallySelected(node)"
+                              (change)="toggleMenuCategorySelection(node)">{{node.name}}</mat-checkbox>
               </div>
-            </div>
+              <ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
-          </div>
+                <ng-container matTreeNodeOutlet></ng-container>
-        </div>
+              </ul>
+            </li>
+          </mat-nested-tree-node>
+        </mat-tree>
       </form>
     </mat-card-content>
     <mat-card-actions>

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 {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
-import { ModifierCategoryService } from '../modifier-category.service';
+import {ModifierCategoryService} from '../modifier-category.service';
-import { ModifierCategory } from '../modifier-category';
+import {ModifierCategory} from '../modifier-category';
-import { ToasterService } from '../../core/toaster.service';
+import {ToasterService} from '../../core/toaster.service';
-import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';
+import {ConfirmDialogComponent} from '../../shared/confirm-dialog/confirm-dialog.component';
-import { MatDialog } from '@angular/material/dialog';
+import {MatDialog} from '@angular/material/dialog';
-import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
+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<any>(node => node.products);
+  dataSource = new MatTreeNestedDataSource<any>();
+  products: Map<string, Product>;
+  productsOfMenuCategory: Map<string, Product[]>;
 
   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: '',
+      maximum: ''
-      menuCategories: this.fb.array([])
     });
-    // 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.products = new Map();
-    // this.form.setControl('menuCategories', this.fb.array(
+    this.productsOfMenuCategory = new Map();
-    //     this.item.menuCategories.map(
+    this.item.menuCategories.forEach((mc: MenuCategory) => {
-    //       x => this.fb.group({
+      mc.products.forEach((p: Product) => {
-    //         product: x.enabled
+        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
+  }
 }