แก้ไข pagination specialTime

src/modules/09_leave/stores/SpecialTimeStore.ts

@@ -26,33 +26,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const selectDate = ref<Date | null>(new Date());
   const fiscalYear = ref<string | null>("0");
   const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
-  // async function fecthList(data: ListData[]) {
-  //   let datalist: DataRows[] = data.map((e: ListData) => ({
-  //     id: e.id,
-  //     fullname: e.fullname,
-  //     date: date2Thai(new Date(e.date), false, true),
-  //     dateFix: date2Thai(new Date(e.dateFix)),
-  //     timeMorning:
-  //       e.startTimeMorning == null
-  //         ? "-"
-  //         : e.startTimeMorning + " - " + e.endTimeMorning,
-  //     timeAfternoon:
-  //       e.startTimeAfternoon == null
-  //         ? "-"
-  //         : e.startTimeAfternoon + " - " + e.endTimeAfternoon,
-  //     startTimeMorning: e.startTimeMorning,
-  //     endTimeMorning: e.endTimeMorning,
-  //     startTimeAfternoon: e.startTimeAfternoon,
-  //     endTimeAfternoon: e.endTimeAfternoon,
-  //     checkIn: e.checkOut,
-  //     checkOut: e.checkOut,
-  //     status: e.status,
-  //     checkInStatus: convertStatus(e.checkInStatus),
-  //     checkOutStatus: convertStatus(e.checkOutStatus),
-  //   }));
-  //   rows.value = datalist;
-  //   DataMainOrig.value = datalist;
-  // }
   const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
   const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
   const DataUpdate = (filterYear: string) => {
@@ -68,15 +41,16 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const year = ref<number>(2023);
   const month = ref<number>(11);
   const page = ref<number>(1);
+  const total = ref<number>(0);
   const pageSize = ref<number>(10);
   const filter = ref<string>(""); //search data table
-
+  const maxPage = ref<number>(0);
   // Pagination - update rowsPerPage
-  async function updatePagination(newPagination: any) {
+  // async function updatePagination(newPagination: any) {
-    initialPagination.value = newPagination;
+  //   initialPagination.value = newPagination;
-    // currentPage.value = 1;
+  //   // currentPage.value = 1;
-    console.log("updatePagination");
+  //   console.log("updatePagination");
-  }
+  // }
 
   // Pagination - initial pagination
   const initialPagination = ref<any>({
@@ -86,21 +60,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     // rowsPerPage: pageSize,
   });
 
-  // Pagination - page & change page & get new data
-  // const currentPage = ref<number>(1);
-  // watch(
-  //   [() => currentPage.value, () => initialPagination.value.rowsPerPage],
-  //   () => {
-  //     emit(
-  //       "update:change-page",
-  //       currentPage.value,
-  //       initialPagination.value.rowsPerPage,
-  //       true
-  //     );
-  //   }
-  // );
-
-  // const emit = defineEmits(["update:change-page"]);
   /**
    * ฟังก์ชั่น api เปลี่ยนหน้า
    * @param pageVal page
@@ -123,12 +82,16 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
         config.API.specialTime() +
           `?year=${year.value}&month=${month.value}&page=${page.value}&pageSize=${pageSize.value}&keyword=${filter.value}`
       )
-      .then((res) => {
+      .then(async (res) => {
-        let data = res.data.result;
+        let data = res.data.result.data;
+        total.value = res.data.result.total;
+        maxPage.value = await Math.ceil(total.value / pageSize.value);
+        maxPage.value = maxPage.value < 1 ? 1 : maxPage.value;
+        rows.value = [];
         data.map((e: any) => {
           rows.value.push({
             id: e.id,
-            fullname: e.fullname,
+            fullname: e.fullName,
             date: date2Thai(new Date(e.checkDate), false, true),
             dateFix: date2Thai(new Date(e.createdAt)),
             timeMorning:
@@ -299,7 +262,11 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     optionStatus,
     fetchData,
     changePage,
-    initialPagination,
+    total,
-    updatePagination,
+    maxPage,
+    year,
+    page,
+    pageSize,
+    month,
   };
 });

src/modules/09_leave/views/SpecialTimeMain.vue

@@ -11,6 +11,8 @@ import config from "@/app.config";
 
 import { useRouter } from "vue-router";
 import { identity } from "@fullcalendar/core/internal";
+
+/**ตัวแปรที่ใช้ */
 const dataSpecialTime = useSpecialTimeStore();
 const $q = useQuasar(); // show dialog
 const mixin = useCounterMixin();
@@ -20,21 +22,14 @@ const modalUnapprove = ref(false);
 const modalApprove = ref(false);
 const detailData = ref<any>();
 const editCheck = ref<string>("");
-
-const pagination = ref({
-  // sortBy: "desc",
-  descending: false,
-  page: 1,
-  rowsPerPage: 10,
-});
-
 const dialogTitle = ref<string>("");
 const dialogDesc = ref<string>("");
 const name = ref<string>("");
 const id = ref<string>("");
-const reasonNote = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+
+/**ฟังก์ชั่นไม่อนุมัติ */
 const unapprove = async (fullname: string, personId: string) => {
   id.value = personId;
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
@@ -42,6 +37,9 @@ const unapprove = async (fullname: string, personId: string) => {
   modalUnapprove.value = true;
   // rejectData();
 };
+
+/** function Model */
+//เปิด
 function openModal(
   data: any,
   check: string,
@@ -60,6 +58,7 @@ function openModal(
   }
   console.log(data);
 }
+//ปิด
 const closeDialog = () => {
   modalUnapprove.value = false;
   modalApprove.value = false;
@@ -94,63 +93,63 @@ const resetFilter = () => {
   }
 };
 
+// paging
+const page = ref<number>(1);
+const pageSize = ref<number>(10);
+const filter = ref<string>(""); //search data table
+/**
+ * ฟังก์ชั่น api เปลี่ยนหน้า
+ * @param pageVal page
+ * @param pageSizeVal pagesize
+ */
+async function changePage(pageVal: number, pageSizeVal: number) {
+  // page.value = await pageVal;
+  // pageSize.value = await pageSizeVal;
+  // dataSpecialTime.fetchData();
+  console.log("test");
+}
+// Pagination - initial pagination
+const initialPagination = ref<any>({
+  sortBy: null,
+  descending: false,
+  page: 1,
+  rowsPerPage: pageSize, // set ตาม page หลักส่งมา
+});
+const emit = defineEmits(["update:change-page"]);
+// Pagination - page & change page & get new data
+const currentPage = ref<number>(1);
+watch(
+  [() => currentPage.value, () => initialPagination.value.rowsPerPage],
+  async () => {
+    dataSpecialTime.page = currentPage.value;
+    await dataSpecialTime.fetchData();
+    // emit(
+    //   "update:change-page",
+    //   currentPage.value,
+    //   initialPagination.value.rowsPerPage,
+    //   true
+    // );
+  }
+);
+// Pagination - update rowsPerPage
+async function updatePagination(newPagination: any) {
+  currentPage.value = 1;
+  dataSpecialTime.pageSize = initialPagination.value.rowsPerPage;
+  dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
+}
+
+/**Hook */
 onMounted(async () => {
-  // fecthList([
+  console.log("test");
-  //   {
+  await dataSpecialTime.fetchData();
-  //     id: "eefa2f4f-c507-4a42-8567-4fadb8dc1f50",
-  //     fullname: "นางสาวณัฐกา ชมสิน",
-  //     date: "2023-11-01 08:54",
-  //     dateFix: "2023-10-30",
-  //     startTimeMorning: "08:00",
-  //     endTimeMorning: "12:00",
-  //     startTimeAfternoon: "08:00",
-  //     endTimeAfternoon: "12:00",
-  //     status: "PENDING",
-  //     checkInStatus: "normal",
-  //     checkOutStatus: "late",
-  //     checkIn: "08:00",
-  //     checkOut: "12.00",
-  //   },
-  //   {
-  //     id: "00000000-0000-0000-0000-000000000000",
-  //     fullname: "นางสาวรัชภรณ์ ภักดี",
-  //     date: "2023-10-30 08:55",
-  //     dateFix: "2023-10-29",
-  //     startTimeMorning: "08:00",
-  //     endTimeMorning: "12:00",
-  //     startTimeAfternoon: null,
-  //     endTimeAfternoon: null,
-  //     status: "APPROVE",
-  //     checkInStatus: "normal",
-  //     checkOutStatus: "late",
-  //     checkIn: "08:00",
-  //     checkOut: "12.00",
-  //   },
-  //   {
-  //     id: "00000000-0000-0000-0000-000000000000",
-  //     fullname: "นางสาวภาพรรณ ลออ",
-  //     date: "2023-10-31 18:54",
-  //     dateFix: "2023-10-30",
-  //     startTimeMorning: null,
-  //     endTimeMorning: null,
-  //     startTimeAfternoon: "13:00",
-  //     endTimeAfternoon: "16:30",
-  //     status: "REJECT",
-  //     checkInStatus: "normal",
-  //     checkOutStatus: "late",
-  //     checkIn: "08:00",
-  //     checkOut: "12.00",
-  //   },
-  // ]);
-  dataSpecialTime.fetchData();
 });
 
+/** Function Date */
 const selectedDate = ref<string>("");
 const dateMonth = ref<any>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
-
 const monthYearThai = (val: any) => {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
@@ -244,13 +243,26 @@ const monthYearThai = (val: any) => {
         row-key="tb-list"
         flat
         bordered
-        :paging="true"
+        :paging="false"
         dense
-        :pagination="dataSpecialTime.initialPagination"
         :visible-columns="dataSpecialTime.visibleColumns"
-        :rows-per-page-options="[1, 10, 25, 50, 100]"
+        :rows-per-page-options="[5, 10, 25, 50, 100]"
-        @update:pagination="dataSpecialTime.updatePagination"
+        v-model:pagination="initialPagination"
+        @update:pagination="updatePagination"
       >
+        <template v-slot:pagination="scope">
+          ทั้งหมด {{ dataSpecialTime.total }} รายการ
+          <q-pagination
+            v-model="currentPage"
+            active-color="primary"
+            color="dark"
+            :max-pages="5"
+            size="sm"
+            boundary-links
+            direction-links
+            :max="Number(dataSpecialTime.maxPage)"
+          ></q-pagination>
+        </template>
         <template v-slot:header="props">
           <q-tr :props="props">
             <q-th v-for="col in props.cols" :key="col.name" :props="props">