fetch Structhre

src/modules/02_organization/components/DialogHistoryPos.vue

@@ -182,6 +182,7 @@ watch(
         :close="
           () => {
             modal = false;
+            rows = [];
           }
         "
       />

src/modules/02_organization/components/StructureOrgMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
@@ -27,27 +27,29 @@ const chartRef = ref(); // อ้างอิงไปที่ตัว chart
  * fetch ข้อมูล Chart โครงสร้าง
  */
 async function fetchOrgChart() {
-  showLoader();
-  let urlRequest = config.API.orgChart(rootOrgID.value);
-  await http
-    .get(urlRequest)
-    .then(async (response) => {
-      if (response.data.result.length > 0) {
-        const data = response.data.result;
+  if (rootOrgID.value) {
+    showLoader();
+    let urlRequest = config.API.orgChart(rootOrgID.value);
+    await http
+      .get(urlRequest)
+      .then(async (response) => {
+        if (response.data.result.length > 0) {
+          const data = response.data.result;
 
-        const updatedData = await Promise.all(data.map(addAvatarToData));
-        dataSource.value = updatedData[0];
+          const updatedData = await Promise.all(data.map(addAvatarToData));
+          dataSource.value = updatedData[0];
 
-        if (dataSourceLock.value === undefined)
-          dataSourceLock.value = dataSource.value;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+          if (dataSourceLock.value === undefined)
+            dataSourceLock.value = dataSource.value;
+        }
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  }
 }
 
 /**
@@ -105,6 +107,24 @@ function savePDF() {
   chartRef.value.savePDF();
 }
 
+watch(
+  [() => store.typeOrganizational, () => store.historyId],
+  async ([new1], [old1]) => {
+    if (new1 === "old" && old1 !== "old") {
+      store.historyId = "";
+    }
+
+    rootOrgID.value =
+      store.typeOrganizational === "current"
+        ? store.activeId
+        : store.typeOrganizational === "draft"
+        ? store.draftId
+        : store.historyId;
+
+    await fetchOrgChart();
+  }
+);
+
 onMounted(async () => {
   rootOrgID.value =
     store.typeOrganizational === "current"