refector code

src/components/FormTime.vue

@@ -1,24 +1,32 @@
 <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 } from '@/interface/index/Main'
+import type { FormRef, DataCheckIn } from '@/interface/index/Main'
 import type { FormTimeStemp } from '@/interface/response/checkin'
 
-// importStores
-import { useCounterMixin } from '@/stores/mixin'
-// importType
-
 const $q = useQuasar()
-const mixin = useCounterMixin()
-const { date2Thai, success, dialogConfirm, showLoader, hideLoader } = mixin
+const {
+  date2Thai,
+  success,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+} = useCounterMixin()
 
+/**
+ * props  จาก components Popup
+ */
 const props = defineProps({
   dataById: {
-    type: Object,
+    type: Object as PropType<DataCheckIn>,
     default: null,
   },
   closePopup: {
@@ -34,16 +42,25 @@ const props = defineProps({
   },
 })
 
-const dataByIdVal = ref<any>([])
-const date = ref<Date | string>(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 dataByIdVal = ref<DataCheckIn>() //ข้อมูลประวัติการลงเวลา
+const date = ref<Date | string>(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')
@@ -51,16 +68,9 @@ function updateClock() {
   timeNoew.value = `${hh}:${mm} น.`
 }
 
-const dateRef = ref<object | null>(null)
-const reasonRef = ref<object | null>(null)
-
-const objectRef: FormRef = {
-  date: dateRef,
-  reason: reasonRef,
-}
-const checkstatusBox = ref<boolean>(false)
-
-/** function checkValidate*/
+/**
+ * function checkValidate
+ */
 function onCkickSave() {
   const hasError = []
   for (const key in objectRef) {
@@ -81,12 +91,13 @@ function onCkickSave() {
     )
   ) {
     dialogConfirm($q, async () => {
-      const data: FormTimeStemp = await {
+      const data: FormTimeStemp = {
         checkDate: date.value,
         checkInEdit: checkboxIn.value,
         checkOutEdit: checkboxOut.value,
         description: reason.value,
       }
+
       createListTime(data)
     })
   }
@@ -100,20 +111,37 @@ async function createListTime(data: FormTimeStemp) {
   showLoader()
   await http
     .post(config.API.createTimeStamp(), data)
-    .then(() => {
-      success($q, 'บันทึกข้อมูลสำเร็จ')
+    .then(async () => {
+      // เรียก function fetch รายการประวัติการลงเวลา
+      await props.fetchData()
+      await success($q, 'บันทึกข้อมูลสำเร็จ')
+      props.closePopup?.()
     })
     .catch((err) => {
-      console.log(err)
+      messageError($q, err)
     })
     .finally(() => {
-      props.closePopup?.()
       hideLoader()
-      props.fetchData()
     })
 }
 
-/** Hook */
+/**
+ *  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
@@ -126,17 +154,6 @@ onMounted(() => {
     )
   }
 })
-
-watch(
-  [() => checkboxIn.value, () => checkboxOut.value],
-  ([newCheckboxIn, newCheckboxOut]) => {
-    if (checkstatusBox.value) {
-      if (newCheckboxIn || newCheckboxOut) {
-        checkstatusBox.value = false
-      }
-    }
-  }
-)
 </script>
 <template>
   <div class="col-12 row">
@@ -149,7 +166,7 @@ watch(
         <q-card-section class="bg-primary text-white q-pa-sm">
           <div class="text-center text-bold">เวลาปัจจุบัน</div>
         </q-card-section>
-        <!-- <div class="q-pa-sm text-primary">เวลาปัจจุบัน</div> -->
+
         <q-card-section class="text-center q-pa-sm">
           <div class="row q-gutter-md">
             <div class="col">{{ date2Thai(dateNow) }}</div>
@@ -187,7 +204,7 @@ watch(
                 :label="`${'วันที่ขอแก้ไข'}`"
                 format-header="YYYY-MM-DD"
                 lazy-rules
-                :rules="[(val) => !!val || 'กรุณาเลือกวันที่']"
+                :rules="[(val:string) => !!val || 'กรุณาเลือกวันที่']"
                 hide-bottom-space
               >
                 <template v-slot:prepend>
@@ -203,15 +220,6 @@ watch(
         </div>
       </q-card>
 
-      <!-- <q-card flat bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm" v-else>
-      <div class="row q-gutter-md text-grey-5">
-        <div class="col-1">
-          <q-icon color="grey-5" name="calendar_today" />
-        </div>
-        <div class="col">{{ dataByIdVal.checkInDate }}</div>
-      </div>
-    </q-card> -->
-
       <q-card
         flat
         bordered
@@ -259,7 +267,7 @@ watch(
           type="textarea"
           :rows="4"
           label-color="grey-5"
-          :rules="[(val) => !!val || 'กรุณากรอกเหตุผล']"
+          :rules="[(val:string) => !!val || 'กรุณากรอกเหตุผล']"
           lazy-rules
           hide-bottom-space
           class="custom-aqua-border"