แก้ไข paginationApi รายการลงเวลาพิเศษ

src/modules/09_leave/components/4_specialTime/DialogApprove.vue

@@ -104,6 +104,7 @@ const approveData = async () => {
       hideLoader();
     })
     .finally(async () => {
+      SpecialTimeStore.fetchData();
       hideLoader();
     });
 };

src/modules/09_leave/interface/request/specialTime.ts

@@ -13,4 +13,9 @@ interface ListData {
   checkOut: string;
   checkIn: string;
 }
-export type { ListData };
+
+interface DataDateMonthObject {
+  month: number;
+  year: number;
+}
+export type { ListData, DataDateMonthObject };

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

@@ -2,12 +2,14 @@ import { defineStore } from "pinia";
 import { ref, watch, defineEmits } from "vue";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
-import type { ListData } from "@/modules/09_leave/interface/request/specialTime";
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
+
 import { useCounterMixin } from "@/stores/mixin";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
+import { mount } from "@vue/test-utils";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -45,32 +47,6 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   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) {
-  //   initialPagination.value = newPagination;
-  //   // currentPage.value = 1;
-  //   console.log("updatePagination");
-  // }
-
-  // Pagination - initial pagination
-  const initialPagination = ref<any>({
-    sortBy: null,
-    descending: false,
-    page: 1,
-    // rowsPerPage: pageSize,
-  });
-
-  /**
-   * ฟังก์ชั่น api เปลี่ยนหน้า
-   * @param pageVal page
-   * @param pageSizeVal pagesize
-   */
-  async function changePage(pageVal: number, pageSizeVal: number) {
-    page.value = await pageVal;
-    pageSize.value = await pageSizeVal;
-    console.log("changePage");
-    fetchData();
-  }
 
   /**
    * ฟังชั้นเรียกดูข้อมูล
@@ -126,6 +102,19 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
       });
   };
 
+  /**
+   * ฟังก์ชั่น api เปลี่ยนหน้า
+   * @param pageVal page
+   * @param pageSizeVal pagesize
+   */
+  async function changePage(pageVal: number, pageSizeVal: number) {
+    page.value = await pageVal;
+    pageSize.value = await pageSizeVal;
+    console.log(pageSize.value);
+
+    fetchData();
+  }
+
   //--------------|ฟิลเตอร์|--------------------------------------//
   const searchFilterTable = async (searchDate: any) => {
     rows.value = [];
@@ -268,5 +257,7 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     page,
     pageSize,
     month,
+    filter,
+    // changeMonth,
   };
 });

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

@@ -8,7 +8,7 @@ import DialogReason from "@/components/Dialogs/PopupReason.vue";
 import DialogApprove from "@/modules/09_leave/components/4_specialTime/DialogApprove.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
-
+import type { DataDateMonthObject } from "@/modules/09_leave/interface/request/specialTime";
 import { useRouter } from "vue-router";
 import { identity } from "@fullcalendar/core/internal";
 
@@ -28,6 +28,7 @@ const name = ref<string>("");
 const id = ref<string>("");
 const dateDialog = ref<string>("");
 const dateFixDialog = ref<string>("");
