hrms-checkin/src/components/ToolBar.vue

<script setup lang="ts">
import { ref, watch } from 'vue'

import { useCounterMixin } from '@/stores/mixin'
import { useChekIn } from '@/stores/chekin'
import { calculateFiscalYear } from '@/utils/function'

import type { DataDateMonthObject } from '@/interface/index/Main'

import Popup from '@/components/PopUp.vue'

const stores = useChekIn()
const { monthYear2Thai } = useCounterMixin()

/**
 * props จาก components HistoryView
 */
const props = defineProps({
  fetchData: {
    type: Function,
    require: true,
  },
  tab: {
    type: String,
    require: true,
  },
})
const emit = defineEmits(['update:year'])

const filterYear = ref<number>(
  stores.year ? stores.year : calculateFiscalYear(new Date())
) //ปีงบประมาณ
const titleName = ref<string>('เพิ่มรายการลงเวลากรณีพิเศษ') //หัว popup
const dateMonth = ref<DataDateMonthObject>({
  month: new Date().getMonth(),
  year:
    stores.year && !isNaN(stores.year) ? stores.year : new Date().getFullYear(),
})
const modalPopup = ref<boolean>(false) // modal เพิ่มรายการลงเวลากรณีพิเศษ

/**
 * ฟังก์ชันอัปเดทปีงบประมาณ
 * @param type ประเภท year,mount
 */
function filterYearFn(type: string) {
  const year = type === 'year' ? filterYear.value : dateMonth.value.year
  const month = dateMonth.value.month

  // ตรวจสอบค่าก่อนส่ง
  if (isNaN(Number(year)) || isNaN(Number(month))) {
    console.warn('Invalid year or month value:', { year, month })
    return
  }

  //ส่งค่า ปีงบประมาณ กลับ
  emit('update:year', Number(year), Number(month))
}

/**
 * เปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
 */
function onClickopen() {
  modalPopup.value = true
}

/**
 * ปิด popup เพิ่มรายการลงเวลากรณีพิเศษ
 */
function onClickClose() {
  modalPopup.value = false
}

/**
 * แปลงวันเดือนปีเป็นเดือนและปีในภาษาไทย
 * @param val วันเดือนปี
 * @returns  เดือนและปีในภาษาไทย
 */
const monthYearThai = (val: DataDateMonthObject) => {
  if (!val || !val.year || val.month === undefined || val.month === null) {
    return ''
  }

  // ตรวจสอบว่าค่าเป็น number ที่ถูกต้อง
  const year = Number(val.year)
  const month = Number(val.month)

  if (isNaN(year) || isNaN(month) || year < 1900 || month < 0 || month > 11) {
    return ''
  }

  return monthYear2Thai(month, year)
}

/**
 * watch การเปลี่ยนแปลงของ stores.year
 */
watch(
  () => stores.year,
  (newYear) => {
    dateMonth.value.year = newYear
  }
)
</script>
<template>
  <div class="items-center col-12 row q-pb-sm">
    <datepicker
      v-if="tab === 'history'"
      menu-class-name="modalfix"
      v-model="filterYear"
      class="col-xs-5 col-sm-3 col-md-2"
      :locale="'th'"
      autoApply
      year-picker
      :transitions="false"
      :enableTimePicker="false"
      @update:modelValue="filterYearFn('year')"
    >
      <template #year="{ year }">{{
        Number.isFinite(year) ? year + 543 : ''
      }}</template>
      <template #year-overlay-value="{ value }">{{
        Number.isFinite(parseInt(value)) ? parseInt(value) + 543 : ''
      }}</template>
      <template #trigger>
        <q-input
          dense
          lazy-rules
          outlined
          :model-value="filterYear ? filterYear + 543 : ''"
          :label="`${'ปีงบประมาณ'}`"
        >
          <template v-slot:prepend>
            <q-icon
              name="event"
              class="cursor-pointer"
              style="color: var(--q-primary)"
            >
            </q-icon>
          </template>
        </q-input>
      </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
      :transitions="false"
      :enableTimePicker="false"
      @update:modelValue="filterYearFn('month')"
    >
      <template #year="{ year }">{{
        Number.isFinite(year) ? year + 543 : ''
      }}</template>
      <template #year-overlay-value="{ value }">{{
        Number.isFinite(parseInt(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
      v-if="tab === 'time'"
      unelevated
      icon="add"
      :dense="$q.screen.lt.sm"
      color="secondary"
      :label="$q.screen.gt.xs ? 'เพิ่มรายการลงเวลากรณีพิเศษ' : ''"
      @click="onClickopen"
    />
  </div>

  <Popup
    :modal="modalPopup"
    :title="titleName"
    :clickClose="onClickClose"
    :fetchData="props.fetchData"
    action="special"
  />
</template>

<style scoped></style>