--- /dev/null
+<ng-template #dialogContent>
+ <div class="modal-header bg-info">
+ <h4 class="modal-title" i18n>Move Node Elsewhere</h4>
+ <button type="button" class="btn-close btn-close-white"
+ i18n-aria-label aria-label="Close"
+ (click)="close()"></button>
+ </div>
+ <div class="modal-body">
+ <h3 i18n>Custom Org Unit Tree</h3>
+ <div class="border rounded p-1" >
+ <eg-tree
+ [showTogglers]="true"
+ [showSelectors]="true"
+ [disableRootSelector]="false"
+ [toggleOnClick]="true"
+ [tree]="selectionTree"
+ (nodeClicked)="custom_nodeClicked($event)">
+ </eg-tree>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-success"
+ [disabled]="moveNodeHereDisabled"
+ (click)="moveNodeHere()" i18n>Move Node Here</button>
+ <button type="button" class="btn btn-warning"
+ (click)="close()" i18n>Cancel Move</button>
+ </div>
+</ng-template>
--- /dev/null
+import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {DialogComponent} from '@eg/share/dialog/dialog.component';
+import {Tree} from '@eg/share/tree/tree';
+import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+ selector: 'eg-custom-org-unit-trees-dialog',
+ templateUrl: './custom-org-unit-trees-dialog.component.html'
+})
+
+export class CustomOrgUnitTreesDialogComponent
+ extends DialogComponent implements OnChanges {
+
+ @Input() customTree: Tree;
+ selectionTree: Tree;
+
+ moveNodeHereDisabled: boolean = false;
+
+ constructor(
+ private modal: NgbModal
+ ) {
+ super(modal);
+ if (this.modal) {} // de-lint
+ }
+
+ ngOnChanges(changes: SimpleChanges) {
+ if (changes.customTree && changes.customTree.currentValue) {
+ this.selectionTree = changes.customTree.currentValue?.clone();
+ this.moveNodeHereDisabled = !this.isMoveNodeHereAllowed();
+ }
+ }
+
+ custom_nodeClicked($event: any) {
+ console.log('custom: custom_nodeClicked',typeof $event);
+ this.moveNodeHereDisabled = !this.isMoveNodeHereAllowed();
+ }
+
+ isMoveNodeHereAllowed(): boolean {
+ const selectedNodes = this.customTree.selectedNodes();
+ return selectedNodes.length === 1 && selectedNodes[0] !== this.customTree.rootNode;
+ }
+ moveNodeHere() {
+ const targetNodeInSelectionTree = this.selectionTree.selectedNode();
+ const selectedNode = this.customTree.selectedNode();
+ this.moveNodeHereDisabled = !this.isMoveNodeHereAllowed();
+ if (this.moveNodeHereDisabled) {
+ return;
+ }
+ if (targetNodeInSelectionTree) {
+ try {
+ // Find the equivalent node in customTree
+ const targetNodeInCustomTree = this.customTree.findNodesByFieldAndValue('label',targetNodeInSelectionTree.label)[0];
+
+ // Prevent a node from becoming its own parent.
+ if (selectedNode === targetNodeInCustomTree || this.customTree.findParentNode(targetNodeInCustomTree) === selectedNode) {
+ return;
+ }
+
+ // Remove the selected node from its current parent's children.
+ let parentNode = this.customTree.findParentNode(selectedNode);
+ if (parentNode) {
+ let index = parentNode.children.indexOf(selectedNode);
+ if (index !== -1) {
+ parentNode.children.splice(index, 1);
+ }
+ }
+
+ // Add the selected node as the last child of the target node in customTree.
+ if(targetNodeInCustomTree) {
+ targetNodeInCustomTree.children.push(selectedNode);
+ }
+ this.close(true);
+ } catch(E) {
+ console.error('moveNodeHere',E);
+ }
+ }
+ }
+
+}