From 23dbf79067e8e891e022fce104ea5e720f0d921a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Fri, 7 Feb 2025 10:28:09 +0700
Subject: [PATCH] fix loading

---
 .../02_NameChangeHistory.vue                  | 20 ++++----
 .../PersonalInformation/05_Education.vue      |  6 +--
 .../detail/PersonalInformation/Main.vue       | 50 ++++++++++++++++---
 .../components/detail/TabMain.vue             | 40 ++++++++++++---
 .../interface/response/Profile.ts             |  1 +
 .../04_registryPerson/views/detailView.vue    | 36 +++++++------
 6 files changed, 112 insertions(+), 41 deletions(-)

diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
index 8e9cf00e8..e297e5529 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue
@@ -17,7 +17,7 @@ import type { DataProfile } from "@/modules/04_registryPerson/interface/response
 import type { FormChangeName } from "@/modules/04_registryPerson/interface/request/Main";
 
 /** importComponents*/
-import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -314,11 +314,11 @@ async function addData() {
     .then(async (res) => {
       subId.value = await res.data.result;
       await uploadProfile(res.data.result);
-      closeDialog();
+      await fetchData(profileId.value);
+      await props?.fetchDataPersonal?.();
+      await fetchDataPersonal();
       success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchData(profileId.value);
-      props?.fetchDataPersonal?.();
-      fetchDataPersonal();
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -344,11 +344,11 @@ function editData(idData: string) {
     )
     .then(async () => {
       await uploadProfile(subId.value);
-      closeDialog();
       success($q, "บันทึกข้อมูลสำเร็จ");
-      fetchData(profileId.value);
-      props.fetchDataPersonal?.();
-      fetchDataPersonal();
+      await fetchData(profileId.value);
+      await props.fetchDataPersonal?.();
+      await fetchDataPersonal();
+      closeDialog();
     })
     .catch((err) => {
       messageError($q, err);
@@ -553,7 +553,7 @@ onMounted(async () => {
   <q-dialog v-model="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <dialog-header tittle="เปลี่ยนชื่อ - นามสกุล" :close="closeDialog" />
+        <DialogHeader tittle="เปลี่ยนชื่อ - นามสกุล" :close="closeDialog" />
         <q-separator />
         <q-card-section>
           <div class="row q-mb-sm">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index de77d48b4..660d86229 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -19,7 +19,7 @@ import type {
   DataEducationLevel,
 } from "@/modules/04_registryPerson/interface/response/Education";
 
-import dialogHeader from "@/components/DialogHeader.vue";
+import DialogHeader from "@/components/DialogHeader.vue";
 import DialogSortEducation from "@/modules/04_registryPerson/components/detail/PersonalInformation/DialogSortEducation.vue";
 
 const $q = useQuasar();
@@ -1046,7 +1046,7 @@ onMounted(async () => {
   <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card>
       <q-form @submit.prevent greedy @validation-success="onSubmit()">
-        <dialog-header
+        <DialogHeader
           :tittle="
             dialogStatus == 'edit'
               ? 'แก้ไขข้อมูลประวัติการศึกษา'
@@ -1481,7 +1481,7 @@ onMounted(async () => {
   <!-- ประวัติแก้ไขประวัติการศึกษา -->
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 80%">
-      <dialog-header
+      <DialogHeader
         tittle="ประวัติแก้ไขประวัติการศึกษา"
         :close="closeHistoryDialog"
       />
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
index f6834adb3..fb6c1defc 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue
@@ -1,15 +1,51 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineAsyncComponent } from "vue";
 
 import { useRegistryNewDataStore } from "@/modules/04_registryPerson/store";
 
 /** importComponents*/
-import Profile from "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"; //ประวัติส่วนตัว
-import NameChangeHistory from "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"; //ประวัติการเปลี่ยนชื่อ
-import Address from "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"; //ข้อมูลที่อยู่
-import FamilyNew from "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"; //ข้อมูลครอบครัว
-import Education from "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"; //ประวัติการศึกษา
-import SpecialSkill from "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"; //ความสามารถพิเศษ
+//ประวัติส่วนตัว
+const Profile = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue"
+    )
+);
+//ประวัติการเปลี่ยนชื่อ
+const NameChangeHistory = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/02_NameChangeHistory.vue"
+    )
+);
+//ข้อมูลที่อยู่
+const Address = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue"
+    )
+);
+//ข้อมูลครอบครัว
+const FamilyNew = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue"
+    )
+);
+//ประวัติการศึกษา
+const Education = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue"
+    )
+);
+//ความสามารถพิเศษ
+const SpecialSkill = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue"
+    )
+);
 
 const storeRegistry = useRegistryNewDataStore();
 
diff --git a/src/modules/04_registryPerson/components/detail/TabMain.vue b/src/modules/04_registryPerson/components/detail/TabMain.vue
index 5c3475b2a..3b00eb194 100644
--- a/src/modules/04_registryPerson/components/detail/TabMain.vue
+++ b/src/modules/04_registryPerson/components/detail/TabMain.vue
@@ -1,17 +1,43 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, defineAsyncComponent } from "vue";
 import { useRoute } from "vue-router";
 
 import { useRegistryDetailNewDataStore } from "@/modules/04_registryPerson/stores/DetailMain";
 
 import type { ItemTab } from "@/modules/04_registryPerson/interface/index/Main";
 
