From c53e6b535905edb58c23b0cfe002f336e5cbc0c1 Mon Sep 17 00:00:00 2001
From: Thanit Konmek <thanit@frappet.com>
Date: Fri, 4 Aug 2023 12:29:38 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82?=
 =?UTF-8?q?=20=E0=B8=9A=E0=B8=B1=E0=B8=84=20store=20,=20=E0=B8=9B=E0=B8=A3?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=9A=20component=20=E0=B8=A3=E0=B8=B9=E0=B8=9B?=
 =?UTF-8?q?=E0=B8=A0=E0=B8=B2=E0=B8=9E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/information/Image.vue          | 160 ++++++++++++++----
 .../02_organizational/views/ManageReport2.vue |  14 +-
 src/modules/04_registry/views/Main.vue        |  15 +-
 .../components/Receive/receiveDetail.vue      |  10 +-
 .../components/Receive/receiveMain.vue        |  43 ++---
 5 files changed, 160 insertions(+), 82 deletions(-)

diff --git a/src/components/information/Image.vue b/src/components/information/Image.vue
index 30efcc2a7..5291f27b8 100644
--- a/src/components/information/Image.vue
+++ b/src/components/information/Image.vue
@@ -66,9 +66,9 @@
       <div class="row items-center text-dark q-ml-md">
         <div class="column">
           <div class="text-bold q-pb-xs text-name">
-            {{ props.fullName }}
+            {{ fullname }}
           </div>
-          <div>{{ props.position }}</div>
+          <div>{{ position }}</div>
         </div>
       </div>
       <q-space />
