<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>
-import {Component, Input, Output, EventEmitter} from '@angular/core';
+import {Component, Input, Output, EventEmitter, TemplateRef} from '@angular/core';
import {Tree, TreeNode} from './tree';
/*
@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>;
<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>
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;
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) {
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;
}
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;
}
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 => {