fix loading Skeleton

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";
 
-/**
- * importStore
- */
-import { useRequestEditStore } from "@/modules/10_registry/store/RequestEdit";
-import { useCounterMixin } from "@/stores/mixin";
-
-/**
- * use
- */
+/** use */
 const $q = useQuasar();
 const store = useRequestEditStore();
 const link = ref<string>("");
 const router = useRouter();
 const dataStore = useDataStore();
-const { showLoader, hideLoader, messageError, dialogRemove, success } =
-  useCounterMixin();
+const { messageError } = 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 fetchListRequset() {
+/** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
+async function fetchListRequset() {
   let queryParams = {
     page: page.value,
     pageSize: pageSize.value,
     status: status.value,
     keyword: keyword.value,
   };
-  showLoader();
-  http
+  isLoading.value = true;
+  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">