ปรับ รายการลงเวลาปฏิบัติงาน

src/modules/09_leave/components/1_Work/DialogDetail.vue

@@ -2,15 +2,21 @@
 import { ref, reactive, watch } from "vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { useQuasar } from "quasar";
 
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
+import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
 
 /** useStore */
 const mixin = useCounterMixin();
-const { date2Thai, showLoader, hideLoader } = mixin;
+const stores = useWorklistDataStore();
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
+const { convertSatatus } = stores;
+
+const $q = useQuasar(); //ใช้ noti quasar
 
 /** props จาก TableList */
 const props = defineProps({
@@ -22,7 +28,7 @@ const props = defineProps({
     type: Object,
     require: true,
   },
-  colse: {
+  close: {
     type: Function,
     require: true,
   },
@@ -63,9 +69,7 @@ async function fetchDetailByid(id: string) {
       formData.checkInImg = data.checkInImg;
       formData.checkInLat = data.checkInLat ? data.checkInLat : "";
       formData.checkInLon = data.checkInLon ? data.checkInLon : "";
-      formData.checkInLocation = data.checkInLocation
-        ? data.checkInLocation
-        : "-";
+      formData.checkInLocation = data.checkInPOI ? data.checkInPOI : "-";
       formData.checkInTime = data.checkInTime ? data.checkInTime : "-";
       formData.checkOutDate = data.checkOutDate && date2Thai(data.checkOutDate);
       formData.checkOutImg = data.checkOutImg;
@@ -76,27 +80,32 @@ async function fetchDetailByid(id: string) {
         : "-";
       formData.checkOutTime = data.checkOutTime ? data.checkOutTime : "-";
       formData.fullName = data.fullName;
-      formData.checkOutLocation = data.checkOutLocation
-        ? data.checkOutLocation
-        : "-";
+      formData.checkOutLocation = data.checkOutPOI ? data.checkOutPOI : "-";
       formData.checkInDescription = data.checkInDescription
         ? data.checkInDescription
         : "-";
       formData.checkOutDescription = data.checkOutDescription
         ? data.checkOutDescription
         : "-";
-      formData.checkInStatus = data.checkInStatus;
-      formData.checkOutStatus = data.checkOutStatus;
+      formData.checkInStatus = data.checkInStatus
+        ? convertSatatus(data.checkInStatus)
+        : "-";
+      formData.checkOutStatus = data.checkOutStatus
+        ? convertSatatus(data.checkOutStatus)
+        : "-";
+    })
+    .catch((err) => {
+      messageError($q, err);
+      closePopup();
     })
-    .catch((err) => {})
     .finally(() => {
       hideLoader();
     });
 }
 
 /** Function ปิด popup */
-function colsePopup() {
-  props.colse ? props.colse() : false;
+function closePopup() {
+  props.close ? props.close() : false;
 }
 
 watch(
@@ -122,7 +131,7 @@ watch(
           round
           dense
           style="color: #eb0505; background-color: #ffdede"
-          @click="colsePopup"
+          @click="closePopup"
         />
       </q-toolbar>
       <q-separator />
@@ -152,14 +161,26 @@ watch(
                   </q-item-section>
                 </q-item>
               </div>
-              <div class="col-3">
+              <div class="col-2">
                 <q-item>
                   <q-item-section>
-                    <q-item-label class="text-grey-8">สถานะ</q-item-label>
+                    <q-item-label class="text-grey-8"
+                      >สถานะเวลาเข้างาน
+                    </q-item-label>
                     <q-item-label>{{ formData.checkInStatus }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </div>
+              <div class="col-2">
+                <q-item>
+                  <q-item-section>
+                    <q-item-label class="text-grey-8"
+                      >สถานะเวลาออก</q-item-label
+                    >
+                    <q-item-label>{{ formData.checkOutStatus }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </div>
             </div>
           </q-card>
           <div class="row q-gutter-md q-pt-md">