Open-ILS/src/eg2/src/app/share/tree/tree.component.ts

   1 import {Component, Input, Output, EventEmitter, TemplateRef} from '@angular/core';
   2 import {Tree, TreeNode} from './tree';
   3
   4 /*
   5 Tree Widget:
   6
   7 <eg-tree
   8     [tree]="myTree"
   9     (nodeClicked)="nodeClicked($event)">
  10 </eg-tree>
  11
  12 ----
  13
  14 constructor() {
  15
  16     const rootNode = new TreeNode({
  17         id: 1,
  18         label: 'Root',
  19         children: [
  20             new TreeNode({id: 2, label: 'Child'}),
  21             new TreeNode({id: 3, label: 'Child2'})
  22         ]
  23     ]});
  24
  25     this.myTree = new Tree(rootNode);
  26 }
  27
  28 nodeClicked(node: TreeNode) {
  29     console.log('someone clicked on ' + node.label);
  30 }
  31 */
  32
  33 @Component({
  34     selector: 'eg-tree',
  35     templateUrl: 'tree.component.html',
  36     styleUrls: ['tree.component.css']
  37 })
  38 export class TreeComponent {
  39
  40     _tree: Tree;
  41     @Input() set tree(t: Tree) {
  42         if (t) {
  43             this._tree = t;
  44             this._tree.nodeList(); // reindex nodes
  45         }
  46     }
  47
  48     get tree(): Tree {
  49         return this._tree;
  50     }
  51
  52     @Input() showSelectors = false; // the checkboxes, etc.
  53     @Input() disableRootSelector = false; // checkbox at the top of the tree
  54     @Input() toggleOnClick = false; // selectNode vs toggleNodeSelection
  55     @Input() rowTrailingTemplate: TemplateRef<any>;
  56
  57     @Output() nodeClicked: EventEmitter<TreeNode>;
  58     @Output() nodeChecked: EventEmitter<TreeNode>;
  59
  60     constructor() {
  61         this.nodeClicked = new EventEmitter<TreeNode>();
  62         this.nodeChecked = new EventEmitter<TreeNode>();
  63     }
  64
  65     displayNodes(): TreeNode[] {
  66         if (!this.tree) { return []; }
  67         return this.tree.nodeList(true);
  68     }
  69
  70     handleNodeClick(node: TreeNode) {
  71         if (this.disableRootSelector && node === this.tree.rootNode) {
  72             return;
  73         }
  74         if (this.toggleOnClick) {
  75             this.tree.toggleNodeSelection(node);
  76         } else {
  77             this.tree.selectNode(node);
  78         }
  79         this.nodeClicked.emit(node);
  80     }
  81
  82     handleNodeCheck(node: TreeNode) {
  83         // If needed, add logic here to handle the case where
  84         // a node's checkbox was clicked.
  85         // since ngModel is node.selected, we don't need to set it ourselves
  86         // this.handleNodeClick(node);
  87         this.nodeClicked.emit(node);
  88     }
  89
  90     expandAll() {
  91         if (this.tree) {
  92             this.tree.expandAll();
  93         }
  94     }
  95
  96     collapseAll() {
  97         if (this.tree) {
  98             this.tree.collapseAll();
  99         }
 100     }
 101
 102     toggleSelections(ev: any) {
 103         if (ev.target.checked) {
 104             this.selectAll();
 105         } else {
 106             this.deselectAll();
 107         }
 108     }
 109
 110     selectAll() {
 111         if (this.tree) {
 112             this.tree.nodeList().forEach(node => {
 113                 if (!(this.disableRootSelector && (node === this.tree.rootNode))) {
 114                     node.selected = true;
 115                 }
 116             });
 117         }
 118     }
 119
 120     deselectAll() {
 121         if (this.tree) {
 122             this.tree.nodeList().forEach(node => {
 123                 if (!(this.disableRootSelector && (node === this.tree.rootNode))) {
 124                     node.selected = false;
 125                 }
 126             });
 127         }
 128     }
 129
 130 }
 131
 132
 133