From 0a385408f2f5b515ceae8b8e1a8c7f8958c59e3a Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Tue, 29 Jul 2025 11:39:42 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B9=80=E0=B8=9E=E0=B8=B4=E0=B9=88=E0=B8=A1?=
 =?UTF-8?q?=20Skeleton?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../RoleOrganization/DialogPersonal.vue       | 125 ++++++++++--------
 1 file changed, 69 insertions(+), 56 deletions(-)

diff --git a/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue b/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue
index 7077acc7..28740568 100644
--- a/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue
+++ b/src/modules/02_users/components/RoleOrganization/DialogPersonal.vue
@@ -15,12 +15,10 @@ import type { Avatar } from "@/components/information/interface/response/avatar"
 import { useCounterMixin } from "@/stores/mixin";
 
 /** use*/
-const route = useRoute();
+
 const mixin = useCounterMixin();
-const router = useRouter();
 const $q = useQuasar();
-const retireDate = ref<Date>();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { messageError, date2Thai } = mixin;
 
 const isEmployee = defineModel("isEmployee", { type: String });
 const empType = ref<string>("officer");
@@ -42,6 +40,9 @@ const emit = defineEmits(["update:modal"]);
 
 /** ตัวแปร*/
 const modal = ref<boolean>(false);
