fix loading Skeleton

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 () => {
-  dialogConfirm(
-    $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();
-    });
-};
+const isLoading = ref<boolean>(false);
+const isLoadingFile = ref<boolean>(false);
 
 /**
  * ฟังก์ชั่นเรียกข้อมูลจาก Api
  * @param id ไอดีของข้อมูล
  */
-const fecthData = async (id: string) => {
-  showLoader();
+async function fetchData(id: string) {
+  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) {
-  showLoader();
-  http
+async function uploadFiles(id: string) {
+  await 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();
-  axios
+  await 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) {
     });
 }
 
-/**
- * เรียกฟังก์ชันทั้งหมดตอนเรียกใช้ไฟล์นี้
- */
-onMounted(() => {
+/** Hook Lifecycle ที่ทำงานเมื่อ component ถูก mount*/
+onMounted(async () => {
   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