66 lines
3.1 KiB
HTML
66 lines
3.1 KiB
HTML
<div fxLayout="row" fxFlex="50%" fxLayoutAlign="space-around center" class="example-card">
|
|
<mat-card fxFlex>
|
|
<mat-card-title-group>
|
|
<mat-card-title>ModifierCategory</mat-card-title>
|
|
</mat-card-title-group>
|
|
<mat-card-content>
|
|
<form [formGroup]="form" fxLayout="column">
|
|
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px">
|
|
<mat-form-field fxFlex>
|
|
<mat-label>Name</mat-label>
|
|
<input matInput #nameElement placeholder="Name" formControlName="name">
|
|
</mat-form-field>
|
|
</div>
|
|
<div fxLayout="row" fxLayoutAlign="space-around start" fxLayout.lt-md="column" fxLayoutGap="20px"
|
|
fxLayoutGap.lt-md="0px">
|
|
<mat-form-field fxFlex>
|
|
<mat-label>Minimum</mat-label>
|
|
<input matInput placeholder="Minimum" type="number" formControlName="minimum">
|
|
</mat-form-field>
|
|
<mat-form-field fxFlex>
|
|
<mat-label>Maximum</mat-label>
|
|
<input matInput placeholder="Maximum" type="number" formControlName="maximum">
|
|
</mat-form-field>
|
|
</div>
|
|
<mat-divider></mat-divider>
|
|
<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>
|
|
<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>
|
|
<button mat-raised-button color="primary" (click)="save()">Save</button>
|
|
<button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
|
|
</mat-card-actions>
|
|
</mat-card>
|
|
</div>
|