แก้ไข pagination specialTime

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([
-  //   {
-  //     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();
+  console.log("test");
+  await 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]"
-        @update:pagination="dataSpecialTime.updatePagination"
+        :rows-per-page-options="[5, 10, 25, 50, 100]"
+        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">