templateRef; I'm shocked that this compiled without error on the first go
authorJason Etheridge <phasefx@gmail.com>
Wed, 31 May 2023 20:01:13 +0000 (16:01 -0400)
committerJason Etheridge <phasefx@gmail.com>
Wed, 31 May 2023 20:01:13 +0000 (16:01 -0400)
Signed-off-by: Jason Etheridge <phasefx@gmail.com>
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/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 73057da..73b8d22 100644 (file)
@@ -27,6 +27,7 @@
     <div class="eg-tree-node" [ngClass]="{active : node.selected}">
       <a [routerLink]="" (click)="handleNodeClick(node)">{{node.label}}</a>
     </div>
+    <ng-container *ngTemplateOutlet="selectedRowTrailingTemplate; context: {$implicit: node}"></ng-container>
   </div>
 </div>
 <ng-content select="[footer]"></ng-content>
index 0d91130..324da2e 100644 (file)
@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Component, Input, Output, EventEmitter, TemplateRef} from '@angular/core';
 import {Tree, TreeNode} from './tree';
 
 /*
@@ -53,6 +53,7 @@ export class TreeComponent {
     @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
+    @Input() selectedRowTrailingTemplate: TemplateRef<any>;
 
     @Output() nodeClicked: EventEmitter<TreeNode>;
     @Output() nodeChecked: EventEmitter<TreeNode>;
index d998366..e285924 100644 (file)
   <div class="col-lg-4 org-unit-types-col-aside">
     <h3 i18n>Custom Org Unit Tree</h3>
     <div class="border rounded p-1" >
+      <ng-template #selectedRowButtons let-node>
+          <button type="button" class="btn btn-link" [disabled]="deleteNodesDisabled" (click)="deleteNode(node)" i18n>Delete</button>
+          <button type="button" class="btn btn-link" [disabled]="moveNodeUpDisabled" (click)="moveNodeUp(node)" i18n>Up</button>
+          <button type="button" class="btn btn-link" [disabled]="moveNodeDownDisabled" (click)="moveNodeDown(node)" i18n>Down</button>
+          <button type="button" class="btn btn-link" [disabled]="moveNodeElsewhereDisabled" (click)="moveNodeElsewhere(node)" i18n>Move</button>
+      </ng-template>
       <eg-tree
         [showTogglers]="true"
         [showSelectors]="true"
         [toggleOnClick]="true"
         [tree]="custom_tree"
         (nodeClicked)="custom_nodeClicked($event)"
-        (nodeChecked)="custon_nodeChecked($event)">
+        (nodeChecked)="custon_nodeChecked($event)"
+        [selectedRowTrailingTemplate]="selectedRowButtons">
         <div header>
-          <button type="button" class="btn btn-link" [disabled]="deleteNodesDisabled" (click)="deleteNodes()" i18n>Delete Selected Nodes</button>
-          <button type="button" class="btn btn-link" [disabled]="moveNodeUpDisabled" (click)="moveNodeUp()" i18n>Move Node Up</button>
-          <button type="button" class="btn btn-link" [disabled]="moveNodeDownDisabled" (click)="moveNodeDown()" i18n>Move Node Down</button>
-          <button type="button" class="btn btn-link" [disabled]="moveNodeElsewhereDisabled" (click)="moveNodeElsewhere()" i18n>Move Node Elsewhere</button>
         </div>
         <div footer>
           <button type="button" class="btn btn-link" *ngIf="!active" (click)="active = !active" i18n>Activate Tree</button>
index 52f05ab..55da0d0 100644 (file)
@@ -281,8 +281,8 @@ export class CustomOrgUnitTreesComponent implements OnInit {
         return true;
     }
 
-    deleteNodes() {
-        const targetNodes = this.custom_tree.selectedNodes();
+    deleteNodes(nodes: any[]) {
+        const targetNodes = nodes || this.custom_tree.selectedNodes();
         this.deleteNodesDisabled = !this.isDeleteNodesAllowed();
         if (this.deleteNodesDisabled) {
             return;
@@ -300,6 +300,11 @@ export class CustomOrgUnitTreesComponent implements OnInit {
         this.deleteNodesDisabled = !this.isDeleteNodesAllowed();
     }
 
+    deleteNode(node: any) {
+        const targetNodes = [node] || [this.custom_tree.selectedNode()];
+        this.deleteNodes(targetNodes);
+    }
+
     isMoveNodeUpAllowed(): boolean {
         const targetNodes = this.custom_tree.selectedNodes();
         if (targetNodes.length !== 1) {
@@ -319,11 +324,11 @@ export class CustomOrgUnitTreesComponent implements OnInit {
         return true;
     }
 
-    moveNodeUp() {
+    moveNodeUp(node: any) {
         this.moveNodeUpDisabled = !this.isMoveNodeUpAllowed();
         this.moveNodeDownDisabled = !this.isMoveNodeDownAllowed();
         this.moveNodeElsewhereDisabled = !this.isMoveNodeElsewhereAllowed();
-        const selectedNode = this.custom_tree.selectedNode();
+        const selectedNode = node || this.custom_tree.selectedNode();
         if (this.moveNodeUpDisabled) {
             return;
         }
@@ -364,11 +369,11 @@ export class CustomOrgUnitTreesComponent implements OnInit {
         return true;
     }
 
-    moveNodeDown() {
+    moveNodeDown(node: any) {
         this.moveNodeDownDisabled = !this.isMoveNodeDownAllowed();
         this.moveNodeUpDisabled = !this.isMoveNodeUpAllowed();
         this.moveNodeElsewhereDisabled = !this.isMoveNodeElsewhereAllowed();
-        const selectedNode = this.custom_tree.selectedNode();
+        const selectedNode = node || this.custom_tree.selectedNode();
         if (this.moveNodeDownDisabled) {
             return;
         }
@@ -393,8 +398,8 @@ export class CustomOrgUnitTreesComponent implements OnInit {
         return selectedNodes.length === 1 && selectedNodes[0] !== this.custom_tree.rootNode;
     }
 
-    moveNodeElsewhere() {
-        const selectedNode = this.custom_tree.selectedNode();
+    moveNodeElsewhere(node: any) {
+        const selectedNode = node || this.custom_tree.selectedNode();
         console.log(selectedNode);
         this.moveNodeElsewhereDialog.open({size: 'lg'}).subscribe(
             result => {