Merge branch 'develop' into devTee

src/components/SkeletonTable.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { ref } from "vue";
 
 /** importType*/
 import type { QTableProps } from "quasar";
@@ -8,29 +8,55 @@ const columns = defineModel<QTableProps["columns"]>("columns", {
   required: true,
 });
 
-/** จำนวนคอลัมน์ */
+const rows = ref<Array<{ id: string; name: string }>>([
-const skeletonColumns = computed(() => columns.value?.length || 5);
+  {
+    id: "",
+    name: "",
+  },
+]);
 
 /** ตัวอย่างการใช้งาน */
 /// <SkeletonTable v-if="isLoading" :columns="columns" />
 </script>
 
 <template>
-  <q-markup-table flat bordered>
+  <d-table
-    <thead>
+    flat
-      <tr>
+    bordered
-        <th v-for="(n, idx) in skeletonColumns" :key="idx" style="width: 150px">
+    :columns="columns"
-          <q-skeleton type="text" />
+    :rows="rows"
-        </th>
+    row-key="id"
-      </tr>
+    hide-pagination
-    </thead>
+  >
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.name" :props="props">
+          <div>
+            <q-skeleton type="text" width="80px" />
+          </div>
+        </q-td>
+      </q-tr>
+    </template>
 
-    <tbody>
+    <template v-slot:item="props">
-      <tr v-for="n in 5" :key="n" :class="n % 2 === 0 ? 'bg-grey-2' : ''">
+      <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-        <td v-for="(col, idx) in skeletonColumns" :key="idx">
+        <q-card bordered flat>
-          <q-skeleton type="text" width="80px" />
+          <q-list dense class="q-mt-lg relative-position">
-        </td>
+            <q-item v-for="col in props.cols" :key="col.name">
-      </tr>
+              <q-item-section>
-    </tbody>
+                <q-item-label class="text-grey-6 text-weight-medium">{{
-  </q-markup-table>
+                  col.label
+                }}</q-item-label>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label class="text-dark text-weight-medium">
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
+        </q-card>
+      </div>
+    </template>
+  </d-table>
 </template>

src/components/Workflow/Main.vue

@@ -10,7 +10,6 @@ import type { Permission } from "@/components/Workflow/interface/index/Main";
 import type { DataListState } from "@/components/Workflow/interface/response/Main";
 
 import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
-import Keycloak from "keycloak-js";
 
 const $q = useQuasar();
 const { dialogConfirm, showLoader, hideLoader, messageError } =
