fix loading Skeleton

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 mixin = useCounterMixin();
-const { showLoader, hideLoader, messageError, date2Thai, onSearchDataTable } =
-  mixin;
+const dataPerson = useDataStore();
 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}`);
-
-function onHistory(id: string) {
-  modalHistory.value = true;
-  idByRow.value = id;
-}
-
-/** get data */
-function getData() {
-  showLoader();
-  http
+/** ฟังก์ชันสำหรับดึงข้อมูล */
+async function getData() {
+  isLoading.value = true;
+  await 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();
-  http
+/**
+ * ฟังก์ชันสำหรับเปิดประวัติการแก้ไข
+ * @param 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.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);
-  window.open(data.downloadUrl, "_blank");
+  showLoader();
+  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>