แก้ paging วินัย

src/modules/11_discipline/components/4_Result/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";
 
@@ -19,16 +19,16 @@ const store = useDisciplineResultStore();
 const { showLoader, hideLoader, messageError } = mixin;
 const { fetchList } = store;
 
-const initialPagination = ref<Pagination>({
-  rowsPerPage: 0,
-});
-
-const page = ref<number>(1);
-const pageSize = ref<number>(10);
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
 const filter = ref<string>("");
 const status = ref<string>("DONE");
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
 /** function เรียกรายการสรุปผลการพิจารณาทางวินัย*/
 async function fetchListResult() {
@@ -36,12 +36,14 @@ async function fetchListResult() {
   await http
     .get(
       config.API.listResult() +
-        `?page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}&status=${status.value}`
+        `?page=${pagination.value.page}&pageSize=${pagination.value.rowsPerPage}&keyword=${filter.value}&status=${status.value}`
     )
     .then(async (res) => {
       const data = res.data.result.data;
-      maxPage.value = Math.ceil(res.data.result.total / pageSize.value);
-      totalList.value = res.data.result.total;
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
       await fetchList(data);
     })
     .catch((err) => {
@@ -52,13 +54,6 @@ async function fetchListResult() {
     });
 }
 
-async function updateQueryString(p: number, pS: number, key: string) {
-  page.value = pS === pageSize.value ? p : 1;
-  pageSize.value = pS;
-  filter.value = key;
-  await fetchListResult();
-}
-
 /**
  * ไปหน้าแก้ไข
  * @param id ไอดีเฉพาะ รายบุคคล
@@ -76,9 +71,21 @@ function openDetail(id: string) {
 
 function filterStatus(statusReturn: string) {
   status.value = statusReturn;
+  getSearch();
+}
+
+function getSearch() {
+  pagination.value.page = 1;
   fetchListResult();
 }
 
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    getSearch();
+  }
+);
+
 /**เมื่อเริ่มโหลดหน้า
  * ส่งข้อมูลจำลองไปยัง store
  */
@@ -100,19 +107,17 @@ onMounted(async () => {
         :visible-columns="store.visibleColumns"
         v-model:inputfilter="filter"
         v-model:inputvisible="store.visibleColumns"
-        :pagination="initialPagination"
         :nornmalData="true"
         :paging="true"
         :titleText="''"
-        :page="page"
         :fetchListResult="fetchListResult"
-        :pageSize="pageSize"
-        :maxPage="maxPage"
-        :totalList="totalList"
-        @update:queryString="updateQueryString"
+        :get-search="getSearch"
         v-model:open-edit="openEdit"
         v-model:open-detail="openDetail"
         :filterStatus="filterStatus"
+        v-model:pagination="pagination"
+        v-model:total="total"
+        v-model:total-list="totalList"
       >
       </Table>
     </div>

src/modules/11_discipline/components/4_Result/Table.vue

@@ -4,6 +4,10 @@ import { ref, useAttrs, watch } from "vue";
 import { useDisciplineResultStore } from "@/modules/11_discipline/store/ResultStore";
 import { checkPermission } from "@/utils/permissions";
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 const store = useDisciplineResultStore();
 const table = ref<any>(null);
 const filterRef = ref<any>(null);
@@ -22,6 +26,7 @@ const props = defineProps({
   icon: String,
   inputvisible: Array,
   editvisible: Boolean,
+  getSearch: Function,
   validate: {
     type: Function,
     default: () => console.log("not function"),
@@ -50,28 +55,9 @@ const props = defineProps({
     type: Boolean,
     defualt: false,
   },
-  page: {
-    type: Number,
-  },
-  pageSize: {
-    type: Number,
-  },
-  maxPage: {
-    type: Number,
-  },
-  totalList: {
-    type: Number,
-  },
 });
 
-const currentPage = ref<number>(1);
 const filter = ref<string>("");
-const pagination = ref({
-  descending: false,
-  page: props.page,
-  rowsPerPage: props.pageSize,
-});
-
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -87,26 +73,13 @@ function resetFilter() {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");
   filterRef.value.focus();
-  props.fetchListResult?.();
-}
-
-function updateRowsPerPage(newPagination: any) {
-  pagination.value = newPagination;
-  currentPage.value = 1;
+  props.getSearch?.();
 }
 
 function updatePaging(p: number, pS: number, key: string) {
   emit("update:queryString", p, pS, key);
 }
 
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  emit(
-    "update:queryString",
-    currentPage.value,
-    Number(pagination.value.rowsPerPage),
-    filter.value
-  );
-});
 
 function dataUpdate() {
   props.filterStatus(statusFilter.value);
@@ -116,7 +89,7 @@ function updateInput(value: string | number | null) {
   emit("update:inputfilter", value);
 }
 function filterFn() {
-  props.fetchListResult?.();
+  props.getSearch?.();
 }
 
 /**
@@ -132,6 +105,11 @@ function filterOptionFn(val: string, update: Function) {
     );
   });
 }
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
 </script>
 
 <template>
@@ -217,8 +195,7 @@ function filterOptionFn(val: string, update: Function) {
     :virtual-scroll-sticky-size-start="48"
     dense
     :rows-per-page-options="[10, 25, 50, 100]"
-    :pagination="pagination"
-    @update:pagination="updateRowsPerPage"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -260,7 +237,7 @@ function filterOptionFn(val: string, update: Function) {
         <q-td v-for="col in props.cols" :key="col.name" :props="props">
           <div v-if="col.name == 'no'">
             {{
-              (currentPage - 1) * Number(pagination.rowsPerPage) +
+              (pagination.page - 1) * pagination.rowsPerPage +
               props.rowIndex +
               1
             }}
@@ -275,15 +252,17 @@ function filterOptionFn(val: string, update: Function) {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ props.totalList }} รายการ
+      ทั้งหมด {{ total }} รายการ
       <q-pagination
-        v-model="currentPage"
+        v-model="pagination.page"
         active-color="primary"
         color="dark"
-        :max="Number(props.maxPage)"
+        :max="Number(totalList)"
         size="sm"
         boundary-links
         direction-links
+        :max-pages="5"
+        @update:model-value="props.fetchListResult?.()"
       ></q-pagination>
     </template>
   </d-table>