hrms-checkin/src/components/FormTime.vue

<script setup lang="ts">
import { ref, watch, onMounted, reactive } 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'

import MapCheck from '@/components/AscGISMapTime.vue'

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) //สถานะการเลือกเวลาเข้า,ออก
const formLocation = reactive({
  lat: 0, //พิกัดละติจูด
  lng: 0, //พิกัดลองจิจูด
  POI: '', //ชื่อสถานที่
})

/**
 * ฟังก์ชันอัปเดตเวลา
 */
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,
        latitude: formLocation.lat.toString(),
        longitude: formLocation.lng.toString(),
        POI: formLocation.POI,
      }

      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()
    })
}

/**
 *  funciton เรียกพิกัดละติจูด พิกัดลองติจูด
 * @param location  พิกัดละติจูด พิกัดลองติจูด
 * @param namePOI ชื่อสถานที่ ได้มาจากระบบ ArcGis ของกองสารสนเทศภูมิศาสตร์
 */
async function updateLocation(
  latitude: number,
  longitude: number,
  namePOI: string
) {
  formLocation.lat = latitude
  formLocation.lng = longitude
  formLocation.POI = namePOI
}

/**
 *  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>
  <q-card-section
    :horizontal="$q.screen.gt.md"
    style="max-height: 65vh; padding: 0px"
    class="scroll"
  >
    <div class="col-12">
      <div class="row q-col-q-gutter-sm">
        <div class="q-pa-md col-md-5 col-xs-12">
          <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">เวลาปัจasdasdasจุบัน</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>
          <!-- :style="action == 'special' ? 'margin-bottom: 150px' : ''" -->
          <q-card flat bordered class="q-pa-sm col-12 q-mt-sm">
            <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>
        <q-separator vertical />

        <div
          class="q-pa-md col"
          :style="!$q.screen.gt.sm ? 'padding-top: 0;' : ''"
        >
          <q-card flat bordered class="col-12">
            <MapCheck @update:location="updateLocation" />
          </q-card>
        </div>

        <!-- :style="action == 'special' ? 'margin-bottom: 120px' : ''" -->
      </div>
    </div>
  </q-card-section>

  <q-separator />
  <q-card-actions align="right">
    <q-btn color="secondary" label="บันทึก" @click="onCkickSave" />
  </q-card-actions>
</template>

<style scoped></style>