hrms-checkin/src/components/FormTime.vue

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { PropType } from 'vue'
import { useQuasar } from 'quasar'
import moment from 'moment'

import http from '@/plugins/http'
import config from '@/app.config'
import { useCounterMixin } from '@/stores/mixin'

import type { FormRef, DataCheckIn } from '@/interface/index/Main'
import type { FormTimeStemp } from '@/interface/response/checkin'

const $q = useQuasar()
const {
  date2Thai,
  success,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  convertDateToAPI,
} = useCounterMixin()

/**
 * props  จาก components Popup
 */
const props = defineProps({
  dataById: {
    type: Object as PropType<DataCheckIn>,
    default: null,
  },
  closePopup: {
    type: Function,
    required: true,
  },
  fetchData: {
    type: Function,
    require: true,
    default: () => {
      console.log('fetchData func')
    },
  },
  action: {
    type: String,
    default: '',
  },
})

const dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
const date = ref<Date | string | null>(new Date()) //วันที่ข้อแก้ไข
const checkboxIn = ref<boolean>(false) //ขอแก้ไขเวลาเข้างาน
const checkboxOut = ref<boolean>(false) //ขอแก้ไขเวลาออกงาน
const reason = ref<string>('') // เหตุผล
const statusAction = ref<boolean>(false) //สถานะ เพิ่ม,แก้ไข
const dateNow = ref<Date>(new Date()) // วันปัจจุบัน
const timeNoew = ref<string>('') //เวลาปัจจุบัน
const dateRef = ref<object | null>(null) //ref วันที่ข้อแก้ไข
const reasonRef = ref<object | null>(null) //ref เหตุผล
const objectRef: FormRef = {
  date: dateRef,
  reason: reasonRef,
}
const checkstatusBox = ref<boolean>(false) //สถานะการเลือกเวลาเข้า,ออก

/**
 * ฟังก์ชันอัปเดตเวลา
 */
function updateClock() {
  const date = Date.now()
  const hh = moment(date).format('HH')
  const mm = moment(date).format('mm')
  timeNoew.value = `${hh}:${mm} น.`
}

/**
 * function checkValidate
 */
function onCkickSave() {
  const hasError = []
  for (const key in objectRef) {
    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
      const property = objectRef[key]
      if (property.value && typeof property.value.validate === 'function') {
        const isValid = property.value.validate()
        hasError.push(isValid)
      }
    }
  }

  // ลงเวลาพิเศษบังคับให้แก้ทั้งเข้าและออก
  if (props.action === 'special') {
    checkboxIn.value = true
    checkboxOut.value = true
  }

  if (checkboxIn.value === false && checkboxOut.value === false) {
    checkstatusBox.value = true
  }
  if (
    hasError.every(
      (result) => result === true && checkstatusBox.value === false
    )
  ) {
    dialogConfirm($q, async () => {
      const data: FormTimeStemp = {
        checkDate: convertDateToAPI(date.value as Date),
        checkInEdit: checkboxIn.value,
        checkOutEdit: checkboxOut.value,
        description: reason.value,
      }

      createListTime(data)
    })
  }
}

/**
 * function  เพิ่มลงเวลากรณีพิเศษ
 * @param data body Request
 */
async function createListTime(data: FormTimeStemp) {
  showLoader()
  await http
    .post(config.API.createTimeStamp(), data)
    .then(async () => {
      // เรียก function fetch รายการประวัติการลงเวลา
      await props.fetchData()
      await success($q, 'บันทึกข้อมูลสำเร็จ')
      props.closePopup?.()
    })
    .catch((err) => {
      messageError($q, err)
    })
    .finally(() => {
      hideLoader()
    })
}

/**
 *  watch การเปลี่ยนแปลงของ checkboxIn และ checkboxOut
 */
watch(
  [() => checkboxIn.value, () => checkboxOut.value],
  ([newCheckboxIn, newCheckboxOut]) => {
    if (checkstatusBox.value) {
      if (newCheckboxIn || newCheckboxOut) {
        checkstatusBox.value = false
      }
    }
  }
)

