From 45f77014da1cb694e42d1cd1d035c1c3f6fcb313 Mon Sep 17 00:00:00 2001
From: waruneeauy <warunee.auy@gmail.com>
Date: Thu, 10 Oct 2024 14:48:22 +0700
Subject: [PATCH] fixing load data source

---
 .../components/StructureMain.vue              |  2 ++
 .../components/StructureOrgMain.vue           | 22 +++++++++++++------
 src/modules/02_organization/store/chart.ts    |  9 ++++++++
 3 files changed, 26 insertions(+), 7 deletions(-)
 create mode 100644 src/modules/02_organization/store/chart.ts

diff --git a/src/modules/02_organization/components/StructureMain.vue b/src/modules/02_organization/components/StructureMain.vue
index c6da85fa5..626fc5c24 100644
--- a/src/modules/02_organization/components/StructureMain.vue
+++ b/src/modules/02_organization/components/StructureMain.vue
@@ -8,7 +8,9 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useStructStore } from "@/modules/02_organization/store/chart";
 
+const storeOrg = useStructStore();
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const store = useOrganizational();
diff --git a/src/modules/02_organization/components/StructureOrgMain.vue b/src/modules/02_organization/components/StructureOrgMain.vue
index 817b36c4e..4eaf3a801 100644
--- a/src/modules/02_organization/components/StructureOrgMain.vue
+++ b/src/modules/02_organization/components/StructureOrgMain.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted, watch, onBeforeMount } from "vue";
 import { useQuasar } from "quasar";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
@@ -9,11 +9,13 @@ import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import { useStructStore } from "@/modules/02_organization/store/chart";
 import avatar from "@/assets/avatar_user.jpg";
 import chartData from "@/assets/orgChartData";
 
 const mixin = useCounterMixin();
 const store = useOrganizational();
+const storeOrg = useStructStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const $q = useQuasar(); // show dialog
 
@@ -34,10 +36,11 @@ async function fetchOrgChart() {
       .get(urlRequest)
       .then(async (response) => {
         if (response.data.result.length > 0) {
-          const data = response.data.result;
-
+          const data = await response.data.result;
           const updatedData = await Promise.all(data.map(addAvatarToData));
-          dataSource.value = updatedData[0];
+
+          dataSource.value = await updatedData[0];
+          storeOrg.dataSource = updatedData[0];
 
           if (dataSourceLock.value === undefined)
             dataSourceLock.value = dataSource.value;
@@ -109,7 +112,7 @@ function savePDF() {
 
 watch(
   [() => store.typeOrganizational, () => store.historyId],
-  async ([new1], [old1]) => {
+  ([new1], [old1]) => {
     if (new1 === "old" && old1 !== "old") {
       store.historyId = "";
     }
@@ -121,7 +124,7 @@ watch(
         ? store.draftId
         : store.historyId;
 
-    await fetchOrgChart();
+    fetchOrgChart();
   }
 );
 
@@ -133,7 +136,11 @@ onMounted(async () => {
       ? store.draftId
       : store.historyId;
 
-  await fetchOrgChart();
+  fetchOrgChart();
+});
+
+onBeforeMount(() => {
+  storeOrg.dataSource = undefined;
 });
 </script>
 
@@ -158,6 +165,7 @@ onMounted(async () => {
       <q-separator />
       <div style="overflow-x: auto; overflow-y: auto" class="q-pt-md">
         <OrgChart
+          v-if="storeOrg.dataSource"
           style="height: 70vh"
           ref="chartRef"
           class="org"
diff --git a/src/modules/02_organization/store/chart.ts b/src/modules/02_organization/store/chart.ts
new file mode 100644
index 000000000..8fb92354a
--- /dev/null
+++ b/src/modules/02_organization/store/chart.ts
@@ -0,0 +1,9 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useStructStore = defineStore("StructStore", () => {
+  const dataSource = ref();
+  return {
+    dataSource,
+  };
+});