paging รายการลา

src/modules/09_leave/components/1_Work/Tab1.vue

@@ -152,7 +152,6 @@ async function fetchListTimeRecord() {
   ];
 
   const date = new Date(workStore.selectDate as string | Date);
-  const querySting = {
     startDate: dateToISO(date), //*วันที่เริ่ม
     endDate: dateToISO(date), //*วันที่สิ้นสุด
     status: filetStatus.value, //*สถานะ

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
 import { useRouter } from "vue-router";
 
@@ -11,12 +11,6 @@ const leaveStore = useLeavelistDataStore();
 
 const router = useRouter();
 
-/** Hook*/
-onMounted(() => {
-  leaveStore.columns = columns.value;
-  leaveStore.visibleColumns = visibleColumns.value;
-});
-
 /** เรียน funtion จาก stores*/
 // const { date2Thai } = mixin;
 // const { optionYear, searchDataFn, filterOption } = leaveStore;
@@ -77,10 +71,49 @@ const visibleColumns = ref<string[]>([
   "status",
 ]);
 
+const props = defineProps({
+  rows: {
+    type: Object,
+    require: true,
+  },
+  page: {
+    type: Number,
+    require: true,
+  },
+  rowsPerPage: {
+    type: Number,
+    require: true,
+  },
+  maxPage: {
+    type: Number,
+    require: true,
+  },
+});
+
+const emit = defineEmits(["update:querySting"]);
+
+function updateQuerySting(newPage: number, pageSize: number) {
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
+  emit("update:querySting", newPage, pageSize);
+}
+
+const currentPage = ref<number>(1);
 const pagination = ref({
   descending: true,
-  page: 1,
-  rowsPerPage: 10,
+  page: props.page,
+  rowsPerPage: props.rowsPerPage,
+});
+
+watch([() => currentPage.value, () => pagination.value.rowsPerPage], () => {
+  // updateProp(pagination.value, currentPage.value);
+  currentPage.value &&
+    pagination.value.rowsPerPage &&
+    updateQuerySting(currentPage.value, pagination.value.rowsPerPage);
+});
+
+/** Hook*/
+onMounted(() => {
+  leaveStore.visibleColumns = visibleColumns.value;
 });
 </script>
 
@@ -89,7 +122,6 @@ const pagination = ref({
     ref="table"
     :columns="columns"
     :rows="leaveStore.rows"
-    :filter="leaveStore.filterTable"
     row-key="id"
     flat
     bordered
@@ -98,7 +130,6 @@ const pagination = ref({
     class="custom-header-table"
     :visible-columns="leaveStore.visibleColumns"
     v-model:pagination="pagination"
-    :loading="leaveStore.loadTable"
   >
     <template v-slot:header="props">
       <q-tr :props="props">
@@ -125,8 +156,16 @@ const pagination = ref({
         </q-td>
       </q-tr>
     </template>
-    <template v-slot:loading>
-      <q-inner-loading showing color="primary" />
+    <template v-slot:pagination="scope">
+      <q-pagination
+        v-model="currentPage"
+        active-color="primary"
+        color="dark"
+        :max="Number(props.maxPage)"
+        size="sm"
+        boundary-links
+        direction-links
+      ></q-pagination>
     </template>
   </d-table>
 </template>

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

@@ -1,9 +1,116 @@
 <script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+
+import type { DateFilter } from "@/modules/09_leave/interface/request/leave";
+import type {
+  DataOption,
+  DataOption2,
+} from "@/modules/09_leave/interface/index/Main";
 /** importStores*/
 import { useLeavelistDataStore } from "@/modules/09_leave/stores/LeaveStore";
 
 const leaveStore = useLeavelistDataStore();
-const { searchDataFn, filterOption } = leaveStore;
+
+const emit = defineEmits(["update:querySting"]);
+
+/** formFilter*/
+const filter = reactive<DateFilter>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  keyword: "", //keyword ค้นหา
+});
+
+/**
+ * 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() {
+  filter.status && filter.type && (await updateQuerySting(1, 10, filter));
+}
+
+/** Option*/
+const optionYear = ref<DataOption2[]>([
+  {
+    id: 0,
+    name: "ทั้งหมด",
+  },
+  {
+    id: 2023,
+    name: "2566",
+  },
+]);
+const optionType = ref<DataOption[]>([
+  {
+    id: "00000000-0000-0000-0000-000000000000",
+    name: "ทั้งหมด",
+  },
+]);
+const optionStatus = ref<DataOption[]>([
+  {
+    id: "ALL",
+    name: "ทั้งหมด",
+  },
+  {
+    id: "NEW",
+    name: "ใหม่",
+  },
+  {
+    id: "PENDING ",
+    name: "กำลังดำเนินการ",
+  },
+  {
+    id: "APPROVE ",
+    name: "อนุมัติ",
+  },
+  {
+    id: "REJECT ",
+    name: "ไม่อนุมัติ",
+  },
+]);
+const optionTypeMain = ref<DataOption[]>(optionType.value);
+const optionStatusMain = ref<DataOption[]>(optionStatus.value);
+
+async function fetchOption() {
+  console.log("loadOption  รอ API");
+}
+
+/**
+ * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
+ * @param val คำที่ค้นหา
+ * @param update Function
+ * @param name ประเภทของ Select
+ */
+function filterOption(val: string, update: any, name: string) {
+  update(() => {
+    const needle = val.toLowerCase();
+    if (name === "type") {
+      optionType.value = optionTypeMain.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    } else if (name === "status") {
+      optionStatus.value = optionStatusMain.value.filter(
+        (v: any) => v.name.toLowerCase().indexOf(needle) > -1
+      );
+    }
+  });
+}
+
+onMounted(async () => {
+  await fetchOption();
+});
 </script>
 
 <template>
@@ -15,11 +122,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectYear"
-        :options="leaveStore.optionYear"
+        v-model="filter.year"
+        :options="optionYear"
         option-value="id"
         option-label="name"
         label="ปีงบประมาณ"
+        @update:model-value="filterListLeave"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">
@@ -29,14 +137,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectType"
-        :options="leaveStore.leaveOps"
+        v-model="filter.type"
+        :options="optionType"
         option-value="id"
         option-label="name"
         label="ประเภทการลา"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
+        @update:model-value="filterListLeave"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -57,14 +163,12 @@ const { searchDataFn, filterOption } = leaveStore;
         map-options
         outlined
         dense
-        v-model="leaveStore.selectStatus"
-        :options="leaveStore.statusOps"
+        v-model="filter.status"
+        :options="optionStatus"
         option-value="id"
         option-label="name"
         label="สถานะ"
-        @update:model-value="
-          searchDataFn(leaveStore.selectType, leaveStore.selectStatus)
-        "
+        @update:model-value="filterListLeave"
         use-input
         @filter="
             (inputValue:any, doneFn:Function) =>
@@ -84,8 +188,9 @@ const { searchDataFn, filterOption } = leaveStore;
         for="filterTable"
         dense
         outlined
-        v-model="leaveStore.filterTable"
+        v-model="filter.keyword"
         label="ค้นหา"
+        @keydown.enter.prevent="filterListLeave"
       />
     </div>
     <div class="col-xs-12 col-sm-3 col-md-2">

src/modules/09_leave/interface/index/Main.ts

@@ -1,7 +1,9 @@
 interface DataOption {
-    id: string;
-    name: string;
+  id: string;
+  name: string;
 }
-export type {
-    DataOption
-};
+interface DataOption2 {
+  id: number;
+  name: string;
+}
+export type { DataOption, DataOption2 };

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

@@ -5,6 +5,21 @@ interface ListsData {
   Date: Date;
   status: string;
 }
+interface QuerySting {
+  year: number; //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: string; //*Id ประเภทการลา
+  status: string; //*สถานะการของลา
+  page: number; //*หน้า
+  pageSize: number; //*จำนวนแถวต่อหน้า
+  keyword: string; //keyword ค้นหา
+}
+
+interface DateFilter {
+  year: number; //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: string; //*Id ประเภทการลา
+  status: string; //*สถานะการของลา
+  keyword: string; //keyword ค้นหา
+}
 interface FremData {
   id: string; //Id การยื่นขอลา
   leaveTypeName: string | null; //Name ประเภทการลา
@@ -63,4 +78,4 @@ interface FremData {
   coupleDaySumTotalHistory: string; //ประวัติ ในกรณีลาติดต่อกับครั้งก่อน รวมทั้งนี้ด้วย เป็นเวลา กี่ปี กี่เดือน กี่วัน (ลาติดตามคู่สมรส)
 }
 
-export type { ListsData, FremData };
+export type { ListsData, FremData, QuerySting, DateFilter };

src/modules/09_leave/interface/response/leave.ts

@@ -1,8 +1,10 @@
 interface DataRows {
-  leaveType: string;
-  name: string;
-  Date: string;
-  status: string;
+  id: string; //*Id การยื่นขอลา
+  leaveTypeName: string | null; //Name ประเภทการลา
+  leaveTypeId: string; //Id ประเภทการลา
+  fullname: string; //คำนำหน้า ชื่อ นามสกุล คนขอลา
+  dateSendLeave: string | null; //วันที่ยื่นใบลา
+  status: string | null; //ส
 }
 interface FormData {
   id: string;

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

@@ -3,43 +3,20 @@ import { ref, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 
 /** importType*/
-import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 import type { QTableProps } from "quasar";
 import type { DataRows } from "@/modules/09_leave/interface/response/leave";
-import type {
-  ListsData,
-  FremData,
-} from "@/modules/09_leave/interface/request/leave";
+import type { FremData } from "@/modules/09_leave/interface/request/leave";
 
 const mixin = useCounterMixin();
 const { date2Thai, showLoader, hideLoader } = mixin;
 
 export const useLeavelistDataStore = defineStore("leave", () => {
-  /** TABMENU*/
-  const amounttab1 = ref<number>(0);
-  const amounttab2 = ref<number>(0);
-
   /**ข้อมูลใน Table*/
   const mainData = ref<any>([]);
   const rows = ref<DataRows[]>([]);
-
   const columns = ref<QTableProps["columns"]>([]);
   const visibleColumns = ref<string[]>([]);
-  const loadTable = ref<boolean>(false);
-  const leaveOp = [
-    { id: "all", name: "ทั้งหมด" },
-    { id: "leave1", name: "ลากิจส่วนตัว" },
-    { id: "leave2", name: "ลาป่วย" },
-  ];
-  const statusOp = [
-    { id: "all", name: "ทั้งหมด" },
-    { id: "NEW", name: "ใหม่" },
-    { id: "PENDING", name: "อยู่ระหว่างดำเนินการ" },
-    { id: "APPROVE", name: "อนุมัติ" },
-    { id: "REJECT", name: "ไม่อนุมัติ" },
-  ];
-  const leaveOps = ref<any>(leaveOp);
-  const statusOps = ref<any>(statusOp);
+
   /**
    * ฟังก์ชั่น fetchList
    * @param data รับข้อมูลจาก Page
@@ -55,101 +32,7 @@ export const useLeavelistDataStore = defineStore("leave", () => {
     }));
     console.log(datalist);
     mainData.value = datalist;
-    // const filteramounttab1 = datalist.filter((e) => e.status === "PENDING");
-    // amounttab1.value = filteramounttab1.length;
-    // amounttab2.value = datalist.length;
-    await searchDataFn(selectType.value, selectStatus.value);
-  }
-
-  /**ref ของการค้นหาข้อมูล */
-  const selectYear = ref<string>("all");
-  const selectType = ref<string>("all");
-  const selectStatus = ref<string>("all");
-  const optionYear = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
-  const optionType = ref<DataOption[]>([]);
-  const optionStatus = ref<DataOption[]>([]);
-  const optionTypeMain = ref<DataOption[]>([]);
-  const optionStatusMain = ref<DataOption[]>([]);
-  const filterTable = ref<string>("");
-  /**
-   * ฟังก์ชั่นค้นหาข้อมูลใน Table
-   * @param type รับข้อมูลประเภท
-   * @param status รับค่าสถานะ
-   */
-  function searchDataFn(type: string, status: string) {
-    type = type || "all";
-    status = convertSatatus(status) || "all";
-    // showLoader()
-    loadTable.value = true;
-    if (selectYear.value == "all" && type == "all" && status == "all") {
-      console.log(1);
-      rows.value = mainData.value;
-    } else if (selectYear.value !== "all" && type == "all" && status == "all") {
-      console.log(2);
-    } else if (selectYear.value == "all" && type !== "all" && status == "all") {
-      console.log(3);
-      rows.value = mainData.value.filter((e: any) => e.leaveTypeId === type);
-    } else if (selectYear.value == "all" && type == "all" && status !== "all") {
-      console.log(4);
-      console.log(status);
-
-      rows.value = mainData.value.filter((e: any) => e.status === status);
-    } else if (
-      selectYear.value !== "all" &&
-      type !== "all" &&
-      status == "all"
-    ) {
-      console.log(5);
-    } else if (
-      selectYear.value !== "all" &&
-      type == "all" &&
-      status !== "all"
-    ) {
-      console.log(6);
-    } else if (
-      selectYear.value == "all" &&
-      type !== "all" &&
-      status !== "all"
-    ) {
-      console.log(7);
-      rows.value = mainData.value.filter(
-        (e: any) => e.leaveTypeId === type && e.status === status
-      );
-    } else console.log("ค้นหาจากทั้งหมด");
-    setTimeout(function () {
-      loadTable.value = false;
-    }, 500);
-  }
-
-  /**
-   * ฟังก์ชั่นเคลียร์ข้อมูลค้นหา
-   */
-  function clearFilter() {
-    selectYear.value = "all";
-    selectType.value = "all";
-    selectStatus.value = "all";
-    filterTable.value = "";
-  }
-
-  /**
-   * ฟังก์ชั่นค้นหาข้อมูลของ Option Filter
-   * @param val คำที่ค้นหา
-   * @param update Function
-   * @param name ประเภทของ Select
-   */
-  function filterOption(val: string, update: any, name: string) {
-    update(() => {
-      const needle = val.toLowerCase();
-      if (name === "type") {
-        leaveOps.value = leaveOp.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-      } else if (name === "status") {
-        statusOps.value = statusOp.filter(
-          (v: any) => v.name.toLowerCase().indexOf(needle) > -1
-        );
-      }
-    });
+    rows.value = mainData.value;
   }
 
   /**
@@ -220,30 +103,12 @@ export const useLeavelistDataStore = defineStore("leave", () => {
   }
 
   return {
-    amounttab1,
-    amounttab2,
     /**ข้อมูลใน Table */
     rows,
     fetchList,
-    loadTable,
     columns,
     visibleColumns,
 
-    /**ค้นหาข้อมูล */
-    filterTable,
-    selectYear,
-    selectType,
-    selectStatus,
-    optionYear,
-    optionType,
-    optionStatus,
-    clearFilter,
-    searchDataFn,
-    filterOption,
-    leaveOp,
-    statusOp,
-    leaveOps,
-    statusOps,
     /** Function แปลงค่า */
     convertLeave,
     convertLeaveDaytype,

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

@@ -1,7 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 
 /**importType*/
+import type {
+  QuerySting,
+  DateFilter,
+} from "@/modules/09_leave/interface/request/leave";
 import type { DataRows } from "@/modules/09_leave/interface/response/leave";
 
 /**importStroe*/
@@ -14,30 +18,55 @@ import ToolBar from "@/modules/09_leave/components/2_Leave/ToolBar.vue";
 
 const leaveStore = useLeavelistDataStore();
 const APIDATA = useLeavelistDataStoreTest();
-const { fetchList, clearFilter } = leaveStore;
+const { fetchList } = leaveStore;
+
+/** เรียกข้อมูลจาก API*/
+function fecthLeaveList() {
+  const data = APIDATA.data;
+  maxPage.value = Math.ceil(data.length / querySting.pageSize);
+  fetchList(data); /** ส่งข้อมูลไป stores*/
+}
+
+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;
+  querySting.keyword = dateFilter ? dateFilter.keyword : querySting.keyword;
+
+  console.log(querySting);
+}
+
+const maxPage = ref<number>(1);
+const querySting = reactive<QuerySting>({
+  year: 0, //*ปีในการยื่นขอใบลา(ใช้เป็น คศ.)
+  type: "00000000-0000-0000-0000-000000000000", //*Id ประเภทการลา
+  status: "ALL", //*สถานะการของลา
+  page: 1, //*หน้า
+  pageSize: 5, //*จำนวนแถวต่อหน้า
+  keyword: "", //keyword ค้นหา
+});
 
 onMounted(() => {
   fecthLeaveList();
 });
-/** เรียกข้อมูลจาก API*/
-function fecthLeaveList() {
-  const data = APIDATA.data;
-
-  fetchList(data); /** ส่งข้อมูลไป stores*/
-}
-
-/** เปลี่ยน TAB*/
-function changTab() {
-  clearFilter();
-  fecthLeaveList();
-}
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">รายการลา</div>
   <div>
     <q-card flat bordered class="col-12 q-mt-sm q-pt-sm q-pa-md">
-      <ToolBar />
-      <TableList />
+      <ToolBar @update:querySting="updatePaging" />
+      <TableList
+        :page="querySting.page"
+        :rowsPerPage="querySting.pageSize"
+        :maxPage="maxPage"
+        @update:querySting="updatePaging"
+      />
     </q-card>
   </div>
 </template>