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"

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() {
-  showLoader();
-  http
+async function getDetail() {
+  isLoading.value = true;
+  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"