From 7a5860f97bd938012053ac944a73982ebfb9c1f9 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: Fri, 7 Apr 2023 09:49:35 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For OrganizationChart

---
 api-generator/components/organizationchart.js          | 10 +++++++++-
 .../lib/organizationchart/OrganizationChart.d.ts       | 10 ++++++++++
 .../lib/organizationchart/OrganizationChart.spec.js    |  3 ---
 .../lib/organizationchart/OrganizationChartNode.vue    |  8 +++++++-
 4 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/organizationchart.js b/api-generator/components/organizationchart.js
index b5fce2de9..244a0b017 100644
--- a/api-generator/components/organizationchart.js
+++ b/api-generator/components/organizationchart.js
@@ -78,11 +78,19 @@ const OrganizationChartEvents = [
     }
 ];
 
+const OrganizationChartSlots = [
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
+    }
+];
+
 module.exports = {
     organizationchart: {
         name: 'OrganizationChart',
         description: 'OrganizationChart visualizes hierarchical organization data.',
         props: OrganizationChartProps,
-        events: OrganizationChartEvents
+        events: OrganizationChartEvents,
+        slots: OrganizationChartSlots
     }
 };
diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts
index b39eec1aa..69f002836 100755
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/components/lib/organizationchart/OrganizationChart.d.ts
@@ -104,6 +104,16 @@ export interface OrganizationChartSlots {
      * @todo
      */
     [key: string]: (node: any) => VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    togglericon(scope: {
+        /**
+         * Curent state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/organizationchart/OrganizationChart.spec.js b/components/lib/organizationchart/OrganizationChart.spec.js
index ed019fa5c..077b25edc 100644
--- a/components/lib/organizationchart/OrganizationChart.spec.js
+++ b/components/lib/organizationchart/OrganizationChart.spec.js
@@ -124,20 +124,17 @@ describe('OrganizationChart.vue', () => {
         expect(wrapper.find('.p-organizationchart.p-component').exists()).toBe(true);
         expect(wrapper.find('table.p-organizationchart-table').exists()).toBe(true);
         expect(wrapper.findAll('.p-node-toggler-icon').length).toBe(5);
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
     });
 
     it('should collapsed and expand', async () => {
         await wrapper.vm.onNodeToggle(wrapper.vm.value);
 
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-up');
         expect(wrapper.emitted()['node-collapse'][0]).toEqual([wrapper.vm.value]);
         expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ 0: true }]);
         expect(wrapper.vm.d_collapsedKeys).toEqual({ 0: true });
 
         await wrapper.vm.onNodeToggle(wrapper.vm.value);
 
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
         expect(wrapper.emitted()['node-expand'][0]).toEqual([wrapper.vm.value]);
         expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{}]);
         expect(wrapper.vm.d_collapsedKeys).toEqual({});
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index befc2dfac..0cc1b7fac 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -6,7 +6,7 @@
                     <div :class="nodeContentClass" @click="onNodeClick">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
-                            <i class="p-node-toggler-icon pi" :class="{ 'pi-chevron-down': expanded, 'pi-chevron-up': !expanded }"></i>
+                            <component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" />
                         </a>
                     </div>
                 </td>
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronUpIcon from 'primevue/icon/chevronup';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -132,6 +134,10 @@ export default {
         toggleable() {
             return this.collapsible && this.node.collapsible !== false && !this.leaf;
         }
+    },
+    components: {
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronUpIcon: ChevronUpIcon
     }
 };
 </script>