<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)" />
@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>();
}
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);
}
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;
}
});
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.
- }
-
}
}
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);
<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>
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();
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) {