แก้ paging วินัย

src/modules/11_discipline/components/1_Complaint/MainPage.vue

@@ -26,18 +26,19 @@ const { fetchComplainst } = complainstStore;
 const filterRef = ref<HTMLInputElement | null>(null);
 const filterTable = ref<string>("");
 const filterKeyword = ref<string>("");
-const maxPage = ref<number>(1);
-const page = ref<number>(1);
-const rowsPerPage = ref<number>(10);
+
 const toptitle = ref<number>(0);
 const statusFilter = ref<string>("NEW");
 const option = ref<any[]>(complainstStore.statusOptions);
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await getList();
-}
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** ดึงข้อมูล เรื่องร้องเรียน */
 async function getList() {
@@ -45,15 +46,18 @@ async function getList() {
   await http
     .get(
       config.API.complaintList(
-        page.value,
-        rowsPerPage.value,
+        pagination.value.page,
+        pagination.value.rowsPerPage,
         filterKeyword.value,
         statusFilter.value
       )
     )
     //
     .then((res) => {
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       toptitle.value = res.data.result.total;
       const data = res.data.result.data;
       fetchComplainst(data);
@@ -74,7 +78,7 @@ function redirectToPageadd() {
 /** ล้างค่าใน input */
 function resetFilter() {
   filterKeyword.value = "";
-  page.value = 1
+  pagination.value.page = 1;
   if (filterRef.value) {
     filterRef.value.focus();
     getList();
@@ -95,6 +99,18 @@ function filterOptionFn(val: string, update: Function) {
   });
 }
 
+function getSearch() {
+  pagination.value.page = 1;
+  getList();
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await getSearch();
+  }
+);
+
 /** เรียกใช้งาน ฟังชั่น ตอนเริ่มโหลดหน้า */
 onMounted(async () => {
   await getList();
@@ -118,7 +134,7 @@ onMounted(async () => {
           option-label="name"
           option-value="id"
           :options="option"
-          @update:model-value="getList()"
+          @update:model-value="getSearch()"
           use-input
           @filter="filterOptionFn"
         >
@@ -133,7 +149,7 @@ onMounted(async () => {
               @click.stop.prevent="
                 (option = complainstStore.statusOptions),
                   (statusFilter = 'ALL'),
-                  getList()
+                  getSearch()
               "
               class="cursor-pointer"
             />
@@ -165,7 +181,7 @@ onMounted(async () => {
         ref="filterRef"
         outlined
         placeholder="ค้นหา"
-        @keydown.enter.prevent="getList()"
+        @keydown.enter.prevent="getSearch()"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -199,11 +215,11 @@ onMounted(async () => {
     <div class="col-12">
       <TableComplaint
         :filter-table="filterTable"
-        :rows-per-page="rowsPerPage"
-        :page="page"
-        :max-page="maxPage"
-        @update:pagination="updatePagingProp"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :toptitle="toptitle"
+        :get-list="getList"
       />
     </div>
   </q-card>