From 9aef54609d2e26cbe39337f6a4ed99f8b034bc48 Mon Sep 17 00:00:00 2001
From: "DESKTOP-1R2VSQH\\Lenovo ThinkPad E490" <nicey2t1096@gmail.com>
Date: Wed, 29 Nov 2023 17:46:19 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=9B=E0=B8=A3=E0=B8=B1=E0=B8=9A=E0=B8=84?=
 =?UTF-8?q?=E0=B9=89=E0=B8=99=E0=B8=87=E0=B8=B2=E0=B8=99=E0=B8=9B=E0=B8=B5?=
 =?UTF-8?q?=E0=B8=87=E0=B8=9A=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A1=E0=B8=B2?=
 =?UTF-8?q?=E0=B8=93=20=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7=E0=B8=B1?=
 =?UTF-8?q?=E0=B8=95=E0=B8=B4=E0=B8=81=E0=B8=B2=E0=B8=A3=E0=B8=A5=E0=B8=87?=
 =?UTF-8?q?=E0=B9=80=E0=B8=A7=E0=B8=A5=E0=B8=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ToolBar.vue  | 76 ++++++++++++++++++++++++++++++++++---
 src/interface/index/Main.ts |  7 +++-
 src/stores/chekin.ts        |  2 +
 src/stores/mixin.ts         | 46 ++++++++++++++++++++++
 src/views/HistoryView.vue   | 13 +++++--
 5 files changed, 134 insertions(+), 10 deletions(-)

diff --git a/src/components/ToolBar.vue b/src/components/ToolBar.vue
index 1b77c86..749fc24 100644
--- a/src/components/ToolBar.vue
+++ b/src/components/ToolBar.vue
@@ -1,24 +1,47 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
+
+import type { DataDateMonthObject } from '@/interface/index/Main'
 
 import Popup from '@/components/PopUp.vue'
 // import HeaderPopup from "@/components/HeaderPopup.vue";
 // import FormTime from "@/components/FormTime.vue";
+import { useCounterMixin } from '@/stores/mixin'
+import { useChekIn } from '@/stores/chekin'
+
+const mixin = useCounterMixin() //เรียกฟังก์ชันกลาง
+const stores = useChekIn()
+const { monthYear2Thai } = mixin
 
 const props = defineProps({
   fetchData: {
     type: Function,
     require: true,
   },
+  tab: {
+    type: String,
+    require: true,
+  },
 })
 const emit = defineEmits(['update:year'])
 
-const filterYear = ref<number>(new Date().getFullYear())
-// const yearOption = ref<DataOption[]>([{ id: '2566', name: '2566' }])
+const filterYear = ref<number>(stores.year)
 const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ')
+const dateMonth = ref<DataDateMonthObject>({
+  month: new Date().getMonth(),
+  year: stores.year,
+})
 
