เพิ่ม filter

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

@@ -3,11 +3,13 @@
     <!--  -->
     <div class="q-gutter-sm" v-if="nornmalData == true">
       <datepicker
-        v-model="selectedDate"
+        menu-class-name="modalfix"
+        v-model="SpecialTimeStore.selectDate"
         :locale="'th'"
         autoApply
-        month-picker
         :enableTimePicker="false"
+        week-start="0"
+        @update:model-value="searchFilterTable(SpecialTimeStore.selectDate)"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -15,18 +17,20 @@
         }}</template>
         <template #trigger>
           <q-input
-            :model-value="monthYearThai(dateMonth)"
+            for="selectDate"
             dense
             outlined
+            lazy-rules
+            :model-value="
+              SpecialTimeStore.selectDate !== null
+                ? date2Thai(SpecialTimeStore.selectDate)
+                : null
+            "
             hide-bottom-space
-            style="width: 130px"
+            :label="`${'วันที่'}`"
           >
             <template v-slot:prepend>
-              <q-icon
-                name="event"
-                class="cursor-pointer"
-                style="color: var(--q-primary)"
-              >
+              <q-icon name="event" class="cursor-pointer text-primary">
               </q-icon>
             </template>
           </q-input>
@@ -98,27 +102,18 @@
     <template #body="props">
       <slot v-bind="props" name="columns"></slot>
     </template>
-    <!-- <template v-slot:pagination="scope">
-      <q-pagination
-        v-model="pagination.page"
-        active-color="primary"
-        color="dark"
-        :max="scope.pagesNumber"
-        :max-pages="5"
-        size="sm"
-        boundary-links
-        direction-links
-      ></q-pagination>
-    </template> -->
   </d-table>
 </template>
 <script setup lang="ts">
 import { ref, useAttrs } from "vue";
 import type { Pagination } from "@/modules/04_registry/interface/index/Main";
 import { useCounterMixin } from "@/stores/mixin";
+import { useSpecialTimeStore } from "@/modules/09_leave/stores/SpecialTimeStore";
 
+const SpecialTimeStore = useSpecialTimeStore();
+const { searchFilterTable } = SpecialTimeStore;
 const mixin = useCounterMixin();
-const { hideLoader, monthYear2Thai } = mixin;
+const { hideLoader, monthYear2Thai, date2Thai } = mixin;
 const attrs = ref<any>(useAttrs());
 const paging = ref<boolean>(true);
 const pagination = ref({
@@ -164,7 +159,6 @@ const props = defineProps({
     defualt: false,
   },
 });
-
 const emit = defineEmits([
   "update:inputfilter",
   "update:inputvisible",
@@ -180,18 +174,7 @@ const updateVisible = (value: []) => {
 const checkAdd = () => {
   props.add();
 };
-const selectedDate = ref<string>("");
 
-const dateMonth = ref<any>({
-  month: new Date().getMonth(),
-  year: new Date().getFullYear(),
-});
-console.log(dateMonth);
-
-const monthYearThai = (val: any) => {
-  if (val == null) return "";
-  else return monthYear2Thai(val.month, val.year);
-};
 const resetFilter = () => {
   // reset ค่าที่ค้นหาเมื่อกดปุ่ม X ในกล่องค้นหา
   emit("update:inputfilter", "");

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

@@ -1,26 +1,76 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
 import type { QTableProps } from "quasar";
-import type {
-  investigateDisDataRowType,
-  DataOption,
-} from "@/modules/11_discipline/interface/index/Main";
+import type { DataRows } from "@/modules/09_leave/interface/response/specialTime";
 import { useCounterMixin } from "@/stores/mixin";
 const mixin = useCounterMixin();
 const { date2Thai } = mixin;
 
 export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
   const rows = ref<any[]>([]);
-  async function fecthList(data: any[]) {
-    let datalist: any[] = data.map((e: any) => ({
+  const selectDate = ref<Date | null>(new Date());
+  const fiscalYear = ref<string | null>("0");
+  const DataMainOrig = ref<DataRows[]>([]); // ข้อมูลหลักดั้งเดิม
+  async function fecthList(data: DataRows[]) {
+    let datalist: DataRows[] = data.map((e: any) => ({
       fullname: e.fullname,
       date: date2Thai(new Date(e.date)),
-      dateFix: date2Thai(new Date(e.dateFix)),
+      dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
       type: e.type,
       reason: e.reason,
+      timeStamp: e.timeStamp,
     }));
     rows.value = datalist;
+    DataMainOrig.value = datalist;
   }
+  const DataMainUpdate = ref<DataRows[]>([]); // ข้อมูลเปลี่ยนแปลง
+  const DataMain = (val: DataRows[]) => (DataMainOrig.value = val);
+  const DataUpdate = (filterYear: string) => {
+    DataMainUpdate.value = [];
+    if (filterYear === "") {
+      DataMainUpdate.value = DataMainOrig.value;
+    }
+  };
+
+  //--------------|ฟิลเตอร์|--------------------------------------//
+  const searchFilterTable = async (searchDate: any) => {
+    rows.value = [];
+
+    if (fiscalYear.value !== undefined && searchDate.value !== null) {
+      await DataUpdate(searchDate.value === "0" ? "all" : searchDate.value!);
+      let filteredData = DataMainOrig.value;
+      if (searchDate.value !== "0") {
+        filteredData = filteredData.filter(
+          (item: DataRows) => item.date === searchDate.value
+        );
+        console.log(searchDate.value);
+      }
+      const dataArr = filteredData.map((e: any) => ({
+        fullname: e.fullname,
+        date: date2Thai(new Date(e.date)),
+        dateFix: date2Thai(new Date(e.dateFix)) + (e.timeStamp || ""),
+        type: e.type,
+        reason: e.reason,
+        timeStamp: e.timeStamp,
+      }));
+      rows.value = dataArr;
+    }
+  };
+
+  //   const filterSelector = (val: any, update: Function, refData: string) => {
+  //     switch (refData) {
+  //       case "":
+  //         update(() => {
+  //           selectDate.value = selectDate.value.filter(
+  //             (v: any) => v.name.indexOf(val) > -1
+  //           );
+  //         });
+  //         break;
+
+  //       default:
+  //         break;
+  //     }
+  //   };
 
   const visibleColumns = ref<String[]>([
     "no",
@@ -100,5 +150,8 @@ export const useSpecialTimeStore = defineStore("LeaveSpecialTime", () => {
     rows,
     visibleColumns,
     columns,
+    DataMain,
+    searchFilterTable,
+    selectDate,
   };
 });

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

@@ -60,6 +60,7 @@ onMounted(async () => {
       reason: "ลืม",
       unapprove: "1",
       approve: "0",
+      timeStamp: "  08:00 น.",
     },
     {
       fullname: "นางสาวรัชภรณ์ ภักดี",
@@ -69,6 +70,7 @@ onMounted(async () => {
       reason: "ลืม",
       unapprove: "1",
       approve: "0",
+      timeStamp: "   08:00 น.",
     },
     {
       fullname: "นางสาวภาพรรณ ลออ",
@@ -78,6 +80,7 @@ onMounted(async () => {
       reason: "ลืม",
       unapprove: "1",
       approve: "0",
+      timeStamp: "   08:00 น.",
     },
   ]);
   await hideLoader();