fix load Table

src/modules/10_registry/views/requestEditMain.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 
 import config from "@/app.config";
 import http from "@/plugins/http";
@@ -11,15 +11,12 @@ import { useCounterMixin } from "@/stores/mixin";
 
 /**importType*/
 import type { QTableProps } from "quasar";
-import type {
-  DataOption,
-  NewPagination,
-} from "@/modules/10_registry/interface/index/Main";
+import type { PropsTable } from "@/interface/PropsTable";
+import type { DataOption } from "@/modules/10_registry/interface/index/Main";
 import type { DataRequest } from "@/modules/10_registry/interface/response/Main";
 
 /** importComponents*/
 import DialogAddRequestEdit from "@/modules/10_registry/components/DialogAddRequestEdit.vue";
-import SkeletonTable from "@/components/SkeletonTable.vue";
 
 /** use */
 const $q = useQuasar();
@@ -38,10 +35,6 @@ const isLoading = ref<boolean>(false);
 
 /** Table*/
 const rows = ref<DataRequest[]>([]);
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const rowsTotal = ref<number>(0);
-const maxPage = ref<number>(0);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -110,10 +103,11 @@ const visibleColumns = ref<string[]>([
   "status",
   "remark",
 ]);
-const pagination = ref({
+const pagination = ref<PropsTable.Pagination>({
   descending: true,
-  page: page.value,
-  rowsPerPage: pageSize.value,
+  page: 1,
+  rowsPerPage: 10,
+  rowsNumber: 0,
 });
 
 /** function กลับไปหน้าทะเบียนประวัติ*/
@@ -129,8 +123,8 @@ function onClickAdd() {
 /** function fetch รายการข้อมูลการยื่นคำร้องขอแก้ไขข้อมูล*/
 async function fetchListRequset() {
   let queryParams = {
-    page: page.value,
-    pageSize: pageSize.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     status: status.value,
     keyword: keyword.value,
   };
@@ -140,10 +134,9 @@ async function fetchListRequset() {
       params: queryParams,
     })
     .then((res) => {
-      const data = res.data.result;
-      maxPage.value = Math.ceil(data.total / pageSize.value);
-      rowsTotal.value = data.total;
-      rows.value = data.data;
+      const result = res.data.result;
+      pagination.value.rowsNumber = result.total;
+      rows.value = result.data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -155,7 +148,7 @@ async function fetchListRequset() {
 
 /** function เลือกสถานะคำร้อง*/
 function updateStatusValue() {
-  page.value = 1;
+  pagination.value.page = 1;
   fetchListRequset();
 }
 
@@ -180,21 +173,16 @@ function filterOption(val: string, update: Function) {
 }
 
 /**
- * function อัพเดทขนาดหน้าใน pagination
- * @param newPagination ข้อมูลใหม่ของ pagination
+ * ฟังก์ชันรับ request จากตาราง เมื่อมีการเปลี่ยน pagination
+ * @param requestProps ข้อมูลการร้องขอจากตาราง
  */
-function updatePageSizePagination(newPagination: NewPagination) {
-  page.value = 1;
-  pageSize.value = newPagination.rowsPerPage;
+function onTableRequest(requestProps: PropsTable.RequestProps) {
+  const newPagination = requestProps?.pagination || requestProps;
+  if (!newPagination?.page || !newPagination?.rowsPerPage) return;
+  pagination.value = { ...newPagination };
+  fetchListRequset();
 }
 
-watch(
-  () => pageSize.value,
-  () => {
-    fetchListRequset();
-  }
-);
-
 onMounted(async () => {
   link.value = await dataStore.getProFileType();
   fetchListRequset();
@@ -298,17 +286,16 @@ 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"
             :rows-per-page-options="[10, 25, 50, 100]"
             :paging="true"
             :visible-columns="visibleColumns"
-            @update:pagination="updatePageSizePagination"
             v-model:pagination="pagination"
+            :loading="isLoading"
+            @request="onTableRequest"
           >
             <template v-slot:header="props">
               <q-tr :props="props">
@@ -338,20 +325,6 @@ onMounted(async () => {
                 </q-td>
               </q-tr>
             </template>
-            <template v-slot:pagination="scope">
-              ทั้งหมด {{ rowsTotal }} รายการ
-              <q-pagination
-                v-model="page"
-                active-color="primary"
-                color="dark"
-                :max="Number(maxPage)"
-                :max-pages="5"
-                size="sm"
-                boundary-links
-                direction-links
-                @update:model-value="fetchListRequset()"
-              ></q-pagination>
-            </template>
           </d-table>
         </div>
       </q-card>