เพิ่มแสดง (พิกัดสถานที่เข้างาน, พิกัดสถานที่ออกงาน)

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

@@ -7,6 +7,9 @@ import { useQuasar } from "quasar";
 /** import Type*/
 import type { FormDetail } from "@/modules/09_leave/interface/response/work";
 
+/** importComponents*/
+import Map from "@/modules/09_leave/components/1_Work/DialogMap.vue";
+
 /** importStores */
 import { useCounterMixin } from "@/stores/mixin";
 import { useWorklistDataStore } from "@/modules/09_leave/stores/WorkStore";
@@ -122,6 +125,13 @@ function closePopup() {
   props.close ? props.close() : false;
 }
 
+const modalMap = ref<boolean>(false);
+const titleMap = ref<string>("");
+function onClickMap(title: string) {
+  titleMap.value = title;
+  modalMap.value = !modalMap.value;
+}
+
 watch(
   () => props.modal,
   () => {
@@ -222,6 +232,15 @@ watch(
                       {{ formData.checkInLocation }}
                       <div class="text-grey-6" v-if="formData.checkInLat">
                         ({{ formData.checkInLat }}, {{ formData.checkInLon }})
+                        <q-btn
+                          flat
+                          round
+                          dense
+                          color="primary"
+                          icon="map"
+                          @click="onClickMap('พิกัดสถานที่เข้างาน')"
+                          ><q-tooltip>พิกัดสถานที่เข้างาน</q-tooltip>
+                        </q-btn>
                       </div>
                     </div>
                   </div>
@@ -276,7 +295,16 @@ watch(
                     <div class="col">
                       {{ formData.checkOutLocation }}
                       <div class="text-grey-6" v-if="formData.checkOutLat">
-                        ({{ formData.checkOutLat }}, {{ formData.checkOutLon }})
+                        ({{ formData.checkOutLat }},
+                        {{ formData.checkOutLon }})<q-btn
+                          flat
+                          round
+                          dense
+                          color="primary"
+                          icon="map"
+                          @click="onClickMap('พิกัดสถานที่ออกงาน')"
+                          ><q-tooltip>พิกัดสถานที่ออกงาน</q-tooltip>
+                        </q-btn>
                       </div>
                     </div>
                   </div>
@@ -319,6 +347,13 @@ watch(
       </q-card-actions>
     </q-card>
   </q-dialog>
+
+  <Map
+    :modal="modalMap"
+    :title="titleMap"
+    :close="onClickMap"
+    :data="props.detail"
+  />
 </template>
 
 <style scoped></style>