-function filterYearFn() {
-  emit('update:year', filterYear.value)
+watch(
+  () => stores.year,
+  () => {
+    dateMonth.value.year = stores.year
+  }
+)
+
+function filterYearFn(type: string) {
+  const year = type === 'year' ? filterYear.value : dateMonth.value.year
+  emit('update:year', year, dateMonth.value.month)
 }
 
 const modalPopup = ref<boolean>(false)
@@ -28,11 +51,17 @@ function onClickopen() {
 function onClickClose() {
   modalPopup.value = false
 }
+
+const monthYearThai = (val: DataDateMonthObject) => {
+  if (val == null) return ''
+  else return monthYear2Thai(val.month, val.year)
+}
 </script>
 <template>
   <div class="q-pb-sm row">
     <div class="items-center col-12 row q-gutter-sm">
       <datepicker
+        v-if="tab === 'history'"
         menu-class-name="modalfix"
         v-model="filterYear"
         class="col-xs-5 col-sm-3 col-md-2"
@@ -40,7 +69,7 @@ function onClickClose() {
         autoApply
         year-picker
         :enableTimePicker="false"
-        @update:modelValue="filterYearFn"
+        @update:modelValue="filterYearFn('year')"
       >
         <template #year="{ year }">{{ year + 543 }}</template>
         <template #year-overlay-value="{ value }">{{
@@ -66,6 +95,41 @@ function onClickClose() {
         </template>
       </datepicker>
 
+      <datepicker
+        v-else-if="tab === 'time'"
+        menu-class-name="modalfix"
+        v-model="dateMonth"
+        class="col-xs-5 col-sm-3 col-md-2"
+        :locale="'th'"
+        autoApply
+        month-picker
+        :enableTimePicker="false"
+        @update:modelValue="filterYearFn('mount')"
+      >
+        <template #year="{ year }">{{ year + 543 }}</template>
+        <template #year-overlay-value="{ value }">{{
+          parseInt(value + 543)
+        }}</template>
+        <template #trigger>
+          <q-input
+            dense
+            lazy-rules
+            outlined
+            :model-value="monthYearThai(dateMonth)"
+            :label="`${'ปีงบประมาณ'}`"
+          >
+            <template v-slot:prepend>
+              <q-icon
+                name="event"
+                class="cursor-pointer"
+                style="color: var(--q-primary)"
+              >
+              </q-icon>
+            </template>
+          </q-input>
+        </template>
+      </datepicker>
+
       <q-space />
       <q-btn
         unelevated
diff --git a/src/interface/index/Main.ts b/src/interface/index/Main.ts
index af075cf..8b50fb5 100644
--- a/src/interface/index/Main.ts
+++ b/src/interface/index/Main.ts
@@ -2,6 +2,11 @@ interface DataOption {
   id: string
   name: string
 }
+
+interface DataDateMonthObject {
+  month: number
+  year: number
+}
 interface FormRef {
   date: object | null
   reason: object | null
@@ -14,4 +19,4 @@ interface notiType {
   timereceive: Date
 }
 
-export type { DataOption, FormRef, notiType }
+export type { DataOption, FormRef, notiType, DataDateMonthObject }
diff --git a/src/stores/chekin.ts b/src/stores/chekin.ts
index 0ffc891..706e101 100644
--- a/src/stores/chekin.ts
+++ b/src/stores/chekin.ts
@@ -7,6 +7,7 @@ const { date2Thai } = mixin
 
 /** store for checkin history*/
 export const useChekIn = defineStore('checkin', () => {
+  const year = ref<number>(new Date().getFullYear())
   const rows = ref<Datalist[]>()
 
   /**
@@ -90,6 +91,7 @@ export const useChekIn = defineStore('checkin', () => {
 
   return {
     rows,
+    year,
     fetchHistoryList,
     classColorStatus,
   }
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 46c999c..77ef612 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -267,8 +267,54 @@ export const useCounterMixin = defineStore('mixin', () => {
       })
   }
 
+  function monthYear2Thai(month: number, year: number, isFullMonth = false) {
+    const date = new Date(`${year}-${month + 1}-1`)
+    const fullMonthThai = [
+      'มกราคม',
+      'กุมภาพันธ์',
+      'มีนาคม',
+      'เมษายน',
+      'พฤษภาคม',
+      'มิถุนายน',
+      'กรกฎาคม',
+      'สิงหาคม',
+      'กันยายน',
+      'ตุลาคม',
+      'พฤศจิกายน',
+      'ธันวาคม',
+    ]
+    const abbrMonthThai = [
+      'ม.ค.',
+      'ก.พ.',
+      'มี.ค.',
+      'เม.ย.',
+      'พ.ค.',
+      'มิ.ย.',
+      'ก.ค.',
+      'ส.ค.',
+      'ก.ย.',
+      'ต.ค.',
+      'พ.ย.',
+      'ธ.ค.',
+    ]
+    let dstYear = 0
+    if (date.getFullYear() > 2500) {
+      dstYear = date.getFullYear()
+    } else {
+      dstYear = date.getFullYear() + 543
+    }
+    let dstMonth = ''
+    if (isFullMonth) {
+      dstMonth = fullMonthThai[date.getMonth()]
+    } else {
+      dstMonth = abbrMonthThai[date.getMonth()]
+    }
+    return dstMonth + ' ' + dstYear
+  }
+
   return {
     date2Thai,
+    monthYear2Thai,
     showLoader,
     hideLoader,
     covertDateObject,
diff --git a/src/views/HistoryView.vue b/src/views/HistoryView.vue
index cef0f3a..9ac1e32 100644
--- a/src/views/HistoryView.vue
+++ b/src/views/HistoryView.vue
@@ -104,9 +104,11 @@ async function fetchlistTime() {
  * function updateYear
  * @param y ปีที่อัปเดท
  */
-async function updateYear(y: number) {
+async function updateYear(y: number, m: number) {
   year.value = y
-  y && functionFetch.value
+  month.value = m
+  stores.year = y
+  functionFetch.value
 }
 
 /** Hook*/
@@ -118,6 +120,7 @@ watch(
   () => tab.value,
   () => {
     page.value = 1
+    filter.value = ''
     functionFetch.value
   }
 )
@@ -146,7 +149,11 @@ watch(
           <div class="col-2"></div>
         </div>
         <div class="col-12 q-pa-md text-grey-9">
-          <ToolBar :fetchData="fetchlistHistory" @update:year="updateYear" />
+          <ToolBar
+            :fetchData="fetchlistHistory"
+            @update:year="updateYear"
+            :tab="tab"
+          />
           <q-card bordered flat>
             <q-tabs
               v-model="tab"