แก้ paging วินัย

src/modules/11_discipline/components/3_InvestigateDisciplinary/MainPage.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -10,17 +10,22 @@ import { useInvestigateDisStore } from "@/modules/11_discipline/store/Investigat
 
 import Table from "@/modules/11_discipline/components/3_InvestigateDisciplinary/Table.vue";
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
+
 const router = useRouter();
 const mixin = useCounterMixin();
 const dataInvestigateDis = useInvestigateDisStore();
 const { showLoader, hideLoader } = mixin;
 const { fetchList } = dataInvestigateDis;
 
-const rowsPerPage = ref<number>(10);
 const filter = ref<string>(""); //search data table
-const page = ref<number>(1);
-const maxPage = ref<number>(1);
-const totalList = ref<number>();
 
 const status = ref<string>("NEW");
 async function fetchListDisciplinary() {
@@ -28,12 +33,14 @@ async function fetchListDisciplinary() {
   await http
     .get(
       config.API.disciplineDisciplinary() +
-        `?page=${page.value}&pageSize=${rowsPerPage.value}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
     )
     .then((res) => {
       const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / rowsPerPage.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       fetchList(data);
     })
     .catch((err) => {})
@@ -57,17 +64,23 @@ function openDetail(id: string) {
   router.push(`/discipline-detail/disciplinary/${id}`);
 }
 
-async function updatePagingProp(rowPerpage: number, pageCurrent: number) {
-  rowsPerPage.value = rowPerpage;
-  page.value = pageCurrent;
-  await fetchListDisciplinary();
-}
-
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
+  getSearch()
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   fetchListDisciplinary();
 }
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -89,19 +102,17 @@ onMounted(async () => {
         :visible-columns="dataInvestigateDis.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="dataInvestigateDis.visibleColumns"
-        :pagination="rowsPerPage"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
-        :rowsPerPage="rowsPerPage"
-        :page="page"
-        :maxPage="maxPage"
-        :totalList="totalList"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
         :fetchListDisciplinary="fetchListDisciplinary"
-        @update:pagination="updatePagingProp"
         v-model:open-edit="openEdit"
         :open-detail="openDetail"
         :filterStatus="filterStatus"
+        :get-search="getSearch"
       >
       </Table>
     </div>