แก้ paging

src/modules/06_evaluate/views/EvaluateMain.vue

@@ -47,6 +47,15 @@ const listMenu = ref<ListMenu[]>([
   },
 ]);
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 /**
  * function เปืด popup เพิ่มการประเมิน
  * @param data
@@ -60,24 +69,22 @@ function openExpert() {
   router.push("/evaluate/expert");
 }
 
-/** ตัวแปร Paging*/
-const page = ref<number>(1);
-const pageSize = ref<number>(25);
-const maxPage = ref<number>(10);
-
 /** function เรียกรายการประเมิน*/
 async function fetchEvaluteList() {
   showLoader();
   const body = {
-    page: page.value,
-    pageSize: pageSize.value,
+    page: pagination.value.page,
+    pageSize: pagination.value.rowsPerPage,
     keyword: store.filterKeyword,
     status: selectedStatus.value,
   };
   await http
     .put(config.API.evaluationList(), body)
     .then(async (res) => {
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       store.fetchEvaluateList(res.data.result.data);
       await getProfileCheck();
     })
@@ -112,24 +119,6 @@ async function getProfileCheck() {
     });
 }
 
-/**
- * function updatePaging
- * @param newPagination  ข้อมูลใหม่ของ Paging
- * @param currentPage  หน้า Page
- */
-async function updatePaging(newPagination: any, currentPage: number) {
-  page.value = currentPage;
-  pageSize.value = newPagination.rowsPerPage;
-
-  await fetchEvaluteList();
-}
-
-async function filterFn() {
-  page.value = 1;
-  pageSize.value = pageSize.value;
-  await fetchEvaluteList();
-}
-
 const selectedStatus = ref<string[]>([
   "CHECK_SPEC",
   "PREPARE_DOC_V1",
@@ -187,6 +176,18 @@ watch(
   }
 );
 
+function getSearch() {
+  pagination.value.page = 1;
+  fetchEvaluteList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /** hook lifecycle*/
 onMounted(async () => {
   await fetchEvaluteList();
@@ -260,7 +261,7 @@ onMounted(async () => {
                 option-value="val"
                 label="ค้นหาสถานะ"
                 :style="!$q.screen.gt.xs ? '' : 'width: 35vw'"
-                @update:model-value="fetchEvaluteList"
+                @update:model-value="getSearch"
                 use-input
                 @filter="(inputValue:any,doneFn:Function) => filterOption(inputValue, doneFn) "
               >
@@ -286,7 +287,7 @@ onMounted(async () => {
                 v-model="store.filterKeyword"
                 label="ค้นหา"
                 debounce="300"
-                @keydown.enter.prevent="filterFn"
+                @keydown.enter.prevent="getSearch"
               >
                 <template v-slot:append>
                   <q-icon name="search" />
@@ -311,11 +312,10 @@ onMounted(async () => {
           </div>
           <div class="col-12">
             <TableListEvaluate
-              :page="page"
-              :pageSize="pageSize"
-              :maxPage="maxPage"
-              @update:pagination="updatePaging"
               :fetchData="fetchEvaluteList"
+              v-model:total="total"
+              v-model:total-list="totalList"
+              v-model:pagination="pagination"
             />
           </div>
         </q-card>