แก้ การลา paging

src/modules/09_leave/components/2_Leave/Tab1.vue

@@ -23,16 +23,17 @@ const leaveStore = useLeavelistDataStore();
 const dataToobar = ref<any[]>([]);
 const { showLoader, hideLoader, messageError } = mixin;
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const querySting = reactive<QuerySting>({
   year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: leaveStore.filter.type, //*Id ประเภทการลา
   status: leaveStore.filter.status, //*สถานะการของลา
-  page: 1, //*หน้า
+  page: 1, //*สถานะการของลา
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  pageSize: 10, //*สถานะการของลา
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
 
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
@@ -50,8 +51,10 @@ async function fecthLeaveList() {
       .post(config.API.leaveList(), querySting)
       .then((res) => {
         const data = res.data.result;
-        maxPage.value = Math.ceil(data.total / querySting.pageSize);
+        totalList.value = Math.ceil(
-        totalList.value = data.total;
+          res.data.result.total / querySting.pageSize
+        );
+        total.value = res.data.result.total;
         leaveStore.fetchListLeave(data.data); /** ส่งข้อมูลไป stores*/
       })
       .catch((err) => {
@@ -63,27 +66,6 @@ async function fecthLeaveList() {
   }
 }
 
-/**
- *
- * @param newPage หน้า
- * @param pageSize จำนวนต่อแถว
- * @param dateFilter ข้อมูลค้นหา
- */
-async function updatePaging(
-  newPage: number,
-  pageSize: number,
-  dateFilter: DateFilter
-) {
-  querySting.year = dateFilter ? dateFilter.year : querySting.year;
-  querySting.type = dateFilter ? dateFilter.type : querySting.type;
-  querySting.status = dateFilter ? dateFilter.status : querySting.status;
-  querySting.page = newPage;
-  querySting.pageSize = pageSize ? pageSize : querySting.pageSize;
-  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
-
-  await fecthLeaveList();
-}
-
 /** function เรียกข้อมูลสถานะ*/
 async function fetchOption() {
   await http
@@ -97,6 +79,18 @@ async function fetchOption() {
     .finally(() => {});
 }
 
+function getSearch() {
+  querySting.page = 1;
+  fecthLeaveList();
+}
+
+watch(
+  () => querySting.pageSize,
+  async () => {
+    getSearch();
+  }
+);
+
 watch(
   () => leaveStore.tabView,
   async () => {
@@ -150,18 +144,13 @@ onMounted(async () => {
     </q-tabs>
   </q-toolbar>
   <div v-if="leaveStore.tabView === 'list'">
-    <ToolBar
+    <ToolBar :dataToobar="dataToobar" v-model:query-sting="querySting" :get-list="fecthLeaveList" :get-search="getSearch"/>
-      :rowsPerPage="querySting.pageSize"
-      @update:querySting="updatePaging"
-      :dataToobar="dataToobar"
-    />
     <TableList
-      :page="querySting.page"
+      v-model:total="total"
-      :rowsPerPage="querySting.pageSize"
+      v-model:total-list="totalList"
-      :maxPage="maxPage"
+      v-model:pagination="querySting"
-      :totalList="totalList"
-      @update:querySting="updatePaging"
       :dataToobar="dataToobar"
+      :getList="fecthLeaveList"
     />
   </div>
   <div v-if="leaveStore.tabView === 'calendar'"><CalendarView /></div>

src/modules/09_leave/components/2_Leave/Tab2.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, onMounted } from "vue";
+import { ref, reactive, onMounted,watch } from "vue";
 import { useQuasar } from "quasar";
 
 import http from "@/plugins/http";
@@ -23,17 +23,17 @@ const { fetchListLeaveReject } = leaveStore;
 const dataToobar = ref<any[]>([]);
 const $q = useQuasar(); //ใช้ noti quasar
 
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+
 const querySting = reactive<QuerySting>({
   year: leaveStore.filter.year, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
   type: leaveStore.filter.type, //*Id ประเภทการลา
   status: leaveStore.filter.status, //*สถานะการของลา
-  page: 1, //*หน้า
+  page: 1, //*สถานะการของลา
-  pageSize: 10, //*จำนวนแถวต่อหน้า
+  pageSize: 10, //*สถานะการของลา
   keyword: leaveStore.filter.keyword, //keyword ค้นหา
 });
-const maxPage = ref<number>(1);
-const totalList = ref<number>(0);
-
 //** เรียกข้อมูลจาก API*/
 async function fecthLeaveList() {
   leaveStore.rows = [];
@@ -50,8 +50,10 @@ async function fecthLeaveList() {
       .post(config.API.leaveListDelete(), querySting)
       .then((res) => {
         const data = res.data.result;
-        maxPage.value = Math.ceil(data.total / querySting.pageSize);
+        totalList.value = Math.ceil(
-        totalList.value = data.tatol;
+          res.data.result.total / querySting.pageSize
+        );
+        total.value = res.data.result.total;
         fetchListLeaveReject(data.data); /** ส่งข้อมูลไป stores*/
       })
       .catch((err) => {
@@ -98,6 +100,18 @@ async function fetchOption() {
     .finally(() => {});
 }
 
+function getSearch() {
+  querySting.page = 1;
+  fecthLeaveList();
+}
+
+watch(
+  () => querySting.pageSize,
+  async () => {
+    getSearch();
+  }
+);
+
 onMounted(async () => {
   await fetchOption();
   await fecthLeaveList();
@@ -105,17 +119,17 @@ onMounted(async () => {
 </script>
 <template>
   <ToolBar
-    :rowsPerPage="querySting.pageSize"
-    @update:querySting="updatePaging"
     :dataToobar="dataToobar"
+    v-model:query-sting="querySting"
+    :get-list="fecthLeaveList"
+    :get-search="getSearch"
   />
   <TableList
-    :page="querySting.page"
+    v-model:total="total"
-    :rowsPerPage="querySting.pageSize"
+    v-model:total-list="totalList"
-    :maxPage="maxPage"
+    v-model:pagination="querySting"
-    :totalList="totalList"
-    @update:querySting="updatePaging"
     :dataToobar="dataToobar"
+    :getList="fecthLeaveList"
   />
 </template>
 

src/modules/09_leave/components/2_Leave/TableList.vue

@@ -9,6 +9,10 @@ import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 const leaveStore = useLeavelistDataStore();
 const router = useRouter();
 
+const total = defineModel<number>("total", { required: true });
+const totalList = defineModel<number>("totalList", { required: true });
+const pagination = defineModel<any>("pagination", { required: true });
+
 /** ข้อมูลหัวตาราง รายการลา */
 const columnsLeave = ref<QTableProps["columns"]>([
   {
@@ -180,6 +184,7 @@ const visibleReject = ref<string[]>([
 ]);
 
 const props = defineProps({
+  getList: Function,
   rows: {
     type: Object,
     require: true,
@@ -203,29 +208,15 @@ const props = defineProps({
   dataToobar: Object,
 });
 
-const emit = defineEmits(["update:querySting"]);
-
-const currentPage = ref<number>(1);
-const pagination = ref({
-  descending: true,
-  page: props.page,
-  rowsPerPage: props.rowsPerPage,
-});
-
-function updateQuerySting(newPage: number, pageSize: number) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:querySting", newPage, pageSize);
-}
-
 /** ไปหน้ารายละเอียด */
 function redirectToDetail(id: string) {
   const routePrefix = leaveStore.tabMenu === "1" ? "/leave" : "/leave-reject";
   router.push(`${routePrefix}/detail/${id}`);
 }
 
-function updatedPagination(newPageZize: any) {
+function updatePagination(newPagination: any) {
-  currentPage.value = 1;
+  pagination.value.page = 1;
-  pagination.value.rowsPerPage = newPageZize.rowsPerPage;
+  pagination.value.pageSize = newPagination.rowsPerPage;
 }
 
 /**
@@ -246,12 +237,6 @@ function convert(val: any) {
   }
 }
 
-watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
-  currentPage.value &&
-    pagination.value.rowsPerPage &&
-    updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
-});
-
 /** Hook*/
 onMounted(() => {
   if (leaveStore.tabMenu === "1") {
@@ -275,10 +260,9 @@ onMounted(() => {
     :paging="true"
     dense
     class="custom-header-table"
-    :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="leaveStore.visibleColumns"
-    :pagination="pagination"
+    :rows-per-page-options="[1, 25, 50, 100]"
-    @update:pagination="updatedPagination"
+    @update:pagination="updatePagination"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -306,7 +290,7 @@ onMounted(() => {
         <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.pageSize +
               props.rowIndex +
               1
             }}
@@ -322,15 +306,17 @@ onMounted(() => {
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
-      ทั้งหมด {{ 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.getList?.()"
       ></q-pagination>
     </template>
   </d-table>

src/modules/09_leave/components/2_Leave/ToolBarLeave.vue

@@ -2,44 +2,26 @@
 import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
 
-import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
+import type {
+  DateFilter,
+  QuerySting,
+} from "@/modules/09_leave/interface/request/leave";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
 /** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
+const querySting = defineModel<QuerySting>("querySting", { required: true });
+
 const $q = useQuasar();
 const leaveStore = useLeavelistDataStore();
 
 const props = defineProps({
-  rowsPerPage: {
-    type: Number,
-    require: true,
-  },
   dataToobar: Array,
+  getSearch: Function,
+  getList: Function,
 });
 
-const emit = defineEmits(["update:querySting"]);
-
-/**
- * function update ข้อมูลการค้นหา  (QuerySting)
- * @param newPage หน้า
- * @param pageSize ข้อมูลต่อแถว
- * @param dateFilter ข้อมูล Filter
- */
-function updateQuerySting(
-  newPage: number,
-  pageSize: number,
-  dateFilter: DateFilter
-) {
-  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-  emit("update:querySting", newPage, pageSize, dateFilter);
-}
-
-/** function ค้นหาข้อมูลใน Table*/
-async function filterListLeave() {
-  updateQuerySting(1, 0, leaveStore.filter);
-}
 
 /** Option*/
 const optionTypeMain = ref<DataOption[]>([]);
@@ -137,13 +119,13 @@ watch(
     <div class="col-xs-12 col-sm-3 col-md-2">
       <datepicker
         menu-class-name="modalfix"
-        v-model="leaveStore.filter.year"
+        v-model="querySting.year"
         class="col-2"
         :locale="'th'"
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -153,7 +135,7 @@ watch(
           <q-input
             dense
             outlined
-            :model-value="Number(leaveStore.filter.year) + 543"
+            :model-value="Number(querySting.year) + 543"
             :label="`${'ปีงบประมาณ'}`"
           >
             <template v-slot:prepend>
@@ -175,12 +157,12 @@ watch(
         map-options
         outlined
         dense
-        v-model="leaveStore.filter.type"
+        v-model="querySting.type"
         :options="optionType"
         option-value="id"
         option-label="name"
         label="ประเภทการลา"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -194,7 +176,7 @@ watch(
         </template>
         <template
           v-if="
-            leaveStore.filter.type !== '00000000-0000-0000-0000-000000000000'
+            querySting.type !== '00000000-0000-0000-0000-000000000000'
           "
           v-slot:append
         >
@@ -202,9 +184,9 @@ watch(
             name="cancel"
             @click.stop.prevent="
               (optionType = optionTypeMain),
-                (leaveStore.filter.type =
+                (querySting.type =
                   '00000000-0000-0000-0000-000000000000'),
-                filterListLeave()
+                  props.getSearch?.()
             "
             class="cursor-pointer"
           />
@@ -218,12 +200,12 @@ watch(
         map-options
         outlined
         dense
-        v-model="leaveStore.filter.status"
+        v-model="querySting.status"
         :options="optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"
-        @update:model-value="filterListLeave"
+        @update:model-value="props.getSearch?.()"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -235,13 +217,13 @@ watch(
             <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
           </q-item>
         </template>
-        <template v-if="leaveStore.filter.status !== 'ALL'" v-slot:append>
+        <template v-if="querySting.status !== 'ALL'" v-slot:append>
           <q-icon
             name="cancel"
             @click.stop.prevent="
               (optionStatus = optionStatusMain),
-                (leaveStore.filter.status = 'ALL'),
+                (querySting.status = 'ALL'),
-                filterListLeave()
+                props.getSearch?.()
             "
             class="cursor-pointer"
           />
@@ -254,9 +236,9 @@ watch(
         for="filterTable"
         dense
         outlined
-        v-model="leaveStore.filter.keyword"
+        v-model="querySting.keyword"
         label="ค้นหา"
-        @keydown.enter.prevent="filterListLeave"
+        @keydown.enter.prevent="props.getSearch?.()"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">