foo
authorJason Etheridge <jason@EquinoxOLI.org>
Thu, 4 May 2023 15:13:50 +0000 (11:13 -0400)
committerJason Etheridge <phasefx@gmail.com>
Thu, 25 May 2023 16:45:32 +0000 (12:45 -0400)
Signed-off-by: Jason Etheridge <jason@EquinoxOLI.org>
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
Open-ILS/src/eg2/src/app/staff/admin/server/custom-org-unit-trees.component.html
Open-ILS/src/eg2/src/app/staff/admin/server/custom-org-unit-trees.component.ts

index 67361e2..df27753 100644 (file)
@@ -6,7 +6,11 @@
 <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)"
+    <input *ngIf="showSelectors
+       ? (node === tree.rootNode
+          ? !disableRootSelector
+          : true)
+       : false"
       type="checkbox"
       [(ngModel)]="node.selected"
       (change)="handleNodeCheck(node)" />
index 5709e58..599dae4 100644 (file)
@@ -52,8 +52,10 @@ export class TreeComponent {
     @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
+    @Input() toggleOnClick: boolean = false; // selectNode vs toggleNodeSelection
 
     @Output() nodeClicked: EventEmitter<TreeNode>;
+    @Output() nodeChecked: EventEmitter<TreeNode>;
 
     constructor() {
         this.nodeClicked = new EventEmitter<TreeNode>();
@@ -65,7 +67,25 @@ export class TreeComponent {
     }
 
     handleNodeClick(node: TreeNode) {
-        this.tree.selectNode(node);
+        console.log('tree: handleNodeClick',node.label);
+        if (this.disableRootSelector && node === this.tree.rootNode) {
+            return;
+        }
+        if (this.toggleOnClick) {
+            this.tree.toggleNodeSelection(node);
+        } else {
+            this.tree.selectNode(node);
+        }
+        this.nodeClicked.emit(node);
+    }
+
+    handleNodeCheck(node: TreeNode) {
+        // If needed, add logic here to handle the case where
+        // a node's checkbox was clicked.
+        console.log('tree: handleNodeCheck',node.label);
+        console.log('tree: selected is', node.selected);
+        // since ngModel is node.selected, we don't need to set it ourselves
+        //this.handleNodeClick(node);
         this.nodeClicked.emit(node);
     }
 
@@ -84,7 +104,7 @@ export class TreeComponent {
     selectAll() {
         if (this.tree) {
             this.tree.nodeList().forEach(node => {
-                if (!(this.disableRootSelector && node === this.tree.rootNode)) {
+                if (!(this.disableRootSelector && (node === this.tree.rootNode))) {
                     node.selected = true;
                 }
             });
@@ -94,18 +114,13 @@ export class TreeComponent {
     deselectAll() {
         if (this.tree) {
             this.tree.nodeList().forEach(node => {
-                if (!(this.disableRootSelector && node === this.tree.rootNode)) {
+                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 047e92f..fd76d82 100644 (file)
@@ -144,11 +144,29 @@ export class Tree {
     }
 
     selectNode(node: TreeNode) {
+        console.log('tree: selectNode',node.label);
         this.nodeList().forEach(n => n.selected = false);
+        console.log('tree: selected was', node.selected);
         node.selected = true;
+        console.log('tree: selected is now', node.selected);
+    }
+
+    unSelectNode(node: TreeNode) {
+        console.log('tree: unSelectNode',node.label);
+        console.log('tree: selected was', node.selected);
+        node.selected = false;
+        console.log('tree: selected is now', node.selected);
+    }
+
+    toggleNodeSelection(node: TreeNode) {
+        console.log('tree: toggleNodeSelected', node.label);
+        console.log('tree: selected was', node.selected);
+        node.selected = !node.selected;
+        console.log('tree: selected is now', node.selected);
     }
 
     selectNodes(nodes: TreeNode[]) {
+        console.log('tree: selectNodes',nodes.length);
         this.nodeList().forEach(n => n.selected = false);
         nodes.forEach(node => {
             let foundNode = this.findNode(node.id);
index 2b7b12a..a9ac6f2 100644 (file)
     <h3 i18n>Full Org Unit Tree</h3>
     <div class="border rounded p-1" >
       <eg-tree
-        showTogglers="true"
-        showSelectors="true"
-        disableRootSelector="true"
+        [showTogglers]="true"
+        [showSelectors]="true"
+        [disableRootSelector]="true"
+        [toggleOnClick]="true"
         [tree]="tree"
-        (nodeClicked)="nodeClicked($event)">
-        <button [disabled]="copyNodesDisabled" (click)="copyNodes()" i18n>Copy Selected Nodes</button>
+        (nodeClicked)="nodeClicked($event)"
+        (nodeChecked)="nodeChecked($event)">
+        <button [disabled]="copyNodesDisabled" (click)="copyNodes()" i18n>Copy Selected Nodes to Custom Tree</button>
       </eg-tree>
     </div>
   </div>
     <h3 i18n>Custom Org Unit Tree</h3>
     <div class="border rounded p-1" >
       <eg-tree
-        showTogglers="true"
-        showSelectors="true"
-        disableRootSelector="false"
+        [showTogglers]="true"
+        [showSelectors]="true"
+        [disableRootSelector]="false"
+        [toggleOnClick]="true"
         [tree]="custom_tree"
-        (nodeClicked)="custom_nodeClicked($event)">
+        (nodeClicked)="custom_nodeClicked($event)"
+        (nodeChecked)="custon_nodeChecked($event)">
       </eg-tree>
     </div>
   </div>
index 1924e0e..511f866 100644 (file)
@@ -167,16 +167,26 @@ export class CustomOrgUnitTreesComponent implements OnInit {
 
     nodeClicked($event: any) {
         //this.selected = $event;
-        console.log($event);
+        console.log('custom: nodeClicked',typeof $event);
         this.copyNodesDisabled = !this.isCopyNodesAllowed();
     }
 
     custom_nodeClicked($event: any) {
         //this.custom_selected = $event;
-        console.log($event);
+        console.log('custom: custom_nodeClicked',typeof $event);
         this.copyNodesDisabled = !this.isCopyNodesAllowed();
     }
 
+    nodeChecked($event: any) {
+        //this.selected = $event;
+        console.log('custom: nodeChecked',typeof $event);
+    }
+
+    custom_nodeChecked($event: any) {
+        //this.custom_selected = $event;
+        console.log('custom: custom_nodeChecked',typeof $event);
+    }
+
     isCopyNodesAllowed(): boolean {
       const sourceNodes = this.tree.selectedNodes();
       const targetNodes = this.custom_tree.selectedNodes();
@@ -205,7 +215,8 @@ export class CustomOrgUnitTreesComponent implements OnInit {
     copyNodes() {
       const sourceNodes = this.tree.selectedNodes();
       const targetNode = this.custom_tree.selectedNode();
-      if (!this.isCopyNodesAllowed()) {
+      this.copyNodesDisabled = !this.isCopyNodesAllowed();
+      if (this.copyNodesDisabled) {
           return;
       }
       for (let sourceNode of sourceNodes) {