File
Implements
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
currentSheet
|
Type : Sheet
|
|
|
|
sheetData
|
Type : Row[]
|
Default value : []
|
|
|
Outputs
|
closeIL
|
Type : EventEmitter
|
|
|
|
openBottomSheet
|
Type : EventEmitter
|
|
|
Methods
|
Public
initializeTree
|
initializeTree(data: ILNode)
|
|
|
Parameters :
| Name |
Type |
Optional |
| data |
ILNode
|
No
|
|
|
dataSource
|
Default value : new MatTreeFlatDataSource(this.treeControl, this.treeFlattener)
|
|
|
|
hasChild
|
Default value : () => {...}
|
|
|
|
indentData
|
Type : []
|
Default value : []
|
|
|
|
indentTree
|
Type : MatTree<>
|
Decorators :
@ViewChild('indentTree')
|
|
|
|
treeControl
|
Default value : new FlatTreeControl<FlatNode>(
(node) => node.level,
(node) => node.expandable,
)
|
|
|
|
treeFlattener
|
Default value : new MatTreeFlattener(
this.transformer,
(node) => node.level,
(node) => node.expandable,
(node) => node.children,
)
|
|
|
|
visible
|
Default value : false
|
|
|
import { FlatTreeControl } from '@angular/cdk/tree';
import { AfterViewInit, Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatTree, MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { ILNode } from '../../models/indent.model';
import { Row, Sheet } from '../../models/sheet.model';
import { IndentedListService } from './indented-list.service';
interface Node {
name: string;
ontologyId: string;
children?: Node[];
}
interface FlatNode {
expandable: boolean;
name: string;
ontologyId: string;
level: number;
}
@Component({
selector: 'app-indent',
templateUrl: './indented-list.component.html',
styleUrls: ['./indented-list.component.scss'],
})
export class IndentedListComponent implements OnInit, OnDestroy, AfterViewInit {
indentData = [];
activateNode?: unknown;
visible = false;
@Input() dataVersion?: unknown;
@Input() currentSheet!: Sheet;
@Input() sheetData: Row[] = [];
@Output() closeIL = new EventEmitter<void>();
@Output() openBottomSheet = new EventEmitter<{
name: string;
ontologyId: string;
}>();
@ViewChild('indentTree') indentTree!: MatTree<unknown>;
hasChild = (_: number, node: FlatNode) => node.expandable;
treeControl = new FlatTreeControl<FlatNode>(
(node) => node.level,
(node) => node.expandable,
);
private readonly transformer = (node: Node, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
name: node.name,
ontologyId: node.ontologyId,
level,
};
};
treeFlattener = new MatTreeFlattener(
this.transformer,
(node) => node.level,
(node) => node.expandable,
(node) => node.children,
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
constructor(public indentService: IndentedListService) {}
ngOnInit(): void {
this.indentService.indentData$.subscribe((data) => {
if (data.data) {
this.initializeTree(data.data);
this.visible = true;
} else {
this.visible = false;
}
});
this.indentService.makeIndentData(this.currentSheet, this.sheetData);
}
ngAfterViewInit(): void {
if (this.indentTree) {
this.indentTree.treeControl.expandAll();
}
}
ngOnDestroy() {
this.visible = false;
}
public initializeTree(data: ILNode) {
this.dataSource.data = [data];
}
}
<app-sidenav>
<div header>
<app-sidenav-header
[title]="currentSheet.display + ' Indented List'"
(closeSideNav)="closeIL.emit(); visible = false"
[tooltipString]="'Traditional Indented List view of the data'"
></app-sidenav-header>
</div>
<div body *ngIf="visible">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" #indentTree class="tree-container">
<mat-tree-node
*matTreeNodeDef="let node"
matTreeNodePadding
[ngClass]="{ 'background-highlight': activateNode === node }"
(click)="activateNode = node; openBottomSheet.emit({ name: node.name, ontologyId: node.ontologyId })"
>
<button mat-icon-button disabled></button>
<div class="d-flex align-items-center">
<span class="h6 fw-normal m-0">{{ node.name }}</span
><span class="node-name-id" *ngIf="node.ontologyId"> {{ node.ontologyId }}</span>
</div>
</mat-tree-node>
<mat-tree-node
*matTreeNodeDef="let node; when: hasChild"
matTreeNodePadding
[ngClass]="{ 'background-highlight': activateNode === node }"
(click)="activateNode = node; openBottomSheet.emit({ name: node.name, ontologyId: node.ontologyId })"
>
<button mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle' + node.name" class="node-button">
<mat-icon class="mat-icon-rtl-mirror node-button-icon">
{{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
</mat-icon>
</button>
<div class="d-flex align-items-center">
<span class="h6 m-0 fw-bold">{{ node.name }} </span
><span class="node-name-id" *ngIf="node.ontologyId"> {{ node.ontologyId }}</span>
</div>
</mat-tree-node>
</mat-tree>
</div>
<div body *ngIf="!visible">
<div class="px-4">
<h3>Indent List not created yet.</h3>
</div>
</div>
</app-sidenav>
.mat-tree-node {
min-height: 2em !important;
cursor: pointer;
}
.mat-tree-node:hover {
color: #1976d2;
}
.background-highlight {
color: #1976d2;
}
.tree-container {
padding: 1.25rem !important;
width: fit-content !important;
background-color: transparent;
}
.node-name-id {
font-size: 8pt;
color: grey;
padding-left: 0.625rem;
}
.node-button {
background-color: rgb(215, 215, 215);
transform: scale(0.7);
}
.node-button-icon {
font-size: 20pt;
color: white;
height: 1.5rem !important;
width: 1.5rem !important;
font-size: 14pt !important;
}
Legend
Html element with directive