From b1eb42aca5ad059d20d4403e39144d4e0bdae346 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 6 Jul 2023 13:54:33 +0300
Subject: [PATCH] Refactor #3965 - Refactor on OrganizationChart

---
 .../BaseOrganizationChart.vue                 |  6 ++---
 .../OrganizationChartNode.vue                 | 24 +++----------------
 2 files changed, 6 insertions(+), 24 deletions(-)

diff --git a/components/lib/organizationchart/BaseOrganizationChart.vue b/components/lib/organizationchart/BaseOrganizationChart.vue
index 2af5568a8..cb77fccf1 100644
--- a/components/lib/organizationchart/BaseOrganizationChart.vue
+++ b/components/lib/organizationchart/BaseOrganizationChart.vue
@@ -60,14 +60,14 @@ const styles = `
 const classes = {
     root: 'p-organizationchart p-component',
     table: 'p-organizationchart-table',
-    node: ({ props, instance }) => ['p-organizationchart-node-content', props.node.styleClass, { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
+    node: ({ instance }) => ['p-organizationchart-node-content', { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
     nodeToggler: 'p-node-toggler',
     nodeTogglerIcon: 'p-node-toggler-icon',
     lines: 'p-organizationchart-lines',
     lineDown: 'p-organizationchart-line-down',
     lines: 'p-organizationchart-lines',
-    lineLeft: ({ i }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(i === 0) }],
-    lineRight: ({ props, i }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(i === props.node.children.length - 1) }],
+    lineLeft: ({ index }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(index === 0) }],
+    lineRight: ({ props, index }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(index === props.node.children.length - 1) }],
     nodes: 'p-organizationchart-nodes'
 };
 
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index 7b1481d6d..812f3a1fc 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -3,7 +3,7 @@
         <tbody v-bind="ptm('body')">
             <tr v-if="node" v-bind="ptm('row')">
                 <td :colspan="colspan" v-bind="ptm('cell')">
-                    <div :class="cx('node')" @click="onNodeClick" v-bind="getPTOptions('node')">
+                    <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
                             <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
@@ -25,26 +25,8 @@
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td
-                            :class="
-                                cx('lineLeft', {
-                                    i
-                                })
-                            "
-                            v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
-                        >
-                            &nbsp;
-                        </td>
-                        <td
-                            :class="
-                                cx('lineRight', {
-                                    i
-                                })
-                            "
-                            v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"
-                        >
-                            &nbsp;
-                        </td>
+                        <td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
+                        <td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>