115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
|
|
import { FlatTreeControl } from '@angular/cdk/tree';
|
|
import { menuData } from './menu-data';
|
|
import { ResourceType } from '../model/controller.model';
|
|
import { ISService } from '../is.service';
|
|
|
|
export interface MenuNode {
|
|
name: string;
|
|
type: string;
|
|
route?: string;
|
|
badge?: string;
|
|
children?: MenuNode[];
|
|
}
|
|
|
|
export interface FlatTreeNode {
|
|
name: string;
|
|
type: string;
|
|
level: number;
|
|
route?: string;
|
|
badge?: string;
|
|
expandable: boolean;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-main-menu-tree',
|
|
templateUrl: './main-menu-tree.component.html',
|
|
styleUrls: ['./main-menu-tree.component.css']
|
|
})
|
|
export class MainMenuTreeComponent {
|
|
|
|
/** The TreeControl controls the expand/collapse state of tree nodes. */
|
|
treeControl: FlatTreeControl<FlatTreeNode>;
|
|
|
|
/** The TreeFlattener is used to generate the flat list of items from hierarchical data. */
|
|
treeFlattener: MatTreeFlattener<MenuNode, FlatTreeNode>;
|
|
|
|
/** The MatTreeFlatDataSource connects the control and flattener to provide data. */
|
|
dataSource: MatTreeFlatDataSource<MenuNode, FlatTreeNode>;
|
|
|
|
constructor(public service:ISService) {
|
|
this.treeFlattener = new MatTreeFlattener(
|
|
this.transformer,
|
|
this.getLevel,
|
|
this.isExpandable,
|
|
this.getChildren);
|
|
|
|
this.service.loadResourceTypes((data:ResourceType[]) => {
|
|
let simpleResources: MenuNode[] = []
|
|
let advancedResources: MenuNode[] = []
|
|
|
|
data.forEach(resType => {
|
|
let item:MenuNode = {
|
|
name: resType.name,
|
|
type: 'menuitem',
|
|
badge: resType.count.toString()
|
|
}
|
|
if (resType.simple) {
|
|
item.route = '/resources/' + resType.id;
|
|
simpleResources.push(item)
|
|
} else {
|
|
item.route = '/adv_resources/' + resType.id;
|
|
advancedResources.push(item)
|
|
}
|
|
})
|
|
|
|
menuData.forEach(m => {
|
|
if (m.name=='Simple Resources') {
|
|
m.children = simpleResources
|
|
} else if (m.name=='Advanced Resources') {
|
|
m.children = advancedResources
|
|
}
|
|
})
|
|
this.dataSource.data = menuData;
|
|
});
|
|
|
|
this.treeControl = new FlatTreeControl(this.getLevel, this.isExpandable);
|
|
this.dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
|
|
this.dataSource.data = menuData;
|
|
|
|
}
|
|
|
|
/** Transform the data to something the tree can read. */
|
|
transformer(node: MenuNode, level: number): FlatTreeNode {
|
|
return {
|
|
name: node.name,
|
|
type: node.type,
|
|
route: node.route,
|
|
badge: node.badge,
|
|
level,
|
|
expandable: !!node.children
|
|
};
|
|
}
|
|
|
|
/** Get the level of the node */
|
|
getLevel(node: FlatTreeNode): number {
|
|
return node.level;
|
|
}
|
|
|
|
/** Get whether the node is expanded or not. */
|
|
isExpandable(node: FlatTreeNode): boolean {
|
|
return node.expandable;
|
|
}
|
|
|
|
/** Get whether the node has children or not. */
|
|
hasChild(index: number, node: FlatTreeNode): boolean {
|
|
return node.expandable;
|
|
}
|
|
|
|
/** Get the children for the node. */
|
|
getChildren(node: MenuNode): MenuNode[] | null | undefined {
|
|
return node.children;
|
|
}
|
|
}
|