Refactor #3965 - Refactor on OrganizationChart

primefaces · Jul 6, 2023 · b1eb42a · b1eb42a
1 parent a4529e5
commit b1eb42a
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 24 deletions.
diff --git 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
@@ -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>