fix loading Skeleton

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 isEdit = ref<boolean>(false);
-const modalAdd = ref<boolean>(false); //ตัวแปร dialog #Add
+const isLoading = ref<boolean>(false);
 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) => {
-        success($q, "ลบข้อมูลสำเร็จ");
+      .then(async () => {
         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) {
-  http
+async function downloadUrl(id: string, fileName: string) {
+  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"