Selection for Organization Chart

src/components/organizationchart/OrganizationChart.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="p-organizationchart p-component">
-        <OrganizationChartNode :node="value" :templates="$scopedSlots" @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible" />
+        <OrganizationChartNode :node="value" :templates="$scopedSlots" 
+            @node-toggle="onNodeToggle" :collapsedKeys="d_collapsedKeys" :collapsible="collapsible"
+            @node-click="onNodeClick" :selectionMode="selectionMode" :selectionKeys="selectionKeys" />
     </div>
 </template>
 
@@ -13,6 +15,14 @@ export default {
             type: null,
             default: null
         },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
         collapsible: {
             type: Boolean,
             default: false
@@ -33,11 +43,39 @@ export default {
         }
     },
     methods: {
-        onNodeToggle(key) {
+        onNodeClick(node) {
-            if (this.d_collapsedKeys[key])
+            const key = node.key;
+
+            if (this.selectionMode) {
+                let _selectionKeys = this.selectionKeys ? {...this.selectionKeys} : {};
+
+                if (_selectionKeys[key]) {
+                    delete _selectionKeys[key];
+                    this.$emit('node-unselect', node);
+                }
+                else {
+                    if (this.selectionMode === 'single') {
+                        _selectionKeys = {};
+                    }
+
+                    _selectionKeys[key] = true;
+                    this.$emit('node-select', node);
+                }
+
+                this.$emit('update:selectionKeys', _selectionKeys);
+            }
+        },
+        onNodeToggle(node) {
+            const key = node.key;
+
+            if (this.d_collapsedKeys[key]) {
                 delete this.d_collapsedKeys[key];
-            else
+                this.$emit('node-expand', node);
+            }
+            else {
                 this.d_collapsedKeys[key] = true;
+                this.$emit('node-collapse', node);
+            }                
 
             this.d_collapsedKeys = {...this.d_collapsedKeys};
             this.$emit('update:collapsedKeys', this.d_collapsedKeys);

src/components/organizationchart/OrganizationChartNode.vue

@@ -31,7 +31,8 @@
             </tr>
             <tr :style="childStyle" class="p-organizationchart-nodes">
                 <td v-for="child of node.children" :key="child.key" colspan="2">
-                    <sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible" />
+                    <sub-node :node="child" :templates="templates" :collapsedKeys="collapsedKeys" @node-toggle="onChildNodeToggle" :collapsible="collapsible" 
+                                :selectionMode="selectionMode" :selectionKeys="selectionKeys" @node-click="onChildNodeClick" />
                 </td>
             </tr>
         </tbody>
@@ -39,6 +40,8 @@
 </template>
 
 <script>
+import DomHandler from '../utils/DomHandler';
+
 const OrganizationChartNodeTemplate = {
     functional: true,
     props: {
@@ -66,14 +69,6 @@ export default {
             type: null,
             default: null
         },
-        selected: {
-            type: Boolean,
-            default: false
-        },
-        selectable: {
-            type: Boolean,
-            default: false
-        },
         templates: {
             type: null,
             default: null
@@ -85,17 +80,34 @@ export default {
         collapsedKeys: {
             type: null,
             default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
         }
     },
     methods: {
-        onNodeClick() {
+        onNodeClick(event) {
+            if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
+                return;
+            }
 
+            if (this.selectionMode) {
+                this.$emit('node-click', this.node);
+            }
+        },
+        onChildNodeClick(node) {
+            this.$emit('node-click', node);
         },
         toggleNode() {
-            this.$emit('node-toggle', this.node.key);
+            this.$emit('node-toggle', this.node);
         },
-        onChildNodeToggle(key) {
+        onChildNodeToggle(node) {
-            this.$emit('node-toggle', key);
+            this.$emit('node-toggle', node);
         }
     },
     computed: {
@@ -115,6 +127,12 @@ export default {
         },
         expanded() {
             return this.collapsedKeys[this.node.key] === undefined;
+        },
+        selectable() {
+            return this.selectionMode && this.node.selectable !== false;
+        },
+        selected() {
+            return this.selectable && this.selectionKeys && this.selectionKeys[this.node.key] === true;
         }
     },
     components: {

src/views/organizationchart/OrganizationChartDemo.vue

@@ -10,7 +10,8 @@
         <div class="content-section implementation">
             <h3 class="first">Advanced</h3>
             <p>Hierarchical data with zero configuration.</p>
-            <OrganizationChart :value="data1" :collapsible="true" class="company">
+            <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
+                @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
                 <template #person="slotProps">
                     <div class="node-header ui-corner-top">{{slotProps.node.data.label}}</div>
                     <div class="node-content">
@@ -55,11 +56,13 @@ export default {
                         children:[{
                             key: '0_0_0',
                             data: {label: 'Tax'},
+                            selectable: false,
                             styleClass: 'department-cfo'
                         },
                         {
                             key: '0_0_1',
                             data: {label: 'Legal'},
+                            selectable: false,
                             styleClass: 'department-cfo'
                         }],
                     },
@@ -71,6 +74,7 @@ export default {
                         children:[{
                             key: '0_1_0',
                             data: {label: 'Operations'},
+                            selectable: false,
                             styleClass: 'department-coo'
                         }]
                     },
@@ -82,31 +86,37 @@ export default {
                         children:[{
                             key: '0_2_0',
                             data: {label: 'Development'},
+                            selectable: false,
                             styleClass: 'department-cto',
                             children:[{
                                 key: '0_2_0_0',
                                 data: {label: 'Analysis'},
+                                selectable: false,
                                 styleClass: 'department-cto'
                             },
                             {
                                 key: '0_2_0_1',
                                 data: {label: 'Front End'},
+                                selectable: false,
                                 styleClass: 'department-cto'
                             },
                             {
                                 key: '0_2_0_2',
                                 data: {label: 'Back End'},
+                                selectable: false,
                                 styleClass: 'department-cto'
                             }]
                         },
                         {
                             key: '0_2_1',
                             data: {label: 'QA'},
+                            selectable: false,
                             styleClass: 'department-cto'
                         },
                         {
                             key: '0_2_2',
                             data: {label: 'R&D'},
+                            selectable: false,
                             styleClass: 'department-cto'
                         }]
                     }
@@ -146,7 +156,21 @@ export default {
                     }
                 ]
             },
-            selection: []
+            selection: {}
+        }
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.label, life: 3000});
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.label, life: 3000});
+        },
+        onNodeExpand(node) {
+            this.$toast.add({severity:'success', summary: 'Node Expanded', detail: node.data.label, life: 3000});
+        },
+        onNodeCollapse(node) {
+            this.$toast.add({severity:'success', summary: 'Node Collapsed', detail: node.data.label, life: 3000});
         }
     },
     components: {
@@ -195,10 +219,6 @@ export default {
         color: #ffffff;
     }
 
-    .p-organizationchart .p-highlight {
-        background-color: orange;
-    }
-
     .p-person .p-node-toggler {
         color: #495ebb !important;
     }