โครงสร้างอัตรากำลัง => เพิ่ม permission

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

@@ -8,60 +8,36 @@ import config from "@/app.config";
 import { OrgChart } from "bma-org-chart";
 import "bma-org-chart/org-chart.css";
 import { useCounterMixin } from "@/stores/mixin";
-
+import { useOrganizational } from "@/modules/02_organization/store/organizational";
+import avatar from "@/assets/avatar_user.jpg";
 import chartData from "@/assets/orgChartData";
 
 const mixin = useCounterMixin();
+const store = useOrganizational();
 const { showLoader, hideLoader, messageError } = mixin;
 const $q = useQuasar(); // show dialog
 
-const dataSource = ref(chartData);
-// const dataSource = ref() // ข้อมูล Chart
+const dataSource = ref(chartData); // ข้อมูล Chart
 
 const rootOrgID = ref(); // org id ของ root ตัวปัจจุบันที่เลือกอยู่
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const chartRef = ref(); // อ้างอิงไปที่ตัว chart
-const savePNG = () => {
-  chartRef.value.savePNG();
-};
-const savePDF = () => {
-  chartRef.value.savePDF();
-};
-
-onMounted(async () => {
-  await fetchTreeRoot();
-  await fetchOrgChart();
-});
 
 /**
- * อ่าน Root ของข้อมูลทั้งหมดก่อน
+ * fetch ข้อมูล Chart โครงสร้าง
  */
-const fetchTreeRoot = async () => {
+function fetchOrgChart() {
   showLoader();
-  let urlRequest = config.API.chartGetTreeRoot;
-  await http
+  let urlRequest = config.API.orgChart(rootOrgID.value);
+  http
     .get(urlRequest)
-    .then((response) => {
+    .then(async (response) => {
       if (response.data.result.length > 0) {
-        rootOrgID.value = response.data.result[0].organizationId;
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-};
+        const data = response.data.result;
+
+        const updatedData = await Promise.all(data.map(addAvatarToData));
+        dataSource.value = updatedData[0];
 
-const fetchOrgChart = async () => {
-  showLoader();
-  let urlRequest = config.API.chartGetOrg(rootOrgID.value);
-  await http
-    .get(urlRequest)
-    .then((response) => {
-      if (response.data.result.length > 0) {
-        dataSource.value = response.data.result[0];
         if (dataSourceLock.value === undefined)
           dataSourceLock.value = dataSource.value;
       }
@@ -72,24 +48,79 @@ const fetchOrgChart = async () => {
     .finally(() => {
       hideLoader();
     });
-};
+}
+
+/**
+ * map ข้อมูล Chart
+ * @param item  ข้อมูล Chart
+ */
+async function addAvatarToData(item: any) {
+  // เพิ่ม avatar ให้กับ item
+  const updatedItem = {
+    ...item,
+    avatar: item.avatar ? await fetchProfile(item.avatar) : avatar,
+    // ตรวจสอบว่า item มี children หรือไม่
+    children: item.children
+      ? await Promise.all(item.children.map(addAvatarToData))
+      : [],
+  };
+  return updatedItem;
+}
+
+/**
+ * fetch รูปโปรไฟล์ return ลิงค์ download ไฟล์
+ * @param path ไฟล์รูป
+ */
+async function fetchProfile(path: string) {
+  try {
+    const res = await http.get(config.API.filefullPath(path));
+    return res.data.downloadUrl; // คืนค่า URL ของ avatar
+  } catch (err) {
+    return avatar; // คืนค่า default avatar ถ้าเกิดข้อผิดพลาด
+  }
+}
 
 /**
  * เมื่อมีการคลิกที่ Chart ให้อ่าน ID ของหน่วยงานที่ถูกคลิก แล้วดึงข้อมูล Chart ของหน่วยงานนั้น ๆ จาก API
  * @param data
  */
-const refreshChart = async (data: any) => {
+async function refreshChart(data: any) {
   if (data.value !== undefined) rootOrgID.value = data.value;
   else rootOrgID.value = data;
   if (rootOrgID.value !== 0) await fetchOrgChart();
   if (data.value !== undefined) data.value = 0;
-};
+}
+
+/**
+ * โหลด Chart รูป
+ */
+function savePNG() {
+  chartRef.value.savePNG();
+}
+
+/**
+ * โหลด Chart PDF
+ */
+function savePDF() {
+  chartRef.value.savePDF();
+}
+
+onMounted(async () => {
+  rootOrgID.value =
+    store.typeOrganizational === "current"
+      ? store.activeId
+      : store.typeOrganizational === "draft"
+      ? store.draftId
+      : store.historyId;
+
+  await fetchOrgChart();
+});
 </script>
 
 <template>
   <!-- <div class="toptitle text-dark col-12 row items-center">แผนภูมิองค์กร</div> -->
   <div class="text-dark">
-    <q-card flat bordered class="col-12 q-mt-sm">
+    <q-card class="col-12 q-mt-sm">
       <div class="q-pa-sm">
         <q-btn flat round color="primary" @click="savePNG()" icon="mdi-image">
           <q-tooltip> ดาวน์โหลด PNG </q-tooltip>