tanshu
/
barker
1
0
Fork 0
Code Issues 1 Pull Requests Releases 4 Activity

Modifier categories works

This commit is contained in:
Amritanshu 2019-06-21 01:29:54 +05:30
parent 6ace2078bd
commit e13ed38640
4 changed files with 111 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
bookie/src/app/modifier-categories/modifier-categories.module.ts
View File

@ -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

11
bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.css
View File

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

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

@ -24,18 +24,37 @@
</mat-form-field>
</div>
<mat-divider></mat-divider>
<div formArrayName="menuCategories">
<div *ngFor="let mc of item.menuCategories; index as i" [formGroupName]="i">
<mat-checkbox formControlName="menuCategory" fxFlex>{{mc.name}}</mat-checkbox>
<div formArrayName="products">
<div fxLayout="row" *ngFor="let p of mc.products; index as j" [formGroupName]="j" fxLayout="row"
fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
fxLayoutGap.lt-md="0px">
<mat-checkbox formControlName="product" fxFlex>{{p.name}}</mat-checkbox>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="example-tree">
<!-- This is the tree node template for leaf nodes -->
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
<li class="mat-tree-node">
<!-- use a disabled button to provide padding for tree leaf -->
<button mat-icon-button disabled></button>
<mat-checkbox class="checklist-leaf-node"
[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>
</div>
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(node)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</li>
</mat-nested-tree-node>
</mat-tree>
</form>
</mat-card-content>
<mat-card-actions>

113
bookie/src/app/modifier-categories/modifier-category-detail/modifier-category-detail.component.ts
View File

@ -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<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: '',
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
}
}