/**
 *  Hook
 */
onMounted(() => {
  updateClock()
  dataByIdVal.value = props.dataById

  if (dataByIdVal.value == null) {
    statusAction.value = true
  } else {
    date.value = convertDateToAPI(new Date(dataByIdVal.value.checkInDateTime))
  }
})
</script>

<template>
  <div class="col-12 row">
    <div class="row q-col-q-gutter-sm q-pa-md">
      <q-card
        flat
        bordered
        :class="$q.screen.gt.xs ? 'col-12 bg-grey-1' : 'col-12 '"
      >
        <q-card-section class="bg-primary text-white q-pa-sm">
          <div class="text-center text-bold">เวลาปัจจุบัน</div>
        </q-card-section>

        <q-card-section class="text-center q-pa-sm">
          <div class="row q-gutter-md">
            <div class="col">{{ date2Thai(dateNow) }}</div>
            <div class="col">{{ timeNoew }}</div>
          </div>
        </q-card-section>
      </q-card>

      <q-card flat bordered class="col-12 q-mt-sm">
        <div class="q-pa-sm">
          <datepicker
            :readonly="!statusAction"
            v-model="date"
            :locale="'th'"
            :enableTimePicker="false"
            week-start="0"
            autoApply
            outlined
            lazy-rules
            :max-date="dateNow"
          >
            <template #year="{ year }">
              {{ year + 543 }}
            </template>
            <template #year-overlay-value="{ value }">
              {{ parseInt(value + 543) }}
            </template>
            <template #trigger>
              <q-input
                :readonly="!statusAction"
                ref="dateRef"
                outlined
                dense
                :model-value="date !== null ? date2Thai(new Date(date)) : null"
                :label="`${
                  action === 'edit'
                    ? 'วันที่ขอแก้ไข'
                    : 'วันที่ขอลงเวลากรณีพิเศษ'
                }`"
                format-header="YYYY-MM-DD"
                lazy-rules
                :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                hide-bottom-space
              >
                <template v-slot:prepend>
                  <q-icon
                    name="event"
                    class="cursor-pointer"
                    style="color: var(--q-primary)"
                  >
                  </q-icon>
                </template>
              </q-input> </template
          ></datepicker>
        </div>
      </q-card>

      <q-card
        v-if="action === 'edit'"
        flat
        bordered
        class="q-pa-sm col-12 q-mt-sm"
        :style="{
          borderColor: checkstatusBox ? '#B22222' : '',
          borderWidth: checkstatusBox ? '2px' : '',
        }"
      >
        <div class="row q-gutter-xs">
          <div class="col-12">
            <q-checkbox
              keep-color
              color="primary"
              v-model="checkboxIn"
              label="ขอแก้ไขเวลาเข้างาน"
            />
          </div>
          <div class="col-12">
            <q-checkbox
              keep-color
              v-model="checkboxOut"
              color="primary"
              label="ขอแก้ไขเวลาออกงาน"
            />
          </div>
        </div>
      </q-card>

      <div
        v-if="checkstatusBox"
        class="text-red-9 q-pa-sm"
        style="font-size: 10px"
      >
        กรุณาเลือก
      </div>

      <q-card
        flat
        bordered
        class="q-pa-sm col-12 q-mt-sm"
        :style="action == 'special' ? 'margin-bottom: 150px' : ''"
      >
        <q-input
          ref="reasonRef"
          dense
          outlined
          v-model="reason"
          label="เหตุผล"
          type="textarea"
          :rows="4"
          label-color="grey-5"
          :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
          lazy-rules
          hide-bottom-space
          class="custom-aqua-border"
        />
      </q-card>
    </div>
    <div class="col-12"><q-separator /></div>
    <div class="row col-12 q-pa-sm">
      <q-space />
      <q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
    </div>
  </div>
</template>

<style scoped></style>