รายการลงเวลาปฏิบัติงานที่ประมวลผลแล้ว

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

@@ -5,7 +5,7 @@ import { ref, onMounted, onUnmounted } from "vue";
 import type { QTableProps } from "quasar";
 import type {
   DataResTime,
-  TableRows,
+  TableRowsTime,
 } from "@/modules/09_leave/interface/response/work";
 import type { DataOption } from "@/modules/09_leave/interface/index/Main";
 
@@ -19,12 +19,13 @@ import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 /** useStore */
 const mixin = useCounterMixin();
 const workStore = useWorklistDataStore();
-const { date2Thai, showLoader, hideLoader } = mixin;
+const { date2Thai, dateToISO, showLoader, hideLoader } = mixin;
 
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(2);
+const rowsPerPage = ref<number>(10);
-const maxPage = ref<number>(7);
+const maxPage = ref<number>(1);
+const filetStatus = ref<string>("");
 
 /** ข้อมูลหัวตาราง*/
 const columns = ref<QTableProps["columns"]>([
@@ -64,6 +65,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "checkInStatus",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "checkInStatus",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "checkOutTime",
     align: "left",
@@ -83,11 +93,11 @@ const columns = ref<QTableProps["columns"]>([
     style: "font-size: 14px",
   },
   {
-    name: "checkStatus",
+    name: "checkOutStatus",
     align: "left",
     label: "สถานะ",
     sortable: true,
-    field: "checkStatus",
+    field: "checkOutStatus",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -97,96 +107,95 @@ const visibleColumns = ref<string[]>([
   "fullName",
   "checkInTime",
   "checkInLocation",
+  "checkInStatus",
   "checkOutTime",
   "checkOutLocation",
-  "checkStatus",
+  "checkOutStatus",
 ]);
-const rows = ref<TableRows[]>([]);
+const rows = ref<TableRowsTime[]>([]);
-const optionStatusMain = ref<DataOption[]>([]);
-const optionStatus = ref<DataOption[]>([]);
-const filetStatus = ref<string>("");
 
 async function fetchListTimeRecord() {
   showLoader();
   const listData: DataResTime[] = [
-    // {
+    {
-    //   id: "00000000-0000-0000-0000-000000000000",
+      id: "00000000-0000-0000-0000-000000000000",
-    //   fullName: "นางอมร ใจดี",
+      fullName: "นางอมร ใจดี",
-    //   checkDate: new Date(),
+      checkInDate: new Date(),
-    //   checkInTime: "08:30",
+      checkInTime: "08:30",
-    //   checkInLocation: "สำนักงงาน",
+      checkInLocation: "สำนักงงาน",
-    //   checkInLat: "18.7903",
+      checkInLat: "18.7903",
-    //   checkInLon: "99.0029",
+      checkInLon: "99.0029",
-    //   checkOutLocation: "สำนักงงาน",
+      checkInStatus: "normal",
-    //   checkOutTime: "18:04",
+      checkOutDate: new Date(),
-    //   checkOutLat: "18.7903",
+      checkOutLocation: "สำนักงงาน",
-    //   checkOutLon: "99.0029",
+      checkOutTime: "18:04",
-    //   checkStatus: "normal",
+      checkOutLat: "18.7903",
-    // },
+      checkOutLon: "99.0029",
-    // {
+      checkOutStatus: "late",
-    //   id: "00000000-0000-0000-0000-000000000000",
+    },
-    //   fullName: "นางอมร ใจดี",
+    {
-    //   checkDate: new Date(),
+      id: "00000000-0000-0000-0000-000000000000",
-    //   checkInTime: "08:30",
+      fullName: "นางอมร ใจดี",
-    //   checkInLocation: "สำนักงงาน",
+      checkInDate: new Date(),
-    //   checkInLat: "18.7903",
+      checkInTime: "08:30",
-    //   checkInLon: "99.0029",
+      checkInLocation: "สำนักงงาน",
-    //   checkOutLocation: "สำนักงงาน",
+      checkInLat: "18.7903",
-    //   checkOutTime: "18:04",
+      checkInLon: "99.0029",
-    //   checkOutLat: "18.7903",
+      checkInStatus: "normal",
-    //   checkOutLon: "99.0029",
+      checkOutDate: new Date(),
-    //   checkStatus: "normal",
+      checkOutLocation: "สำนักงงาน",
-    // },
+      checkOutTime: "18:04",
-    // {
+      checkOutLat: "18.7903",
-    //   id: "00000000-0000-0000-0000-000000000000",
+      checkOutLon: "99.0029",
-    //   fullName: "นางอมร ใจดี",
+      checkOutStatus: "late",
-    //   checkDate: new Date(),
+    },
-    //   checkInTime: "08:30",
-    //   checkInLocation: "สำนักงงาน",
-    //   checkInLat: "18.7903",
-    //   checkInLon: "99.0029",
-    //   checkOutLocation: "สำนักงงาน",
-    //   checkOutTime: "18:04",
-    //   checkOutLat: "18.7903",
-    //   checkOutLon: "99.0029",
-    //   checkStatus: "normal",
-    // },
   ];
 
-  let datalist: TableRows[] = listData.map((e: DataResTime) => ({
+  const date = new Date(workStore.selectDate as string | Date);
+  const querySting = {
+    startDate: dateToISO(date), //*วันที่เริ่ม
+    endDate: dateToISO(date), //*วันที่สิ้นสุด
+    status: filetStatus.value, //*สถานะ
+    page: page.value, //*หน้า
+    pageSize: rowsPerPage.value, //*จำนวนแถวต่อหน้า
+    keyword: keyword.value, //keyword ค้นหา
+  };
+
+  console.log(querySting);
+
+  const datalist: TableRowsTime[] = listData.map((e: DataResTime) => ({
     id: e.id,
     fullName: e.fullName,
-    checkDate: e.checkDate && date2Thai(e.checkDate),
+    checkInDate: e.checkInDate && date2Thai(e.checkInDate),
     checkInTime: e.checkInTime,
     checkInLocation: e.checkInLocation,
     checkInLat: e.checkInLat,
     checkInLon: e.checkInLon,
+    checkInStatus: e.checkInStatus && workStore.convertSatatus(e.checkInStatus),
+    checkOutDate: e.checkOutDate && date2Thai(e.checkOutDate),
     checkOutLocation: e.checkOutLocation,
     checkOutTime: e.checkOutTime,
     checkOutLat: e.checkOutLat,
     checkOutLon: e.checkOutLon,
-    checkStatus: e.checkStatus && workStore.convertSatatus(e.checkStatus),
+    checkOutStatus:
+      e.checkOutStatus && workStore.convertSatatus(e.checkOutStatus),
   }));
   rows.value = datalist;
-  fetchOption(datalist);
+  maxPage.value = Math.ceil(rows.value.length / rowsPerPage.value);
   hideLoader();
 }
 
-//
+async function updatePaging(
-function fetchOption(data: TableRows[]) {
+  params: any,
-  const double_status = [...new Set(data.map((item: any) => item.checkStatus))];
+  currentPage: number,
-  optionStatusMain.value = [{ id: "all", name: "ทั้งหมด" }];
+  key: string,
-  for (let i = 1; i <= double_status.length; i++) {
+  status: string
-    const status = double_status[i - 1];
+) {
-    if (typeof status === "string") {
+  page.value = currentPage;
-      const listtype: DataOption = {
+  rowsPerPage.value = params.rowsPerPage ?? rowsPerPage.value;
-        id: status,
+  keyword.value = key ?? keyword.value;
-        name: status,
+  filetStatus.value = status;
-      };
+  await fetchListTimeRecord();
-      optionStatusMain.value.push(listtype);
-      optionStatus.value = optionStatusMain.value;
-    }
-  }
 }
 
 /** Hook*/
@@ -200,12 +209,13 @@ onMounted(async () => {
 onUnmounted(() => {});
 </script>
 <template>
-  <ToolBar :option="optionStatus" :filetStatus="filetStatus" />
+  <ToolBar :filetStatus="filetStatus" @update:pagination="updatePaging" />
   <TableList
     :rows="rows.length > 0 ? rows : []"
     :page="page"
     :rowsPerPage="rowsPerPage"
     :maxPage="maxPage"
+    @update:pagination="updatePaging"
   />
 </template>
 

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

@@ -94,7 +94,7 @@ const rows = ref<TableRows[]>([]);
 /** QueryString*/
 const keyword = ref<string>("");
 const page = ref<number>(1);
-const rowsPerPage = ref<number>(5);
+const rowsPerPage = ref<number>(10);
 const maxPage = ref<number>(1);
 
 /** เรียกข้อมูลรายการลงเวลาปฏิบัติงาน (รายการลงเวลา) */

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

@@ -9,16 +9,25 @@ const workStore = useWorklistDataStore();
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
-const props = defineProps({
+const emit = defineEmits(["update:pagination"]);
-  option: {
+const updateProp = (newPagination: any, keyword: string, status: string) => {
-    type: Object,
+  // ส่ง event ไปยัง parent component เพื่ออัพเดทค่า props
-    require: true,
+  emit("update:pagination", newPagination, 1, keyword, status);
-  },
+};
-});
 
+const option = ref<any[]>([
+  { id: "", name: "ทั้งหมด" },
+  { id: "normal", name: "ปกติ" },
+  { id: "late", name: "สาย" },
+  { id: "absent", name: "ขาดราชการ" },
+]);
 const filetStatus = ref<string>("");
 const keyword = ref<string>("");
 
+function filterFn() {
+  updateProp([], keyword.value, filetStatus.value);
+}
+
 /** Functicon หาค่ามากสุดและปิดวันที่ไม่ให้เลือกวันล่วงหน้า*/
 function calculateMaxDate() {
   const today = new Date();
@@ -38,6 +47,7 @@ function calculateMaxDate() {
         :enableTimePicker="false"
         week-start="0"
         :max-date="calculateMaxDate()"
+        @update:model-value="filterFn"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -77,7 +87,8 @@ function calculateMaxDate() {
         label="สถานะ"
         use-input
         v-model="filetStatus"
-        :options="props.option as readonly any[] || undefined"
+        :options="option"
+        @update:model-value="filterFn"
       >
         <template v-slot:no-option>
           <q-item>
@@ -95,6 +106,7 @@ function calculateMaxDate() {
         v-model="keyword"
         label="ค้นหา"
         debounce="300"
+        @keydown.enter.prevent="filterFn"
       >
         <template v-slot:append>
           <q-icon name="search" />

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

@@ -1,29 +1,48 @@
 interface TableRows {
   id: string; //id รายการลงเวลาปฏิบัติงาน
-  fullName: String; //ชื่อ-นามสกุล
+  fullName: string; //ชื่อ-นามสกุล
   checkDate: string | null; //วันที่เข้างาน
   checkInTime: string; //เวลาเข้างาน
-  checkInLocation: String; //พิกัดเข้างาน
+  checkInLocation: string; //พิกัดเข้างาน
-  checkInLat: String; //อัลติจูดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
-  checkInLon: String; //ละติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
-  checkOutLocation: String; //พิกัดออกงาน
+  checkOutLocation: string; //พิกัดออกงาน
   checkOutTime: string; //เวลาออกงาน
-  checkOutLat: String; //อัลติจูดออกงาน
+  checkOutLat: string; //อัลติจูดออกงาน
-  checkOutLon: String; //ละติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
+}
+
+interface TableRowsTime {
+  id: string; //id รายการลงเวลาปฏิบัติงาน
+  fullName: string; //ชื่อ-นามสกุล
+  checkInDate: string | null; //วันที่เข้างาน
+  checkInTime: string; //เวลาเข้างาน
+  checkInLocation: string; //พิกัดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
+  checkInStatus: string | undefined; //สถานะการลงเวลาเข้างาน
+  checkOutDate: string | null;
+  checkOutLocation: string; //พิกัดออกงาน
+  checkOutTime: string; //เวลาออกงาน
+  checkOutLat: string; //อัลติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
+  checkOutStatus: string | undefined; //สถานะการลงเวลาออกงาน
 }
 interface DataResTime {
   id: string; //id รายการลงเวลาปฏิบัติงาน
-  fullName: String; //ชื่อ-นามสกุล
+  fullName: string; //ชื่อ-นามสกุล
-  checkDate: Date | null; //วันที่เข้างาน
+  checkInDate: Date | null; //วันที่เข้างาน
   checkInTime: string; //เวลาเข้างาน
-  checkInLocation: String; //พิกัดเข้างาน
+  checkInLocation: string; //พิกัดเข้างาน
-  checkInLat: String; //อัลติจูดเข้างาน
+  checkInLat: string; //อัลติจูดเข้างาน
-  checkInLon: String; //ละติจูดเข้างาน
+  checkInLon: string; //ละติจูดเข้างาน
-  checkOutLocation: String; //พิกัดออกงาน
+  checkInStatus: string; //สถานะการลงเวลาเข้างาน
+  checkOutDate: Date | null; //วันที่ออกงาน
+  checkOutLocation: string; //พิกัดออกงาน
   checkOutTime: string; //เวลาออกงาน
-  checkOutLat: String; //อัลติจูดออกงาน
+  checkOutLat: string; //อัลติจูดออกงาน
-  checkOutLon: String; //ละติจูดออกงาน
+  checkOutLon: string; //ละติจูดออกงาน
-  checkStatus: string;
+  checkOutStatus: string; //สถานะการลงเวลาออกงาน
 }
 interface DataResLog {
   id: string; //id รายการลงเวลาปฏิบัติงาน
@@ -38,4 +57,4 @@ interface DataResLog {
   checkOutLat: String; //อัลติจูดออกงาน
   checkOutLon: String; //ละติจูดออกงาน
 }
-export type { TableRows, DataResLog, DataResTime };
+export type { TableRows, DataResLog, DataResTime, TableRowsTime };