hrms-checkin/src/components/PopUp.vue

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

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

import HeaderPopup from '@/components/HeaderPopup.vue' // หัว popup
import FormTime from '@/components/FormTime.vue' //

/**
 * props จาก components TableHistory
 */
const props = defineProps({
  modal: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  clickClose: {
    type: Function,
    default: null,
  },
  dataById: {
    type: Object as PropType<DataCheckIn>,
    default: null,
  },
  fetchData: {
    type: Function,
    default: () => console.log('not function'),
  },
  action: {
    type: String,
    default: '',
  },
})

const data = ref<DataCheckIn>() // ข้อมูลลงเวลา

/**
 * ปิด popup
 * เรียกใช้ฟังก์ชัน props.clickClose()
 */
function clickClosePopup() {
  props.clickClose()
}

/**
 * watch การเปลี่ยนแปลงของ props.modal
 */
watch(
  () => props.modal,
  () => {
    if (props.modal) {
      data.value = props?.dataById
    }
  }
)
</script>
<template>
  <q-dialog v-model="props.modal" persistent m>
    <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'min-width: 80vh;'">
      <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />

      <FormTime
        :data-byId="data"
        :close-popup="clickClosePopup"
        :fetch-data="props.fetchData"
        :action="props.action"
      />
    </q-card>
  </q-dialog>
</template>

<style scoped></style>