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">