เพิ่ม 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", "");