no message

src/modules/15_development/components/history/DialogProject.vue

@@ -4,6 +4,7 @@ import Header from "@/components/DialogHeader.vue";
 import type {
   DataOption,
   FormFilter,
+  NewPagination,
 } from "@/modules/15_development/interface/index/Main";
 import { useDevelopmentDataStoreHistory } from "@/modules/15_development/store/developmentStoreHistory";
 import { useCounterMixin } from "@/stores/mixin";
@@ -33,7 +34,7 @@ const modal = defineModel<boolean>("modal", { required: true });
 const maxPage = ref<number>(1);
 const pagination = ref({
   page: 1,
-  rowsPerPage: 10,
+  rowsPerPage: 20,
 });
 
 const formFilter = reactive<FormFilter>({
@@ -135,6 +136,23 @@ function searchFilter() {
       hideLoader();
     });
 }
+
+function updatePage(val:number){
+  formFilter.page = val;
+  searchFilter();
+}
+
+function updatePageSize(newPagination: NewPagination) {
+  formFilter.page = 1;
+  formFilter.pageSize = newPagination.rowsPerPage;
+}
+
+watch(
+  () => formFilter.pageSize,
+  () => {
+    searchFilter();
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -212,7 +230,7 @@ function searchFilter() {
           <div class="col-2">
             <q-btn
               label="ค้นหา"
-              class="full-width full-height"
+              class="full-width"
               unelevated
               color="teal"
               @click="searchFilter()"
@@ -235,7 +253,8 @@ function searchFilter() {
             class="custom-header-table"
             :visible-columns="store.visibleColumns"
             v-model:pagination="pagination"
-            :rows-per-page-options="[10, 25, 50, 100]"
+            :rows-per-page-options="[20, 25, 50, 100]"
+            @update:pagination="updatePageSize"
           >
             <template v-slot:pagination="scope">
               <q-pagination
@@ -247,6 +266,7 @@ function searchFilter() {
                 size="sm"
                 boundary-links
                 direction-links
+                @update:model-value="updatePage"
               ></q-pagination>
             </template>
             <template v-slot:header="props">