fixing load data source

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();

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"

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,
+  };
+});