+const dateYear = ref<number>(new Date().getFullYear());
 
 /**ฟังก์ชั่นไม่อนุมัติ */
 const unapprove = async (fullname: string, personId: string) => {
@@ -35,6 +36,7 @@ const unapprove = async (fullname: string, personId: string) => {
   dialogTitle.value = " ไม่อนุมัติการลงเวลาพิเศษของ" + fullname;
   name.value = fullname;
   modalUnapprove.value = true;
+
   // rejectData();
 };
 
@@ -79,35 +81,20 @@ const clickSave = async (reason: string) => {
     .catch((e) => {
       messageError($q, e);
     })
-    .finally(async () => {});
+    .finally(async () => {
+      dataSpecialTime.fetchData();
+    });
+
   console.log(reason);
 };
 
-// ค้นหาในตาราง
-const filterKeyword = ref<string>("");
-const filterRef = ref<HTMLInputElement | null>(null);
-const resetFilter = () => {
-  filterKeyword.value = "";
-  if (filterRef.value) {
-    filterRef.value.focus();
-  }
-};
-
 // 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,
@@ -123,21 +110,36 @@ watch(
   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) {
+async function updatePagination(initialPagination: any) {
   currentPage.value = 1;
-  dataSpecialTime.pageSize = initialPagination.value.rowsPerPage;
+  dataSpecialTime.pageSize = initialPagination.rowsPerPage;
   dataSpecialTime.page = 1; // set current page เป็น 1 เสมอเมื่อเปลี่ยน per row
 }
 
+// ค้นหาในตาราง
+const filterKeyword = ref<string>("");
+const filterRef = ref<HTMLInputElement | null>(null);
+const resetFilter = () => {
+  filterKeyword.value = "";
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.fetchData();
+  if (filterRef.value) {
+    filterRef.value.focus();
+  }
+};
+/** function ค้นหาข้อมูลแล้วอัปเดท*/
+function filterFn() {
+  updatePagination(filterKeyword.value);
+  console.log(filterKeyword.value);
+  dataSpecialTime.filter = filterKeyword.value;
+  dataSpecialTime.pageSize = pageSize.value;
+  dataSpecialTime.fetchData();
+}
+
 /**Hook */
 onMounted(async () => {
   console.log("test");
@@ -145,11 +147,23 @@ onMounted(async () => {
 });
 
 /** Function Date */
-const selectedDate = ref<string>("");
 const dateMonth = ref<any>({
   month: new Date().getMonth(),
   year: new Date().getFullYear(),
 });
+const updateMonth = async (e: DataDateMonthObject) => {
+  // console.log(dateMonth.value);
+  if (e != null) {
+    dateYear.value = e.year;
+    dateYear.value = dataSpecialTime.year;
+    dataSpecialTime.month = dateMonth.value.month + 1;
+    dataSpecialTime.year = dateMonth.value.year;
+    // filterKeyword.value = "";
+  }
+  await dataSpecialTime.fetchData();
+};
+
+//แปลงเดือนเป็นไทย
 const monthYearThai = (val: any) => {
   if (val == null) return "";
   else return monthYear2Thai(val.month, val.year);
@@ -164,11 +178,12 @@ const monthYearThai = (val: any) => {
     <div class="row col-12 q-col-gutter-sm q-mb-sm">
       <div class="q-gutter-sm">
         <datepicker
-          v-model="selectedDate"
+          v-model="dateMonth"
           :locale="'th'"
           autoApply
           month-picker
           :enableTimePicker="false"
+          @update:modelValue="updateMonth"
         >
           <template #year="{ year }">{{ year + 543 }}</template>
           <template #year-overlay-value="{ value }">{{
@@ -205,7 +220,8 @@ const monthYearThai = (val: any) => {
         ref="filterRef"
         outlined
         debounce="300"
-        placeholder="ค้นหา"
+        placeholder="ค้นหาชื่อ-นามสกุล"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon v-if="filterKeyword == ''" name="search" />
@@ -246,7 +262,7 @@ const monthYearThai = (val: any) => {
         :paging="false"
         dense
         :visible-columns="dataSpecialTime.visibleColumns"
-        :rows-per-page-options="[5, 10, 25, 50, 100]"
+        :rows-per-page-options="[10, 25, 50, 100]"
         v-model:pagination="initialPagination"
         @update:pagination="updatePagination"
       >
@@ -275,7 +291,11 @@ const monthYearThai = (val: any) => {
           <q-tr :props="props" class="cursor-pointer">
             <q-td v-for="col in props.cols" :key="col.name" :props="props">
               <div v-if="col.name == 'no'">
-                {{ props.rowIndex + 1 }}
+                {{
+                  (dataSpecialTime.page - 1) * dataSpecialTime.pageSize +
+                  props.rowIndex +
+                  1
+                }}
               </div>
               <div v-else>
                 {{ col.value }}