asctb-reporter
  1. Components
  2. IndentedListComponent

File

src/app/components/indented-list/indented-list.component.ts

Implements

OnInit OnDestroy AfterViewInit

Metadata

selector app-indent
styleUrls ./indented-list.component.scss
templateUrl ./indented-list.component.html

Index

Properties
Methods
Inputs
Outputs

Constructor

constructor(indentService: IndentedListService)
Defined in src/app/components/indented-list/indented-list.component.ts:65
Parameters :
Name Type Optional
indentService IndentedListService No

Inputs

currentSheet
Type : Sheet
Defined in src/app/components/indented-list/indented-list.component.ts:32
dataVersion
Defined in src/app/components/indented-list/indented-list.component.ts:31
sheetData
Type : Row[]
Default value : []
Defined in src/app/components/indented-list/indented-list.component.ts:33

Outputs

closeIL
Type : EventEmitter
Defined in src/app/components/indented-list/indented-list.component.ts:34
openBottomSheet
Type : EventEmitter
Defined in src/app/components/indented-list/indented-list.component.ts:35

Methods

Public initializeTree
initializeTree(data: ILNode)
Defined in src/app/components/indented-list/indented-list.component.ts:92
Parameters :
Name Type Optional
data ILNode No
Returns : void

Properties

Optional activateNode
Defined in src/app/components/indented-list/indented-list.component.ts:28
dataSource
Default value : new MatTreeFlatDataSource(this.treeControl, this.treeFlattener)
Defined in src/app/components/indented-list/indented-list.component.ts:65
hasChild
Default value : () => {...}
Defined in src/app/components/indented-list/indented-list.component.ts:42
indentData
Type : []
Default value : []
Defined in src/app/components/indented-list/indented-list.component.ts:27
Public indentService
Type : IndentedListService
Defined in src/app/components/indented-list/indented-list.component.ts:67
indentTree
Type : MatTree<>
Decorators :
@ViewChild('indentTree')
Defined in src/app/components/indented-list/indented-list.component.ts:40
treeControl
Default value : new FlatTreeControl<FlatNode>( (node) => node.level, (node) => node.expandable, )
Defined in src/app/components/indented-list/indented-list.component.ts:44
treeFlattener
Default value : new MatTreeFlattener( this.transformer, (node) => node.level, (node) => node.expandable, (node) => node.children, )
Defined in src/app/components/indented-list/indented-list.component.ts:58
visible
Default value : false
Defined in src/app/components/indented-list/indented-list.component.ts:29
 
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>

./indented-list.component.scss 

.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
Component
Html element with directive

results matching ""

    No results matching ""