@@ -164,22 +164,14 @@
   </q-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const props = defineProps({
-  fullName: {
-    type: String,
-    default: "ชื่อ สกุล",
-    required: true,
-  },
-  position: {
-    type: String,
-    default: "ตำแหน่ง",
-    required: true,
-  },
   fetchData: {
     type: Function,
     default: () => console.log("not function"),
@@ -200,15 +192,33 @@ const props = defineProps({
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
-const { date2Thai, dateToISO, messageError, dialogMessage, success } = mixin;
+const {
+  date2Thai,
+  dateToISO,
+  messageError,
+  dialogMessage,
+  success,
+  showLoader,
+  hideLoader,
+} = mixin;
 
+const route = useRoute();
 const router = useRouter();
+
+const fullname = ref<string>("");
+const position = ref<string>("");
+
 const imageUrl = ref<any>(null);
 const inputImage = ref<any>(null);
-const dialogImage = ref<boolean>(false);
-const images = ref<any>([]);
 const activeImage = ref<any | null>(null);
-const profileId = ref<string>("");
+
+const dialogImage = ref<boolean>(false);
+
+const images = ref<any>([]);
+
+onMounted(async () => {
+  await fetchData();
+});
 
 const closeImage = () => {
   dialogImage.value = false;
@@ -218,7 +228,7 @@ const clickImage = async () => {
   // ***************************************************************************************************
   //                  ****************** fetch data รูปภาพทั้งหมด ******************
   // ***************************************************************************************************
-
+  await fetchAvatarHistory();
   dialogImage.value = true;
 };
 
@@ -227,14 +237,18 @@ const uploadImage = async (e: any) => {
   if (input.length > 0) {
     const formData = new FormData();
     formData.append("FileData", input[0]);
-    await props.fetchUpload(profileId.value, formData).then(async () => {
-      await props.fetchData();
-      closeImage();
-    });
-    // ***************************************************************************************************
-    //          ****************** ต้องทำ function props รับ formData กลับ ******************
-    //     ****************** finally ทำการ fetch data,dialogImage.value = false ******************
-    // ***************************************************************************************************
+    showLoader();
+    await http
+      .post(config.API.profileAvatarId(route.params.id.toString()), formData)
+      .then((res) => {})
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(async () => {
+        await fetchData();
+        dialogImage.value = false;
+      });
+    return;
   }
 };
 
@@ -253,7 +267,20 @@ const selectAvatarHistory = async () => {
     );
     return;
   }
-  await props.fetchSave(profileId.value);
+  showLoader();
+  await http
+    .put(config.API.profileAvatarId(route.params.id.toString()), {
+      avatar: activeImage.value.avatarId,
+    })
+    .then((res) => {
+      dialogImage.value = false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+    });
   // ***************************************************************************************************
   //                 ****************** fetch data เปลี่ยนรูปภาพ ส่ง ID กลับ******************
   // ***************************************************************************************************
@@ -283,14 +310,77 @@ const deletePhoto = async (id: string) => {
 };
 
 const fetchDataDelete = async (id: string) => {
-  await props.fetchDelete(id).then(async () => {
-    await props.fetchData();
-    await clickImage();
-  });
-  // ***************************************************************************************************
-  //                  ****************** fetch delete รูปภาพ ******************
-  //          ****************** finally ทำการ fetch data,clickImage() ******************
-  // ***************************************************************************************************
+  showLoader();
+  await http
+    .delete(config.API.profileAvatarHistoryId(id))
+    .then((res) => {
+      success($q, "ลบรูปภาพสำเร็จ");
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(async () => {
+      await fetchData();
+      await clickImage();
+      //   dialogImage.value = false;
+    });
+};
+
+const fetchData = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      //   console.log(data);
+      fullname.value = data.fullname;
+      imageUrl.value = data.avatar;
+      position.value = data.position;
+      //   profileType.value = data.profileType;
+      //   employeeClass.value =
+      //     data.employeeClass == null ? "" : data.employeeClass;
+      //   const reason = reasonOptions.value.filter(
+      //     (r: DataOption) => r.id == data.leaveReason
+      //   );
+      //   if (reason.length > 0) {
+      //     leaveReason.value = ` (พ้นจากราชการด้วยสาเหตุ: ${reason[0].name})`;
+      //   } else {
+      //     leaveReason.value = "";
+      //   }
+      //   reasonStatus.value = reason.length > 0 ? true : false;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const fetchAvatarHistory = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileAvatarHistoryId(route.params.id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      console.log(data);
+      images.value = [];
+      data.map((e: any) => {
+        images.value.push({
+          id: e.id,
+          avatar: e.avatar,
+          avatarId: e.avatarId,
+          createdDate: new Date(e.createdDate),
+          isActive: e.isActive,
+        });
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 };
 
 const imageClass = (n: any) => {
diff --git a/src/modules/02_organizational/views/ManageReport2.vue b/src/modules/02_organizational/views/ManageReport2.vue
index c8a146dc6..40e8c4190 100644
--- a/src/modules/02_organizational/views/ManageReport2.vue
+++ b/src/modules/02_organizational/views/ManageReport2.vue
@@ -115,11 +115,14 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import type { treeTab } from "@/modules/04_registry/interface/index/Main";
 import type { ResponseTree } from "@/modules/02_organizational/interface/response/Mapping";
+import { useDataStore } from "@/stores/data";
 
+const dataStore = useDataStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
 const router = useRouter();
 const route = useRoute();
+const { selectedReport2, expandedReport2, changeTreeReport2 } = dataStore;
 const { date2Thai, success, dateToISO, modalError, showLoader, hideLoader } =
   mixin;
 const filter = ref<string>(""); //search data table
@@ -279,14 +282,9 @@ const nodeTree = async () => {
       const data = res.data.result;
       nodesTree.value = data;
       if (data.length > 0) {
-        selected.value =
-          dataStore.selectedReport2 == ""
-            ? data[0].id
-            : dataStore.selectedReport2;
+        selected.value = selectedReport2 == "" ? data[0].id : selectedReport2;
         expanded.value =
-          dataStore.expandedReport2.length == 0
-            ? [data[0].id]
-            : dataStore.expandedReport2;
+          expandedReport2.length == 0 ? [data[0].id] : expandedReport2;
       }
     })
     .catch((e: any) => {})
@@ -301,7 +299,7 @@ const onSelected = async (id: string) => {
 };
 
 const clickTree = () => {
-  dataStore.changeTreeReport2(expanded.value, selected.value);
+  changeTreeReport2(expanded.value, selected.value);
 };
 
 const onHistory = async () => {
diff --git a/src/modules/04_registry/views/Main.vue b/src/modules/04_registry/views/Main.vue
index d966262ad..94f3e8963 100644
--- a/src/modules/04_registry/views/Main.vue
+++ b/src/modules/04_registry/views/Main.vue
@@ -144,11 +144,13 @@ import ProfileTable from "@/modules/04_registry/components/TableProfile.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import type { QTableProps } from "quasar";
-// import { jsontoexcel } from "vue-table-to-excel";
+import { useDataStore } from "@/stores/data";
 
+const dataStore = useDataStore();
 const $q = useQuasar();
 const store = useProfileDataStore();
 const { profileData, changeProfileColumns } = store;
+const { changeTreeRegister, selectedRegister, expandedRegister } = dataStore;
 
 const mixin = useCounterMixin();
 const { date2Thai, messageError, typeRetire, showLoader, hideLoader } = mixin;
@@ -1162,7 +1164,7 @@ const onSelected = async (id: string) => {
 };
 
 const clickTree = () => {
-  dataStore.changeTreeRegister(expanded.value, selected.value);
+  changeTreeRegister(expanded.value, selected.value);
 };
 
 const nodeTree = async () => {
@@ -1173,14 +1175,9 @@ const nodeTree = async () => {
       const data = res.data.result;
       nodesTree.value = data;
       if (data.length > 0) {
-        selected.value =
-          dataStore.selectedRegister == ""
-            ? data[0].id
-            : dataStore.selectedRegister;
+        selected.value = selectedRegister == "" ? data[0].id : selectedRegister;
         expanded.value =
-          dataStore.expandedRegister.length == 0
-            ? [data[0].id]
-            : dataStore.expandedRegister;
+          expandedRegister.length == 0 ? [data[0].id] : expandedRegister;
       }
     })
     .catch((e: any) => {
diff --git a/src/modules/05_placement/components/Receive/receiveDetail.vue b/src/modules/05_placement/components/Receive/receiveDetail.vue
index f25b95658..6ce3b0632 100644
--- a/src/modules/05_placement/components/Receive/receiveDetail.vue
+++ b/src/modules/05_placement/components/Receive/receiveDetail.vue
@@ -5,7 +5,12 @@
         <Information v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="government" name="16" class="row col-12 q-mt-md">
-        <Government v-model:statusEdit="statusEdit" :statusAdd="false" />
+        <Government
+          v-model:statusEdit="statusEdit"
+          :statusAdd="false"
+          profileType="test"
+          employeeClass="test"
+        />
       </div>
       <div id="address" name="17" class="row col-12 q-mt-md">
         <Address v-model:statusEdit="statusEdit" :statusAdd="false" />
@@ -14,7 +19,7 @@
         <Family v-model:statusEdit="statusEdit" :statusAdd="false" />
       </div>
       <div id="certicate" name="15" class="row col-12 q-mt-md">
-        <Certicate v-model:statusEdit="statusEdit" />
+        <Certicate v-model:statusEdit="statusEdit" profileType="test" />
       </div>
       <div id="education" name="2" class="row col-12 q-mt-md">
         <EducationVue v-model:statusEdit="statusEdit" />
@@ -70,6 +75,7 @@
 </template>
 <script setup lang="ts">
 import { ref } from "vue";
+
 import Image from "@/components/information/Image.vue";
 import Information from "@/components/information/Information.vue";
 import Government from "@/components/information/Government.vue";
diff --git a/src/modules/05_placement/components/Receive/receiveMain.vue b/src/modules/05_placement/components/Receive/receiveMain.vue
index 007a3b7e8..7dc840540 100644
--- a/src/modules/05_placement/components/Receive/receiveMain.vue
+++ b/src/modules/05_placement/components/Receive/receiveMain.vue
@@ -282,10 +282,10 @@ const columns2 = ref<QTableProps["columns"]>([
   },
 ]);
 
-const openModalTree = (pid: string) => {
-  modalTree.value = true;
-  personalId.value = pid;
+const openModalTree = (id: string) => {
+  personalId.value = id;
   personal.value = [];
+  modalTree.value = true;
 };
 
 const closeModalTree = async () => {
@@ -293,8 +293,10 @@ const closeModalTree = async () => {
   modalTree.value = false;
 };
 
-const nextPage = (id: string) => {
-  router.push(`/receive/${id}`);
+const nextPage = (row: any) => {
+  router.push({
+    path: `/receive/${row.personalId}`,
+  });
 };
 </script>
 <template>
@@ -367,57 +369,42 @@ const nextPage = (id: string) => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
+                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
               <q-tr :props="props" class="cursor-pointer">
-                <q-td
-                  key="no"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="no" :props="props" @click="nextPage(props.row)">
                   {{ props.rowIndex + 1 }}
                 </q-td>
                 <q-td
                   key="fullname"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.fullname }}
                 </q-td>
                 <q-td
                   key="position"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.position }}
                 </q-td>
                 <q-td
                   key="positionLevel"
                   :props="props"
-                  @click="nextPage(props.row.personalId)"
+                  @click="nextPage(props.row)"
                 >
                   {{ props.row.positionLevel }}
                 </q-td>
-                <q-td
-                  key="oc"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="oc" :props="props" @click="nextPage(props.row)">
                   {{ props.row.oc }}
                 </q-td>
-                <q-td
-                  key="agency"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="agency" :props="props" @click="nextPage(props.row)">
                   {{ props.row.agency }}
                 </q-td>
-                <q-td
-                  key="status"
-                  :props="props"
-                  @click="nextPage(props.row.personalId)"
-                >
+                <q-td key="status" :props="props" @click="nextPage(props.row)">
                   {{ props.row.status }}
                 </q-td>
                 <q-td auto-width>