From 0cc0b224c42c6074b0fcb180fa12209ae024c951 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 20 Aug 2024 10:37:03 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=82=E0=B8=84=E0=B8=A3=E0=B8=87=E0=B8=AA?=
 =?UTF-8?q?=E0=B8=A3=E0=B9=89=E0=B8=B2=E0=B8=87=E0=B8=AD=E0=B8=B1=E0=B8=95?=
 =?UTF-8?q?=E0=B8=A3=E0=B8=B2=E0=B8=81=E0=B8=B3=E0=B8=A5=E0=B8=B1=E0=B8=87?=
 =?UTF-8?q?=20=3D>=20=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1=20permi?=
 =?UTF-8?q?ssion?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/02_organizational/api.organization.ts |   1 +
 src/api/file/api.file.ts                      |   5 +-
 .../components/DialogFormPosition.vue         |   2 +-
 .../components/StructureOrgMain.vue           | 113 +++++++++++-------
 .../02_organization/components/TreeMain.vue   |   3 +-
 .../02_organization/components/TreeTable.vue  |   3 +-
 .../components/DialogFormPosition.vue         |   2 +-
 .../components/DialogMovePos.vue              |   2 +-
 .../components/TreeTable.vue                  |   2 +-
 9 files changed, 84 insertions(+), 49 deletions(-)

diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index 92d126242..4d89e4133 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -20,6 +20,7 @@ export default {
   orgSetDateTime: (id: string) => `${organization}/set/publish/${id}`,
   organizationHistoryNew: `${organization}/history`,
   organizationHistoryPostNew: `${organization}/history/publish`,
+  orgChart: (id: string) => `${organization}/org-chart/${id}`,
 
   /** position*/
   orgPosPosition: `${orgPos}/position`,
diff --git a/src/api/file/api.file.ts b/src/api/file/api.file.ts
index 459d6d091..0361e7951 100644
--- a/src/api/file/api.file.ts
+++ b/src/api/file/api.file.ts
@@ -16,8 +16,9 @@ export default {
   file: (name: string, group: string, id: string) =>
     `${url}/file/${name}/${group}/${id}`,
   KpiFile,
-  fileByPath: (name: string) =>
-    `${url}/file/${name}`,
+  fileByPath: (name: string) => `${url}/file/${name}`,
   fileByFile: (name: string, group: string, id: string, fileName: string) =>
     `${url}/file/${name}/${group}/${id}/${fileName}`,
+
+  filefullPath: (path: string) => `${url}/file/${path}`,
 };
diff --git a/src/modules/02_organization/components/DialogFormPosition.vue b/src/modules/02_organization/components/DialogFormPosition.vue
index b2c0c9e52..a96d04593 100644
--- a/src/modules/02_organization/components/DialogFormPosition.vue
+++ b/src/modules/02_organization/components/DialogFormPosition.vue
@@ -832,7 +832,7 @@ async function emitSearch(keyword: string, typeSelect: string) {
                         </q-tr>
                       </template>
                       <template v-slot:body="props">
-                        <q-tr :props="props">
+                        <q-tr :props="props" class="cursor-pointer">
                           <q-td auto-width>
                             <q-btn
                               flat
diff --git a/src/modules/02_organization/components/StructureOrgMain.vue b/src/modules/02_organization/components/StructureOrgMain.vue
index 9b6a7245f..f4310fe8d 100644
--- a/src/modules/02_organization/components/StructureOrgMain.vue
+++ b/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>
diff --git a/src/modules/02_organization/components/TreeMain.vue b/src/modules/02_organization/components/TreeMain.vue
index e7c473c35..4e483ff02 100644
--- a/src/modules/02_organization/components/TreeMain.vue
+++ b/src/modules/02_organization/components/TreeMain.vue
@@ -3,6 +3,7 @@ import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { checkPermission } from "@/utils/permissions";
 
 /** importType*/
 import type { ListMenu } from "@/modules/02_organization/interface/index/Main";
@@ -547,7 +548,7 @@ watch(
               </q-btn>
 
               <q-btn
-                v-else
+                v-else-if="checkPermission($route)?.attrIsGet"
                 flat
                 dense
                 color="grey-13"
diff --git a/src/modules/02_organization/components/TreeTable.vue b/src/modules/02_organization/components/TreeTable.vue
index ad0a3323d..9b0cfdd89 100644
--- a/src/modules/02_organization/components/TreeTable.vue
+++ b/src/modules/02_organization/components/TreeTable.vue
@@ -4,6 +4,7 @@ import { useQuasar } from "quasar";
 import config from "@/app.config";
 import http from "@/plugins/http";
 import genreport from "@/plugins/genreportxlsx";
+import { checkPermission } from "@/utils/permissions";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -683,7 +684,7 @@ watch(
             </q-btn>
 
             <q-btn
-              v-else
+              v-else-if="checkPermission($route)?.attrIsGet"
               flat
               dense
               color="deep-purple"
diff --git a/src/modules/16_positionEmployee/components/DialogFormPosition.vue b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
index 9f61a93c8..3702f6592 100644
--- a/src/modules/16_positionEmployee/components/DialogFormPosition.vue
+++ b/src/modules/16_positionEmployee/components/DialogFormPosition.vue
@@ -477,7 +477,7 @@ watch(
                         </q-tr>
                       </template>
                       <template v-slot:body="props">
-                        <q-tr :props="props" class="cursor-pointer">
+                        <q-tr :props="props">
                           <q-td
                             v-for="col in props.cols"
                             :key="col.name"
diff --git a/src/modules/16_positionEmployee/components/DialogMovePos.vue b/src/modules/16_positionEmployee/components/DialogMovePos.vue
index 12b58e8fd..8fda4b434 100644
--- a/src/modules/16_positionEmployee/components/DialogMovePos.vue
+++ b/src/modules/16_positionEmployee/components/DialogMovePos.vue
@@ -227,7 +227,7 @@ watch(
                   />
                 </template>
                 <template v-slot:body="props">
-                  <q-tr :props="props" class="cursor-pointer">
+                  <q-tr :props="props">
                     <q-td>
                       <q-checkbox
                         keep-color
diff --git a/src/modules/16_positionEmployee/components/TreeTable.vue b/src/modules/16_positionEmployee/components/TreeTable.vue
index 0820911df..a81fe9062 100644
--- a/src/modules/16_positionEmployee/components/TreeTable.vue
+++ b/src/modules/16_positionEmployee/components/TreeTable.vue
@@ -444,7 +444,7 @@ watch(
         </q-tr>
       </template>
       <template v-slot:body="props">
-        <q-tr :props="props" class="cursor-pointer">
+        <q-tr :props="props">
           <q-td>
             <q-btn
               v-if="