-import PersonalInformationMain from "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"; //ข้อมูลส่วนตัว
-import GovernmentInformationMain from "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"; //ข้อมูลราชการ
-import salaryMain from "@/modules/04_registryPerson/components/detail/Salary/Main.vue"; //ข้อมูลเงินเดือน/ค่าจ้าง
-import AchievementMain from "@/modules/04_registryPerson/components/detail/Achievement/Main.vue"; //ข้อมูลผลงานและเครื่องราชฯ
-import OtherMaim from "@/modules/04_registryPerson/components/detail/Other/Main.vue"; //เอกสารหลักฐานและอื่นๆ
-import EmployeeMain from "@/modules/04_registryPerson/components/detail/Employee/Main.vue"; //ข้อมูลลูกจ้าง
+//ข้อมูลส่วนตัว
+const PersonalInformationMain = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/PersonalInformation/Main.vue"
+    )
+);
+//ข้อมูลราชการ
+const GovernmentInformationMain = defineAsyncComponent(
+  () =>
+    import(
+      "@/modules/04_registryPerson/components/detail/GovernmentInformation/Main.vue"
+    )
+);
+//ข้อมูลเงินเดือน/ค่าจ้าง
+const salaryMain = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/detail/Salary/Main.vue")
+);
+//ข้อมูลผลงานและเครื่องราชฯ
+const AchievementMain = defineAsyncComponent(
+  () =>
+    import("@/modules/04_registryPerson/components/detail/Achievement/Main.vue")
+);
+//เอกสารหลักฐานและอื่นๆ
+const OtherMaim = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/detail/Other/Main.vue")
+);
+//ข้อมูลลูกจ้าง
+const EmployeeMain = defineAsyncComponent(
+  () =>
+    import("@/modules/04_registryPerson/components/detail/Employee/Main.vue")
+);
 
 const route = useRoute();
 
diff --git a/src/modules/04_registryPerson/interface/response/Profile.ts b/src/modules/04_registryPerson/interface/response/Profile.ts
index 9363827a0..bde553a2e 100644
--- a/src/modules/04_registryPerson/interface/response/Profile.ts
+++ b/src/modules/04_registryPerson/interface/response/Profile.ts
@@ -33,6 +33,7 @@ interface ResponseObject {
   religion: string | null;
   telephoneNumber: string | null;
   prefixMain: string;
+  statusEmail: string;
 }
 
 interface Religion {
diff --git a/src/modules/04_registryPerson/views/detailView.vue b/src/modules/04_registryPerson/views/detailView.vue
index b84c69c2e..f7220737b 100644
--- a/src/modules/04_registryPerson/views/detailView.vue
+++ b/src/modules/04_registryPerson/views/detailView.vue
@@ -24,9 +24,15 @@ import type {
 import type { ResponseObject } from "@/modules/04_registryPerson/interface/response/Profile";
 
 /** importComponents*/
-import CardNotPermission from "@/components/CardNotPermission.vue";
-import DialogHeader from "@/components/DialogHeader.vue";
-import TabMain from "@/modules/04_registryPerson/components/detail/TabMain.vue";
+const CardNotPermission = defineAsyncComponent(
+  () => import("@/components/CardNotPermission.vue")
+);
+const DialogHeader = defineAsyncComponent(
+  () => import("@/components/DialogHeader.vue")
+);
+const TabMain = defineAsyncComponent(
+  () => import("@/modules/04_registryPerson/components/detail/TabMain.vue")
+);
 
 const DialogRetired = defineAsyncComponent(
   () => import("@/modules/04_registryPerson/components/DialogRetired.vue")
@@ -392,11 +398,7 @@ async function fetchDataPersonal() {
       } else {
         messageError($q, err);
       }
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2800);
+      hideLoader();
     });
 }
 
@@ -604,6 +606,8 @@ function clickSaveDeceased() {
       })
       .catch((e) => {
         messageError($q, e);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
@@ -627,14 +631,17 @@ async function getImage() {
     .get(config.API.orgProfileAvatar + `/${profileId.value}`)
     .then(async (res) => {
       let data = res.data.result;
-      imagesAlldata.value = data;
+      if (!data || !Array.isArray(data)) {
+        return;
+      }
 
-      for (let i = 0; i < data.length; i++) {
-        await getImg(data[i]);
+      imagesAlldata.value = data;
+      for (const img of data) {
+        await getImg(img);
       }
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     })
     .finally(() => {
       hideLoader();
@@ -655,10 +662,11 @@ async function getImg(dataList: any) {
         isActive: dataList.isActive,
         ...data,
       };
-      images.value = [...images.value, newData];
+
+      images.value.push(newData);
     })
     .catch((e) => {
-      // messageError($q, e);
+      messageError($q, e);
     });
 }