refector code

src/components/PopUp.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { PropType } from 'vue'
 
-import HeaderPopup from '@/components/HeaderPopup.vue'
-import FormTime from '@/components/FormTime.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,
@@ -18,7 +24,7 @@ const props = defineProps({
     default: null,
   },
   dataById: {
-    type: Object,
+    type: Object as PropType<DataCheckIn>,
     default: null,
   },
   fetchData: {
@@ -27,15 +33,25 @@ const props = defineProps({
   },
 })
 
-const data = ref<any>()
+const data = ref<DataCheckIn>() // ข้อมูลลงเวลา
+
+/**
+ * ปิด popup
+ * เรียกใช้ฟังก์ชัน props.clickClose()
+ */
 function clickClosePopup() {
   props.clickClose()
 }
 
+/**
+ * watch การเปลี่ยนแปลงของ props.modal
+ */
 watch(
   () => props.modal,
   () => {
-    data.value = props.modal ? props.dataById : null
+    if (props.modal) {
+      data.value = props?.dataById
+    }
   }
 )
 </script>
@@ -43,10 +59,11 @@ watch(
   <q-dialog v-model="props.modal" persistent>
     <q-card :style="$q.screen.lt.sm ? 'width: 100%;' : 'width: 320px;'">
       <HeaderPopup :title="props.title" :clickClose="clickClosePopup" />
+
       <FormTime
-        :dataById="data"
-        :closePopup="clickClosePopup"
-        :fetchData="props.fetchData"
+        :data-byId="data"
+        :close-popup="clickClosePopup"
+        :fetch-data="props.fetchData"
       />
     </q-card>
   </q-dialog>