@@ -31,6 +30,7 @@ const stateId = ref<string>(""); //id state ปัจุบัน
 const state = ref<number>(1); //state ปัจุบัน
 const isPermission = ref<boolean>(true); //การเข้าถึง Workflow
 const KeycloakId = ref<string>("");
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
 
 const permission = ref<Permission>({
   isChangeState: false, //ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ
@@ -48,6 +48,7 @@ const itemState = ref<DataListState[]>([]);
 
 /** ฟังก์ชันเรียกข้อมูล Workflow ที่อยู่ปัจุบัน*/
 async function fetchCheckState() {
+  isLoading.value = true;
   await http
     .post(config.API.workflow + `check-user-now`, {
       refId: id,
@@ -74,6 +75,9 @@ async function fetchCheckState() {
     })
     .catch(() => {
       isPermission.value = false;
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -129,7 +133,22 @@ defineExpose({
       <div class="q-pl-sm text-weight-bold text-dark">สถานะการดำเนินเรื่อง</div>
     </div>
     <div class="col-12"><q-separator /></div>
-    <q-card-section>
+    <q-card-section class="col-12 q-px-lg q-py-md" v-if="isLoading">
+      <q-timeline color="primary">
+        <q-timeline-entry
+          v-for="(step, index) in 4"
+          :key="index"
+          :icon="`mdi-numeric-${index + 1}`"
+          color="grey-4"
+        >
+          <template #title>
+            <q-skeleton type="rect" width="150px" height="20px" />
+          </template>
+        </q-timeline-entry>
+      </q-timeline>
+    </q-card-section>
+
+    <q-card-section v-else>
       <div class="q-px-lg q-py-md">
         <q-timeline color="primary">
           <q-timeline-entry

src/modules/01_dashboard/views/Dashboard.vue

@@ -26,8 +26,9 @@ const { showLoader, hideLoader, date2Thai, messageError } = mixin;
 const fullname = ref<string>(""); // ชื่อผู้ใช้
 const inboxList = ref<InboxDetail[]>([]); // รายการกล่องข้อความ
 const idInboxActive = ref<string>(); // Id ข้อความที่เลือก
-// รายการเมนูหลักของระบบ
+const isLoadingInbox = ref<boolean>(true); // สถานะการโหลดกล่องข้อความ
 
+// รายการเมนูหลักของระบบ
 const filteredItems = computed(() => {
   const isOfficer = dataStore.officerType === "OFFICER";
   const conditions: Record<string, boolean> = {
@@ -148,7 +149,10 @@ const items = ref<MenuMainList[]>([
  * @param index หน้าที่โหลดข้อมูล
  */
 const fetchlistInbox = async (index: number) => {
-  index === 1 && showLoader();
+  if (index === 1) {
+    isLoadingInbox.value = true; // เริ่มโหลดข้อมูลกล่องข้อความ
+  }
+
   index != 0 &&
     (await http
       .get(config.API.msgInbox + `?page=${index}&pageSize=${10}`)
@@ -173,7 +177,7 @@ const fetchlistInbox = async (index: number) => {
         }
       })
       .finally(() => {
-        hideLoader();
+        isLoadingInbox.value = false;
       }));
 };
 
@@ -249,11 +253,17 @@ const totalInbox = ref<number>(0); // จำนวนข้อความทั
  */
 async function onLoad(index: number, done: Function) {
   const num = index === 1 ? 0 : index++;
-  if (inboxList.value.length < totalInbox.value) {
+  try {
-    setTimeout(() => {
+    // ถ้าโหลดครบแล้ว ให้หยุด infinite scroll
-      fetchlistInbox(num);
+    if (inboxList.value.length >= totalInbox.value) {
-      done();
+      done(true);
-    }, 3000);
+      return;
+    }
+
+    await fetchlistInbox(num);
+    done();
+  } catch (error) {
+    done(true);
   }
 }
 
@@ -284,7 +294,16 @@ onMounted(async () => {
           v-for="(item, j) in filteredItems"
           :key="j"
         >
-          <q-card bordered @click="goToPage(item.path)" class="noactive col-12">
+          <q-card v-if="dataStore.isLoadingMenu" bordered class="col-12">
+            <q-skeleton width="100%" height="180px" />
+          </q-card>
+
+          <q-card
+            v-else
+            bordered
+            @click="goToPage(item.path)"
+            class="noactive col-12"
+          >
             <div class="col-12">
               <q-avatar
                 :color="item.color"
@@ -323,12 +342,28 @@ onMounted(async () => {
             กล่องข้อความ
           </div>
           <q-space />
-          <div class="text-grey-5" style="font-size: 12px">
+          <div v-if="isLoadingInbox">
+            <q-skeleton type="text" width="80px" />
+          </div>
+          <div v-else class="text-grey-5" style="font-size: 12px">
             ทั้งหมด {{ totalInbox }} ข้อความ
           </div>
         </div>
+
         <div
-          v-if="totalInbox != 0"
+          class="q-pa-sm"
+          v-if="isLoadingInbox"
+          style="height: calc(100% - 60px)"
+        >
+          <div v-for="(item, index) in 3">
+            <q-skeleton type="text" width="10%" class="text-subtitle1" />
+            <q-skeleton type="text" width="50%" class="text-subtitle1" />
+            <q-skeleton type="text" class="text-caption" />
+          </div>
+        </div>
+
+        <div
+          v-if="totalInbox != 0 && !isLoadingInbox"
           ref="scrollTargetRef"
           style="max-height: 90%; overflow: auto"
         >
@@ -400,7 +435,11 @@ onMounted(async () => {
           </q-infinite-scroll>
         </div>
 
-        <q-banner rounded class="bg-amber-1 text-center q-mx-sm" v-else>
+        <q-banner
+          rounded
+          class="bg-amber-1 text-center q-mx-sm"
+          v-else-if="totalInbox === 0 && !isLoadingInbox"
+        >
           <div class="text-yellow-10">
             <q-icon
               name="mdi-alert-box"

src/modules/05_leave/components/Calendar.vue

@@ -26,7 +26,7 @@ import DialogDetail from "@/modules/05_leave/components/DialogDetail.vue";
 const $q = useQuasar();
 const store = useLeaveStore();
 const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, monthYear2Thai } = mixin;
+const { messageError, monthYear2Thai } = mixin;
 const emit = defineEmits(["update:dateYear"]);
 
 const mainData = ref<DataCalendar[]>([]);
@@ -37,10 +37,10 @@ const leaveId = ref<string>("");
 /** filter calendar left */
 const filterLists = ref<any>([]);
 const filterVal = ref<any>([keycloakId.value]);
+const isLoading = ref<boolean>(false);
+const isLoadingHoliday = ref<boolean>(false);
 
-/**
+/** Option ของปฏิทิน */
- * Option ของปฏิทิน
- */
 const fullCalendar = ref<any>(); //ref calendar
 const calendarOptions = ref<any>({
   plugins: [
@@ -76,6 +76,7 @@ const dateMonth = ref<DataDateMonthObject>({
 
 /** function เรียกข้อมูล calendar*/
 async function fetchDataCalendar() {
+  isLoading.value = true;
   await http
     .post(config.API.leaveCalendar(), {
       year: dateMonth.value.year,
@@ -119,6 +120,9 @@ async function fetchDataCalendar() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -126,6 +130,7 @@ async function fetchDataCalendar() {
  * fetch วันหยุดในปฏิทิน
  */
 async function fetchData() {
+  isLoadingHoliday.value = true;
   await http
     .get(
       config.API.listHolidayHistoryYearMonth(
@@ -154,6 +159,9 @@ async function fetchData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHoliday.value = false;
     });
 }
 
@@ -193,7 +201,6 @@ async function updateMonth() {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
   }
 }
 
@@ -215,7 +222,6 @@ async function onClickClose() {
 watch(
   () => filterVal.value,
   async () => {
-    showLoader();
     const eventData = filterVal.value.map((item: any) => {
       return mainData.value
         .filter(
@@ -236,14 +242,13 @@ watch(
     const allEventData = [].concat(...eventData);
     calendarOptions.value.events = allEventData;
     await fetchData();
-    hideLoader();
   }
 );
 
 /**Hook */
 onMounted(async () => {
   try {
-    showLoader();
+    isLoading.value = true;
     // เรียกข้อมูล keycloakId
     const user = await tokenParsed();
     keycloakId.value = await (user ? user.sub : "");
@@ -253,7 +258,7 @@ onMounted(async () => {
   } catch (error) {
     messageError($q, error);
   } finally {
-    hideLoader();
+    isLoading.value = false;
   }
 });
 </script>
@@ -262,7 +267,8 @@ onMounted(async () => {
   <div class="row">
     <div class="col-xs-12 col-md-3 q-mt-sm q-pr-sm row">
       <q-card class="col-12" flat bordered>
-        <q-scroll-area style="height: 38vw">
+        <q-skeleton height="100%" square v-if="isLoading" />
+        <q-scroll-area style="height: 38vw" v-else>
           <div class="q-gutter-sm col-12">
             <q-list class="rounded-borders q-pt-sm" dense>
               <q-item
@@ -333,7 +339,13 @@ onMounted(async () => {
             </q-card>
 
             <div class="main-content">
+              <q-skeleton
+                height="100%"
+                square
+                v-if="isLoading || isLoadingHoliday"
+              />
               <FullCalendar
+                v-else
                 ref="fullCalendar"
                 class="demo-app-calendar"
                 :options="calendarOptions"

src/modules/05_leave/components/DialogDetail.vue

@@ -164,6 +164,7 @@ const formDataCancle = reactive<FromCancelDetail>({
   leaveRangeEnd: "",
   leaveDirectorComment: "",
 });
+const isLoading = ref<boolean>(false);
 
 /** form ขอยกเลิก*/
 const formDelete = reactive<FormDelete>({
@@ -187,7 +188,7 @@ const formDeleteRef: FormDeleteRef = {
  * @param id การลา
  */
 async function fetchDataDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveUserId(id), {})
     .then((res) => {
@@ -280,7 +281,7 @@ async function fetchDataDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -308,10 +309,7 @@ function checkLeaveType(leaveTypeId: string) {
       checkForm.value = "FormHajj";
     } else if (type === "LV-007") {
       checkForm.value = "FormCheckSelect";
-    } else if (
+    } else if (type === "LV-008" && formData.leaveSubTypeName === "ศึกษาต่อ") {
-      type === "LV-008" &&
-      formData.leaveSubTypeName === "ศึกษาต่อ"
-    ) {
       checkForm.value = "FormStudy";
     } else if (
       (type === "LV-008" && formData.leaveSubTypeName === "ฝึกอบรม") ||
@@ -334,7 +332,7 @@ function checkLeaveType(leaveTypeId: string) {
  * @param id ยกเลิกการลา
  */
 async function fetchDataCancelDetail(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.leaveCancelById(id))
     .then((res) => {
@@ -362,7 +360,7 @@ async function fetchDataCancelDetail(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -401,7 +399,8 @@ async function onSubmit() {
   formData.append("doc", formDelete.doc);
   await http
     .post(config.API.leaveCancelById(id), formData)
-    .then(() => {
+    .then(async () => {
+      await props.fetchDataTable?.();
       success($q, "บันทึกข้อมูลสำเร็จ");
       props.onClickClose?.();
     })
@@ -409,7 +408,6 @@ async function onSubmit() {
       messageError($q, err);
     })
     .finally(() => {
-      props.fetchDataTable?.();
       hideLoader();
     });
 }
@@ -445,7 +443,9 @@ watch(
       <q-separator />
 
       <q-card-section class="scroll" style="max-height: 60vh">
-        <div class="row">
+        <q-skeleton height="400px" square v-if="isLoading" />
+
+        <div class="row" v-else>
           <div
             flat
             :class="
@@ -571,6 +571,7 @@ watch(
           label="ยืนยัน"
           unelevated
           color="secondary"
+          :loading="isLoading"
           @click="onClickSave"
         />
       </q-card-section>
@@ -584,7 +585,8 @@ watch(
 
       <q-separator />
       <q-card-section class="q-p-md row q-gutter-y-md">
-        <div flat class="col-12">
+        <q-skeleton height="400px" width="100%" square v-if="isLoading" />
+        <div flat class="col-12" v-else>
           <div class="col-12 q-col-gutter-sm row items-center"></div>
           <FormCancel :data="formDataCancle" />
         </div>

src/modules/05_leave/components/ListView.vue

@@ -30,6 +30,7 @@ const year = ref<number>(new Date().getFullYear());
 const type = ref<string>("00000000-0000-0000-0000-000000000000");
 const status = ref<string>("ALL");
 const filter = ref<string>("");
+const isLoading = ref<boolean>(false);
 
 /** pagination*/
 const maxPage = ref<number>(1);
@@ -38,7 +39,7 @@ const pageSize = ref<number>(10);
 const total = ref<number>(0);
 /** function เรียกข้อมูลการลา*/
 async function fetchDataTable() {
-  showLoader();
+  isLoading.value = true;
   const body = {
     year: year.value, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
     type: LeaveData.type, //*Id ประเภทการลา
@@ -59,7 +60,7 @@ async function fetchDataTable() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -128,10 +129,10 @@ async function onClickClose() {
  */
 async function updateFilterTable(y: number, t: string, s: string, k: string) {
   if (t && s) {
-    year.value = await y;
+    year.value = y;
-    type.value = await t;
+    type.value = t;
-    status.value = await s;
+    status.value = s;
-    filter.value = await k;
+    filter.value = k;
     await fetchDataTable();
   }
 }
@@ -142,7 +143,7 @@ async function updateFilterTable(y: number, t: string, s: string, k: string) {
  * @param ps แถวต่อหน้า
  */
 async function updatePagination(p: number, ps: number) {
-  (page.value = await p), (pageSize.value = await ps);
+  (page.value = p), (pageSize.value = ps);
   await fetchDataTable();
 }
 
@@ -168,15 +169,8 @@ function convert(val: any) {
  * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
  */
 onMounted(async () => {
-  try {
+  await fectOptionType();
-    showLoader();
+  await fetchDataTable();
-    await fectOptionType();
-    await fetchDataTable();
-  } catch (error) {
-    messageError($q, error);
-  } finally {
-    hideLoader();
-  }
 });
 </script>
 <template>
@@ -194,6 +188,7 @@ onMounted(async () => {
     :pageSize="pageSize"
     :leaveType="leaveType"
     :total="total"
+    :isloadingData="isLoading"
   >
     <template #columns="props">
       <q-tr :props="props" class="cursor-pointer">

src/modules/05_leave/components/Table.vue

@@ -3,6 +3,7 @@ import { ref, useAttrs, watch } from "vue";
 import { useQuasar } from "quasar";
 
 import { useLeaveStore } from "@/modules/05_leave/store";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const attrs = ref<any>(useAttrs());
@@ -15,7 +16,6 @@ const props = defineProps({
   pass: Number,
   notpass: Number,
   total: Number,
-
   name: String,
   icon: String,
   inputvisible: Array,
@@ -34,6 +34,10 @@ const props = defineProps({
     type: Object,
     require: true,
   },
+  isloadingData: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 /**
@@ -48,9 +52,7 @@ const emit = defineEmits([
 
 const table = ref<any>(null);
 
-/**
+/** ตั้งค่า pagination*/
- * ตั้งค่า pagination
- */
 const currentPage = ref<number>(1);
 const pagination = ref({
   sortBy: "dateSendLeave",
@@ -235,7 +237,9 @@ watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
     </q-card>
   </div>
   <div>
+    <SkeletonTable v-if="isloadingData" :columns="leaveStore.columns" />
     <d-table
+      v-else
       ref="table"
       flat
       bordered

src/modules/05_leave/views/Main.vue

@@ -118,11 +118,11 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-const isloading = ref<boolean>(false);
+const isloadingSummary = ref<boolean>(false);
 
 /** function เรียกข้อมูลตารางสถิติการลา*/
 async function fetchStatsTable() {
-  isloading.value = true;
+  isloadingSummary.value = true;
   await http
     .get(config.API.leaveStats())
     .then((res) => {
@@ -171,11 +171,12 @@ async function fetchStatsTable() {
         leaveCountReject: e.leaveCountReject,
         leaveCountDelete: e.leaveCountDelete,
       }));
-      isloading.value = false;
     })
     .catch((err) => {
       messageError($q, err);
-      isloading.value = true;
+    })
+    .finally(() => {
+      isloadingSummary.value = false;
     });
 }
 
@@ -215,7 +216,7 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row">
       <!-- สถิติการลา -->
       <div class="col-12 row q-pb-sm">
-        <q-card bordered class="col-12 row" v-if="!isloading">
+        <q-card bordered class="col-12 row" v-if="!isloadingSummary">
           <div class="row col-12 items-center q-px-md q-py-sm">
             <div class="text-weight-bold">สถิติการลา</div>
             <q-space />
@@ -278,6 +279,7 @@ onMounted(async () => {
               </q-card>
             </div>
           </div>
+
           <div class="col-6 row">
             <div
               bordered

src/modules/06_evaluate/components/EvaluateStepMain.vue

@@ -198,7 +198,7 @@ const formDataStep1 = ref<PersonInformation>();
  * @param id id ประเมิน
  */
 async function fetchDataStep1(id: string) {
-  showLoader();
+  // showLoader();
   showLoadStatus.value = false;
   await http
     .get(config.API.evaluationCheckspecByid(id))
@@ -211,9 +211,6 @@ async function fetchDataStep1(id: string) {
     })
     .finally(() => {
       showLoadStatus.value = true;
-      setTimeout(() => {
-        hideLoader();
-      }, 3000);
     });
 }
 
@@ -581,7 +578,9 @@ async function saveStep7() {
     .then(() => {
       route.params.id && fetchCheckStep(route.params.id.toString());
     })
-    .catch(() => {})
+    .catch((err) => {
+      messageError($q, err);
+    })
     .finally(() => {
       hideLoader();
     });

src/modules/06_evaluate/components/ExpertPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { reactive, onMounted } from "vue";
+import { reactive, ref, onMounted } from "vue";
 import { useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 
@@ -25,11 +25,12 @@ const formData = reactive<FormCommandSe>({
   commanderAbovePosition: "",
 });
 
-/**
+const isLoading = ref(false);
- * ยืนยันการบันทึกข้อมูล
+
- */
+/** ยืนยันการบันทึกข้อมูล */
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
+    showLoader();
     const body = {
       ...formData,
       citizenId: dataPerson.formData.citizenId,
@@ -40,8 +41,7 @@ function onSubmit() {
       posNo: dataPerson.formData.posNo,
       birthDate: dataPerson.formData.birthDate,
     };
-    showLoader();
+    await http
-    http
       .post(config.API.evaluationExpertise, body)
       .then((res) => {
         router.push(`/evaluate/detail/expertise/${res.data.result.id}`);
@@ -55,12 +55,10 @@ function onSubmit() {
   });
 }
 
-/**
+/** ฟังก์ชันดึงข้อมูลรายชื่อ ผู้บังคับบัญชาชั้นต้น */
- * fetch รายชื่อ ผู้บังคับบัญชาชั้นต้น,
+async function getData() {
- */
+  isLoading.value = true;
-function getData() {
+  await http
-  showLoader();
-  http
     .get(config.API.orgSearchCommander())
     .then(async (res) => {
       const data = await res.data.result;
@@ -74,12 +72,12 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-onMounted(() => {
+onMounted(async () => {
-  getData();
+  await getData();
 });
 </script>
 
@@ -103,7 +101,14 @@ onMounted(() => {
       </div>
       <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
         <div class="col-12">
-          <q-card bordered>
+          <q-skeleton
+            v-if="isLoading"
+            height="230px"
+            square
+            style="border-radius: 8px"
+          />
+
+          <q-card bordered v-else>
             <div class="col-12 row q-pa-md q-col-gutter-y-md">
               <div class="col-12">
                 <q-card bordered class="col-12">

src/modules/06_evaluate/components/PopupPosition.vue

@@ -16,6 +16,7 @@ const { showLoader, hideLoader, messageError, formatDatePosition } =
 
 const modal = defineModel<boolean>("modal", { required: true });
 
+const isLoading = ref<boolean>(false);
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -36,7 +37,7 @@ function onClosePopup() {
 }
 
 async function fetchDataPosition() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.salaryTenurePosition(""))
     .then((res) => {
@@ -76,7 +77,7 @@ async function fetchDataPosition() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -98,7 +99,19 @@ watch(modal, (v) => {
       <q-separator />
       <q-card-section>
         <div class="row q-col-gutter-sm q-pb-sm">
-          <div class="col" v-for="(item, index) in cardData" :key="index">
+          <q-skeleton
+            v-if="isLoading"
+            type="Qcard"
+            width="100%"
+            height="240px"
+          />
+
+          <div
+            v-else
+            class="col"
+            v-for="(item, index) in cardData"
+            :key="index"
+          >
             <q-card bordered class="col-12" style="border: 1px solid #d6dee1">
               <div class="col-12 text-weight-medium bg-grey-1 q-py-xs q-px-md">
                 {{ item.label }}

src/modules/06_evaluate/components/TableListEvaluate.vue

@@ -8,6 +8,7 @@ import config from "@/app.config";
 import http from "@/plugins/http";
 import { useEvaluateStore } from "@/modules/06_evaluate/store";
 import { useCounterMixin } from "@/stores/mixin";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -37,6 +38,10 @@ const props = defineProps({
     type: Function,
     require: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const emit = defineEmits(["update:pagination"]);
@@ -135,7 +140,9 @@ onMounted(() => {
 </script>
 
 <template>
+  <SkeletonTable v-if="isLoading" :columns="columns" />
   <d-table
+    v-else
     ref="table"
     flat
     bordered

src/modules/06_evaluate/components/step/step1.vue

@@ -37,6 +37,7 @@ const formData = reactive<FormSpec>({
   isHaveProLicense: false, // มีใบอนุญาตประกอบวิชาชีพของสายงานต่างๆ
   isHaveMinPeriodOrHoldPos: false, // มีระยะเวลาขั้นต่ำในการดำรงตำแหน่งหรือเคยดำรงตำแหน่งในสายงานที่จะคัดเลือกตามคุณวุฒิของบุคคลและระดับตำแหน่งที่จะคัดเลือก]
 });
+const isLoading = ref<boolean>(false);
 
 /** function อัปเดทตรวจสอบคุณสมบัติ*/
 async function updateValue() {
@@ -48,6 +49,7 @@ async function updateValue() {
  * @param data ตรวจสอบคุณสมบัติ
  */
 async function fetchCheckSpec(data: PersonInformation) {
+  isLoading.value = true;
   formData.isEducationalQft = data.isEducationalQft;
   formData.isGovermantServiceHtr = data.isGovermantServiceHtr;
   formData.isOperatingExp = data.isOperatingExp;
@@ -55,6 +57,7 @@ async function fetchCheckSpec(data: PersonInformation) {
   formData.isHaveSpecificQft = data.isHaveSpecificQft;
   formData.isHaveProLicense = data.isHaveProLicense;
   formData.isHaveMinPeriodOrHoldPos = data.isHaveMinPeriodOrHoldPos;
+  isLoading.value = false;
 }
 
 /**
@@ -87,7 +90,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="q-pa-sm">
+  <q-skeleton
+    v-if="isLoading"
+    class="q-mb-md"
+    type="Qcard"
+    width="100%"
+    height="100%"
+  />
+  <div class="q-pa-sm" v-else>
     <q-list dense>
       <q-item v-ripple class="listItem">
         <q-item-section avatar>

src/modules/06_evaluate/components/step/step2.vue

@@ -52,6 +52,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -60,6 +61,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -68,6 +70,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -76,6 +79,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -96,6 +100,7 @@ const numOfPages = ref<number>(0);
 const page = ref<number>(1);
 const pdfSrc = ref<any>();
 const profile = ref<any>();
+const isLoading = ref<boolean>(false);
 
 /** function ไปหน้าต่อไปของรายงาน */
 function nextPage() {
@@ -201,8 +206,9 @@ async function uploadfile(uploadUrl: string, file: any) {
  * function fecth รายชื่อผู้เซ็นเอกสาร
  * @param id evaluate ID
  */
-function fetcheSigner(id: string) {
+async function fetcheSigner(id: string) {
-  http
+  isLoading.value = true;
+  await http
     .get(config.API.evaluationSignerDoc1(id))
     .then((res) => {
       const data = res.data.result;
@@ -220,9 +226,12 @@ function fetcheSigner(id: string) {
       formCommand.subject = data.subject;
       store.statusUpload = true;
     })
-    .catch(() => {
+    .catch(async () => {
       store.statusUpload = false;
-      getCommander();
+      await getCommander();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
@@ -247,6 +256,11 @@ async function fetchCheckSpec(id: string) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
+
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -264,6 +278,7 @@ async function downloadFile(fileName: string) {
       };
 
       emit("update:form", formCommand, ref);
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
@@ -316,29 +331,16 @@ watch(
 
 /**lifecycle Hooks*/
 onMounted(async () => {
-  const user = await tokenParsed();
-
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
       formTemplates.value.forEach((e) => {
         downloadFile(e.fileName);
       }),
-      // downloadFile("1-แบบพิจารณาคุณสมบัติบุคคล"),
-      // downloadFile("2-แบบแสดงรายละเอียดการเสนอผลงาน"),
-      // downloadFile(
-      //   "3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)"
-      // ),
-      // downloadFile("4-แบบประเมินคุณลักษณะบุคคล"),
-      // downloadFile("5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)"),
-      // downloadFile("6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)"),
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -347,7 +349,8 @@ onMounted(async () => {
   <div class="col-12 q-pa-sm">
     <!-- ผลงาน -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton type="Qcard" height="100px" v-if="isLoading" class="q-mb-sm" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 col-12 q-py-sm q-px-md">
           ผลงาน
         </div>
@@ -422,7 +425,8 @@ onMounted(async () => {
 
     <!-- เลือกผู้เซ็นเอกสาร -->
     <div class="col-12">
-      <q-card bordered class="cardSp1 col-12">
+      <q-skeleton type="Qcard" height="200px" v-if="isLoading" />
+      <q-card v-else bordered class="cardSp1 col-12">
         <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
           เลือกผู้เซ็นเอกสาร
         </div>
@@ -573,14 +577,16 @@ onMounted(async () => {
     </div>
 
     <!-- v-if="store.statusUpload -->
-    <div class="row q-col-gutter-sm">
+    <div class="row q-col-gutter-sm q-mt-sm">
       <div
         class="col-6"
         v-if="store.currentStep === 2"
         v-for="(item, index) in formTemplates"
         :key="index"
       >
-        <q-card bordered class="cardSp1">
+        <q-skeleton type="Qcard" height="100px" v-if="item.isLoading" />
+
+        <q-card bordered class="cardSp1" v-else>
           <div
             class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
           >
@@ -662,541 +668,6 @@ onMounted(async () => {
           </div>
         </q-card>
       </div>
-
-      <!-- แบบพิจารณาคุณสมบัติบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบพิจารณาคุณสมบัติบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_005',
-                    'template-1',
-                    'แบบพิจารณาคุณสมบัติบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile1 != ''"
-                :href="downloadFile1"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation1Ref"
-                  v-model="fileEvaluation1"
-                  :disable="!store.statusUpload"
-                  class="col-xs-12 col-sm-12"
-                  label="อัปโหลดไฟล์"
-                  outlined
-                  dense
-                  lazy-rules
-                  hide-bottom-space
-                  accept=".pdf"
-                  :rules="
-                    downloadFile1 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '1-แบบพิจารณาคุณสมบัติบุคคล',
-                          fileEvaluation1
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบแสดงรายละเอียดการเสนอผลงาน     -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm col-12 row items-center"
-          >
-            <div>แบบแสดงรายละเอียดการเสนอผลงาน</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_006',
-                    'template-2',
-                    'แบบแสดงรายละเอียดการเสนอผลงาน'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile2 != ''"
-                :href="downloadFile2"
-                target="_blank"
-                class="q-ml-sm"
-                color="blue"
-                flat
-                dense
-                icon="visibility"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <div class="row q-col-gutter-md col-12">
-                <q-file
-                  ref="fileEvaluation2Ref"
-                  v-model="fileEvaluation2"
-                  :disable="!store.statusUpload"
-                  class="col-12"
-                  outlined
-                  dense
-                  label="อัปโหลดไฟล์"
-                  lazy-rules
-                  accept=".pdf"
-                  hide-bottom-space
-                  :rules="
-                    downloadFile2 === ''
-                      ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                      : []
-                  "
-                >
-                  <template v-slot:prepend>
-                    <q-icon name="attach_file" />
-                  </template>
-                  <template v-slot:after>
-                    <q-btn
-                      :disable="!store.statusUpload"
-                      flat
-                      round
-                      dense
-                      color="primary"
-                      icon="mdi-upload"
-                      @click="
-                        fetchPathUpload(
-                          'เล่ม 1',
-                          evaluateId,
-                          '2-แบบแสดงรายละเอียดการเสนอผลงาน',
-                          fileEvaluation2
-                        )
-                      "
-                      ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                    >
-                  </template>
-                </q-file>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div>
-              แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล
-              (เอกสารแบบ ก.)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_007',
-                    'template-3',
-                    'แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div v-if="downloadFile3 != ''">
-              <q-btn
-                :href="downloadFile3"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation3Ref"
-                v-model="fileEvaluation3"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                :rules="
-                  downloadFile3 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-                label="อัปโหลดไฟล์"
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '3-แบบตรวจสอบความถูกต้องครบถ้วนของข้อมูลเพื่อประกอบการคัดเลือกบุคคล (เอกสารแบบ ก)',
-                        fileEvaluation3
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm no-wrap"
-          >
-            <div class="col-7">
-              แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)
-            </div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_009',
-                    'template-5',
-                    'แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)'
-                  )
-                "
-                ><q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile5 != ''"
-                :href="downloadFile5"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation5Ref"
-                v-model="fileEvaluation5"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                accept=".pdf"
-                hide-bottom-space
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile5 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '5-แบบสรุปข้อมูลของผู้ขอรับการคัดเลือก (เอกสารหมายเลข 9)',
-                        fileEvaluation5
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!-- แบบประเมินคุณลักษณะบุคคล -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>แบบประเมินคุณลักษณะบุคคล</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_008',
-                    'template-4',
-                    'แบบประเมินคุณลักษณะบุคคล'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile4 != ''"
-                :href="downloadFile4"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation4Ref"
-                v-model="fileEvaluation4"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                dense
-                lazy-rules
-                hide-bottom-space
-                accept=".pdf"
-                label="อัปโหลดไฟล์"
-                :rules="
-                  downloadFile4 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    flat
-                    round
-                    dense
-                    :disable="!store.statusUpload"
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '4-แบบประเมินคุณลักษณะบุคคล',
-                        fileEvaluation4
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
-
-      <!--ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) -->
-      <!-- <div class="col-6" v-if="store.currentStep === 2">
-        <q-card bordered class="cardSp1">
-          <div
-            class="col-12 row text-weight-medium bg-grey-1 q-py-sm q-pl-md q-pr-sm items-center"
-          >
-            <div>ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)</div>
-            <q-space />
-            <div>
-              <q-btn
-                flat
-                dense
-                icon="download"
-                color="indigo"
-                @click="
-                  onClickDowloadFile(
-                    'EV1_010',
-                    'template-6',
-                    'ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)'
-                  )
-                "
-              >
-                <q-tooltip> ดาวน์โหลดต้นแบบ </q-tooltip></q-btn
-              >
-            </div>
-            <div>
-              <q-btn
-                v-if="downloadFile6 != ''"
-                :href="downloadFile6"
-                target="_blank"
-                flat
-                dense
-                icon="visibility"
-                class="q-ml-sm"
-                color="blue"
-              >
-                <q-tooltip> ดูไฟล์เอกสาร </q-tooltip></q-btn
-              >
-            </div>
-          </div>
-          <div class="col-12"><q-separator /></div>
-          <div class="row">
-            <div class="col-12 q-pa-sm">
-              <q-file
-                ref="fileEvaluation6Ref"
-                v-model="fileEvaluation6"
-                :disable="!store.statusUpload"
-                class="col-12"
-                outlined
-                hide-bottom-space
-                dense
-                lazy-rules
-                label="อัปโหลดไฟล์"
-                accept=".pdf"
-                :rules="
-                  downloadFile6 === ''
-                    ? [(val:any) => !!val || 'กรุณาเลือกไฟล์']
-                    : []
-                "
-              >
-                <template v-slot:prepend>
-                  <q-icon name="attach_file" />
-                </template>
-                <template v-slot:after>
-                  <q-btn
-                    :disable="!store.statusUpload"
-                    flat
-                    round
-                    dense
-                    color="primary"
-                    icon="mdi-upload"
-                    @click="
-                      fetchPathUpload(
-                        'เล่ม 1',
-                        evaluateId,
-                        '6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11)',
-                        fileEvaluation6
-                      )
-                    "
-                    ><q-tooltip>อัปโหลดไฟล์</q-tooltip></q-btn
-                  >
-                </template>
-              </q-file>
-            </div>
-          </div>
-        </q-card>
-      </div> -->
     </div>
   </div>
 

src/modules/06_evaluate/components/step/step3.vue

@@ -13,7 +13,7 @@ const $q = useQuasar();
 const store = useEvaluateStore();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -21,6 +21,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 /** emit*/
 const emit = defineEmits(["update:file"]);
 
+const isLoading = ref(false);
 const selectedItem = ref(1);
 const formTemplates = ref([
   {
@@ -55,8 +56,10 @@ function handleItemClick(itemNumber: number) {
  * function เรีกยเอกสาร
  * @param fileName ชื่อเอกสาร
  */
-async function fetchDocument(fileName: string) {
+async function fetchDocument(fileName: string, forceDownload = false) {
-  showLoader();
+  if (forceDownload) {
+    isLoading.value = true;
+  }
   evaluateId.value &&
     (await http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
@@ -67,7 +70,7 @@ async function fetchDocument(fileName: string) {
         messageError($q, err);
       })
       .finally(() => {
-        hideLoader();
+        isLoading.value = false;
       }));
 }
 
@@ -95,7 +98,10 @@ async function downloadFile(url: string) {
 
 /** HooK lifecycle*/
 onMounted(async () => {
-  await fetchDocument(formTemplates.value[selectedItem.value - 1].fileName);
+  await fetchDocument(
+    formTemplates.value[selectedItem.value - 1].fileName,
+    true
+  );
 });
 </script>
 
@@ -111,7 +117,8 @@ onMounted(async () => {
       @click="handleItemClick(index + 1)"
       class="cursor-pointer"
     >
-      <q-item-section>{{ item.title }}</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+      <q-item-section v-else>{{ item.title }}</q-item-section>
     </q-item>
   </q-list>
 </template>

src/modules/06_evaluate/components/step/step4.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 import axios from "axios";
 
 import http from "@/plugins/http";
@@ -23,6 +23,7 @@ const formTemplates = ref<any[]>([
     fileName: "1-แบบพิจารณาคุณสมบัติบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_006",
@@ -31,6 +32,7 @@ const formTemplates = ref<any[]>([
     fileName: "2-แบบแสดงรายละเอียดการเสนอผลงาน (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_008",
@@ -39,6 +41,7 @@ const formTemplates = ref<any[]>([
     fileName: "4-แบบประเมินคุณลักษณะบุคคล (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
   {
     code: "EV1_010",
@@ -47,6 +50,7 @@ const formTemplates = ref<any[]>([
     fileName: "6-ผลงานที่จะส่งประเมิน (เอกสารหมายเลข 11) (ฉบับแก้ไข)",
     downloadFile: "",
     file: null,
+    isLoading: false,
   },
 ]);
 
@@ -181,6 +185,10 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param fileName ชื่อไฟล์
  */
 async function downloadFile(fileName: string) {
+  const loadingKey = formTemplates.value.findIndex(
+    (item) => item.fileName === fileName
+  );
+  formTemplates.value[loadingKey].isLoading = true;
   await http
     .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
     .then((res) => {
@@ -190,13 +198,15 @@ async function downloadFile(fileName: string) {
       if (index !== -1) {
         formTemplates.value[index].downloadFile = res.data.downloadUrl;
       }
+    })
+    .finally(() => {
+      formTemplates.value[loadingKey].isLoading = false;
     });
 }
 
 /**lifecycle Hooks*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([
       fetcheSigner(evaluateId.value),
       fetchCheckSpec(evaluateId.value),
@@ -206,8 +216,6 @@ onMounted(async () => {
     ]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -226,7 +234,13 @@ onMounted(async () => {
 
   <div class="row q-col-gutter-sm q-pa-sm">
     <div class="col-6" v-for="(item, index) in formTemplates" :key="index">
+      <q-skeleton
+        type="Qcard"
+        :height="store.currentStep !== 4 ? '50px' : '100px'"
+        v-if="item.isLoading"
+      />
       <q-card
+        v-else
         bordered
         class="cardSp1"
         v-if="

src/modules/06_evaluate/components/step/step5.vue

@@ -12,7 +12,7 @@ import type { FileObject } from "@/modules/06_evaluate/interface/main";
 const $q = useQuasar();
 const mixins = useCounterMixin();
 const route = useRoute();
-const { date2Thai, success, showLoader, hideLoader } = mixins;
+const { date2Thai, success, showLoader, hideLoader, messageError } = mixins;
 
 /** id ประเมิน*/
 const evaluateId = ref<string>(route.params.id.toString());
@@ -20,6 +20,7 @@ const evaluateId = ref<string>(route.params.id.toString());
 const dateStartAnnounce = ref<string | null>(date2Thai(new Date()));
 const dateEndAnnounce = ref<string | null>(date2Thai(new Date()));
 const statusFile = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
 
 /** เอกสารประกาศผลการคัดเลือกบุคคล*/
 const items = ref<FileObject[]>([
@@ -44,22 +45,16 @@ const items = ref<FileObject[]>([
 ]);
 
 /** fuinction เรียกข้อมูลลิงก์ดาวนฺโหลด*/
-function onClickfetchDocument(fileName: string, type: string) {
+async function onClickfetchDocument(fileName: string, type: string) {
   if (evaluateId.value) {
-    showLoader();
+    await http
-    http
       .get(config.API.loadFileDocument("เล่ม 1", evaluateId.value, fileName))
       .then((res) => {
         const downloadUrl = res.data.downloadUrl;
         type === "COPPY" && coppyLink(downloadUrl);
         type === "CHECK" && (statusFile.value = true);
       })
-      .catch(() => {})
+      .catch(() => {});
-      .finally(() => {
-        setTimeout(() => {
-          hideLoader();
-        }, 1500);
-      });
   }
 }
 
@@ -71,9 +66,10 @@ async function coppyLink(link: string) {
 }
 
 /** function เรียกข้อมูลวันที่ประกาศ*/
-function fetchCheckDate() {
+async function fetchCheckDate() {
+  isLoading.value = true;
   evaluateId.value &&
-    http
+    (await http
       .get(config.API.evaluationCheckDate(evaluateId.value))
       .then((res) => {
         const data = res.data.result;
@@ -82,7 +78,12 @@ function fetchCheckDate() {
         endDate.setDate(endDate.getDate() + 30);
         dateEndAnnounce.value = date2Thai(endDate);
       })
-      .catch(() => {});
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        isLoading.value = false;
+      }));
 }
 
 /** Hook lifecycle*/
@@ -91,10 +92,16 @@ onMounted(async () => {
   await onClickfetchDocument("บันทึกแจ้งผลการประกาศคัดเลือก", "CHECK");
 });
 </script>
+`
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row col-12 q-col-gutter-sm">
+    <q-skeleton
+      v-if="isLoading"
+      type="Qcard"
+      style="width: 100%; height: 300px"
+    />
+    <div v-else class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
         <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">

src/modules/06_evaluate/components/step/step6.vue

@@ -50,6 +50,10 @@ const formCommand = reactive<FormCommand>({
 
 const modalView = ref<boolean>(false);
 
+const isLoading = ref<boolean>(false); // ใช้สำหรับเช็คการโหลดไฟล์
+const isLoadingFile = ref<boolean>(false);
+const isLoadingDate = ref<boolean>(false);
+
 /** function อัปเดท ผลงาน,ผู้เซ็นเอกสาร*/
 function updateInput(value: any) {
   const ref = {
@@ -85,16 +89,18 @@ async function fetchPathUpload(
     showLoader();
     await http
       .post(config.API.loadPathDocument(volume, id), body)
-      .then((res) => {
+      .then(async (res) => {
         const foundKey: string | undefined = Object.keys(res.data).find(
           (key) =>
             res.data[key]?.fileName !== undefined &&
             res.data[key]?.fileName !== ""
         );
-        foundKey && uploadfile(res.data[foundKey]?.uploadUrl, file);
+        foundKey && (await uploadfile(res.data[foundKey]?.uploadUrl, file));
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   }
@@ -129,7 +135,7 @@ async function uploadfile(uploadUrl: string, file: any) {
  * @param id ประเมิน
  */
 async function fetcheSigner(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationSignerDoc2(id))
     .then((res) => {
@@ -148,40 +154,43 @@ async function fetcheSigner(id: string) {
       formCommand.author = data.authorDoc2;
       formCommand.subject = data.subjectDoc2;
       formCommand.assignedPosition = data.assignedPosition;
-
       assignedPosLevel.value = data.assignedPosLevel;
-
       store.statusUpload6 = data.isUpdated;
     })
     .catch((err) => {
       messageError($q, err);
-      // store.statusUpload6 = false;
-      // getCommander();
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
 const dateEndPrepareDoc2 = ref<string | null>(date2Thai(new Date()));
 /** functoin เรียกข้อมูลวันสุดท้ายของการส่งผลงาน*/
 async function fetchCheckDate() {
-  evaluateId.value &&
+  if (!evaluateId.value) return;
-    (await http
+  isLoadingDate.value = true;
-      .get(config.API.evaluationCheckDate(evaluateId.value))
+  await http
-      .then((res) => {
+    .get(config.API.evaluationCheckDate(evaluateId.value))
-        const data = res.data.result;
+    .then((res) => {
+      const data = res.data.result;
 
-        const endDate = new Date(data.dateEndAnnounce);
+      const endDate = new Date(data.dateEndAnnounce);
-        endDate.setDate(endDate.getDate() + 180);
+      endDate.setDate(endDate.getDate() + 180);
-        dateEndPrepareDoc2.value = date2Thai(endDate);
+      dateEndPrepareDoc2.value = date2Thai(endDate);
-      })
+    })
-      .catch((err) => {}));
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      isLoadingDate.value = false;
+    });
 }
 
 const downloadUrl = ref<string>("");
 /** function เช็คไฟล์อัปโหลด*/
 async function checkDoc() {
+  isLoadingFile.value = true;
   await http
     .get(
       config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
@@ -195,26 +204,10 @@ async function checkDoc() {
       };
 
       emit("update:form", formCommand, ref);
+      isLoadingFile.value = false;
     });
 }
 
-// function getCommander() {
-//   http
-//     .get(config.API.searchCommander)
-//     .then((res) => {
-//       const data = res.data.result;
-//       formCommand.commanderFullname = data.commanderFullname;
-//       formCommand.commanderPosition = data.commanderPosition;
-//       formCommand.commanderAboveFullname = data.commanderAboveFullname;
-//       formCommand.commanderAbovePosition = data.commanderAbovePosition;
-//       formCommand.commanderOrg = data.commanderOrg;
-//       formCommand.commanderAboveOrg = data.commanderAboveOrg;
-//     })
-//     .catch((e) => {
-//       messageError($q, e);
-//     });
-// }
-
 function onAddSubject() {
   formCommand.subject.push("");
 }
@@ -256,9 +249,10 @@ onMounted(async () => {
 
 <template>
   <div class="row col-12 q-pa-sm">
-    <div class="row q-col-gutter-sm">
+    <div class="row col-12 q-col-gutter-sm">
       <div class="col-12 text-center">
-        <q-banner rounded class="text-weight-bold text-red-14 bg-red-1">
+        <q-skeleton v-if="isLoadingDate" type="Qcard" height="50px" />
+        <q-banner v-else rounded class="text-weight-bold text-red-14 bg-red-1">
           <div class="text-weight-bold">
             <q-icon name="info_outline" color="red-14" size="24px" />
             วันสุดท้ายของการส่งผลงานคือวันที่ {{ dateEndPrepareDoc2 }}
@@ -268,7 +262,14 @@ onMounted(async () => {
 
       <!-- ผลงาน -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">ผลงาน</div>
           <div class="col-12"><q-separator /></div>
           <div class="col-12 q-pa-sm">
@@ -372,7 +373,13 @@ onMounted(async () => {
 
       <!-- เลือกผู้เซ็นเอกสาร -->
       <div class="col-12">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton v-if="isLoading" type="Qcard" height="200px" width="100%" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="text-weight-medium bg-grey-1 q-py-sm q-px-md">
             เลือกผู้เซ็นเอกสาร
           </div>
@@ -541,7 +548,13 @@ onMounted(async () => {
 
       <!-- อัปไฟล์ -->
       <div class="col-12" v-if="store.currentStep === 6">
-        <q-card bordered class="shadow-0" style="border: 1px solid #d6dee1">
+        <q-skeleton type="Qcard" height="100px" v-if="isLoadingFile" />
+        <q-card
+          v-else
+          bordered
+          class="shadow-0"
+          style="border: 1px solid #d6dee1"
+        >
           <div class="col-12 row bg-grey-1">
             <div class="text-weight-medium q-py-sm q-px-md">เอกสารเล่ม 2</div>
             <q-space />

src/modules/06_evaluate/components/step/step7.vue

@@ -13,7 +13,7 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const route = useRoute();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** emit*/
 const emit = defineEmits(["update:file"]);
@@ -22,28 +22,25 @@ const emit = defineEmits(["update:file"]);
 const evaluateId = ref<string>(route.params.id.toString());
 
 const selectedItem = ref(1);
+const isLoading = ref(false);
 
 /** function เรีกยเอกสาร*/
 async function fetchDocument() {
-  showLoader();
+  if (!evaluateId.value) return;
-  evaluateId.value &&
+  isLoading.value = true;
-    (await http
+  await http
-      .get(
+    .get(
-        config.API.loadFileDocument(
+      config.API.loadFileDocument("เล่ม 2", evaluateId.value, "1-เอกสารเล่ม 2")
-          "เล่ม 2",
+    )
-          evaluateId.value,
+    .then(async (res) => {
-          "1-เอกสารเล่ม 2"
+      await downloadFile(res.data.downloadUrl);
-        )
+    })
-      )
+    .catch((err) => {
-      .then(async (res) => {
+      messageError($q, err);
-        await downloadFile(res.data.downloadUrl);
+    })
-      })
+    .finally(() => {
-      .catch((err) => {
+      isLoading.value = false;
-        messageError($q, err);
+    });
-      })
-      .finally(() => {
-        hideLoader();
-      }));
 }
 
 /**
@@ -84,7 +81,9 @@ onMounted(async () => {
       active-class="text-primary"
       class="cursor-pointer"
     >
-      <q-item-section>เอกสารเล่ม 2</q-item-section>
+      <q-skeleton v-if="isLoading" type="text" width="100%" />
+
+      <q-item-section v-else>เอกสารเล่ม 2</q-item-section>
     </q-item>
   </q-list>
 </template>

src/modules/06_evaluate/components/step/step8.vue

@@ -107,9 +107,11 @@ async function uploadfile(uploadUrl: string, file: any) {
 }
 
 const downloadUrl = ref<string>("");
+const isLoadingFile = ref<boolean>(false);
 /** function เช็คไฟล์อัปโหลด*/
-function checkDoc() {
+async function checkDoc() {
-  http
+  isLoadingFile.value = true;
+  await http
     .get(
       config.API.loadFileDocument(
         "เล่ม 2",
@@ -119,6 +121,9 @@ function checkDoc() {
     )
     .then((res: any) => {
       downloadUrl.value = res.data.downloadUrl;
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
     });
 }
 
@@ -148,12 +153,9 @@ async function fetcheSigner(id: string) {
 /** lifecycleHook*/
 onMounted(async () => {
   try {
-    showLoader();
     await Promise.all([checkDoc(), fetcheSigner(evaluateId.value)]);
   } catch (error) {
     console.log(error);
-  } finally {
-    hideLoader();
   }
 });
 </script>
@@ -178,7 +180,12 @@ onMounted(async () => {
           (store.currentStep !== 8 && downloadUrl) || store.currentStep == 8
         "
       >
-        <q-card class="shadow-0" bordered>
+        <q-skeleton
+          type="Qcard"
+          :height="store.currentStep !== 8 ? '50px' : '100px'"
+          v-if="isLoadingFile"
+        />
+        <q-card v-else class="shadow-0" bordered>
           <div class="row col-12 bg-grey-1 q-px-sm q-py-xs items-center">
             <div class="text-weight-medium">เอกสารเล่ม 2 (ฉบับแก้ไข)</div>
             <q-space />

src/modules/06_evaluate/components/viewstep/popupHistory.vue

@@ -9,12 +9,15 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 
 import HeaderDialog from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const $q = useQuasar();
 const route = useRoute();
 const mixins = useCounterMixin();
 const { showLoader, hideLoader, date2Thai, messageError } = mixins;
 
+const isLoading = ref<boolean>(false);
+
 const evaluateId = computed(() => {
   const id = route.params.id ? route.params.id.toString() : "";
   return id;
@@ -85,7 +88,7 @@ async function fetchListHistory(id: string) {
     minute: "2-digit",
     second: "2-digit",
   };
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.evaluationHistory(id))
     .then((res) => {
@@ -104,7 +107,7 @@ async function fetchListHistory(id: string) {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -124,7 +127,9 @@ watch(
       <q-card-section>
         <div class="col-xs-12 col-sm-12 col-md-12 row q-col-gutter-md">
           <div class="col-12">
-            <q-table
+            <SkeletonTable v-if="isLoading" :columns="columns" />
+            <d-table
+              v-else
               ref="table"
               flat
               bordered
@@ -161,7 +166,7 @@ watch(
                   </q-td>
                 </q-tr>
               </template>
-            </q-table>
+            </d-table>
           </div>
         </div>
       </q-card-section>
@@ -169,31 +174,4 @@ watch(
   </q-dialog>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-.custom-header-table {
-  height: auto;
-  .q-table tr:nth-child(odd) td {
-    background: white;
-  }
-  .q-table tr:nth-child(even) td {
-    background: #f8f8f8;
-  }
-
-  .q-table thead tr {
-    background: #ecebeb;
-  }
-
-  .q-table thead tr th {
-    position: sticky;
-    z-index: 1;
-  }
-  /* this will be the loading indicator */
-  .q-table thead tr:last-child th {
-    /* height of all previous header rows */
-    top: 48px;
-  }
-  .q-table thead tr:first-child th {
-    top: 0;
-  }
-}
-</style>

src/modules/06_evaluate/components/viewstep/tableStep1.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const props = defineProps({
   columns: {
     type: Array as () => any[],
@@ -8,12 +10,18 @@ const props = defineProps({
     type: Array as () => any[],
     require: true,
   },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
 
 <template>
   <div class="q-pa-sm row col-12">
+    <SkeletonTable class="col-12" v-if="isLoading" :columns="props.columns" />
     <d-table
+      v-else
       ref="table"
       flat
       bordered

src/modules/06_evaluate/components/viewstep/viewStep1.vue

@@ -2,7 +2,7 @@ div
 <script setup lang="ts">
 import { reactive, onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useQuasar } from "quasar";
+import { is, useQuasar } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -21,6 +21,7 @@ import type {
 /** importComponents*/
 import TableData from "@/modules/06_evaluate/components/viewstep/tableStep1.vue";
 import HeaderDialog from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use*/
 const mixin = useCounterMixin();
@@ -29,8 +30,7 @@ const storeEva = useEvaluateStore();
 const storeData = useDataStore();
 const $q = useQuasar();
 const route = useRoute();
-const { showLoader, hideLoader, messageError, date2Thai, findOrgNameHtml } =
+const { messageError, date2Thai, findOrgNameHtml } = mixin;
-  mixin;
 const {
   columnsCertificates,
   columnSalaries,
@@ -76,8 +76,19 @@ const formDetail = reactive<any>({
   honor: [],
 });
 
+const isLoading = reactive({
+  loadDetail: false,
+  loadEducation: false,
+  loadCertificate: false,
+  loadSalary: false,
+  loadTraining: false,
+  loadAssessment: false,
+  loadExperience: false,
+});
+
 /** function เรียกข้อมูลตรวจสอบคุณสมบัติ*/
 async function fetchDetail() {
+  isLoading.loadDetail = true;
   try {
     if (!storeData.dataprofilePosition) {
       const res = await http.get(config.API.profilePosition());
@@ -87,6 +98,8 @@ async function fetchDetail() {
     }
   } catch (error) {
     messageError($q, error);
+  } finally {
+    isLoading.loadDetail = false;
   }
 }
 
@@ -109,58 +122,113 @@ async function updateFormDetail(data: DataProfile) {
   formDetail.posExecutive = data.posExecutiveName;
   formDetail.positionArea = data.positionArea;
   await fetchDataAllDetail();
-
   emit("update:formDeital", formDetail);
 }
 
 async function fetchDataAllDetail() {
   // ดึงข้อมูลประวัติการศึกษา
-  http.get(config.API.dataUserEducations).then((res) => {
+  isLoading.loadEducation = true;
-    formDetail.educations = res.data.result;
+  http
-  });
+    .get(config.API.dataUserEducations)
+    .then((res) => {
+      formDetail.educations = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .then(() => {
+      isLoading.loadEducation = false;
+    });
 
   // ดึงข้อมูลใบอนุญาตประกอบวิชาชีพ
-  http.get(config.API.dataUserCertificate("certificate")).then((res) => {
+  isLoading.loadCertificate = true;
-    formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
+  http
-      certificateNo: e.certificateNo,
+    .get(config.API.dataUserCertificate("certificate"))
-      certificateType: e.certificateType,
+    .then((res) => {
-      expireDate: e.expireDate,
+      formDetail.certificates = res.data.result.map((e: CertificatesForm) => ({
-      issueDate: e.issueDate,
+        certificateNo: e.certificateNo,
-      issuer: e.issuer,
+        certificateType: e.certificateType,
-    }));
+        expireDate: e.expireDate,
-  });
+        issueDate: e.issueDate,
+        issuer: e.issuer,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadCertificate = false;
+    });
 
   // ดึงข้อมูลประวัติการรับราชการ
-  http.get(config.API.dataUserSalaryPosition).then((res) => {
+  isLoading.loadSalary = true;
-    formDetail.salaries = res.data.result;
+  http
-  });
+    .get(config.API.dataUserSalaryPosition)
+    .then((res) => {
+      formDetail.salaries = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadSalary = false;
+    });
 
   // ดึงข้อมูลประวัติการฝึกอบรมดูงาน
-  http.get(config.API.dataUserCertificate("training")).then((res) => {
+  isLoading.loadTraining = true;
-    formDetail.trainings = res.data.result.map((e: any) => ({
+  http
-      dateOrder: e.dateOrder,
+    .get(config.API.dataUserCertificate("training"))
-      department: e.department,
+    .then((res) => {
-      duration: e.duration,
+      formDetail.trainings = res.data.result.map((e: any) => ({
-      endDate: e.endDate,
+        dateOrder: e.dateOrder,
-      name: e.name,
+        department: e.department,
-      numberOrder: e.numberOrder,
+        duration: e.duration,
-      place: e.place,
+        endDate: e.endDate,
-      startDate: e.startDate,
+        name: e.name,
-      topic: e.topic,
+        numberOrder: e.numberOrder,
-      yearly: e.yearly,
+        place: e.place,
-    }));
+        startDate: e.startDate,
-  });
+        topic: e.topic,
+        yearly: e.yearly,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadTraining = false;
+    });
 
-  http.get(config.API.dataUserPerformance).then((res) => {
+  // ดึงข้อมูลประสบการณ์ในการปฏิบัติงาน
-    formDetail.assessments = res.data.result.map((e: any) => ({
+  isLoading.loadExperience = true;
-      ...e,
+  http
-      isAdd: false,
+    .get(config.API.dataUserPerformance)
-    }));
+    .then((res) => {
-  });
+      formDetail.assessments = res.data.result.map((e: any) => ({
+        ...e,
+        isAdd: false,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 
-  http.get(config.API.dataUserPortfolio).then((res) => {
+  // ดึงข้อมูลผลงานที่เคยเสนอขอ
-    formDetail.experience = res.data.result;
+  isLoading.loadExperience = true;
-  });
+  http
+    .get(config.API.dataUserPortfolio)
+    .then((res) => {
+      formDetail.experience = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadExperience = false;
+    });
 }
 
 /**
@@ -168,40 +236,52 @@ async function fetchDataAllDetail() {
  * @param id ประเมิน
  */
 async function fetchCheckSpec(data: any) {
-  formDetail.userId = data.id;
+  isLoading.loadEducation = true;
-  formDetail.citizenId = data.citizenId;
+  isLoading.loadCertificate = true;
-  formDetail.prefix = data.prefix;
+  isLoading.loadSalary = true;
-  formDetail.fullName = data.fullName;
+  isLoading.loadTraining = true;
-  formDetail.position = data.position;
+  isLoading.loadExperience = true;
-  formDetail.oc = data.oc;
+  try {
-  formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
+    formDetail.userId = data.id;
-  formDetail.positionLevel = data.positionLevel;
+    formDetail.citizenId = data.citizenId;
-  formDetail.posNo = data.posNo;
+    formDetail.prefix = data.prefix;
-  formDetail.birthDate = data.birthDate;
+    formDetail.fullName = data.fullName;
-  formDetail.educations = data.educations;
+    formDetail.position = data.position;
-
+    formDetail.oc = data.oc;
-  formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
+    formDetail.salary = data.salary ? formattedNumber(data.salary) : "";
-    certificateNo: e.certificateNo,
+    formDetail.positionLevel = data.positionLevel;
-    certificateType: e.certificateType,
+    formDetail.posNo = data.posNo;
-    expireDate: date2Thai(e.expireDate),
+    formDetail.birthDate = data.birthDate;
-    issueDate: date2Thai(e.issueDate),
+    formDetail.educations = data.educations;
-    issuer: e.issuer,
+    formDetail.certificates = data.certificates.map((e: CertificatesForm) => ({
-  }));
+      certificateNo: e.certificateNo,
-  formDetail.salaries = data.salaries;
+      certificateType: e.certificateType,
-  formDetail.trainings = data.trainings.map((e: any) => ({
+      expireDate: date2Thai(e.expireDate),
-    dateOrder: date2Thai(e.dateOrder),
+      issueDate: date2Thai(e.issueDate),
-    department: e.department,
+      issuer: e.issuer,
-    duration: e.duration,
+    }));
-    endDate: date2Thai(e.endDate),
+    formDetail.salaries = data.salaries;
-    name: e.name,
+    formDetail.trainings = data.trainings.map((e: any) => ({
-    numberOrder: e.numberOrder,
+      dateOrder: date2Thai(e.dateOrder),
-    place: e.place,
+      department: e.department,
-    startDate: date2Thai(e.startDate),
+      duration: e.duration,
-    topic: e.topic,
+      endDate: date2Thai(e.endDate),
-    yearly: e.yearly,
+      name: e.name,
-  }));
+      numberOrder: e.numberOrder,
-  formDetail.assessments = data.performances;
+      place: e.place,
-  formDetail.experience = data.portfolios;
+      startDate: date2Thai(e.startDate),
+      topic: e.topic,
+      yearly: e.yearly,
+    }));
+    formDetail.assessments = data.performances;
+    formDetail.experience = data.portfolios;
+  } finally {
+    isLoading.loadEducation = false;
+    isLoading.loadCertificate = false;
+    isLoading.loadSalary = false;
+    isLoading.loadTraining = false;
+    isLoading.loadExperience = false;
+  }
 }
 
 /**
@@ -218,6 +298,7 @@ function formattedNumber(x: number) {
 
 /** get data */
 function getData() {
+  isLoading.loadDetail = true;
   http
     .get(config.API.dataUserGovernment)
     .then(async (res) => {
@@ -229,6 +310,9 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.loadDetail = false;
     });
 }
 
@@ -298,7 +382,6 @@ function onDeletePerformance(index: number) {
 
 onMounted(async () => {
   try {
-    showLoader();
     const promises = [];
 
     if (route.name === "evaluate-add") {
@@ -315,7 +398,6 @@ onMounted(async () => {
   } catch (error) {
     console.log(error);
   } finally {
-    hideLoader();
   }
 });
 </script>
@@ -327,7 +409,10 @@ onMounted(async () => {
     :style="$q.screen.lt.sm ? '' : 'height: 60vh; overflow: scroll;'"
   >
     <div class="row col-12">
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadDetail">
+        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ข้อมูลส่วนตัว</span>
         </div>
@@ -430,7 +515,10 @@ onMounted(async () => {
         </div>
       </q-card>
 
-      <q-card class="col-12 cardSp1" bordered>
+      <div class="col-12" v-if="isLoading.loadEducation">
+        <q-skeleton type="Qcard" height="200px" class="q-mb-md" />
+      </div>
+      <q-card v-else class="col-12 cardSp1" bordered>
         <div class="text-weight-bold row items-center bg-grey-2 col-12">
           <span class="q-ml-lg q-my-sm">ประวัติการศึกษา </span>
         </div>
@@ -571,6 +659,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnsCertificates"
           :row="formDetail.certificates"
+          :is-loading="isLoading.loadCertificate"
         />
       </q-card>
 
@@ -579,8 +668,14 @@ onMounted(async () => {
           <span class="q-ml-lg q-my-sm">ประวัติการรับราชการ</span>
         </div>
         <div class="col-12"><q-separator /></div>
+
         <div class="col-10">
+          <SkeletonTable
+            v-if="isLoading.loadSalary"
+            :columns="columnSalaries"
+          />
           <d-table
+            v-else
             ref="table"
             row-key="id"
             flat
@@ -637,6 +732,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnTraining"
           :row="formDetail.trainings"
+          :is-loading="isLoading.loadTraining"
         />
       </q-card>
 
@@ -649,6 +745,7 @@ onMounted(async () => {
           class="col-12"
           :columns="columnExperience"
           :row="formDetail.experience"
+          :is-loading="isLoading.loadExperience"
         />
       </q-card>
 
@@ -671,7 +768,13 @@ onMounted(async () => {
         <div class="col-12"><q-separator /></div>
         <div class="col-10">
           <div class="q-pa-sm row col-12">
+            <SkeletonTable
+              v-if="isLoading.loadExperience"
+              :columns="columnAssessments"
+              class="col-12"
+            />
             <d-table
+              v-else
               flat
               bordered
               :columns="columnAssessments"

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -23,9 +23,10 @@ const mixin = useCounterMixin();
 const store = useEvaluateStore();
 const dataStore = useDataStore();
 const router = useRouter();
-const { showLoader, hideLoader, messageError } = mixin;
+const { messageError } = mixin;
 
 /** ตัวแปร*/
+const isLoading = ref<boolean>(false);
 const modal = ref<boolean>(false);
 const menu = ref<ListMenu>();
 const listMenu = ref<ListMenu[]>([
@@ -73,7 +74,8 @@ function openExpert() {
 
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
-  showLoader();
+  isLoading.value = true;
+
   const body = {
     page: pagination.value.page,
     pageSize: pagination.value.rowsPerPage,
@@ -93,7 +95,7 @@ async function fetchEvaluteList() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -326,6 +328,7 @@ onMounted(async () => {
               v-model:total="total"
               v-model:total-list="totalList"
               v-model:pagination="pagination"
+              :isLoading="isLoading"
             />
           </div>
         </q-card>

src/modules/10_registry/01_Information/01_Information.vue

@@ -1,19 +1,20 @@
 <script setup lang="ts">
 import { ref, reactive, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { is, useQuasar, type QTableProps } from "quasar";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableColumn, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+/** import Type */
 import type { InformationData } from "@/interface/Main";
 
-const link = ref<string>("");
+/** import Component */
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+
 const $q = useQuasar();
 const dataStore = useDataStore();
-const mixin = useCounterMixin();
 const {
   showLoader,
   hideLoader,
@@ -21,16 +22,23 @@ const {
   date2Thai,
   dialogConfirm,
   success,
-} = mixin;
+} = useCounterMixin();
-
-const editPhone = ref<boolean>(false);
-const editEmail = ref<boolean>(false);
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
-const modalHistory = ref<boolean>(false);
-const phone = ref<string>("");
-const email = ref<string>("");
 
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const editPhone = ref<boolean>(false); // แก้ไขเบอร์โทร
+const editEmail = ref<boolean>(false); // แก้ไขอีเมล
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติการแก้ไข (สำหรับ filter)
+const modalHistory = ref<boolean>(false); // เปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว
+const phone = ref<string>(""); // เบอร์โทร
+const email = ref<string>(""); // อีเมล
+const isLoading = ref<boolean>(false); // ตัวแปรโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรโหลดข้อมูลประวัติการแก้ไข
+const mainEmail = ref<string>(""); // อีเมลหลัก
+const mainPhone = ref<string>(""); // เบอร์โทรหลัก
+const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
+const isValidEmail = ref<boolean>(true); // validate อีเมล
+const emailVerify = ref<string | null>(null); // สถานะการยืนยันอีเมล
 /** ตัวแปรข้อมูล */
 const formDataInformation = reactive<InformationData>({
   rank: "", //ยศ
@@ -48,8 +56,6 @@ const formDataInformation = reactive<InformationData>({
   phone: "", //เบอร์โทร
   email: "",
 });
-
-const emailVerify = ref<string | null>(null);
 const visibleColumnsHistory = ref<string[]>([
   "citizenId",
   "prefix",
@@ -237,27 +243,19 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
+/** ตรวจสอบอีเมล */
-  modalHistory.value = true;
-}
-
-const mainEmail = ref<string>("");
-const mainPhone = ref<string>("");
-
 const isCheckEmail = computed(() => {
   return mainEmail.value === formDataInformation.email ? true : false;
 });
 
+/** ตรวจสอบเบอร์โทร */
 const isCheckPhone = computed(() => {
-  console.log("mainPhone", mainPhone.value);
-  console.log("formDataInformation", formDataInformation.phone);
-
   return mainPhone.value === formDataInformation.phone ? true : false;
 });
 
-/** get data */
+/** ฟังก์ชันดึงข้อมูลประวัติส่วนตัว */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.dataUserInformationByType(link.value))
     .then(async (res) => {
@@ -285,24 +283,27 @@ async function getData() {
       phone.value = data.phone;
 
       emailVerify.value = data.statusEmail;
-      hideLoader();
     })
 
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
-/** get history */
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
-function getHistory() {
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserInformatioHistory("")
       : config.API.dataUserInformatioHistory("-employee");
-  showLoader();
+
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -313,14 +314,16 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-const isValidPhone = ref<boolean>(true); // validate เบอร์โทร
+/** ฟังก์ชันเปิด modal ประวัติการแก้ไขข้อมูลส่วนตัว */
-const isValidEmail = ref<boolean>(true); // validate อีเมล
+function onHistory() {
+  modalHistory.value = true;
+}
 
-/** บันทึกเบอร์โทร */
+/** ฟังก์ชันบันทึกเบอร์โทร */
 async function onSavePhone() {
   if (!formDataInformation.phone || formDataInformation.phone.length != 10) {
     isValidPhone.value = false;
@@ -353,7 +356,7 @@ async function onSavePhone() {
   }
 }
 
-/** บันทึก email */
+/** ฟังก์ชันบันทึก email */
 async function onSaveEmail() {
   if (!formDataInformation.email) {
     isValidEmail.value = false;
@@ -388,6 +391,7 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
   <div class="col-12">
     <q-toolbar class="q-px-none">
@@ -402,13 +406,17 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติแก้ไขข้อมูลส่วนตัว</q-tooltip>
       </q-btn>
     </q-toolbar>
     <q-card bordered class="bg-grey-1 q-pa-md">
-      <div class="row">
+      <div v-if="isLoading">
+        <q-skeleton height="160px" />
+      </div>
+      <div v-else class="row">
         <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
           <div class="row">
             <div class="col-4 text-grey-6 text-weight-medium">
@@ -670,5 +678,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>

src/modules/10_registry/01_Information/02_ChangeName.vue

@@ -1,33 +1,29 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useDataStore } from "@/stores/data";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/stores/data";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+/** import type*/
+import { useQuasar, type QTableProps } from "quasar";
 import type { ChangNameRows } from "@/modules/10_registry/interface/response/01_Information";
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
+/** import component */
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
-
-const rows = ref<ChangNameRows[]>([]);
-const rowsData = ref<ChangNameRows[]>([]);
-const idByrow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<ChangNameRows[]>([]);
-const rowsHistoryData = ref<ChangNameRows[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rows = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุล
+const rowsData = ref<ChangNameRows[]>([]); // ข้อมูลประวัติการเปลี่ยนชื่อ-นามสกุลสำหรับค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
 const visibleColumns = ref<string[]>([
   "prefix",
   "firstName",
@@ -98,93 +94,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const visibleColumnsHistory = ref<string[]>([
+/** ฟังก์ชันดึงข้อมูลประวัติการเปลี่ยนชื่อ */
-  "prefix",
-  "firstName",
-  "lastName",
-  "status",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const columnsHistory = ref<QTableProps["columns"]>([
-  {
-    name: "prefix",
-    align: "left",
-    label: "คำนำหน้าชื่อ",
-    sortable: true,
-    field: "prefix",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "firstName",
-    align: "left",
-    label: "ชื่อ",
-    sortable: true,
-    field: "firstName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastName",
-    align: "left",
-    label: "นามสกุล",
-    sortable: true,
-    field: "lastName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะการเปลี่ยนชื่อ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    format: (v) => date2Thai(v),
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByrow.value = id;
-}
-
-/** get data */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
-  http
+  await http
     .get(config.API.dataUserChangeNameByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -195,33 +108,11 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      isLoading.value = false;
-        hideLoader();
-      }, 2000);
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserChangeNameHistoryByType(link.value) +
-        `/${idByrow.value}`
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -230,9 +121,10 @@ function onSearch() {
   );
 }
 
-/**
+/***
- * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -263,8 +155,8 @@ onMounted(async () => {
   await getData();
 });
 </script>
+
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -301,97 +193,96 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
-    <d-table
-      flat
-      dense
-      bordered
-      virtual-scroll
-      :rows="rows.length !== 0 ? rows : []"
-      :columns="columns"
-      :grid="!mode"
-      :rows-per-page-options="[10, 25, 50, 100]"
-      :visible-columns="visibleColumns"
-      :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
-    >
-      <template v-slot:header="props">
-        <q-tr :props="props">
-          <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-if="mode" v-slot:body="props">
+    <div v-if="isLoading">
-        <q-tr :props="props" class="cursor-pointer">
+      <SkeletonTable :columns="columns" />
-          <q-td v-for="(col, index) in props.cols" :key="col.name">
+    </div>
-            <div v-if="col.name == 'no'">
+
-              {{ props.rowIndex + 1 }}
+    <div class="col-12" v-else>
-            </div>
+      <d-table
-            <div v-else>
+        flat
-              {{ col.value ? col.value : "-" }}
+        dense
-            </div>
+        bordered
-          </q-td>
+        virtual-scroll
-          <q-td auto-width>
+        :rows="rows.length !== 0 ? rows : []"
-            <q-btn
+        :columns="columns"
-              color="green"
+        :grid="!mode"
-              flat
+        :rows-per-page-options="[10, 25, 50, 100]"
-              dense
+        :visible-columns="visibleColumns"
-              round
+        :virtual-scroll-sticky-size-start="48"
-              icon="mdi-file-document-outline"
+        v-model:pagination="pagination"
-              @click="onDownloadFile(props.row.id, props.row.profileId)"
+      >
-            >
+        <template v-slot:header="props">
-              <q-tooltip>ดาวน์โหลด</q-tooltip>
+          <q-tr :props="props">
-            </q-btn>
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          </q-td>
+              <span class="text-weight-medium">{{ col.label }}</span>
-        </q-tr>
+            </q-th>
-      </template>
+            <q-th auto-width />
-      <template v-else v-slot:item="props">
+          </q-tr>
-        <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
+        </template>
-          <q-card bordered flat>
+
-            <q-list dense class="q-mt-lg relative-position">
+        <template v-if="mode" v-slot:body="props">
-              <q-td auto-width>
+          <q-tr :props="props" class="cursor-pointer">
-                <q-btn
+            <q-td v-for="(col, index) in props.cols" :key="col.name">
-                  color="green"
+              <div v-if="col.name == 'no'">
-                  flat
+                {{ props.rowIndex + 1 }}
-                  dense
+              </div>
-                  round
+              <div v-else>
-                  class="absolute_button"
+                {{ col.value ? col.value : "-" }}
-                  icon="mdi-file-document-outline"
+              </div>
-                  @click="onDownloadFile(props.row.id, props.row.profileId)"
+            </q-td>
-                >
+            <q-td auto-width>
-                  <q-tooltip>ดาวน์โหลด</q-tooltip>
+              <q-btn
-                </q-btn>
+                color="green"
-              </q-td>
+                flat
-              <q-item v-for="col in props.cols" :key="col.name">
+                dense
-                <q-item-section>
+                round
-                  <q-item-label class="text-grey-6 text-weight-medium">{{
+                icon="mdi-file-document-outline"
-                    col.label
+                @click="onDownloadFile(props.row.id, props.row.profileId)"
-                  }}</q-item-label>
+              >
-                </q-item-section>
+                <q-tooltip>ดาวน์โหลด</q-tooltip>
-                <q-item-section>
+              </q-btn>
-                  <q-item-label class="text-dark text-weight-medium">{{
+            </q-td>
-                    col.value ? col.value : "-"
+          </q-tr>
-                  }}</q-item-label>
+        </template>
-                </q-item-section>
+        <template v-else v-slot:item="props">
-              </q-item>
+          <div class="q-mb-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
-            </q-list>
+            <q-card bordered flat>
-          </q-card>
+              <q-list dense class="q-mt-lg relative-position">
-        </div>
+                <q-td auto-width>
-      </template>
+                  <q-btn
-    </d-table>
+                    color="green"
+                    flat
+                    dense
+                    round
+                    class="absolute_button"
+                    icon="mdi-file-document-outline"
+                    @click="onDownloadFile(props.row.id, props.row.profileId)"
+                  >
+                    <q-tooltip>ดาวน์โหลด</q-tooltip>
+                  </q-btn>
+                </q-td>
+                <q-item v-for="col in props.cols" :key="col.name">
+                  <q-item-section>
+                    <q-item-label class="text-grey-6 text-weight-medium">{{
+                      col.label
+                    }}</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label class="text-dark text-weight-medium">{{
+                      col.value ? col.value : "-"
+                    }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
+        </template>
+      </d-table>
+    </div>
   </div>
-  <DialogHistory
-    v-model:modal="modalHistory"
-    :title="'ประวัติแก้ไขการเปลี่ยนชื่อ-นามสกุล'"
-    :getData="getHistory"
-    :rows="rowsHistory"
-    :rows-data="rowsHistoryData"
-    :visibleColumns="visibleColumnsHistory"
-    :columns="columnsHistory"
-  />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/01_Information/03_Address.vue

@@ -6,8 +6,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 
+/** import type */
 import type {
   Address,
   Provinces,
@@ -15,28 +15,26 @@ import type {
   SubDistricts,
 } from "@/modules/10_registry/interface/response/01_Information";
 
-//history dialog
+/** import component */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonAddress from "@/modules/10_registry/components/skeleton/Address.vue";
 
-const link = ref<string>("");
-const store = useRegistryInFormationStore();
-const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { messageError, date2Thai } = useCounterMixin();
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูลที่อยู่
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลที่อยู่
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติที่อยู่
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติที่อยู่สำหรับค้นหา
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติที่อยู่
 const formData = reactive({
   registrationAddress: "", //ที่อยู่ตามทะเบียนบ้าน
   registrationProvince: "", //จังหวัด
   registrationDistrict: "", //เขต / อำเภอ
   registrationSubDistrict: "", //แขวง / ตำบล
   registrationZipCode: "", //รหัสไปรษณีย์
-
   currentAddress: "", //ที่อยู่ปัจจุบัน
   currentProvince: "", //จังหวัด
   currentDistrict: "", //เขต / อำเภอ
@@ -44,11 +42,11 @@ const formData = reactive({
   currentZipCode: "", //รหัสไปรษณีย์
 });
 
-const provinceData = ref<Provinces[]>([]);
+const provinceData = ref<Provinces[]>([]); // ข้อมูลจังหวัด
-const districtRegistration = ref<Districts[]>([]);
+const districtRegistration = ref<Districts[]>([]); // เขต / อำเภอตามทะเบียนบ้าน
-const districtCurrent = ref<Districts[]>([]);
+const districtCurrent = ref<Districts[]>([]); // เขต / อำเภอปัจจุบัน
-const subDistrictRegistration = ref<SubDistricts[]>([]);
+const subDistrictRegistration = ref<SubDistricts[]>([]); // แขวง / ตำบลตามทะเบียนบ้าน
-const subDistrictCurrent = ref<SubDistricts[]>([]);
+const subDistrictCurrent = ref<SubDistricts[]>([]); // แขวง / ตำบลปัจจุบัน
 
 const visibleColumnsHistory = ref<string[]>([
   "currentAddress",
@@ -65,7 +63,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "registrationAddress",
@@ -217,21 +214,18 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory() {
+/** ฟังก์ชันดึงข้อมูลที่อยู่ */
-  modalHistory.value = true;
-}
-
-/** get data */
 async function getData() {
-  showLoader();
+  await http
-  http
     .get(config.API.dataUserAddressByType(link.value))
-    .then((res) => {
+    .then(async (res) => {
       const data: Address = res.data.result;
-      fetchDistrict(data.registrationProvinceId, "1");
+      await Promise.all([
-      fetchDistrict(data.currentProvinceId, "2");
+        fetchDistrict(data.registrationProvinceId, "1"),
-      fetchSubDistrict(data.registrationDistrictId, "1");
+        fetchDistrict(data.currentProvinceId, "2"),
-      fetchSubDistrict(data.currentDistrictId, "2");
+        fetchSubDistrict(data.registrationDistrictId, "1"),
+        fetchSubDistrict(data.currentDistrictId, "2"),
+      ]);
 
       formData.registrationAddress = data.registrationAddress;
       formData.registrationProvince = data.registrationProvinceId;
@@ -247,42 +241,41 @@ async function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      setTimeout(() => {
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** get history */
+/** ฟังก์ชันดึงข้อมูลประวัติที่อยู่ */
-function getHistory() {
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataStore.officerType == "OFFICER"
       ? config.API.dataUserHistory("")
       : config.API.dataUserHistory("-employee");
-  showLoader();
+
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
       rowsHistory.value = data;
-      console.log("🚀 ~ .then ~ data:", data);
       rowsHistoryData.value = data;
     })
     .catch((e) => {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
-/**
+function onHistory() {
- *function fetch ข้อมูลจังหวัด
+  modalHistory.value = true;
- */
+}
-function fetchProvince() {
+
-  http
+/** ฟังก์ชันดึงข้อมูลจังหวัด */
+async function fetchProvince() {
+  await http
     .get(config.API.profileNewProvince)
     .then((res) => {
       const data = res.data.result;
@@ -294,13 +287,13 @@ function fetchProvince() {
 }
 
 /**
- * function fetch ข้อมูลอำเภอ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id จังหวัด
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchDistrict(id: string | null, position: string) {
+async function fetchDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewDistrictByPId(id))
     .then((res) => {
       const data = res.data.result.districts;
@@ -316,13 +309,13 @@ function fetchDistrict(id: string | null, position: string) {
 }
 
 /**
- * function fetch ข้อมูลอำเภ
+ * ฟังก์ชันดึงข้อมูลอำเภอ
  * @param id อำเภอ
  * @param position ที่อยู่ตามทะเบียนบ้าน,ที่อยู่ปัจจุบัน
  */
-function fetchSubDistrict(id: string | null, position: string) {
+async function fetchSubDistrict(id: string | null, position: string) {
   if (!id) return;
-  http
+  await http
     .get(config.API.profileNewSubDistrictByDId(id))
     .then((res) => {
       const data = res.data.result.subDistricts;
@@ -338,8 +331,8 @@ function fetchSubDistrict(id: string | null, position: string) {
 }
 
 /**
- * function แปลงชื้่อจังหวัด
+ * ฟังก์ชันแปลงชื้่อจังหวัด
- * @param id
+ * @param id รหัสจังหวัด
  */
 function convertProvinceName(id: string) {
   const province = provinceData.value.find((e: Provinces) => e.id === id);
@@ -347,8 +340,8 @@ function convertProvinceName(id: string) {
 }
 
 /**
- * function แปลงชื้่ออำเภอ
+ * ฟังก์ชันแปลงชื้่ออำเภอ
- * @param id
+ * @param id รหัสอำเภอ
  */
 function convertDistrictName(id: string, type: string) {
   const data =
@@ -358,8 +351,8 @@ function convertDistrictName(id: string, type: string) {
 }
 
 /**
- * function แปลงชื้่อตำบล
+ * ฟังก์ชัน แปลงชื้่อตำบล
- * @param id
+ * @param id รหัสตำบล
  */
 function convertSubDistrictName(id: string, type: string) {
   const data =
@@ -369,9 +362,14 @@ function convertSubDistrictName(id: string, type: string) {
 }
 
 onMounted(async () => {
+  isLoading.value = true;
   link.value = await dataStore.getProFileType();
-  await fetchProvince();
+  try {
-  await getData();
+    await fetchProvince();
+    await getData();
+  } finally {
+    isLoading.value = false;
+  }
 });
 </script>
 <template>
@@ -386,6 +384,7 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :loading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลที่อยู่</q-tooltip>
@@ -402,7 +401,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ตามทะเบียนบ้าน
@@ -481,7 +481,8 @@ onMounted(async () => {
           </q-item>
           <q-separator />
           <q-card-section>
-            <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+            <SkeletonAddress v-if="isLoading" />
+            <div v-else class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
               <div class="row">
                 <div class="col-5 text-grey-6 text-weight-medium">
                   ที่อยู่ปัจจุบัน
@@ -547,5 +548,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>

src/modules/10_registry/01_Information/04_Family.vue

@@ -1,33 +1,28 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, reactive, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useDataStore } from "@/stores/data";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { FormChildren } from "@/modules/10_registry/interface/index/Family";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonFamily from "@/modules/10_registry/components/skeleton/Family.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-
-const idFamily = ref<string>("");
-const store = useRegistryInFormationStore();
 const dataStore = useDataStore();
-const rowsHistory = ref<any[]>([]);
+const { messageError, date2Thai } = useCounterMixin();
-const rowsHistoryData = ref<any[]>([]);
 
-const typeForm = ref<string>("");
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลครอบครัว
-const modalHistory = ref<boolean>(false);
+const idFamily = ref<string>(""); // ID ของครอบครัว
-/** ตัวแปรข้อมูล */
+const rowsHistory = ref<any[]>([]); // ข้อมูลประวัติครอบครัว
-
+const rowsHistoryData = ref<any[]>([]); // ข้อมูลประวัติครอบครัวสำหรับค้นหา
-const fatherData = reactive<any>({
+const typeForm = ref<string>(""); // ประเภทของข้อมูลที่แสดง (father, mother, couple, children)
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติครอบครัว
+const fatherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -36,7 +31,7 @@ const fatherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const motherData = reactive<any>({
+const motherData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -45,7 +40,7 @@ const motherData = reactive<any>({
   job: "",
   profileId: "",
 });
-const coupleData = reactive<any>({
+const coupleData = reactive({
   isLive: null,
   citizenId: "",
   prefix: "",
@@ -56,7 +51,6 @@ const coupleData = reactive<any>({
   statusMarital: "",
   profileId: "",
 });
-
 const childData = ref<FormChildren[]>([]);
 
 const visibleColumnsHistory = ref<string[]>([
@@ -161,21 +155,26 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const checkFatherData = ref<boolean>(false);
+const checkFatherData = ref<boolean>(false); // สถานะการมีข้อมูลบิดา
-const checkMotherData = ref<boolean>(false);
+const checkMotherData = ref<boolean>(false); // สถานะการมีข้อมูลมารดา
-const checkCoupleData = ref<boolean>(false);
+const checkCoupleData = ref<boolean>(false); // สถานะการมีข้อมูลคู่สมรส
-const checkChildData = ref<boolean>(false);
+const checkChildData = ref<boolean>(false); // สถานะการมีข้อมูลบุตร
 
-function onHistory(type: string, id: string) {
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
-  modalHistory.value = true;
+const isLoading = reactive({
-  typeForm.value = type;
+  father: false,
-  idFamily.value = id ? id : "user";
+  mother: false,
-}
+  couple: false,
+});
 
-/** get data */
+/**
+ * ฟังก์ชันดึงข้อมูลสมาชิกในครอบครัว
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ */
 async function getData(type: string) {
-  showLoader();
+  (isLoading as any)[type] = true;
-  http
+
+  await http
     .get(config.API.dataUserFamilyByType(link.value, type))
     .then((res) => {
       const data = res.data.result;
@@ -219,14 +218,24 @@ async function getData(type: string) {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      (isLoading as any)[type] = false;
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันเปิดประวัติการแก้ไขข้อมูล
+ * @param type ประเภทข้อมูล (father, mother, couple, children)
+ * @param id ID ของครอบครัว (ใช้สำหรับบุตร)
+ */
+function onHistory(type: string, id: string) {
+  modalHistory.value = true;
+  typeForm.value = type;
+  idFamily.value = id ? id : "user";
+}
+
+/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูล */
+async function getHistory() {
+  isLoadingHistory.value = true;
   rowsHistory.value = [];
   rowsHistoryData.value = [];
   const url =
@@ -238,8 +247,7 @@ function getHistory() {
           idFamily.value
         );
 
-  showLoader();
+  await http
-  http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -261,7 +269,7 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
@@ -292,12 +300,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.father"
               size="14px"
               @click="onHistory('father', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลบิดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.father" :type="'father'" />
+            <div class="col-12" v-else>
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -366,11 +376,13 @@ onMounted(async () => {
               dense
               round
               size="14px"
+              :isLoading="isLoading.mother"
               @click="onHistory('mother', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลมารดา</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.mother" :type="'mother'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
@@ -441,12 +453,14 @@ onMounted(async () => {
               flat
               dense
               round
+              :isLoading="isLoading.couple"
               size="14px"
               @click="onHistory('couple', '')"
             >
               <q-tooltip>ประวัติการแก้ไขข้อมูลคู่สมรส</q-tooltip>
             </q-btn>
-            <div class="col-12">
+            <SkeletonFamily v-if="isLoading.couple" :type="'couple'" />
+            <div v-else class="col-12">
               <q-card bordered class="bg-grey-1 q-pa-sm">
                 <div class="row">
                   <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
@@ -632,6 +646,7 @@ onMounted(async () => {
         ? columnsHistory
         : columnsHistory?.filter((e) => e.name !== 'lastNameOld')
     "
+    :is-loading="isLoadingHistory"
   />
 </template>
 

src/modules/10_registry/01_Information/05_Educations.vue

@@ -1,35 +1,33 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
-import { useDataStore } from "@/stores/data";
+import { useQuasar, type QTableProps } from "quasar";
-//history dialog
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { EducationProfile } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
 const link = ref<string>("");
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+const { messageError, date2Thai, onSearchDataTable } = mixin;
-  mixin;
-
-const rows = ref<EducationProfile[]>([]);
-const rowsData = ref<EducationProfile[]>([]);
-const rowsHistory = ref<EducationProfile[]>([]);
-const rowsHistoryData = ref<EducationProfile[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const mode = ref<boolean>($q.screen.gt.xs);
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติการศึกษา
+const rows = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษา
+const rowsData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหา
+const rowsHistory = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับแสดงในโมดัล
+const rowsHistoryData = ref<EducationProfile[]>([]); // ข้อมูลประวัติการศึกษาสำหรับค้นหาในโมดัล
+const idByRow = ref<string>(""); // ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const modalHistory = ref<boolean>(false); // สถานะการแสดงประวัติการศึกษา
 const visibleColumns = ref<string[]>([
   "educationLevel",
   "institute",
@@ -266,10 +264,26 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
+const visibleColumnsHistory = ref<string[]>([
-  // sortBy: "lastUpdatedAt",
+  "educationLevel",
-});
+  "institute",
-
+  "degree",
+  "field",
+  "gpa",
+  "country",
+  "duration",
+  "durationYear",
+  "other",
+  "fundName",
+  "isEducation",
+  "isHigh",
+  "endDate",
+  "startDate",
+  "finishDate",
+  "note",
+  "lastUpdateFullName",
+  "lastUpdatedAt",
+]);
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "educationLevel",
@@ -486,37 +500,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const visibleColumnsHistory = ref<string[]>([
-  "educationLevel",
-  "institute",
-  "degree",
-  "field",
-  "gpa",
-  "country",
-  "duration",
-  "durationYear",
-  "other",
-  "fundName",
-  "isEducation",
-  "isHigh",
-  "endDate",
-  "startDate",
-  "finishDate",
-  "note",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
 
-/** เปิด dialog ประวัติ */
+/** ฟังก์ชันดึงข้อมูลการศึกษา */
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
-  http
+  await http
     .get(config.API.dataUserEducationsByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -527,16 +515,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      isLoading.value = false;
-        hideLoader();
-      }, 2000);
     });
 }
 
+/**
+ * เปิด dialog ประวัติการศึกษา
+ * @param id ID ของแถวที่ถูกเลือกสำหรับดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
+async function getHistory() {
-  showLoader();
+  isLoadingHistory.value = true
-  http
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserEducationsHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -547,10 +544,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลการศึกษา */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -561,7 +559,6 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-
   await getData();
 });
 </script>
@@ -603,7 +600,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -614,7 +614,6 @@ onMounted(async () => {
       :rows-per-page-options="[10, 25, 50, 100]"
       :visible-columns="visibleColumns"
       :virtual-scroll-sticky-size-start="48"
-      v-model:pagination="pagination"
     >
       <template v-slot:header="props">
         <q-tr :props="props">
@@ -687,6 +686,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขประวัติการศึกษา'"
@@ -695,6 +695,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 

src/modules/10_registry/01_Information/06_Ability.vue

@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
+/** import type */
 import type { AbilityRows } from "@/modules/10_registry/interface/index/Main";
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
+/** import components */
-const rows = ref<AbilityRows[]>([]);
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-const rowsData = ref<AbilityRows[]>([]);
+import SkeletonTable from "@/components/SkeletonTable.vue";
-const rowsHistory = ref<AbilityRows[]>([]);
+
-const rowsHistoryData = ref<AbilityRows[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); // true = desktop mode, false = mobile mode
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลความสามารถพิเศษ
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติ
+const rows = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษ
+const rowsData = ref<AbilityRows[]>([]); // ข้อมูลความสามารถพิเศษสำหรับค้นหา
+const rowsHistory = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษ
+const rowsHistoryData = ref<AbilityRows[]>([]); // ข้อมูลประวัติความสามารถพิเศษสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่เลือก
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดง modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "field",
   "detail",
@@ -187,14 +189,9 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
+/** ฟังก์ชันดึงข้อมูล */
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
 async function getData() {
-  showLoader();
+  isLoading.value = true;
   http
     .get(config.API.dataUserAbilityByType(link.value))
     .then((res) => {
@@ -206,16 +203,25 @@ async function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      isLoading.value = false;
-        hideLoader();
-      }, 2000);
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันเปิด modal ประวัติการแก้ไขความสามารถพิเศษ
-  showLoader();
+ * @param id ID ของแถวที่ต้องการดูประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไขความสามารถพิเศษ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserAbilityHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +232,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -241,6 +248,7 @@ function onSearch() {
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์ที่ต้องการโหลด
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -272,7 +280,6 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -309,7 +316,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -422,6 +432,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขความสามารถพิเศษ'"
@@ -430,8 +441,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/02_Government/01_Government.vue

@@ -7,30 +7,26 @@ import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-
 import type {
   ProfileAppointment,
   FormDataGovernment,
 } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import GovernmentSkeleton from "@/modules/10_registry/components/skeleton/Government.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataPerson = useDataStore();
-const checkType = ref<boolean>(
+const { messageError, date2Thai, dateToISO } = useCounterMixin();
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const store = useRegistryInFormationStore();
-const { showLoader, hideLoader, messageError, date2Thai, dateToISO } = mixin;
 
-const rowsHistory = ref<ProfileAppointment[]>([]);
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
-const rowsHistoryData = ref<ProfileAppointment[]>([]);
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
-const modalHistory = ref<boolean>(false);
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดประวัติข้อมูล
+const rowsHistory = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const rowsHistoryData = ref<ProfileAppointment[]>([]); //ข้อมูลประวัติราชการ
+const modalHistory = ref<boolean>(false); //สถานะการเปิด modal ประวัติข้อมูล
 
-/** ตัวแปรข้อมูล */
 const formData = reactive<FormDataGovernment>({
   org: "",
   positionField: "",
@@ -138,7 +134,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
 ]);
 
 /** ไม่เเน่ใจ ใช้เเบบไหน คอมเม้นไว้ก่อน */
-
 // const columnsHistory = ref<QTableProps["columns"]>([
 //   {
 //     name: "oc",
@@ -343,15 +338,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
 //       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
 //   },
 // ]);
+const checkType = ref<boolean>(
+  dataPerson.officerType == "OFFICER" ? true : false
+);
 
-function onHistory() {
+/** ฟังก์ชันดึงข้อมูล */
-  modalHistory.value = true;
+async function getData() {
-}
+  isLoading.value = true;
-
+  await http
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserGovernmentByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -378,18 +372,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/** ฟังก์ชันเปิด modal ประวัติข้อมูล */
-function getHistory() {
+function onHistory() {
+  modalHistory.value = true;
+}
+
+/** ฟังก์ชันดึงประวัติข้อมูลราชการ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserGovernmentHistory("")
       : config.API.dataUserGovernmentHistory("-employee");
-  showLoader();
+  await http
-  http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -400,13 +401,13 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -421,12 +422,15 @@ onMounted(async () => {
         dense
         round
         size="14px"
+        :isLoading="isLoading"
         @click="onHistory"
       >
         <q-tooltip>ประวัติข้อมูลราชการ</q-tooltip>
       </q-btn>
     </q-toolbar>
-    <q-card bordered class="bg-grey-1 q-pa-md">
+    <GovernmentSkeleton v-if="isLoading" />
+
+    <q-card v-else bordered class="bg-grey-1 q-pa-md">
       <div class="row q-col-gutter-y-sm">
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
@@ -584,5 +588,6 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>

src/modules/10_registry/02_Government/02_Discipline.vue

@@ -1,38 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DisciplineDetail } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
 
-const rows = ref<DisciplineDetail[]>([]);
-const rowsData = ref<DisciplineDetail[]>([]);
-const idByRow = ref<string>("");
-const filter = ref<string>("");
-const rowsHistory = ref<DisciplineDetail[]>([]);
-const rowsHistoryData = ref<DisciplineDetail[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลประเภทโปรไฟล์
-const fileGroup = ref<string>("เอกสารวินัย");
+const isLoading = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลหลัก
-
+const isLoadingHistory = ref<boolean>(false); // ใช้สำหรับโหลดข้อมูลประวัติการแก้ไข;
-const modalHistory = ref<boolean>(false);
+const rows = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่จะแสดงในตาราง
-/** ตัวแปรข้อมูล */
+const rowsData = ref<DisciplineDetail[]>([]); // ข้อมูลหลักที่ใช้สำหรับค้นหา
-
+const idByRow = ref<string>(""); // ใช้เก็บ ID ของแถวที่ถูกเลือก
+const filter = ref<string>(""); // ตัวแปรสำหรับค้นหาในตาราง
+const rowsHistory = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DisciplineDetail[]>([]); // ข้อมูลประวัติการแก้ไขที่ใช้สำหรับค้นหา
+const fileGroup = ref<string>("เอกสารวินัย"); // กลุ่มไฟล์ที่ใช้สำหรับดาวน์โหลด
+const modalHistory = ref<boolean>(false); // ใช้สำหรับเปิด/ปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "level",
   "detail",
@@ -142,15 +140,10 @@ const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-function onHistory(id: string) {
+/** ฟังก์ชันสำหรับดึงข้อมูลวินัย */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserDisciplineByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -161,14 +154,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * เปิด modal ประวัติการแก้ไข
-  showLoader();
+ * @param id ID ของแถวที่ต้องการดูประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserDisciplineHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -179,15 +183,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันดาวน์โหลดไฟล์เอกสารหลักฐาน
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -198,7 +215,7 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
@@ -237,7 +254,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -349,6 +368,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขวินัย'"
@@ -357,6 +377,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumns"
     :columns="columns"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/02_Government/03_Leave.vue

@@ -1,34 +1,32 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { LeaveFormType } from "@/modules/10_registry/interface/index/Main";
+
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
-const mixin = useCounterMixin();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
-  mixin;
-
-const idByRow = ref<string>("");
-const rows = ref<LeaveFormType[]>([]);
-const rowsData = ref<LeaveFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 
 const mode = ref<boolean>($q.screen.gt.xs);
-
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลการลา
-const modalHistory = ref<boolean>(false);
+const isLoading = ref<boolean>(false); // สำหรับการโหลดข้อมูลการลา
-/** ตัวแปรข้อมูล */
+const isLoadingHistory = ref<boolean>(false); // สำหรับการโหลดประวัติการลา
-
+const rows = ref<LeaveFormType[]>([]); // ข้อมูลการลา
+const rowsData = ref<LeaveFormType[]>([]); // ข้อมูลการลา (สำหรับค้นหา)
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาข้อมูลการลา
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดูประวัติการลา
+const rowsHistory = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา
+const rowsHistoryData = ref<LeaveFormType[]>([]); // ข้อมูลประวัติการลา (สำหรับค้นหา)
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับการเปิดปิด modal ประวัติการลา
 const visibleColumns = ref<string[]>([
   "no",
   "typeLeave",
@@ -39,7 +37,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -136,7 +133,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "no",
   "typeLeave",
@@ -243,15 +239,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
+/** ฟังก์ชันสำหรับดึงข้อมูลการลา */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserLeaveByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -275,14 +266,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการลา
-  showLoader();
+ * @param id ID ของการลา
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการลา */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserLeaveHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -306,10 +308,15 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับแสดงสถานะการลา
+ * @param val ค่าสถานะการลา
+ * @return สถานะการลาในรูปแบบข้อความ
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -325,6 +332,11 @@ function statusLeave(val: string) {
   }
 }
 
+/**
+ * ฟังก์ชันสำหรับแปลงช่วงวันที่เป็นรูปแบบไทย
+ * @param val ช่วงวันที่ที่ต้องการแปลงเป็นรูปแบบไทย
+ * @return ช่วงวันที่ในรูปแบบไทย
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -334,6 +346,7 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -344,11 +357,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">การลา</span>
@@ -383,7 +395,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -494,6 +509,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการลา'"
@@ -503,6 +519,7 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'Leave'"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/02_Government/04_Duty.vue

@@ -1,35 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
-import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
 
-const link = ref<string>("");
+import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
-const dataStore = useDataStore();
+import SkeletonTable from "@/components/SkeletonTable.vue";
-const idByRow = ref<string>("");
+
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
+const dataStore = useDataStore();
-const mixin = useCounterMixin();
 const { getPathUploadFlie } = useRegistryDataStore();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<any>($q.screen.gt.xs); // true = desktop, false = mobile
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // id ของแถวที่เลือกเพื่อดึงประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับแสดงประวัติ
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลที่ใช้สำหรับค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไข
+const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 const visibleColumns = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -137,7 +138,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -243,17 +243,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-const fileGroup = ref<string>("เอกสารปฏิบัติราชการพิเศษ");
+/** ฟังก์ชันสำหรับดึงข้อมูลปฏิบัติราชการ */
-
+async function getData() {
-function onHistory(id: string) {
+  isLoading.value = true;
-  modalHistory.value = true;
+  await http
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserDutyByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -264,14 +257,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไข
-  showLoader();
+ * @param id ID ของแถวที่เลือก
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserDutyHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -282,15 +286,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของแถวที่เลือก
+ * @param profileId ID ของโปรไฟล์ที่เลือก
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง*/
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -301,11 +318,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -342,7 +358,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -464,6 +482,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/02_Government/05_Actposition.vue

@@ -1,36 +1,36 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
+const dataStore = useDataStore();
-const mixin = useCounterMixin();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); // true if screen is larger than xs
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูลตามประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับบอกสถานะการโหลดประวัติ
+const rows = ref<DutyFormType[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ถูกเลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลดิบที่ใช้สำหรับการค้นหาในประวัติ
+const modalHistory = ref<boolean>(false); // แสดงหรือซ่อน modal ประวัติการแก้ไข
 const checkType = ref<boolean>(
   dataStore.officerType == "OFFICER" ? true : false
 );
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<String[]>([
   "dateStart",
   "dateEnd",
@@ -103,10 +103,6 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "dateStart",
   "dateEnd",
@@ -116,7 +112,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "dateStart",
@@ -188,16 +183,14 @@ const columnsHistory = ref<QTableProps["columns"]>([
     format: (v) => date2Thai(v, false, true),
   },
 ]);
+const pagination = ref({
+  sortBy: "lastUpdatedAt",
+});
 
-function onHistory(id: string) {
+/** ฟังก์ชันสำหรับดึงข้อมูล */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserActpositionByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -208,14 +201,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * เปิด modal ประวัติการแก้ไข
-  showLoader();
+ * @param id ID ของแถวที่ต้องการดูประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserActpositionHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -226,10 +230,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -240,12 +245,11 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -282,7 +286,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -363,6 +370,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรักษาการในตำแหน่ง'"
@@ -371,6 +379,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 

src/modules/10_registry/02_Government/06_Assistance.vue

@@ -1,33 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import type { DutyFormType } from "@/modules/10_registry/interface/index/Main";
-//history dialog
+
+/** import components */
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
+const $q = useQuasar();
 
 const link = ref<string>("");
 const dataStore = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<DutyFormType[]>([]);
-const rowsData = ref<DutyFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<DutyFormType[]>([]);
-const rowsHistoryData = ref<DutyFormType[]>([]);
-const $q = useQuasar();
-const mode = ref<any>($q.screen.gt.xs);
-const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+  useCounterMixin();
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล ถ้าเป็นมือถือจะเป็น false;
+const isLoading = ref<boolean>(false); // สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // สถานะการโหลดประวัติข้อมูล
+const rows = ref<DutyFormType[]>([]); // ข้อมูลตารางหลัก
+const rowsData = ref<DutyFormType[]>([]); // ข้อมูลตารางหลักสำหรับค้นหา
+const filter = ref<string>(""); // ตัวแปรค้นหา
+const idByRow = ref<string>(""); // ตัวแปรเก็บ id ของแถวที่เลือกเพื่อดูประวัติ
+const rowsHistory = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<DutyFormType[]>([]); // ข้อมูลประวัติการแก้ไขสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
 const visibleColumns = ref<string[]>([
   "commandName",
   "agency",
@@ -135,7 +137,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "commandName",
   "agency",
@@ -241,15 +242,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
+/** ฟังก์ชันดึงข้อมูลช่วยราชการ */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserAssistanceByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -260,14 +256,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันเปิด modal ดูประวัติการแก้ไข
-  showLoader();
+ * @param id ID ของแถวที่ต้องการดูประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserAssistanceHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -278,13 +285,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
 /**
  * ฟังก์ชันโหลไฟลเอกสารหลักฐาน
  * @param id รายการที่ต้องการโหลด
+ * @param profileId ID ของโปรไฟล์
  */
 async function onDownloadFile(id: string, profileId: string) {
   showLoader();
@@ -310,6 +318,7 @@ async function onDownloadFile(id: string, profileId: string) {
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -320,11 +329,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">ช่วยราชการ</span>
@@ -359,7 +367,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -469,6 +480,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขรายการช่วยราชการ'"
@@ -477,6 +489,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/02_Government/07_Position.vue

@@ -1,49 +1,49 @@
 <script setup lang="ts">
 import { useQuasar, type QTableColumn } from "quasar";
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, reactive } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useGovernmentPosDataStore } from "@/modules/10_registry/store/Position";
 
 import type {
   SalaryFormType,
   CardDataPos,
 } from "@/modules/10_registry/interface/index/Main";
-import type { DataCommandCode } from "@/modules/10_registry/interface/response/Main";
 
-//history dialog
+/**import components*/
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const store = useGovernmentPosDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
+} = useCounterMixin();
 
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
 const checkType = ref<boolean>(
   dataPerson.officerType == "OFFICER" ? true : false
-);
+); // เช็คประเภทผู้ใช้งาน
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); // เช็คขนาดหน้าจอ ถ้าเป็นขนาดใหญ่กว่า xs จะเป็นโหมดแสดงตาราง
+const isLoading = reactive({
+  position: false, // เช็คสถานะการโหลดข้อมูลตำแหน่ง
+  tenure: false, // เช็คสถานะการโหลดข้อมูลระยะเวลาดำรงตำแหน่ง
+});
+const isLoadingHistory = ref<boolean>(false); // เช็คสถานะการโหลดข้อมูลประวัติ
+const link = ref<string>(""); // link สำหรับดึงข้อมูล
+const rows = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่ง
+const rowsData = ref<SalaryFormType[]>([]); // ข้อมูลตำแหน่งสำหรับค้นหา
+const idByRow = ref<string>(""); // id ของแถวที่ต้องการดูประวัติ
+const filter = ref<string>(""); // ค่าที่กรอกใน input ค้นหา
+const rowsHistory = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่ง
+const rowsHistoryData = ref<SalaryFormType[]>([]); // ข้อมูลประวัติการแก้ไขตำแหน่งสำหรับค้นหา
+const modalHistory = ref<boolean>(false); // เปิดปิด dialog ประวัติ
 const cardData = ref<CardDataPos[]>([
   {
     label: "ระยะเวลาดำรงตำแหน่งในสายงาน",
@@ -58,7 +58,6 @@ const cardData = ref<CardDataPos[]>([
     data: [],
   },
 ]);
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -315,7 +314,6 @@ const baseVisibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = computed<QTableColumn[]>(() => {
   if (!checkType.value) {
     if (baseColumns.value) {
@@ -349,59 +347,9 @@ const columnsHistory = computed<QTableColumn[]>(() => {
 });
 const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
 
-/** เปิด dialog ประวัติ*/
+/** ฟังก์ชันดึงข้อมูลระยะเวลาดำรงตำแหน่ง */
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
-    .get(config.API.dataUserPosition(link.value))
-    .then((res) => {
-      const data = res.data.result;
-      rows.value = data;
-      rowsData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-function onSearch() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsData.value,
-    columns.value ? columns.value : []
-  );
-}
-
 async function fetchDataTenure() {
-  console.log(link.value);
+  isLoading.tenure = true;
-
   await http
     .get(config.API.salaryTenurePosition(link.value))
     .then((res) => {
@@ -440,40 +388,78 @@ async function fetchDataTenure() {
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      isLoading.tenure = false;
     });
 }
 
-/** function fetch ข้อมูลประเภทคำสั่ง*/
+/** ฟังก์ชันดึงข้อมูล */
-async function fetchDataCommandCode() {
+async function getData() {
-  if (store.commandCodeData.length > 0) return false;
+  isLoading.position = true;
   await http
-    .get(config.API.orgCommandCode)
+    .get(config.API.dataUserPosition(link.value))
     .then((res) => {
       const data = res.data.result;
-      const DataCommandCode = data.filter((e: DataCommandCode) =>
+      rows.value = data;
-        store.positionCode.includes(e.code)
+      rowsData.value = data;
-      );
-
-      const options = DataCommandCode.map((e: DataCommandCode) => ({
-        id: e.code.toString(),
-        name: e.name,
-      }));
-
-      store.commandCodeData = options;
     })
-    .catch((err) => {
+    .catch((e) => {
-      messageError($q, err);
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoading.position = false;
     });
 }
 
+/**
+ * เปิด dialog ประวัติ
+ * @param id id ของแถวที่ต้องการดูประวัติ
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
+    .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
+    .then((res) => {
+      const data = res.data.result;
+      rowsHistory.value = data;
+      rowsHistoryData.value = data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingHistory.value = false;
+    });
+}
+
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
+function onSearch() {
+  rows.value = onSearchDataTable(
+    filter.value,
+    rowsData.value,
+    columns.value ? columns.value : []
+  );
+}
+
 onMounted(async () => {
-  link.value = await dataPerson.getProFileType();
+  try {
-  if (link.value === "-employee") {
+    link.value = await dataPerson.getProFileType();
-    cardData.value.splice(2, 1);
+    if (link.value === "-employee") {
+      cardData.value.splice(2, 1);
+    }
+    await Promise.all([getData(), fetchDataTenure()]);
+  } catch (error) {
+    messageError($q, error);
   }
-  getData();
-  fetchDataTenure();
-  fetchDataCommandCode();
 });
 </script>
 
@@ -492,7 +478,15 @@ onMounted(async () => {
           </div>
           <div class="col-12"><q-separator /></div>
           <q-card-section class="q-pt-none" style="min-height: 200px">
-            <li v-for="data in item.data">{{ data.name }} {{ data.time }}</li>
+            <q-skeleton
+              v-if="isLoading.tenure"
+              type="text"
+              class="q-mb-sm"
+              style="width: 100%"
+            />
+            <li v-else v-for="data in item.data">
+              {{ data.name }} {{ data.time }}
+            </li>
           </q-card-section>
         </q-card>
       </div>
@@ -532,7 +526,9 @@ onMounted(async () => {
     </div>
 
     <div class="col-12 q-mt-sm">
+      <SkeletonTable v-if="isLoading.position" :columns="columns" />
       <d-table
+        v-else
         flat
         dense
         bordered
@@ -664,6 +660,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/03_Salary/01_Salary.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useQuasar, type QTableColumn } from "quasar";
 import { ref, onMounted, computed } from "vue";
+import { useQuasar, type QTableColumn } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,40 +9,33 @@ import { useDataStore } from "@/stores/data";
 
 import type { SalaryFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
 const {
-  showLoader,
-  hideLoader,
   messageError,
   date2Thai,
   onSearchDataTable,
   findOrgName,
   findOrgNameHtml,
-} = mixin;
+} = useCounterMixin();
-
-const idByRow = ref<string>("");
-const rows = ref<SalaryFormType[]>([]);
-const rowsData = ref<SalaryFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<SalaryFormType[]>([]);
-const rowsHistoryData = ref<SalaryFormType[]>([]);
-const mode = ref<boolean>($q.screen.gt.xs);
-const checkType = ref<boolean>(
-  dataPerson.officerType == "OFFICER" ? true : false
-);
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์ประเภทข้อมูล
+const isLoading = ref<boolean>(false); //โหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //โหลดประวัติ
+const rows = ref<SalaryFormType[]>([]); //ข้อมูลตาราง
+const rowsData = ref<SalaryFormType[]>([]); //ข้อมูล (ค้นหา)
+const filter = ref<string>(""); //ตัวกรองข้อมูล
+const idByRow = ref<string>(""); //id ของแถวที่เลือก
+const rowsHistory = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ
+const rowsHistoryData = ref<SalaryFormType[]>([]); //ข้อมูลประวัติ (ค้นหา)
+const modalHistory = ref<boolean>(false); //เปิดปิด dialog ประวัติ
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const baseColumns = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -330,20 +323,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columns = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumns.value) {
-      return baseColumns.value.filter(
-        (column) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const visibleColumnsHistory = ref<string[]>([
   "commandDateAffect",
   "posNumCodeSit",
@@ -363,20 +342,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
-const columnsHistory = computed(() => {
-  if (link.value === "-employee") {
-    if (baseColumnsHistory.value) {
-      return baseColumnsHistory.value.filter(
-        (column: QTableColumn) =>
-          column.name !== "positionSalaryAmount" &&
-          column.name !== "mouthSalaryAmount"
-      );
-    }
-  }
-  return baseColumns.value;
-});
-
 const baseColumnsHistory = ref<QTableColumn[]>([
   {
     name: "commandDateAffect",
@@ -639,16 +604,36 @@ const baseColumnsHistory = ref<QTableColumn[]>([
   },
 ]);
 
-/** เปิด dialog ประวัติ*/
+const columns = computed(() => {
-function onHistory(id: string) {
+  if (link.value === "-employee") {
-  modalHistory.value = true;
+    if (baseColumns.value) {
-  idByRow.value = id;
+      return baseColumns.value.filter(
-}
+        (column) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
 
-/** get data */
+const columnsHistory = computed(() => {
-function getData() {
+  if (link.value === "-employee") {
-  showLoader();
+    if (baseColumnsHistory.value) {
-  http
+      return baseColumnsHistory.value.filter(
+        (column: QTableColumn) =>
+          column.name !== "positionSalaryAmount" &&
+          column.name !== "mouthSalaryAmount"
+      );
+    }
+  }
+  return baseColumns.value;
+});
+
+/*** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await http
     .get(config.API.dataUserSalaryByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -659,13 +644,24 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิด dialog ประวัติการแก้ไข
-  showLoader();
+ * @param id id ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   http
     .get(config.API.dataUserSalaryHistoryByType(link.value, idByRow.value))
     .then((res) => {
@@ -677,10 +673,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -691,11 +688,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">{{
@@ -732,7 +728,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -851,6 +850,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="`ประวัติแก้ไข${salaryText}`"
@@ -859,8 +859,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/03_Salary/02_Nopaid.vue

@@ -1,37 +1,39 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { NopaidFormType } from "@/modules/10_registry/interface/index/Main";
 
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<NopaidFormType[]>([]);
-const rowsData = ref<NopaidFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<NopaidFormType[]>([]);
-const rowsHistoryData = ref<NopaidFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
+const link = ref<string>(""); //ประเภทของโปรไฟล์
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //สถานะการโหลดข้อมูลประวัติ
+const rows = ref<NopaidFormType[]>([]); //ข้อมูลที่แสดงในตาราง
+const rowsData = ref<NopaidFormType[]>([]); //ข้อมูลที่ใช้สำหรับค้นหาในตาราง
+const filter = ref<string>(""); //ตัวกรองสำหรับค้นหาในตาราง
+const idByRow = ref<string>(""); // รหัสของแถวที่ถูกเลือกสำหรับประวัติ
+const rowsHistory = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่แสดงในตาราง
+const rowsHistoryData = ref<NopaidFormType[]>([]); // ข้อมูลประวัติที่ใช้สำหรับค้นหาในตาราง
+const modalHistory = ref<boolean>(false); // สถานะการแสดงโมดัลประวัติ
+// ข้อความสำหรับแสดงในหัวตาราง
 const salaryText = computed(() => {
   return link.value == "" ? "เงินเดือน" : "ค่าจ้าง";
 });
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -41,7 +43,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -128,7 +129,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "reference",
@@ -138,7 +138,6 @@ const visibleColumnsHistory = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columnsHistory = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -221,18 +220,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`); // กลุ่มไฟล์สำหรับเอกสารบันทึก
 
-const fileGroup = ref<string>(`เอกสารบันทึกวันที่ไม่ได้รับ${salaryText.value}`);
+/** ฟังก์ชันสำหรับดึงข้อมูล */
-
+async function getData() {
-function onHistory(id: string) {
+  isLoading.value = true;
-  modalHistory.value = true;
+  await http
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserNopaidByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -243,14 +236,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิดประวัติการแก้ไข
-  showLoader();
+ * @param id รหัสของแถวที่ถูกเลือกสำหรับประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserSalaryNopaidHistoryByType(link.value, idByRow.value)
     )
@@ -263,15 +267,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id รหัสของแถวที่ถูกเลือกสำหรับดาวน์โหลด
+ * @param profileId รหัสโปรไฟล์ของผู้ใช้
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (e) {
+    messageError($q, e);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +299,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">{{
@@ -323,7 +339,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -448,6 +467,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/04_Achievement/01_Certificate.vue

@@ -1,37 +1,35 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { CertificateDetail } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
 const $q = useQuasar();
 const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const idByRow = ref<string>("");
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
-const rows = ref<CertificateDetail[]>([]);
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
-const rowsData = ref<CertificateDetail[]>([]);
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
-const filter = ref<string>("");
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดประวัติ
-const rowsHistory = ref<CertificateDetail[]>([]);
+const rows = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพ
-const rowsHistoryData = ref<CertificateDetail[]>([]);
+const rowsData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
-const mode = ref<boolean>($q.screen.gt.xs);
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
-
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
-const modalHistory = ref<boolean>(false);
+const rowsHistory = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพ
-/** ตัวแปรข้อมูล */
+const rowsHistoryData = ref<CertificateDetail[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขใบอนุญาตประกอบวิชาชีพที่ใช้ในการค้นหา
-
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขใบอนุญาต
 const visibleColumns = ref<string[]>([
   "certificateType",
   "issuer",
@@ -126,7 +124,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "certificateType",
   "issuer",
@@ -218,18 +215,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ"); //กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เอกสารใบอนุญาตประกอบวิชาชีพ");
+/** ฟังก์ชันสำหรับดึงข้อมูลใบอนุญาตประกอบวิชาชีพ */
-
+async function getData() {
-function onHistory(id: string) {
+  isLoading.value = true;
-  modalHistory.value = true;
+  await http
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserCertificateByType(link.value, "certificate"))
     .then((res) => {
       const data = res.data.result;
@@ -240,14 +231,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิด modal แสดงประวัติการแก้ไขใบอนุญาต
-  showLoader();
+ * @param id ID ของแถวที่เลือก
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขใบอนุญาต */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -264,15 +266,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -283,11 +298,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -324,7 +338,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
+
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -445,6 +462,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/04_Achievement/02_Training.vue

@@ -1,34 +1,33 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
 
 import type { TrainingFormType } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<TrainingFormType[]>([]);
-const rowsData = ref<TrainingFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<TrainingFormType[]>([]);
-const rowsHistoryData = ref<TrainingFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับการโหลดข้อมูลประวัติ
+const rows = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const rowsData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลการฝึกอบรม/ดูงาน
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน
+const rowsHistoryData = ref<TrainingFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงานที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขการฝึกอบรม/ดูงาน
 const visibleColumns = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -187,7 +186,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "name", // ชื่อโครงงาน
   "topic", // หัวข้อ
@@ -343,15 +341,11 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
 
 /** get data */
-function getData() {
+async function getData() {
-  showLoader();
+  isLoading.value = true;
-  http
+  await http
     .get(config.API.dataUserCertificateByType(link.value, "training"))
     .then((res) => {
       const data = res.data.result;
@@ -362,14 +356,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * เปิด modal แสดงประวัติการแก้ไขการฝึกอบรม/ดูงาน
-  showLoader();
+ * @param id ID ของแถวที่เลือก
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขการฝึกอบรม/ดูงาน */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -386,10 +391,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -400,11 +406,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -441,7 +446,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -517,6 +525,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขการฝึกอบรม/ดูงาน'"
@@ -525,8 +534,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/04_Achievement/03_Insignia.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -10,27 +10,26 @@ import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { InsigniaFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<InsigniaFormType[]>([]);
-const rowsData = ref<InsigniaFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<InsigniaFormType[]>([]);
-const rowsHistoryData = ref<InsigniaFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดการแสดงผล
-/** ตัวแปรข้อมูล */
+const link = ref<string>(""); // ลิงก์สำหรับดึงข้อมูลประเภทของผู้ใช้
-
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); // ตัวแปรสำหรับโหลดข้อมูลประวัติ
+const idByRow = ref<string>(""); // ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rows = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ
+const rowsData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลเครื่องราชฯ ที่ใช้ในการค้นหา
+const filter = ref<string>(""); // ตัวแปรสำหรับเก็บค่าค้นหา
+const rowsHistory = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ
+const rowsHistoryData = ref<InsigniaFormType[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขเครื่องราชฯ ที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขเครื่องราชฯ
 const visibleColumns = ref<String[]>([
   "insignia",
   "insigniaType",
@@ -239,7 +238,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "insignia",
   "insigniaType",
@@ -433,18 +431,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("เครื่องราชฯ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("เครื่องราชฯ");
+/** ฟังก์ชันสำหรับดึงข้อมูลเครื่องราชฯ */
-
+async function getData() {
-function onHistory(id: string) {
+  isLoading.value = true;
-  modalHistory.value = true;
+  await http
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserCertificateByType(link.value, "insignia"))
     .then((res) => {
       const data = res.data.result;
@@ -455,14 +447,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันสำหรับเปิด modal ประวัติการแก้ไขเครื่องราชฯ
-  showLoader();
+ * @param id ID ของแถวที่เลือก
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันสำหรับดึงข้อมูลประวัติการแก้ไขเครื่องราชฯ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -479,15 +482,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ *  ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId ID ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -498,11 +514,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -539,7 +554,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -674,8 +692,10 @@ onMounted(async () => {
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
     :type="'insignia'"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/04_Achievement/04_Honor.vue

@@ -1,38 +1,36 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
 import { useRegistryDataStore } from "@/modules/10_registry/store/Main";
 
 import type { HonorFormData } from "@/modules/10_registry/interface/index/Main";
 
 //history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const store = useRegistryInFormationStore();
-const rows = ref<HonorFormData[]>([]);
-const rowsData = ref<HonorFormData[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<HonorFormData[]>([]);
-const rowsHistoryData = ref<HonorFormData[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 const { getPathUploadFlie } = useRegistryDataStore();
+const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
+  useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดการแสดงผล
-/** ตัวแปรข้อมูล */
+const link = ref<string>(""); //ลิงก์สำหรับดึงข้อมูล
-
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
+const rows = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณ
+const rowsData = ref<HonorFormData[]>([]); //ตัวแปรสำหรับเก็บข้อมูลประกาศเกียรติคุณที่ใช้ในการค้นหา
+const filter = ref<string>(""); //ตัวแปรสำหรับเก็บค่าการค้นหา
+const idByRow = ref<string>(""); //ตัวแปรสำหรับเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณ
+const rowsHistoryData = ref<HonorFormData[]>([]); // ตัวแปรสำหรับเก็บข้อมูลประวัติการแก้ไขประกาศเกียรติคุณที่ใช้ในการค้นหา
+const modalHistory = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด modal ประวัติการแก้ไขประกาศเกียรติคุณ
 const visibleColumns = ref<String[]>([
   "issuer",
   "detail",
@@ -127,7 +125,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "issuer",
   "detail",
@@ -219,18 +216,12 @@ const columnsHistory = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
+const fileGroup = ref<string>("ประกาศเกียรติคุณ"); // กลุ่มไฟล์สำหรับดาวน์โหลด
 
-const fileGroup = ref<string>("ประกาศเกียรติคุณ");
+/** ฟังก์ชันสำหรับดึงข้อมูลประกาศเกียรติคุณ */
-
+async function getData() {
-function onHistory(id: string) {
+  isLoading.value = true;
-  modalHistory.value = true;
+  await http
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserCertificateByType(link.value, "honor"))
     .then((res) => {
       const data = res.data.result;
@@ -241,18 +232,30 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
+/**
+ * เปิด modal ประวัติการแก้ไข
+ * @param id ID ของแถวที่เลือก
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
 /** get history */
-function getHistory() {
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
   const url =
     dataPerson.officerType == "OFFICER"
       ? config.API.dataUserHonorHistory("honor", "", idByRow.value)
       : config.API.dataUserHonorHistory("honor", "-employee", idByRow.value);
-  showLoader();
+
-  http
+  await http
     .get(url)
     .then((res) => {
       const data = res.data.result;
@@ -263,15 +266,28 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันสำหรับดาวน์โหลดไฟล์
+ * @param id ID ของไฟล์ที่ต้องการดาวน์โหลด
+ * @param profileId id ของโปรไฟล์
+ */
 async function onDownloadFile(id: string, profileId: string) {
-  const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+  showLoader();
-  window.open(data.downloadUrl, "_blank");
+  try {
+    const data = await getPathUploadFlie(fileGroup.value, profileId, id);
+    window.open(data.downloadUrl, "_blank");
+  } catch (error) {
+    messageError($q, error);
+  } finally {
+    hideLoader();
+  }
 }
 
+/** ฟังก์ชันสำหรับค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -282,11 +298,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
@@ -323,7 +338,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -445,6 +463,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/04_Achievement/05_Assessments.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -12,31 +12,28 @@ import type {
   DataOption,
 } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<AssessmentsFormType[]>([]);
-const rowsData = ref<AssessmentsFormType[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<AssessmentsFormType[]>([]);
-const rowsHistoryData = ref<AssessmentsFormType[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
 
+const mode = ref<boolean>($q.screen.gt.xs); //โหมดแสดงผล
+const link = ref<string>(""); //ลิงค์สำหรับดึงข้อมูล
+const rows = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมา
+const rowsData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลที่ดึงมาไว้สำหรับค้นหา
+const filter = ref<string>(""); //ตัวแปรเก็บค่าค้นหา
+const idByRow = ref<string>(""); //ตัวแปรเก็บ id ของแถวที่เลือก
+const rowsHistory = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไข
+const rowsHistoryData = ref<AssessmentsFormType[]>([]); //ตัวแปรเก็บข้อมูลประวัติการแก้ไขไว้สำหรับค้นหา
+const isLoading = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการ
+const isLoadingHistory = ref<boolean>(false); //ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูลประวัติ
 const periodOp = ref<DataOption[]>([
   { id: "OCT", name: "ตุลาคม" },
   { id: "APR", name: "เมษายน" },
 ]);
-
+const modalHistory = ref<boolean>(false); //ตัวแปรสำหรับเปิดปิด modal ประวัติการแก้ไข
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -328,7 +325,6 @@ const visibleColumnsHistory = ref<string[]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumns = ref<string[]>([
   "point1Total",
   "year",
@@ -344,15 +340,10 @@ const visibleColumns = ref<string[]>([
   "lastUpdatedAt",
 ]);
 
-function onHistory(id: string) {
+/** ฟังก์ชันดึงข้อมูล */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserCertificateByType(link.value, "assessments"))
     .then((res) => {
       const data = res.data.result;
@@ -363,14 +354,25 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันเปิด modal ประวัติการแก้ไข
-  showLoader();
+ * @param id - id ของแถวที่เลือก
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงข้อมูลประวัติการแก้ไข */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(
       config.API.dataUserCertificateHistoryByType(
         link.value,
@@ -387,10 +389,14 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/**
+ * ฟังก์ชันตรวจสอบช่วงคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textRangePoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "(คะแนนต่ำกว่าร้อยละ 60.00)";
@@ -401,6 +407,10 @@ function textRangePoint(val: number | undefined) {
   else return "";
 }
 
+/**
+ * ฟังก์ชันตรวจสอบคะแนน
+ * @param val - ค่าที่ต้องการตรวจสอบ
+ */
 function textPoint(val: number | undefined) {
   if (val == undefined) val = -1;
   if (val < 60.0) return "ต้องปรับปรุง";
@@ -440,6 +450,7 @@ onMounted(async () => {
         v-model="filter"
         label="ค้นหา"
         style="max-width: 200px"
+        @keydown.enter.prevent="onSearch"
       >
         <template v-slot:append>
           <q-icon name="search" />
@@ -461,7 +472,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -545,6 +559,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ'"
@@ -553,8 +568,10 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/04_Achievement/06_DevelopmentPlan.vue

@@ -1,34 +1,28 @@
 <script setup lang="ts">
-import { useCounterMixin } from "@/stores/mixin";
+import { ref, onMounted } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
-import { ref, reactive, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/stores/data";
 
 import DialogDevelop from "@/modules/10_registry/Dialog/DialogDevelopmant.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const typeIDP = ref<string>("");
-const link = ref<string>("");
-const dataPerson = useDataStore();
-const idByRow = ref<string>("");
-const rows = ref<any[]>([]);
-const rowsData = ref<any[]>([]);
-const filter = ref<string>("");
-const rowsHistory = ref<any[]>([]);
-const rowsHistoryData = ref<any[]>([]);
 const $q = useQuasar();
-const mode = ref<boolean>($q.screen.gt.xs);
+const dataPerson = useDataStore();
-const mixin = useCounterMixin();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-const modalDevelop = ref<boolean>(false);
-const kpiDevelopmentId = ref<string>("");
-
-const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
 
+const mode = ref<boolean>($q.screen.gt.xs); // โหมดแสดงผล
+const typeIDP = ref<string>(""); // ประเภทการพัฒนา
+const link = ref<string>(""); // ลิงค์สำหรับดึงข้อมูล
+const isLoading = ref<boolean>(false); // ตัวแปรสำหรับแสดงสถานะการโหลดข้อมูล
+const rows = ref<any[]>([]); // ข้อมูลที่แสดงในตาราง
+const rowsData = ref<any[]>([]); // ข้อมูลทั้งหมดที่ใช้สำหรับการค้นหา
+const filter = ref<string>(""); // ค่าที่ใช้สำหรับการค้นหา
+const modalDevelop = ref<boolean>(false); // ตัวแปรสำหรับเปิด/ปิด Dialog การพัฒนารายบุคคล
+const kpiDevelopmentId = ref<string>(""); // ตัวแปรสำหรับเก็บ ID การพัฒนารายบุคคล
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -39,7 +33,6 @@ const visibleColumns = ref<string[]>([
   "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
-
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -130,21 +123,15 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
 ]);
-
 const paginationPlan = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-function onHistory(id: string) {
+/** ฟังก์ชันดึงข้อมูล */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.developmentUserByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -155,31 +142,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
-    });
-}
-
-/** get history */
-function getHistory() {
-  showLoader();
-  http
-    .get(
-      config.API.dataUserCertificateHistoryByType(
-        link.value,
-        "assessments",
-        idByRow.value
-      )
-    )
-    .then((res) => {
-      const data = res.data.result;
-      rowsHistory.value = data;
-      rowsHistoryData.value = data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -193,6 +156,7 @@ function openDialogDevelop(data: any) {
   typeIDP.value = data.type;
 }
 
+/** ฟังก์ชันค้นหาข้อมูล */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -203,12 +167,13 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
   <!-- v-if="mode" -->
-  <div class="col-12" v-if="dataPerson.officerType == 'OFFICER'">
+  <!-- v-if="dataPerson.officerType == 'OFFICER'" -->
+  <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1"
         >การพัฒนารายบุคคล (Individual Development Plan)</span
@@ -244,7 +209,9 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered

src/modules/10_registry/05_Other/01_Other.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useQuasar, type QTableProps } from "quasar";
+import { is, useQuasar, type QTableProps } from "quasar";
 import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
@@ -9,16 +9,16 @@ import { useDataStore } from "@/stores/data";
 
 import type { OtherFormType } from "@/modules/10_registry/interface/index/Main";
 
-//history dialog
 import DialogHistory from "@/modules/10_registry/Dialog/DialogHistory.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
+const $q = useQuasar();
+const dataPerson = useDataStore();
+const { messageError, date2Thai, onSearchDataTable } = useCounterMixin();
 
 const link = ref<string>("");
-const $q = useQuasar();
+const isLoading = ref<boolean>(false);
-const mixin = useCounterMixin();
+const isLoadingHistory = ref<boolean>(false);
-const dataPerson = useDataStore();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
-
 const idByRow = ref<string>("");
 const rows = ref<OtherFormType[]>([]);
 const rowsData = ref<OtherFormType[]>([]);
@@ -26,10 +26,7 @@ const filter = ref<string>("");
 const rowsHistory = ref<OtherFormType[]>([]);
 const rowsHistoryData = ref<OtherFormType[]>([]);
 const mode = ref<boolean>($q.screen.gt.xs);
-
 const modalHistory = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
-
 const visibleColumns = ref<string[]>([
   "date",
   "detail",
@@ -85,7 +82,6 @@ const columns = ref<QTableProps["columns"]>([
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
-
 const visibleColumnsHistory = ref<string[]>([
   "date",
   "detail",
@@ -139,15 +135,10 @@ const columnsHistory = ref<QTableProps["columns"]>([
   },
 ]);
 
-function onHistory(id: string) {
+/** ฟังก์ชันดึงข้อมูล */
-  modalHistory.value = true;
+async function getData() {
-  idByRow.value = id;
+  isLoading.value = true;
-}
+  await http
-
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(config.API.dataUserOtherByType(link.value))
     .then((res) => {
       const data = res.data.result;
@@ -156,14 +147,27 @@ function getData() {
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
 }
 
-/** get history */
+/**
-function getHistory() {
+ * ฟังก์ชันเปิดโมดัลดูประวัติ
-  showLoader();
+ * @param id ID ของแถวที่ต้องการดูประวัติ
-  http
+ */
+function onHistory(id: string) {
+  modalHistory.value = true;
+  idByRow.value = id;
+}
+
+/** ฟังก์ชันดึงประวัติการแก้ไขข้อมูลอื่นๆ */
+async function getHistory() {
+  isLoadingHistory.value = true;
+  rowsHistory.value = [];
+  rowsHistoryData.value = [];
+  await http
     .get(config.API.dataUserOtherHistoryByType(link.value, idByRow.value))
     .then((res) => {
       const data = res.data.result;
@@ -174,10 +178,11 @@ function getHistory() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoadingHistory.value = false;
     });
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -188,11 +193,10 @@ function onSearch() {
 
 onMounted(async () => {
   link.value = await dataPerson.getProFileType();
-  getData();
+  await getData();
 });
 </script>
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none">
       <span class="text-blue-6 text-weight-bold text-body1">ข้อมูลอื่นๆ</span>
@@ -227,7 +231,10 @@ onMounted(async () => {
         :display-value="$q.lang.table.columns"
       />
     </q-toolbar>
+
+    <SkeletonTable v-if="isLoading" :columns="columns" />
     <d-table
+      v-else
       flat
       dense
       bordered
@@ -310,6 +317,7 @@ onMounted(async () => {
       </template>
     </d-table>
   </div>
+
   <DialogHistory
     v-model:modal="modalHistory"
     :title="'ประวัติแก้ไขข้อมูลอื่นๆ'"
@@ -318,6 +326,7 @@ onMounted(async () => {
     :rows-data="rowsHistoryData"
     :visibleColumns="visibleColumnsHistory"
     :columns="columnsHistory"
+    :is-loading="isLoadingHistory"
   />
 </template>
 <style scoped>

src/modules/10_registry/05_Other/02_File.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useCounterMixin } from "@/stores/mixin";
-import { useQuasar, type QTableProps } from "quasar";
+import { is, useQuasar } from "quasar";
-import { ref, reactive, onMounted } from "vue";
+import { ref, onMounted } from "vue";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const store = useRegistryInFormationStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
-  modalHistory.value = true;
+async function getData() {
-}
+  isLoading.value = true;
-
+  await http
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      isLoading.value = false;
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -78,8 +70,8 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
-  <!-- v-if="mode" -->
   <div class="col-12">
     <q-toolbar class="q-px-none q-mt-md">
       <span class="text-blue-6 text-weight-bold text-body1">เอกสารหลักฐาน</span>
@@ -89,7 +81,12 @@ onMounted(() => {
         ไฟล์เอกสารหลักฐาน
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item
@@ -124,6 +121,7 @@ onMounted(() => {
     </q-card>
   </div>
 </template>
+
 <style scoped>
 .absolute_button {
   position: absolute;

src/modules/10_registry/05_Other/03_FileOther.vue

@@ -9,23 +9,17 @@ import { useRegistryInFormationStore } from "@/modules/10_registry/store/registr
 
 import type { FileFormType } from "@/modules/10_registry/interface/index/Main";
 
-const fileList = ref<FileFormType[]>([]);
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const mixin = useCounterMixin();
+const store = useRegistryInFormationStore();
-const { showLoader, hideLoader, messageError, date2Thai } = mixin;
+const { showLoader, hideLoader, messageError } = useCounterMixin();
 
-const modalHistory = ref<boolean>(false);
+const isLoading = ref<boolean>(false);
-/** ตัวแปรข้อมูล */
+const fileList = ref<FileFormType[]>([]);
 
-function onHistory() {
+/** ฟังก์ชันดึงข้อมูลไฟล์ */
-  modalHistory.value = true;
+async function getData() {
-}
+  isLoading.value = true;
-
+  await http
-/** get data */
-function getData() {
-  showLoader();
-  http
     .get(
       config.API.fileByFileUser(
         "ระบบทะเบียนประวัติ",
@@ -41,9 +35,7 @@ function getData() {
       messageError($q, e);
     })
     .finally(() => {
-      setTimeout(() => {
+      isLoading.value = false;
-        hideLoader();
-      }, 1500);
     });
 }
 
@@ -51,9 +43,9 @@ function getData() {
  * ดาวน์โหลดลิงค์ไฟล์
  * @param fileName file name
  */
-function downloadFile(fileName: string) {
+async function downloadFile(fileName: string) {
   showLoader();
-  http
+  await http
     .get(
       config.API.fileByFile(
         "ระบบทะเบียนประวัติ",
@@ -69,7 +61,7 @@ function downloadFile(fileName: string) {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {
+    .finally(() => {
       hideLoader();
     });
 }
@@ -89,7 +81,11 @@ onMounted(() => {
         ไฟล์เอกสาร ก.พ.7
       </div>
       <div class="col-12"><q-separator /></div>
-      <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
+      <div v-if="isLoading" class="col-12 q-pa-sm">
+        <q-skeleton type="QSlider" />
+      </div>
+
+      <div v-else class="row col-12 q-col-gutter-y-sm q-pa-sm">
         <div v-if="fileList.length > 0" class="col-xs-12 row">
           <q-list class="full-width rounded-borders" bordered separator>
             <q-item

src/modules/10_registry/Dialog/DialogHistory.vue

@@ -1,35 +1,48 @@
 <script setup lang="ts">
 import { ref, watch } from "vue";
 
-import DialogHeader from "@/components/DialogHeader.vue";
-import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 
-const type = ref<string>("");
+/** import type */
-const mixin = useCounterMixin();
+import type { QTableProps } from "quasar";
-const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
-const modal = defineModel<boolean>("modal", { required: true });
-const title = defineModel<string>("title", { required: true });
 
-const filter = ref<string>("");
+/** import component */
+import DialogHeader from "@/components/DialogHeader.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-const rows = defineModel<any>("rows");
+const { date2Thai, onSearchDataTable, findOrgNameHtml } = useCounterMixin();
-const rowsData = defineModel<any>("rowsData");
+
-const columns = defineModel<QTableProps["columns"]>("columns");
+/** define model */
-const visibleColumns = defineModel<string[]>("visibleColumns");
+const modal = defineModel<boolean>("modal", { required: true }); // modal visibility
+const isLoading = defineModel<boolean>("isLoading", { required: true }); // loading state
+const title = defineModel<string>("title", { required: true }); // dialog title
+const rows = defineModel<any[]>("rows"); // data rows for the table
+const rowsData = defineModel<any[]>("rowsData"); // raw data for the table
+const columns = defineModel<QTableProps["columns"]>("columns"); // table columns definition
+const visibleColumns = defineModel<string[]>("visibleColumns"); // visible columns in the table
+
+/** define props */
+const props = defineProps({
+  getData: Function, // function to fetch data
+  type: String, // type of data (e.g., "Leave", "insignia")
+});
+
+const type = ref<string>(""); // ประเภทของข้อมูล
+const filter = ref<string>(""); // filter input for searching
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
-const props = defineProps({
+/** ปิด Dialog และรีเซ็ตค่า */
-  getData: Function,
-  type: String,
-});
 function close() {
   modal.value = false;
   filter.value = "";
 }
 
+/**
+ * ฟังก์ชันแปลงวันที่เป็นรูปแบบไทย
+ * @param val - date range value
+ */
 function dateThaiRange(val: [Date, Date]) {
   if (val === null) {
   } else if (date2Thai(val[0]) === date2Thai(val[1])) {
@@ -39,6 +52,10 @@ function dateThaiRange(val: [Date, Date]) {
   }
 }
 
+/**
+ * ฟังก์ชันแปลงสถานะการลาเป็นข้อความที่
+ * @param val  สถานะการลา
+ */
 function statusLeave(val: string) {
   switch (val) {
     case "waitting":
@@ -54,10 +71,11 @@ function statusLeave(val: string) {
   }
 }
 
+/** ฟังก์ชันค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
-    rowsData.value,
+    rowsData.value ? rowsData.value : [],
     columns.value ? columns.value : []
   );
 }
@@ -111,141 +129,148 @@ watch(
             />
           </div>
         </div>
+        <div v-if="isLoading">
+          <SkeletonTable :columns="columns" />
+        </div>
 
-        <d-table
+        <div v-else class="col-12">
-          flat
+          <d-table
-          dense
+            flat
-          bordered
+            dense
-          virtual-scroll
+            bordered
-          :rows="rows"
+            virtual-scroll
-          :columns="columns"
+            :rows="rows"
-          :rows-per-page-options="[10, 25, 50, 100]"
+            :columns="columns"
-          :visible-columns="visibleColumns"
+            :rows-per-page-options="[10, 25, 50, 100]"
-          :virtual-scroll-sticky-size-start="48"
+            :visible-columns="visibleColumns"
-          v-model:pagination="pagination"
+            :virtual-scroll-sticky-size-start="48"
-        >
+            v-model:pagination="pagination"
-          <template v-slot:header="props">
+          >
-            <q-tr :props="props">
+            <template v-slot:header="props">
-              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <q-tr :props="props">
-                <span class="text-weight-medium">{{ col.label }}</span>
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              </q-th>
+                  <span class="text-weight-medium">{{ col.label }}</span>
-            </q-tr>
+                </q-th>
-          </template>
+              </q-tr>
+            </template>
 
-          <template v-slot:body="props">
+            <template v-slot:body="props">
-            <q-tr :props="props" class="cursor-pointer">
+              <q-tr :props="props" class="cursor-pointer">
-              <q-td v-for="(col, index) in props.cols" :key="col.name">
+                <q-td v-for="(col, index) in props.cols" :key="col.name">
-                <div v-if="col.name == 'no'">
+                  <div v-if="col.name == 'no'">
-                  {{ props.rowIndex + 1 }}
+                    {{ props.rowIndex + 1 }}
-                </div>
+                  </div>
-                <div v-else-if="col.name == 'insignia' && type == 'insignia'">
+                  <div v-else-if="col.name == 'insignia' && type == 'insignia'">
-                  {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
+                    {{ props.row.insignia ? `${props.row.insignia.name} ` : "-"
-                  }}{{
+                    }}{{
-                    props.row.insignia.shortName
+                      props.row.insignia.shortName
-                      ? `(${props.row.insignia.shortName})`
+                        ? `(${props.row.insignia.shortName})`
-                      : ""
+                        : ""
-                  }}
+                    }}
-                </div>
+                  </div>
 
-                <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
+                  <div v-else-if="col.name == 'dateLeave' && type == 'Leave'">
-                  {{
+                    {{
-                    dateThaiRange([
+                      dateThaiRange([
-                      props.row.dateStartLeave,
+                        props.row.dateStartLeave,
-                      props.row.dateEndLeave,
+                        props.row.dateEndLeave,
-                    ])
+                      ])
-                  }}
+                    }}
-                </div>
+                  </div>
-                <div v-else-if="col.name == 'status' && type == 'Leave'">
+                  <div v-else-if="col.name == 'status' && type == 'Leave'">
-                  {{ props.row.status ? statusLeave(props.row.status) : "-" }}
+                    {{ props.row.status ? statusLeave(props.row.status) : "-" }}
-                </div>
+                  </div>
-                <div v-else-if="col.name == 'organization'">
+                  <div v-else-if="col.name == 'organization'">
-                  {{
+                    {{
-                    props.row
+                      props.row
-                      ? findOrgNameHtml({
+                        ? findOrgNameHtml({
-                          root: props.row.orgRoot,
+                            root: props.row.orgRoot,
-                          child1: props.row.orgChild1,
+                            child1: props.row.orgChild1,
-                          child2: props.row.orgChild2,
+                            child2: props.row.orgChild2,
-                          child3: props.row.orgChild3,
+                            child3: props.row.orgChild3,
-                          child4: props.row.orgChild4,
+                            child4: props.row.orgChild4,
-                        })
+                          })
-                      : "-"
+                        : "-"
-                  }}
+                    }}
-                </div>
+                  </div>
-                <div v-else>
+                  <div v-else>
-                  {{ col.value ? col.value : "-" }}
+                    {{ col.value ? col.value : "-" }}
-                </div>
+                  </div>
-              </q-td>
+                </q-td>
-            </q-tr>
+              </q-tr>
-          </template>
+            </template>
-          <template v-slot:item="props">
+            <template v-slot:item="props">
-            <div
+              <div
-              class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+                class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-            >
+              >
-              <q-card bordered flat class="q-pt-md">
+                <q-card bordered flat class="q-pt-md">
-                <q-list dense>
+                  <q-list dense>
-                  <q-item v-for="col in props.cols" :key="col.name">
+                    <q-item v-for="col in props.cols" :key="col.name">
-                    <q-item-section class="fix_top">
+                      <q-item-section class="fix_top">
-                      <q-item-label class="text-grey-6 text-weight-medium">{{
+                        <q-item-label class="text-grey-6 text-weight-medium">{{
-                        col.label
+                          col.label
-                      }}</q-item-label>
+                        }}</q-item-label>
-                    </q-item-section>
+                      </q-item-section>
-                    <q-item-section
+                      <q-item-section
-                      v-if="col.name == 'insignia' && type == 'insignia'"
+                        v-if="col.name == 'insignia' && type == 'insignia'"
-                      class="fix_top"
+                        class="fix_top"
-                    >
-                      <q-item-label class="text-dark text-weight-medium">
-                        {{
-                          props.row.insignia
-                            ? `${props.row.insignia.name} `
-                            : "-"
-                        }}{{
-                          props.row.insignia.shortName
-                            ? `(${props.row.insignia.shortName})`
-                            : ""
-                        }}</q-item-label
                       >
-                    </q-item-section>
+                        <q-item-label class="text-dark text-weight-medium">
-                    <q-item-section
+                          {{
-                      v-else-if="col.name == 'dateLeave' && type == 'Leave'"
+                            props.row.insignia
-                      class="fix_top"
+                              ? `${props.row.insignia.name} `
-                    >
+                              : "-"
-                      <q-item-label class="text-dark text-weight-medium">
+                          }}{{
-                        {{
+                            props.row.insignia.shortName
-                          dateThaiRange([
+                              ? `(${props.row.insignia.shortName})`
-                            props.row.dateStartLeave,
+                              : ""
-                            props.row.dateEndLeave,
+                          }}</q-item-label
-                          ])
+                        >
-                        }}</q-item-label
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'dateLeave' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
+                        <q-item-label class="text-dark text-weight-medium">
-                    <q-item-section
+                          {{
-                      v-else-if="col.name == 'status' && type == 'Leave'"
+                            dateThaiRange([
-                      class="fix_top"
+                              props.row.dateStartLeave,
-                    >
+                              props.row.dateEndLeave,
-                      <q-item-label class="text-dark text-weight-medium">
+                            ])
-                        {{
+                          }}</q-item-label
-                          props.row.status ? statusLeave(props.row.status) : "-"
+                        >
-                        }}</q-item-label
+                      </q-item-section>
+                      <q-item-section
+                        v-else-if="col.name == 'status' && type == 'Leave'"
+                        class="fix_top"
                       >
-                    </q-item-section>
+                        <q-item-label class="text-dark text-weight-medium">
-                    <q-item-section v-else class="fix_top">
+                          {{
-                      <q-item-label class="text-dark text-weight-medium">{{
+                            props.row.status
-                        col.value ? col.value : "-"
+                              ? statusLeave(props.row.status)
-                      }}</q-item-label>
+                              : "-"
-                    </q-item-section>
+                          }}</q-item-label
-                  </q-item>
+                        >
-                </q-list>
+                      </q-item-section>
-              </q-card>
+                      <q-item-section v-else class="fix_top">
-            </div>
+                        <q-item-label class="text-dark text-weight-medium">{{
-          </template>
+                          col.value ? col.value : "-"
-          <template v-slot:no-data>
+                        }}</q-item-label>
-            <div
+                      </q-item-section>
-              class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+                    </q-item>
-            >
+                  </q-list>
-              <span> ไม่พบข้อมูล </span>
+                </q-card>
-            </div>
+              </div>
-          </template>
+            </template>
-        </d-table>
+            <template v-slot:no-data>
+              <div
+                class="full-width row flex-center q-pa-sm rounded-borders text-weight-medium"
+              >
+                <span> ไม่พบข้อมูล </span>
+              </div>
+            </template>
+          </d-table>
+        </div>
       </q-card-section>
     </q-card>
   </q-dialog>

src/modules/10_registry/components/DialogAddRequestEdit.vue

@@ -12,9 +12,7 @@ import DialogHeader from "@/components/DialogHeader.vue";
 import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
 import { useCounterMixin } from "@/stores/mixin";
 
-/**
+/** use*/
- * use
- */
 const $q = useQuasar();
 const link = ref<string>("");
 const store = useRequestEditStore();
@@ -22,24 +20,23 @@ const dataStore = useDataStore();
 const { dialogConfirm, showLoader, hideLoader, messageError, success } =
   useCounterMixin();
 
-/**
+/** props*/
- *  props
- */
 const modalInfo = ref<boolean>(false);
 const modal = defineModel<boolean>("modal", { required: true });
 const props = defineProps({
-  fetchData: { type: Function, requied: true },
+  fetchData: { type: Function, required: true },
 });
 
-const isReadOnly = ref<boolean>(false);
+const isReadOnly = ref<boolean>(false); // อ่านข้อมูลได้อย่างเดียว
-const profileId = ref<string>("");
+const profileId = ref<string>(""); // profileId ของผู้ยื่นคำร้องq
 const formData = reactive({
   topic: "",
   detail: "",
   document: null,
 });
-const topicOption = ref<string[]>(store.optionTopic);
+const topicOption = ref<string[]>(store.optionTopic); // ตัวเลือกเรื่องที่ต้องการแก้ไข
 
+/** function ปิด Dialog และเคลียร์ข้อมูล */
 function closeDialog() {
   modal.value = false;
   formData.topic = "";
@@ -47,9 +44,7 @@ function closeDialog() {
   formData.document = null;
 }
 
-/**
+/** function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล */
- * function ยืนยันการยื่นคำร้องขอแก้ไขข้อมูล
- */
 function onSubmit() {
   dialogConfirm(
     $q,
@@ -65,17 +60,18 @@ function onSubmit() {
         })
         .then(async (res) => {
           if (formData.document) {
-            createURLUpload(res.data.result, formData.document);
+            await createURLUpload(res.data.result, formData.document);
           } else {
             formData.document = null;
             await props.fetchData?.();
             await success($q, "บันทึกข้อมูลสำเร็จ");
             closeDialog();
-            hideLoader();
           }
         })
         .catch((err) => {
           messageError($q, err);
+        })
+        .finally(() => {
           hideLoader();
         });
     },
@@ -86,10 +82,12 @@ function onSubmit() {
 
 /**
  * function สร้าง URL อัปโหลไฟล์เอกสารหลักฐาน
+ * @param id คำร้องขอแก้ไขข้อมูล
+ * @param file ไฟล์ที่อัปโหลด
  */
-function createURLUpload(id: string, file: any) {
+async function createURLUpload(id: string, file: any) {
   const fileName = { fileName: file.name };
-  http
+  await http
     .post(
       config.API.file(
         "ระบบทะเบียนประวัติ",
@@ -108,7 +106,7 @@ function createURLUpload(id: string, file: any) {
           res.data[key]?.fileName !== ""
       );
       foundKey &&
-        uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document);
+        (await uploadFileDoc(res.data[foundKey]?.uploadUrl, formData.document));
     })
     .catch((err) => {
       messageError($q, err);
@@ -117,32 +115,29 @@ function createURLUpload(id: string, file: any) {
 
 /**
  * function สำหรับอัพโหลดไฟล์เอกสารหลักฐาน
+ * @param uploadUrl URL สำหรับอัปโหลดไฟล์
+ * @param file ไฟล์ที่อัปโหลด
  */
-function uploadFileDoc(uploadUrl: string, file: any) {
+async function uploadFileDoc(uploadUrl: string, file: any) {
-  showLoader();
+  await axios
-  axios
     .put(uploadUrl, file, {
       headers: {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       await props.fetchData?.();
       await success($q, "บันทึกข้อมูลสำเร็จ");
       closeDialog();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
 /**
- * class input
+ * function สำหรับจัดการ class ของ input
- * @param val
+ * @param val ค่าที่ใช้ในการกำหนด class
  */
 function classInput(val: boolean) {
   return {
@@ -164,9 +159,7 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
+/** function fetch profileId */
- * function fetch profileId
- */
 async function fetchProfile() {
   try {
     isReadOnly.value = dataStore.officerType === "OFFICER";

src/modules/10_registry/components/skeleton/Address.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">
+        ที่อยู่ตามทะเบียนบ้าน
+      </div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">จังหวัด</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">เขต / อำเภอ</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">แขวง / ตำบล</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-5 text-grey-6 text-weight-medium">รหัสไปรษณีย์</div>
+      <div class="col-7">
+        <q-skeleton type="text" />
+      </div>
+    </div>
+  </div>
+</template>

src/modules/10_registry/components/skeleton/Family.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+const type = defineModel("type", {
+  type: String,
+  default: "",
+});
+</script>
+
+<template>
+  <div class="col-12" v-if="type === 'couple'">
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการสมรส
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+
+  <div class="col-12" v-else>
+    <q-card bordered class="bg-grey-1 q-pa-sm">
+      <div class="row">
+        <div class="col-12 col-sm-12 col-md-12 q-gutter-y-sm">
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              เลขประจำตัวประชาชน
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">
+              สถานภาพการมีชีวิต
+            </div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+
+          <div class="row">
+            <div class="col-5 text-grey-6 text-weight-medium">อาชีพ</div>
+            <div class="col-7">
+              <q-skeleton type="text" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>

src/modules/10_registry/components/skeleton/Government.vue

@@ -0,0 +1,110 @@
+<template>
+  <q-card bordered class="bg-grey-1 q-pa-md">
+    <div class="row q-col-gutter-y-sm">
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
+          <div class="col-7 text-html">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6">
+        <div class="row q-col-gutter-y-sm">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+          <div class="col-5 text-grey-6 text-weight-medium">ด้าน/สาขา</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <q-separator class="q-my-md" />
+    <div class="row">
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่สั่งบรรจุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เริ่มปฏิบัติราชการ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันครบเกษียณอายุ
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6 text-grey-6 text-weight-medium">
+            วันที่เกษียณอายุราชการตามกฏหมาย
+          </div>
+          <div class="col-6">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12 col-sm-12 col-md-6 q-gutter-y-sm">
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">อายุราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">ขาดราชการ</div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-5 text-grey-6 text-weight-medium">
+            อายุราชการเกื้อกูล
+          </div>
+          <div class="col-7">
+            <q-skeleton class="q-mb-sm" type="text" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>

src/modules/10_registry/tabs/01_information.vue

@@ -2,12 +2,12 @@
 import { useRouter } from "vue-router";
 
 /** component */
-import Information from "@/modules/10_registry/01_Information/01_Information.vue";
+import Information from "@/modules/10_registry/01_Information/01_Information.vue"; //ปรับข้อมูลส่วนตัว
-import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue";
+import ChangeName from "@/modules/10_registry/01_Information/02_ChangeName.vue"; //เปลี่ยนชื่อ-นามสกุล
-import Address from "@/modules/10_registry/01_Information/03_Address.vue";
+import Address from "@/modules/10_registry/01_Information/03_Address.vue"; //ที่อยู่
-import Family from "@/modules/10_registry/01_Information/04_Family.vue";
+import Family from "@/modules/10_registry/01_Information/04_Family.vue"; //ข้อมูลครอบครัว
-import Educations from "@/modules/10_registry/01_Information/05_Educations.vue";
+import Educations from "@/modules/10_registry/01_Information/05_Educations.vue"; //ข้อมูลการศึกษา
-import Ability from "@/modules/10_registry/01_Information/06_Ability.vue";
+import Ability from "@/modules/10_registry/01_Information/06_Ability.vue"; //ความสามารถ
 
 const router = useRouter();
 </script>

src/modules/10_registry/views/main.vue

@@ -1,44 +1,51 @@
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted } from "vue";
-import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
-import { useDataStore } from "@/stores/data";
-import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
-import genReport from "@/plugins/genreport";
 
-//หน้าเมนู
+import http from "@/plugins/http";
+import config from "@/app.config";
+import genReport from "@/plugins/genreport";
+import { useRouter } from "vue-router";
+import { useRegistryInFormationStore } from "@/modules/10_registry/store/registry";
+import { useDataStore } from "@/stores/data";
+import { useCounterMixin } from "@/stores/mixin";
+
+/** import components */
 import InformationPage from "@/modules/10_registry/tabs/01_information.vue";
 import GovernmentPage from "@/modules/10_registry/tabs/02_government.vue";
 import SalaryPage from "@/modules/10_registry/tabs/03_salary.vue";
 import Certificate from "@/modules/10_registry/tabs/04_Achievement.vue";
 import OtherPage from "@/modules/10_registry/tabs/05_other.vue";
 
-import { useRouter } from "vue-router";
-
-import http from "@/plugins/http";
-import config from "@/app.config";
-import { useQuasar } from "quasar";
-
-const store = useRegistryInFormationStore();
 const $q = useQuasar();
-const dataStore = useDataStore();
-const mixin = useCounterMixin();
-const { messageError, showLoader, hideLoader } = mixin;
 const router = useRouter();
-const tab = ref<string>("information");
+const store = useRegistryInFormationStore();
+const dataStore = useDataStore();
+const { messageError, showLoader, hideLoader } = useCounterMixin();
+
+const tab = ref<string>("information"); // ตัวแปรสำหรับเก็บชื่อแท็บที่เลือก
+const sizeImg = ref<string>(""); // ขนาดของรูปภาพโปรไฟล์
+
+/** ข้อความแสดงชื่อเงินเดือนหรือค่าจ้าง */
 const salaryText = computed(() => {
- return  dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
+  return dataStore.officerType == "OFFICER" ? "เงินเดือน" : "ค่าจ้าง";
 });
 
-const sizeImg = ref<string>("");
+/**
-function onResize(size: any) {
+ * ฟังก์ชันจัดการขนาดของรูปภาพโปรไฟล์
+ * @param size ขนาดที่ได้จาก q-resize-observer
+ */
+function onResize(size: { width: number; height: number }) {
   const width = size.width > 100 ? 100 : size.width;
   sizeImg.value = `${width}px`;
 }
 
-function onMobile(type: string) {
+/**
-  router.push(`/registry/${type}`);
+ * ฟังก์ชันดาวน์โหลดไฟล์ ก.พ.7/ก.ก.1 หรือประวัติแบบย่อ
-}
+ * @param type ประเภทไฟล์ที่ต้องการดาวน์โหลด
-
+ * FULL: ก.พ.7/ก.ก.1
+ * SHORT: ประวัติแบบย่อ
+ */
 async function onClickDownloadKp7(type: string) {
   showLoader();
   const url =
@@ -66,19 +73,19 @@ async function onClickDownloadKp7(type: string) {
     });
 }
 
-/**
+/** ฟังชั่นกลับหน้าหลัก*/
- * ฟังชั่นกลับหน้าหลัก
- */
 const clickBack = () => {
   router.push(`/`);
 };
 
-/**
+/** ฟังก์ชัน redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล*/
- * function redirect ไปหน้ารายการคำร้องขอแก้ไขข้อมูล
- */
 function redirectToPagePetition() {
   router.push(`/registry/request-edit`);
 }
+
+function onMobile(type: string) {
+  router.push(`/registry/${type}`);
+}
 </script>
 
 <template>
@@ -106,7 +113,40 @@ function redirectToPagePetition() {
       </div>
       <div v-if="$q.screen.gt.xs" class="row q-col-gutter-md">
         <div class="col-3">
-          <q-card bordered>
+          <q-card v-if="dataStore.isLoadingProfile" bordered>
+            <q-resize-observer @resize="onResize" />
+            <q-card-section>
+              <div class="relative-position" style="height: 120px">
+                <div class="absolute-center">
+                  <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+                </div>
+              </div>
+              <div class="column items-center q-mt-md q-mb-sm q-gutter-sm">
+                <q-skeleton type="text" width="120px" />
+                <q-skeleton type="text" width="150px" />
+                <q-skeleton type="text" width="100px" />
+                <q-skeleton type="text" width="50px" />
+              </div>
+            </q-card-section>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 2" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+                <q-item-section>
+                  <q-skeleton type="text" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+
+            <q-card-section class="q-gutter-y-sm">
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+              <q-skeleton type="QBtn" class="full-width" height="48px" />
+            </q-card-section>
+          </q-card>
+
+          <q-card v-else bordered>
             <q-resize-observer @resize="onResize" />
             <q-card-section>
               <div class="relative-position" style="height: 120px">
@@ -220,8 +260,6 @@ function redirectToPagePetition() {
 
             <q-separator />
 
-            <!-- รายการเเต่ละหน้า -->
-
             <q-tab-panels v-model="tab" animated>
               <q-tab-panel name="information">
                 <InformationPage />
@@ -248,7 +286,41 @@ function redirectToPagePetition() {
       </div>
 
       <div v-else>
-        <q-card bordered>
+        <q-card v-if="dataStore.isLoadingProfile" bordered>
+          <q-resize-observer @resize="onResize" />
+          <q-card-section>
+            <div class="relative-position" style="height: 120px">
+              <div class="absolute-center">
+                <q-skeleton type="QAvatar" :size="sizeImg || '100px'" />
+              </div>
+            </div>
+
+            <div class="column items-center q-mt-md q-mb-lg q-gutter-sm">
+              <q-skeleton type="text" width="120px" />
+              <q-skeleton type="text" width="150px" />
+              <q-skeleton type="text" width="100px" />
+              <q-skeleton type="text" width="50px" />
+            </div>
+
+            <div class="row justify-center q-gutter-x-lg">
+              <q-skeleton type="QRadio" size="48px" />
+              <q-skeleton type="QRadio" size="48px" />
+            </div>
+
+            <q-list separator class="q-mt-md">
+              <q-item v-for="i in 5" :key="i">
+                <q-item-section>
+                  <q-skeleton type="text" width="120px" height="16px" />
+                </q-item-section>
+                <q-item-section avatar>
+                  <q-skeleton type="QIcon" size="24px" />
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-card-section>
+        </q-card>
+
+        <q-card v-else bordered>
           <q-resize-observer @resize="onResize" />
           <q-card-section>
             <div class="text-center q-mt-md">

src/modules/10_registry/views/requestEditDetail.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 
 import { useRouter, useRoute } from "vue-router";
@@ -37,8 +37,11 @@ const statusOptionMain = ref<DataOption[]>(
 );
 const statusOption = ref<DataOption[]>(statusOptionMain.value); //ตัวเลือกรายการสถานะ
 
+const isLoading = ref<boolean>(false); //สถานะการโหลดข้อมูล
+
 async function fetchData() {
-  showLoader();
+  // showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.requestEditByType(link.value) + `${requestId.value}`)
     .then(async (res) => {
@@ -56,9 +59,10 @@ async function fetchData() {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 const checkFile = ref<null | false | "img" | "doc">(null); // เช็คไฟล์อัปโหลด null ค่าเริ่มต้น, false ไม่มีไฟล์, "img" รูปภาพ, "doc" เอกสาร
@@ -154,7 +158,37 @@ onMounted(async () => {
               </div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <!-- วันที่ยื่นขอ Skeleton -->
+                <div class="col-md-2 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- เรื่อง Skeleton -->
+                <div class="col-md-10 col-xs-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <!-- รายละเอียด Skeleton -->
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+
+                <!-- ไฟล์ Skeleton -->
+                <div class="col-12 q-mt-md">
+                  <q-skeleton
+                    type="rect"
+                    width="120px"
+                    height="20px"
+                    class="q-mb-sm"
+                  />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <!-- วันที่ยื่นขอ -->
                 <div class="col-md-2 col-xs-12">
@@ -265,7 +299,19 @@ onMounted(async () => {
               <div class="q-pl-sm text-weight-bold text-dark">สถานะคำร้อง</div>
             </div>
             <div class="col-12"><q-separator /></div>
-            <q-card-section class="col-12">
+            <q-card-section v-if="isLoading" class="col-12">
+              <div class="row q-col-gutter-sm">
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="40px" />
+                </div>
+
+                <div class="col-12">
+                  <q-skeleton type="QInput" height="160px" />
+                </div>
+              </div>
+            </q-card-section>
+
+            <q-card-section v-else class="col-12">
               <div class="row q-col-gutter-sm">
                 <div class="col-xs-12 col-md-12">
                   <q-select
@@ -312,6 +358,7 @@ onMounted(async () => {
 
           <div class="col-12 q-mt-sm">
             <Workflow
+              v-if="dataStore.officerType && requestId"
               ref="workflowRef"
               :id="requestId"
               :sys-name="

src/modules/10_registry/views/requestEditMain.vue

@@ -6,10 +6,10 @@ import http from "@/plugins/http";
 import { useDataStore } from "@/stores/data";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
+import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
+import { useCounterMixin } from "@/stores/mixin";
 
-/**
+/**importType*/
- * importType
- */
 import type { QTableProps } from "quasar";
 import type {
   DataOption,
@@ -17,39 +17,26 @@ import type {
 } from "@/modules/10_registry/interface/index/Main";
 import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
-/**
+/** importComponents*/
- * importComponents
- */
 import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
+import SkeletonTable from "@/components/SkeletonTable.vue";
 
-/**
+/** use */
- * importStore
- */
-import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const link = ref<string>("");
 const router = useRouter();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, dialogRemove, success } =
+const { messageError } = useCounterMixin();
-  useCounterMixin();
 
-/**
+/** ตัวแปร*/
- * ตัวแปร
- */
 const modalPetiton = ref<boolean>(false);
 const status = ref<string>("");
 const keyword = ref<string>("");
 const statusOption = ref<DataOption[]>(store.optionStatus);
+const isLoading = ref<boolean>(false);
 
-/**
+/** Table*/
- * Table
- */
 const rows = ref<DataRequest[]>([]);
 const page = ref<number>(1);
 const pageSize = ref<number>(10);
@@ -124,32 +111,26 @@ const visibleColumns = ref<string[]>([
   "remark",
 ]);
 
-/**
+/** function กลับไปหน้าทะเบียนประวัติ*/
- * function กลับไปหน้าทะเบียนประวัติ
- */
 function onclickBackPage() {
   router.push(`/registry`);
 }
 
-/**
+/** function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล*/
- * function กดเพิ่มรายการยื่นคำร้องขอแก้ไขข้อมูล
- */
 function onClickAdd() {
   modalPetiton.value = true;
 }
 
-/**
+/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
- * function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล
+async function fetchListRequset() {
- */
-function fetchListRequset() {
   let queryParams = {
     page: page.value,
     pageSize: pageSize.value,
     status: status.value,
     keyword: keyword.value,
   };
-  showLoader();
+  isLoading.value = true;
-  http
+  await http
     .get(config.API.requestEditByType(link.value) + `user`, {
       params: queryParams,
     })
@@ -163,21 +144,17 @@ function fetchListRequset() {
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
+/** function เลือกสถานะคำร้อง*/
- * function เลือกสถานะคำร้อง
- */
 function updateStatusValue() {
   page.value = 1;
   fetchListRequset();
 }
 
-/**
+/** function เคลียร์ข้อมูลสถานะคำร้อง*/
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
 function clearStatus() {
   status.value = "";
   statusOption.value = store.optionStatus;
@@ -197,80 +174,15 @@ function filterOption(val: string, update: Function) {
   });
 }
 
+/**
+ * function อัพเดทขนาดหน้าใน pagination
+ * @param newPagination ข้อมูลใหม่ของ pagination
+ */
 function updatePageSizePagination(newPagination: NewPagination) {
   page.value = 1;
   pageSize.value = newPagination.rowsPerPage;
 }
 
-/**
- * function หาชื่อไฟล์
- * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
- */
-function onDownloadFile(id: string) {
-  showLoader();
-  http
-    .get(
-      config.API.file(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id
-      )
-    )
-    .then((res) => {
-      if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
-      } else {
-        hideLoader();
-      }
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-}
-
-/**
- * function  โหลดไฟล์
- * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
- * @param fileName  ชื่อไฟล์
- */
-function downloadUrl(id: string, fileName: string) {
-  http
-    .get(
-      config.API.fileByFile(
-        "ระบบทะเบียนประวัติ",
-        "เอกสารหลักฐานคำร้องขอแก้ไขข้อมูล",
-        id,
-        fileName
-      )
-    )
-    .then((res) => {
-      window.open(res.data.downloadUrl, "_blank");
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-// function onDeleteLidt(id: string) {
-//   dialogRemove($q, () => {
-//     showLoader();
-//     http
-//       .delete(config.API.requestEdit + `${id}`)
-//       .then(async (res) => {
-//         await fetchListRequset();
-//         await success($q, "ลบข้อมูลสำเร็จ");
-//       })
-//       .catch((err) => {
-//         messageError($q, err);
-//         hideLoader();
-//       });
-//   });
-// }
-
 watch(
   () => pageSize.value,
   () => {
@@ -381,7 +293,9 @@ onMounted(async () => {
           </div>
         </div>
         <div class="col-12">
+          <SkeletonTable v-if="isLoading" :columns="columns" />
           <d-table
+            v-else
             :columns="columns"
             :rows="rows"
             row-key="id"
@@ -411,36 +325,11 @@ onMounted(async () => {
                   <div v-if="col.name == 'no'">
                     {{ props.rowIndex + 1 }}
                   </div>
-                  <!-- <div v-else-if="col.name === 'document'">
+
-                    <q-btn
-                      icon="mdi-download"
-                      round
-                      dense
-                      flat
-                      color="primary"
-                      size="12px"
-                      @click.stop.pervent="onDownloadFile(props.row.id)"
-                    >
-                      <q-tooltip>หลักฐานอ้างอิง</q-tooltip>
-                    </q-btn>
-                  </div> -->
                   <div v-else class="table_ellipsis2">
                     {{ col.value ? col.value : "-" }}
                   </div>
                 </q-td>
-                <!-- <q-td>
-                  <q-btn
-                    v-if="props.row.status === 'PENDING'"
-                    flat
-                    round
-                    color="red"
-                    icon="mdi-delete"
-                    size="12px"
-                    @click="onDeleteLidt(props.row.id)"
-                  >
-                    <q-tooltip>ลบคำร้องขอแก้ไขข้อมูล</q-tooltip>
-                  </q-btn>
-                </q-td> -->
               </q-tr>
             </template>
             <template v-slot:pagination="scope">

src/modules/12_organization/views/main.vue

@@ -29,6 +29,7 @@ const dataSource = ref(); // ข้อมูล Chart
 const idActive = ref<string>("");
 const dataSourceLock = ref(); // ข้อมูลตั้งต้นของ Chart ใช้ให้กดกลับไปที่ home
 const scrollContainer = ref<HTMLElement | null>(null);
+const isLoading = ref<boolean>(false);
 
 /**
  * สร้าง Path Breadcrumbs
@@ -150,7 +151,7 @@ async function fetchStructChart(
   type: string,
   status: boolean = false
 ) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.orgStructChart(id, type))
     .then((res) => {
@@ -168,7 +169,7 @@ async function fetchStructChart(
       messageError($q, err);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -236,7 +237,19 @@ onMounted(async () => {
     <div class="col-xs-12 col-sm-12 col-md-11 row q-col-gutter-md">
       <div class="col-12 row">
         <q-card bordered class="col-12 row caedNone">
-          <div class="q-pa-sm row wrap items-center">
+          <!-- Skeleton สำหรับ Toolbar -->
+          <div v-if="isLoading" class="q-pa-sm row wrap items-center col-12">
+            <q-skeleton type="circle" size="40px" />
+            <q-skeleton type="circle" size="40px" class="q-ml-sm" />
+            <q-skeleton
+              type="rect"
+              width="300px"
+              height="40px"
+              class="q-ml-md"
+            />
+          </div>
+
+          <div v-else class="q-pa-sm row wrap items-center">
             <q-btn
               flat
               :diasble="isLoadBtn"
@@ -276,7 +289,53 @@ onMounted(async () => {
             <q-separator />
           </div>
 
+          <!-- Organization Chart Skeleton -->
           <div
+            v-if="isLoading"
+            class="q-pt-md col-12"
+            style="height: 70vh; overflow: hidden"
+          >
+            <div class="row justify-center q-mb-lg">
+              <!-- Main Department Skeleton -->
+              <div class="col-auto">
+                <q-skeleton
+                  type="rect"
+                  width="300px"
+                  height="80px"
+                  class="rounded-borders"
+                />
+              </div>
+            </div>
+
+            <!-- Sub Departments Skeleton -->
+            <div class="row justify-center q-col-gutter-md">
+              <div v-for="i in 5" :key="i" class="col-auto">
+                <div class="column items-center">
+                  <q-skeleton
+                    type="rect"
+                    width="200px"
+                    height="60px"
+                    class="rounded-borders q-mb-md"
+                  />
+
+                  <!-- Sub Items Skeleton -->
+                  <div class="column q-gutter-xs">
+                    <q-skeleton
+                      v-for="j in 3"
+                      :key="j"
+                      type="rect"
+                      width="180px"
+                      height="35px"
+                      class="rounded-borders"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-else
             id="structChart"
             ref="scrollContainer"
             style="

src/modules/13_portfolio/views/Add.vue

@@ -13,9 +13,7 @@ const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-/**
+/** ตัวแปรที่ใช้งาน */
- * ตัวแปรที่ใช้งาน
- */
 const route = useRoute();
 const files = ref<any>();
 const name = ref<string>("");
@@ -24,60 +22,74 @@ const id = ref<string>("");
 const routeName = router.currentRoute.value.name;
 const fileList = ref<any[]>([]);
 
-const saveData = async () => {
+const isLoading = ref<boolean>(false);
-  dialogConfirm(
+const isLoadingFile = ref<boolean>(false);
-    $q,
-    () => {
-      createTransfer();
-    },
-    "ยืนยันการบันทึกข้อมูล",
-    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
-  );
-};
-
-/**
- * ฟังก์ชั่นสร้างขอโอน
- */
-const createTransfer = async () => {
-  showLoader();
-  await http
-    .post(config.API.portfolio, { name: name.value, detail: detail.value })
-    .then(async (res) => {
-      uploadFiles(res.data.result);
-    })
-    .catch((e) => {
-      messageError($q, e);
-      hideLoader();
-    });
-};
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fecthData = async (id: string) => {
+async function fetchData(id: string) {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.portfolioId(id))
-    .then((res: any) => {
+    .then(async (res) => {
       let data = res.data.result;
       name.value = data.name;
       detail.value = data.detail;
-      fetchFile();
     })
-    .catch((e: any) => {
+    .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    })
+    .finally(() => {
+      isLoading.value = false;
     });
-};
+}
+
+/** ฟังก์ชั่นรายการเอกสาร */
+async function fetchFile() {
+  isLoadingFile.value = true;
+  await http
+    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
+    .then((res) => {
+      fileList.value = res.data;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      isLoadingFile.value = false;
+    });
+}
+
+function onSubmit() {
+  dialogConfirm(
+    $q,
+    async () => {
+      showLoader();
+      await http
+        .post(config.API.portfolio, { name: name.value, detail: detail.value })
+        .then(async (res) => {
+          await uploadFiles(res.data.result);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    },
+    "ยืนยันการบันทึกข้อมูล",
+    "ต้องการยืนยันการบันทึกข้อมูลใช่หรือไม่"
+  );
+}
 
 /**
- * function อัปโหลดไฟล์
+ * ฟังก์ชั่นอัปโหลดไฟล์
  * @param id ผลงาน
  */
-function uploadFiles(id: string) {
+async function uploadFiles(id: string) {
-  showLoader();
+  await http
-  http
     .post(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id), {
       replace: true,
       fileList: [
@@ -92,23 +104,21 @@ function uploadFiles(id: string) {
           res.data[key]?.fileName !== undefined &&
           res.data[key]?.fileName !== ""
       );
-      foundKey && uploadFileURL(res.data[foundKey]?.uploadUrl);
+      foundKey && (await uploadFileURL(res.data[foundKey]?.uploadUrl));
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
 /**
- * function บันทึกไฟล์
+ * ฟังก์ชั่นบันทึกไฟล์
  * @param uploadUrl บันทึกไฟล์
  */
-function uploadFileURL(uploadUrl: string) {
+async function uploadFileURL(uploadUrl: string) {
   const Data = new FormData();
   Data.append("file", files.value);
-  showLoader();
+  await axios
-  axios
     .put(uploadUrl, files.value, {
       headers: {
         "Content-Type": files.value.type,
@@ -122,29 +132,10 @@ function uploadFileURL(uploadUrl: string) {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
       files.value = null;
     });
 }
 
-/**
- *function fetch รายการเอกสาร
- */
-function fetchFile() {
-  showLoader();
-  http
-    .get(config.API.file("ระบบผลงาน", "เอกสารผลงาน", id.value))
-    .then((res) => {
-      fileList.value = res.data;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /**
  * ฟังก์ชั่นดาว์โหลดอัปโหลดไฟล์
  * @param fileName ชื่อไฟล์
@@ -165,13 +156,11 @@ function fileOpen(fileName: string) {
     });
 }
 
-/**
+/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
+onMounted(async () => {
- */
-onMounted(() => {
   if (route.params.id !== undefined) {
     id.value = route.params.id.toString();
-    fecthData(id.value);
+    await Promise.all([fetchData(id.value), fetchFile()]);
   }
 });
 </script>
@@ -197,9 +186,17 @@ onMounted(() => {
         class="col-12"
         greedy
         @submit.prevent
-        @validation-success="saveData"
+        @validation-success="onSubmit"
       >
-        <q-card bordered>
+        <q-card bordered v-if="isLoading">
+          <div class="q-pa-md">
+            <div class="q-gutter-md">
+              <q-skeleton height="40px" />
+              <q-skeleton height="150px" />
+            </div>
+          </div>
+        </q-card>
+        <q-card bordered v-else>
           <div class="col-12 row q-col-gutter-md q-pa-md">
             <div class="col-xs-12 col-sm-12">
               <div class="col-12 row q-pa-sm q-col-gutter-sm">
@@ -246,6 +243,7 @@ onMounted(() => {
                       <q-icon name="attach_file" /> </template
                   ></q-file>
                 </div>
+
                 <div class="col-12 row" v-if="routeName != 'addPortfolio'">
                   <q-card bordered flat class="full-width">
                     <div
@@ -256,7 +254,8 @@ onMounted(() => {
                       </div>
                     </div>
                     <q-separator />
-                    <q-list separator>
+                    <q-skeleton v-if="isLoadingFile" type="QSlider" />
+                    <q-list v-else separator>
                       <q-item v-for="file in fileList" :key="file.key">
                         <q-item-section>
                           {{ file.fileName }}

src/modules/13_portfolio/views/Main.vue

@@ -9,6 +9,9 @@ import { useRouter } from "vue-router";
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { PortfolioRowsType } from "@/modules/13_portfolio/interface/Main";
+
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
@@ -27,9 +30,8 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-/**
+
- * เพิ่มหัวข้อตาราง
+const isLoading = ref<boolean>(false);
- */
 const filter = ref<string>("");
 const rows = ref<PortfolioRowsType[]>([]);
 const rowsData = ref<PortfolioRowsType[]>([]);
@@ -64,9 +66,9 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
-//นำข้อมูลมาแสดง
+/** ฟังก์ชั่นนำข้อมูลรายการเอกสาร/ผลงาน */
 async function fecthList() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(config.API.portfolio)
     .then((res) => {
@@ -77,20 +79,16 @@ async function fecthList() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
-/**
+/** ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน*/
- * ฟังก์ชั่นกดเพิ่มไปหน้าเพิ่มขอโอน
- */
 async function clickAdd() {
   router.push(`/portfolio/add`);
 }
 
-/**
+/** ฟังก์ชั่นกดย้อนกลับ*/
- * ฟังก์ชั่นกดย้อนกลับ
- */
 function clickBack() {
   router.push(`/`);
 }
@@ -100,21 +98,25 @@ function clickBack() {
  * @param id id row
  */
 function onDelete(id: string) {
-  dialogRemove($q, () => {
+  dialogRemove($q, async () => {
     showLoader();
-    http
+    await http
       .delete(config.API.portfolioId(id))
-      .then((res) => {
+      .then(async () => {
+        await fecthList();
         success($q, "ลบข้อมูลสำเร็จ");
-        fecthList();
       })
       .catch((err) => {
         messageError($q, err);
+      })
+      .finally(() => {
         hideLoader();
       });
   });
 }
 
+
+/** ฟังก์ชั่นค้นหาข้อมูลในตาราง */
 function onSearch() {
   rows.value = onSearchDataTable(
     filter.value,
@@ -123,9 +125,7 @@ function onSearch() {
   );
 }
 
-/**
+/** Hook Lifecycle */
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
 onMounted(async () => {
   await fecthList();
 });
@@ -198,7 +198,9 @@ onMounted(async () => {
               </q-select>
             </div>
           </div>
-          <div>
+
+          <SkeletonTable v-if="isLoading" :columns="columns" />
+          <div class="col-12" v-else>
             <d-table
               flat
               bordered

src/modules/14_IDP/views/main.vue

@@ -10,20 +10,18 @@ import { useIndividualDevelopmentPlan } from "@/modules/14_IDP/store"; // ดึ
 
 import type { DataOption, RowsListMain } from "@/modules/14_IDP/interface/Main";
 
+import SkeletonTable from "@/components/SkeletonTable.vue";
+
 const $q = useQuasar();
 const router = useRouter();
 const mixin = useCounterMixin();
 const store = useIndividualDevelopmentPlan();
 const { showLoader, hideLoader, messageError, success, dialogRemove } = mixin;
 
-const idRow = ref<string>("");
+const isLoading = ref<boolean>(false);
-const isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
 const filterKeyword = ref<string>("");
 const status = ref<string>("ALL"); // สถานะคำร้อง
 const statusOptions = ref<DataOption[]>(store.optionStatus);
-
-/** pagination */
 const rows = ref<RowsListMain[]>([]);
 const total = ref<number>(0);
 const totalList = ref<number>(1);
@@ -33,7 +31,6 @@ const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
-
 const visibleColumns = ref<string[]>([
   "no",
   "name",
@@ -157,14 +154,6 @@ function filterOption(val: string, update: Function) {
   });
 }
 
-/**
- * function เคลียร์ข้อมูลสถานะคำร้อง
- */
-function clearStatus() {
-  status.value = "ALL";
-  statusOptions.value = store.optionStatus;
-}
-
 /** ฟังชั่น เปิด popup */
 function openAdd() {
   router.push("/idp-registry");
@@ -172,21 +161,24 @@ function openAdd() {
 
 function onDelete(id: string) {
   dialogRemove($q, async () => {
+    showLoader();
     await http
       .delete(config.API.developmentRequest + `/${id}`)
-      .then(async (res) => {
+      .then(async () => {
-        success($q, "ลบข้อมูลสำเร็จ");
         await getListData();
+        success($q, "ลบข้อมูลสำเร็จ");
       })
       .catch((e) => {
         messageError($q, e);
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 /** list รายการ */
 async function getListData() {
-  showLoader();
+  isLoading.value = true;
   await http
     .get(
       config.API.developmentRequest +
@@ -199,31 +191,33 @@ async function getListData() {
       totalList.value = Math.ceil(dataTotal / pagination.value.rowsPerPage);
       total.value = dataTotal;
       rows.value = data;
-      hideLoader();
     })
     .catch((e) => {
-      hideLoader();
+      messageError($q, e);
     })
-    .finally(() => {});
+    .finally(() => {
+      isLoading.value = false;
+    });
 }
 
 /**
  * function หาชื่อไฟล์
  * @param id รายการยื่นคำร้องขอแก้ไขข้อมูล
  */
-function onDownloadFile(id: string) {
+async function onDownloadFile(id: string) {
   showLoader();
-  http
+  await http
     .get(config.API.file("IDP", "ยื่นคำร้องขอเพิ่มข้อมูลการพัฒนารายบุคคล", id))
-    .then((res) => {
+    .then(async (res) => {
       if (res.data.length !== 0) {
-        downloadUrl(id, res.data[0].fileName);
+        await downloadUrl(id, res.data[0].fileName);
       } else {
-        hideLoader();
       }
     })
     .catch((e) => {
       messageError($q, e);
+    })
+    .finally(() => {
       hideLoader();
     });
 }
@@ -233,8 +227,8 @@ function onDownloadFile(id: string) {
  * @param id  รายการยื่นคำร้องขอแก้ไขข้อมูล
  * @param fileName  ชื่อไฟล์
  */
-function downloadUrl(id: string, fileName: string) {
+async function downloadUrl(id: string, fileName: string) {
-  http
+  await http
     .get(
       config.API.fileByFile(
         "IDP",
@@ -248,9 +242,6 @@ function downloadUrl(id: string, fileName: string) {
     })
     .catch((e) => {
       messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
     });
 }
 
@@ -374,8 +365,10 @@ onMounted(async () => {
             />
           </div>
 
-          <div>
+          <div class="col-12">
+            <SkeletonTable v-if="isLoading" :columns="columns" />
             <d-table
+              v-else
               :columns="columns"
               :rows="rows"
               row-key="id"

src/modules/14_IDP/views/registry.vue

@@ -17,13 +17,14 @@ import type {
 } from "@/modules/14_IDP/interface/Main";
 
 const $q = useQuasar();
-const { dialogConfirm, showLoader, hideLoader, messageError, success } =
-  useCounterMixin();
-const dataStore = useDataStore();
-
-const idRow = ref<string>("");
 const router = useRouter();
 const route = useRoute();
+const dataStore = useDataStore();
+const { dialogConfirm, showLoader, hideLoader, messageError, success } =
+  useCounterMixin();
+
+const idRow = ref<string>("");
+const isLoading = ref<boolean>(false);
 const isReadOnly = ref<boolean>(false);
 const isEdit = ref<boolean>(false); // เก็บ เช็ค รายละเอียด/แก้ไข
 const requestId = ref<string>(
@@ -204,7 +205,7 @@ function downloadUrl(id: string, fileName: string) {
 }
 
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
     showLoader();
     const body = {
       name: formData.topic,
@@ -219,16 +220,17 @@ function onSubmit() {
       isDevelopment10: isDevelopment10.value,
       developmentProjects: formData.development,
     };
-    http
+    await http
       .post(config.API.developmentRequest, body)
       .then(async (res) => {
         await createURLUpload(res.data.result, formData.document);
       })
       .catch((e) => {
         messageError($q, e);
-        hideLoader();
       })
-      .finally(() => {});
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -256,7 +258,6 @@ async function createURLUpload(id: string, file: any) {
     })
     .catch((err) => {
       messageError($q, err);
-      hideLoader();
     });
 }
 
@@ -270,21 +271,18 @@ async function uploadFileDoc(uploadUrl: string, file: any) {
         "Content-Type": file.type,
       },
     })
-    .then(async (res) => {
+    .then(async () => {
       success($q, `บันทึกข้อมูลสำเร็จ`);
       router.push("/idp");
-      hideLoader();
     })
     .catch((e) => {
       messageError($q, e);
-      hideLoader();
+    });
-    })
-    .finally(() => {});
 }
 
-function getDetail() {
+async function getDetail() {
-  showLoader();
+  isLoading.value = true;
-  http
+  await http
     .get(config.API.developmentRequest + `/user/${idRow.value}`)
     .then((res) => {
       const data = res.data.result;
@@ -301,7 +299,7 @@ function getDetail() {
       messageError($q, e);
     })
     .finally(() => {
-      hideLoader();
+      isLoading.value = false;
     });
 }
 
@@ -339,7 +337,13 @@ onMounted(() => {
       <q-card bordered>
         <q-form greedy @submit.prevent @validation-success="onSubmit">
           <q-card-section>
-            <div class="row q-col-gutter-sm">
+            <div v-if="isLoading" class="q-gutter-md">
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+              <q-skeleton height="150px" />
+            </div>
+
+            <div v-else class="row q-col-gutter-sm">
               <div class="col-12">
                 <div class="row q-col-gutter-sm">
                   <div class="col-12">
@@ -539,6 +543,7 @@ onMounted(() => {
               </div>
             </div>
           </q-card-section>
+
           <q-separator v-if="!isEdit" />
           <q-card-actions align="right" v-if="!isEdit">
             <q-btn label="บันทึก" color="secondary" type="submit"

src/stores/data.ts

@@ -9,6 +9,8 @@ import { useCounterMixin } from "./mixin";
 import type { ProfileData, DataProfile } from "@/interface/Main";
 
 export const useDataStore = defineStore("dataMain", () => {
+  const isLoadingMenu = ref<boolean>(false);
+  const isLoadingProfile = ref<boolean>(false);
   const dataProfile = ref<any>();
   const storeRegistry = useRegistryInFormationStore();
   const $q = useQuasar();
@@ -102,6 +104,7 @@ export const useDataStore = defineStore("dataMain", () => {
   }
 
   async function getData(dataPerson: any) {
+    isLoadingProfile.value = true;
     const data = await dataPerson;
     dataprofilePosition.value = data;
     profileId.value = data.profileId;
@@ -130,9 +133,11 @@ export const useDataStore = defineStore("dataMain", () => {
     formData.org = findOrgName(data);
     storeRegistry.profileId = data.profileId;
     storeRegistry.citizenId = data.citizenId;
+    isLoadingProfile.value = false;
   }
 
   async function getProFileType() {
+    isLoadingMenu.value = true;
     if (officerType.value == "") {
       await http
         .get(config.API.proFileType)
@@ -144,6 +149,8 @@ export const useDataStore = defineStore("dataMain", () => {
           messageError($q, e);
         });
     }
+
+    isLoadingMenu.value = false;
     return convertEmType(officerType.value);
   }
 
@@ -172,6 +179,8 @@ export const useDataStore = defineStore("dataMain", () => {
     dataProfile,
     profileId,
     dataprofilePosition,
+    isLoadingMenu,
+    isLoadingProfile,
   };
 });