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

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>

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

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { loadModules } from "esri-loader";
+
+const apiKey = ref<string>(
+  "AAPK4f700a4324d04e9f8a1a134e0771ac45FXWawdCl-OotFfr52gz9XKxTDJTpDzw_YYcwbmKDDyAJswf14FoPyw0qBkN64DvP"
+);
+const props = defineProps({
+  modal: {
+    type: Boolean,
+  },
+  title: {
+    type: String,
+  },
+  close: {
+    type: Function,
+  },
+  data: {
+    type: Object,
+  },
+});
+
+const isLoadMap = ref<boolean>(false);
+async function initializeMap(lat: number, long: number) {
+  isLoadMap.value = false;
+  try {
+    // Load modules of ArcGIS
+    const [esriConfig, Map, MapView, Point, Graphic] = await loadModules([
+      "esri/config",
+      "esri/Map",
+      "esri/views/MapView",
+      "esri/geometry/Point",
+      "esri/Graphic",
+    ]);
+    // Set apiKey
+    esriConfig.apiKey = apiKey.value;
+    const map = new Map({
+      basemap: "arcgis-topographic",
+    });
+
+    const point = new Point({
+      type: "point",
+      longitude: long,
+      latitude: lat,
+    });
+
+    const mapView = new MapView({
+      container: "mapViewDisplay",
+      map: map,
+      center: {
+        latitude: lat,
+        longitude: long,
+      }, // Set the initial map center current position
+      zoom: 16,
+      ui: {
+        components: [], // Empty array to remove all default UI components
+      },
+    });
+
+    // Pin icon
+    const pinSymbol = {
+      type: "picture-marker",
+      url: "http://maps.google.com/mapfiles/ms/icons/red.png",
+      width: "32px",
+      height: "32px",
+    };
+
+    // Create a graphic using the point and symbol
+    const pointGraphic = new Graphic({
+      geometry: point,
+      symbol: pinSymbol,
+    });
+    mapView.graphics.add(pointGraphic);
+    setTimeout(() => {
+      isLoadMap.value = true;
+    }, 1500);
+  } catch (error) {
+    console.error("Error loading the map", error);
+  }
+}
+
+watch(
+  () => props.modal,
+  () => {
+    const lat =
+      props.title === "พิกัดสถานที่เข้างาน"
+        ? props.data?.checkInLat
+        : props.data?.checkOutLat;
+    const long =
+      props.title === "พิกัดสถานที่เข้างาน"
+        ? props.data?.checkInLon
+        : props.data?.checkOutLon;
+
+    props.modal && initializeMap(lat, long);
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="props.modal">
+    <q-card style="width: 950px; max-width: 80vw; height: auto">
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle1 text-weight-bold">
+          <span style="margin-right: 0"> {{ props.title }}</span>
+        </q-toolbar-title>
+        <q-btn
+          for="closeDialog"
+          icon="close"
+          unelevated
+          round
+          dense
+          @click="props.close"
+          style="color: #eb0505; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator />
+      <q-card flat bordered>
+        <div id="mapViewDisplay" style="height: 45vh" v-show="isLoadMap"></div>
+        <q-skeleton height="45vh" square v-if="!isLoadMap" />
+      </q-card> </q-card
+  ></q-dialog>
+</template>
+
+<style scoped></style>