+const isloadInformation = ref<boolean>(true);
+const isloadGoverment = ref<boolean>(true);
+const retireDate = ref<Date>();
 const avatar = reactive<Avatar>({
   avatar: "",
   fullname: "",
@@ -94,7 +95,7 @@ function calculateAge(birthDate: Date | null) {
  * @param id profileID
  */
 async function fetchInformation(id: string) {
-  showLoader();
+  isloadInformation.value = true;
   await http
     .get(
       config.API.orgProfileAdminById(
@@ -111,9 +112,7 @@ async function fetchInformation(id: string) {
       imformation.birthDate = data.birthDate ? date2Thai(data.birthDate) : "-";
       imformation.age = data.birthDate ? calculateAge(data.birthDate) : "-";
       imformation.gender = data.gender ?? "-";
-
       avatar.fullname = `${data.prefix}${data.firstName} ${data.lastName}`;
-
       avatar.position = data.position ? data.position : "-";
       if (data.avatarName) {
         await fetchProfile(data.id as string, data.avatarName);
@@ -125,7 +124,7 @@ async function fetchInformation(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isloadInformation.value = false;
     });
 }
 
@@ -134,7 +133,7 @@ async function fetchInformation(id: string) {
  * @param id profileID
  */
 async function fetchProfileGov(id: string) {
-  showLoader();
+  isloadGoverment.value = true;
   await http
     .get(
       config.API.profileNewGovernmentCard(
@@ -158,19 +157,21 @@ async function fetchProfileGov(id: string) {
       goverment.positionExecutiveSide =
         data.positionExecutiveField !== "" ? data.positionExecutiveField : "-";
     })
-
     .catch((err) => {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isloadGoverment.value = false;
     });
 }
 
-// function redirecToRegistry() {
-//   router.push(`/registry-${empType.value}/${props.id}`);
-//   modal.value = false;
-// }
+async function fetchProfile(id: string, avatarName: string) {
+  await http
+    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
+    .then(async (res) => {
+      avatar.avatar = await res.data.downloadUrl;
+    });
+}
 
 watch(
   () => props.modal,
@@ -178,12 +179,6 @@ watch(
     modal.value = props.modal ? props.modal : false;
     if (modal.value) {
       if (props.id) {
-        // empType.value =
-        //   route.name === "appoint-employee-detail" ||
-        //   isEmployee.value == "EMPLOYEE"
-        //     ? "employee"
-        //     : "officer";
-
         await Promise.all([
           fetchInformation(props.id),
           fetchProfileGov(props.id),
@@ -198,14 +193,6 @@ watch(modal, (newValue) => {
     emit("update:modal", false);
   }
 });
-
-async function fetchProfile(id: string, avatarName: string) {
-  await http
-    .get(config.API.fileByFile("ทะเบียนประวัติ", "โปรไฟล์", id, avatarName))
-    .then(async (res) => {
-      avatar.avatar = await res.data.downloadUrl;
-    });
-}
 </script>
 
 <template>
@@ -227,7 +214,27 @@ async function fetchProfile(id: string, avatarName: string) {
 
       <q-card-section class="col q-pt-none bg-grey-12">
         <div class="q-gutter-md">
-          <q-card bordered class="text-center bg-grey-12">
+          <div v-if="isloadInformation">
+            <q-skeleton
+              type="QAvatar"
+              size="120px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="150px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-md"
+            />
+            <q-skeleton
+              type="text"
+              width="100px"
+              style="background: #e3e3e3"
+              class="q-mx-auto q-mt-sm"
+            />
+          </div>
+          <q-card v-else bordered class="text-center bg-grey-12">
             <div>
               <q-avatar size="120px" color="grey-4">
                 <img
@@ -244,6 +251,7 @@ async function fetchProfile(id: string, avatarName: string) {
                 />
               </q-avatar>
             </div>
+
             <div
               class="q-mt-md text-subtitle2 text-bold"
               style="font-size: 18px"
@@ -256,21 +264,6 @@ async function fetchProfile(id: string, avatarName: string) {
             >
               {{ avatar.position }}
             </div>
-            <!-- <div class="q-mt-md">
-              <q-btn
-                v-if="
-                  empType === 'employee'
-                    ? checkPermissionGet('SYS_REGISTRY_EMP')
-                    : checkPermissionGet('SYS_REGISTRY_OFFICER')
-                "
-                class="bg-white"
-                outline
-                rounded
-                label="ดูรายละเอียดเพิ่มเติมทั้งหมด"
-                color="secondary"
-                @click.prevent="redirecToRegistry"
-              />
-            </div> -->
           </q-card>
 
           <q-scroll-area style="height: 65vh; max-width: 100%">
@@ -281,7 +274,16 @@ async function fetchProfile(id: string, avatarName: string) {
                     <q-icon name="mdi-account" color="grey-7" />
                     <span class="q-ml-md">ข้อมูลส่วนตัว </span>
                   </div>
-                  <div class="row q-pa-sm">
+                  <div v-if="isloadInformation" class="row q-pa-sm">
+                    <div
+                      v-for="n in 6"
+                      :key="n"
+                      class="col-xs-6 col-md-6 q-pa-sm"
+                    >
+                      <q-skeleton type="QInput" height="40px" />
+                    </div>
+                  </div>
+                  <div v-else class="row q-pa-sm">
                     <div class="col-xs-6 col-md-6">
                       <q-input
                         borderless
@@ -360,7 +362,22 @@ async function fetchProfile(id: string, avatarName: string) {
                     <q-icon name="mdi-account-tie" color="grey-7" />
                     <span class="q-ml-md">ข้อมูลราชการ </span>
                   </div>
-                  <div class="row q-pa-sm">
+
+                  <div v-if="isloadGoverment" class="row q-pa-sm">
+                    <div
+                      v-for="n in 9"
+                      :key="n"
+                      :class="
+                        n !== 1
+                          ? 'col-xs-6 col-md-6 q-pa-sm'
+                          : 'col-xs-12 col-md-12 q-pa-sm'
+                      "
+                    >
+                      <q-skeleton type="QInput" height="40px" />
+                    </div>
+                  </div>
+
+                  <div v-else class="row q-pa-sm">
                     <div class="col-xs-12 col-md-12">
                       <q-input
                         borderless
@@ -433,13 +450,11 @@ async function fetchProfile(id: string, avatarName: string) {
                         label="ระดับตำแหน่ง"
                       />
                     </div>
-                    <div
-                      class="col-xs-6 col-md-6"
-                      v-if="props.type !== 'employee'"
-                    >
+                    <div class="col-xs-6 col-md-6">
                       <q-input
                         borderless
                         readonly
+                        autogrow
                         :model-value="
                           goverment.positionExecutive
                             ? goverment.positionExecutive
@@ -448,19 +463,17 @@ async function fetchProfile(id: string, avatarName: string) {
                         label="ตำแหน่งทางการบริหาร"
                       />
                     </div>
-                    <div
-                      class="col-xs-6 col-md-6"
-                      v-if="props.type !== 'employee'"
-                    >
+                    <div class="col-xs-6 col-md-6">
                       <q-input
                         borderless
                         readonly
+                        autogrow
                         :model-value="
                           goverment.positionExecutiveSide
                             ? goverment.positionExecutiveSide
                             : '-'
                         "
-                        label="ด้านตำแหน่งทางการบริหาร"
+                        label="ด้านทางการบริหาร"
                       />
                     </div>
                   </div>