updated

src/views/HomeView.vue

@@ -19,6 +19,8 @@ const $q = useQuasar()
 const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
 const stetusCheckin = ref<boolean>(true) // สถานะเวลา เข้า,ออก
 
+const msgCheckTime = ref<string>('') // ข้อความแจ้งเตือน
+const isDisabledCheckTime = ref<boolean>(false) // ข้อความแจ้งเตือน
 /**
  * fetch เช็คเวลาต้องลงเวลาเข้าหรือออกงาน
  */
@@ -32,7 +34,10 @@ async function fetchCheckTime() {
       checkInId.value = data.checkInId ? data.checkInId : ''
     })
     .catch((err) => {
-      messageError($q, err)
+      if (err.response.status === 500) {
+        isDisabledCheckTime.value = true
+        msgCheckTime.value = err.response.data.message
+      } else messageError($q, err)
     })
     .finally(() => {
       hideLoader()
@@ -225,13 +230,14 @@ async function confirm() {
         dateObject
       )
       timeChickin.value = timeString
-      modalTime.value = true
+      setTimeout(() => {
+        modalTime.value = true
+        hideLoader()
+      }, 2000)
     })
     .catch((err) => {
-      messageError($q, err)
-    })
-    .finally(() => {
       hideLoader()
+      messageError($q, err)
     })
 }
 
@@ -239,7 +245,13 @@ async function confirm() {
  * ปิด popup แสดงการลงเวลา
  */
 async function onClickConfirm() {
-  await fetchCheckTime()
+  showLoader()
+  setTimeout(async () => {
+    if (!stetusCheckin.value) {
+      stetusCheckin.value = true
+    }
+    await fetchCheckTime()
+  }, 2000)
   cameraIsOn.value = false
   img.value = undefined
   modalTime.value = false
@@ -318,7 +330,7 @@ onMounted(async () => {
                   <div
                     v-if="!cameraIsOn && img == null"
                     class="preview-placeholder"
-                    @click="openCamera()"
+                    @click="() => !isDisabledCheckTime && openCamera()"
                   >
                     <div class="text-center">
                       <q-icon
@@ -370,7 +382,10 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-              <div class="col-xs-12 col-sm-12 items-center">
+              <div
+                v-if="!isDisabledCheckTime"
+                class="col-xs-12 col-sm-12 items-center"
+              >
                 <q-card
                   bordered
                   flat
@@ -441,7 +456,7 @@ onMounted(async () => {
                 </q-card>
               </div>
 
-              <div class="col-xs-12 col-sm-12">
+              <div v-if="!isDisabledCheckTime" class="col-xs-12 col-sm-12">
                 <q-card
                   bordered
                   flat
@@ -460,7 +475,7 @@ onMounted(async () => {
             </div>
           </div>
 
-          <div class="col-12 text-right">
+          <div v-if="!isDisabledCheckTime" class="col-12 text-right">
             <q-separator />
             <div class="col-12 q-pa-md">
               <p
@@ -485,6 +500,11 @@ onMounted(async () => {
               />
             </div>
           </div>
+
+          <div v-else class="col-12">
+            <q-separator />
+            <div class="text-red q-pa-md">*{{ msgCheckTime }}</div>
+          </div>
         </div>
       </q-card>
     </div>