tree
authorJason Etheridge <jason@EquinoxOLI.org>
Sun, 30 Apr 2023 20:10:01 +0000 (16:10 -0400)
committerJason Etheridge <phasefx@gmail.com>
Thu, 25 May 2023 16:45:32 +0000 (12:45 -0400)
Open-ILS/src/eg2/src/app/share/tree/tree.component.html
Open-ILS/src/eg2/src/app/share/tree/tree.component.ts
Open-ILS/src/eg2/src/app/share/tree/tree.ts

index 525fece..0ac2c57 100644 (file)
@@ -1,8 +1,13 @@
-
-
+<button *ngIf="showTogglers" (click)="expandAll()" i18n>Expand All</button>
+<button *ngIf="showTogglers" (click)="collapseAll()" i18n>Collapse all</button>
+<ng-content></ng-content>
 <div class="eg-tree" *ngFor="let node of displayNodes()">
   <div class="eg-tree-node-wrapper d-flex"
     [ngStyle]="{'padding-left': (node.depth * 20) + 'px'}">
+    <input *ngIf="showSelectors && !(disableRootSelector && node === tree.rootNode)"
+      type="checkbox"
+      [(ngModel)]="node.selected"
+      (change)="handleNodeCheck(node)" />
     <div class="eg-tree-node-expandy">
       <div *ngIf="node.children.length" (click)="node.toggleExpand()"
         i18n-title title="Toggle Expand Node">
@@ -18,3 +23,5 @@
     </div>
   </div>
 </div>
+<button *ngIf="showSelectors" (click)="selectAll()" i18n>Select all</button>
+<button *ngIf="showSelectors" (click)="deselectAll()" i18n>Deselect all</button>
index 2a60270..5709e58 100644 (file)
@@ -49,6 +49,10 @@ export class TreeComponent {
         return this._tree;
     }
 
+    @Input() showTogglers: boolean = false; // expand all / collapse all
+    @Input() showSelectors: boolean = false; // the checkboxes, etc.
+    @Input() disableRootSelector: boolean = false; // checkbox at the top of the tree
+
     @Output() nodeClicked: EventEmitter<TreeNode>;
 
     constructor() {
@@ -64,6 +68,44 @@ export class TreeComponent {
         this.tree.selectNode(node);
         this.nodeClicked.emit(node);
     }
+
+    expandAll() {
+        if (this.tree) {
+            this.tree.expandAll();
+        }
+    }
+
+    collapseAll() {
+        if (this.tree) {
+            this.tree.collapseAll();
+        }
+    }
+
+    selectAll() {
+        if (this.tree) {
+            this.tree.nodeList().forEach(node => {
+                if (!(this.disableRootSelector && node === this.tree.rootNode)) {
+                    node.selected = true;
+                }
+            });
+        }
+    }
+
+    deselectAll() {
+        if (this.tree) {
+            this.tree.nodeList().forEach(node => {
+                if (!(this.disableRootSelector && node === this.tree.rootNode)) {
+                    node.selected = false;
+                }
+            });
+        }
+    }
+
+    handleNodeCheck(node: TreeNode) {
+        // If needed, add logic here to handle the case where
+        // a node's checkbox was clicked.
+    }
+
 }
 
 
index 68e01fe..6d72d30 100644 (file)
@@ -113,20 +113,39 @@ export class Tree {
     }
 
     expandAll() {
-        this.nodeList().forEach(node => node.expanded = true);
+        if (this.rootNode) {
+            this.nodeList().forEach(node => node.expanded = true);
+        }
     }
 
     collapseAll() {
-        this.nodeList().forEach(node => node.expanded = false);
+        if (this.rootNode) {
+            this.nodeList().forEach(node => node.expanded = false);
+        }
     }
 
     selectedNode(): TreeNode {
         return this.nodeList().filter(node => node.selected)[0];
     }
 
+    selectedNodes(): TreeNode[] {
+        return this.nodeList().filter(node => node.selected);
+    }
+
     selectNode(node: TreeNode) {
         this.nodeList().forEach(n => n.selected = false);
         node.selected = true;
     }
+
+    selectNodes(nodes: TreeNode[]) {
+        this.nodeList().forEach(n => n.selected = false);
+        nodes.forEach(node => {
+            let foundNode = this.findNode(node.id);
+            if (foundNode) {
+                foundNode.selected = true;
+            }
+        });
+    }
+
 }