Merge branch 'dev' of https://192.168.1.60/hrms-bangkok/hrms-checkin into dev

src/components/AscGISMap.vue

@@ -4,9 +4,11 @@ import { loadModules } from 'esri-loader'
 import axios from 'axios'
 import { useCounterMixin } from '@/stores/mixin'
 import { useQuasar } from 'quasar'
+import { usePrivacyStore } from '@/stores/privacy'
 
 const mixin = useCounterMixin()
 const { messageError } = mixin
+const privacyStore = usePrivacyStore()
 
 // import type { LocationObject } from '@/interface/index/Main'
 const mapElement = ref<HTMLElement | null>(null)
@@ -200,6 +202,16 @@ async function initializeMap() {
 const locationGranted = ref(false)
 // Function to request location permission
 const requestLocationPermission = () => {
+  // เช็คสิทธิ์ privacy ก่อนเข้าถึงแผนที่
+  if (!privacyStore.isAccepted) {
+    $q.notify({
+      type: 'warning',
+      message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
+      position: 'top',
+    })
+    return
+  }
+
   if (!navigator.geolocation) {
     messageError(
       $q,
@@ -261,7 +273,10 @@ defineExpose({
 })
 
 onMounted(async () => {
-  await initializeMap()
+  // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
+  if (privacyStore.isAccepted) {
+    await initializeMap()
+  }
 })
 </script>
 

src/components/PopupPrivacy.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { ref, computed } from 'vue'
+import { ref, computed, nextTick } from 'vue'
+import { useQuasar } from 'quasar'
 import http from '@/plugins/http'
 import config from '@/app.config'
+import { usePrivacyStore } from '@/stores/privacy'
+
+const $q = useQuasar()
+const privacyStore = usePrivacyStore()
 
 const modal = defineModel<boolean>('modal', {
   required: true,
@@ -19,7 +24,7 @@ const privacyContent = {
     title: 'วัตถุประสงค์การใช้ข้อมูล',
     items: [
       'เพื่อยืนยันตัวตนของผู้ปฏิบัติงานในการบันทึกเวลาเข้า-ออกการปฏิบัติราชการ',
-      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแหน และการกำกับ ดูแลการปฏิบัติราชการ',
+      'เพื่อใช้เป็นหลักฐานประกอบการบริหารงานด้านทรัพยากรบุคคล การจ่ายค่าตอบแทน และการกำกับ ดูแลการปฏิบัติราชการ',
       'เพื่อรักษาความถูกต้อง โปร่งใส และป้องกันการทุจริตในการบันทึกเวลาการปฏิบัติงาน',
     ],
   },
@@ -48,6 +53,7 @@ const privacyContent = {
   },
 }
 
+const scrollContainer = ref<HTMLElement | null>(null)
 const hasScrolledToBottom = ref(false)
 const acceptPrivacy = ref(false)
 const showDetails = ref(false)
@@ -55,6 +61,7 @@ const isAcceptDisabled = computed(() => !acceptPrivacy.value)
 
 const handleScroll = (event: Event) => {
   const target = event.target as HTMLElement
+
   if (!target) return
 
   const { scrollTop, scrollHeight, clientHeight } = target
@@ -70,15 +77,27 @@ const handleAccept = async () => {
       system: 'checkin',
       accept: true,
     })
+    privacyStore.setAccepted(true)
+    modal.value = false
   } catch (error) {}
 }
 
-const handleDecline = () => {
-  modal.value = false
-}
-
 const toggleDetails = () => {
   showDetails.value = !showDetails.value
+  checkIfScrollable()
+}
+
+const checkIfScrollable = () => {
+  nextTick(() => {
+    const container = scrollContainer.value?.$el || scrollContainer.value
+    if (container) {
+      const { scrollHeight, clientHeight } = container
+
+      if (scrollHeight <= clientHeight + 20) {
+        hasScrolledToBottom.value = true
+      }
+    }
+  })
 }
 </script>
 
@@ -103,7 +122,6 @@ const toggleDetails = () => {
           dense
           class="absolute-top-right q-ma-sm"
           v-close-popup
-          @click="handleDecline"
         />
       </q-card-section>
 
@@ -237,7 +255,6 @@ const toggleDetails = () => {
           unelevated
           no-caps
           class="action-btn"
-          @click="handleDecline"
           v-close-popup
         />
       </q-card-actions>

src/composables/usePermissions.ts

@@ -0,0 +1,52 @@
+import { useQuasar } from 'quasar'
+import { usePrivacyStore } from '@/stores/privacy'
+
+export function usePermissions() {
+  const $q = useQuasar()
+  const privacyStore = usePrivacyStore()
+
+  // const checkCameraPermission = (): boolean => {
+  //   if (!privacyStore.isAccepted) {
+  //     privacyStore.modalPrivacy = true
+  //     $q.notify({
+  //       type: 'warning',
+  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานกล้อง',
+  //       position: 'top',
+  //     })
+  //     return false
+  //   }
+  //   return true
+  // }
+
+  // const checkLocationPermission = (): boolean => {
+  //   if (!privacyStore.isAccepted) {
+  //     privacyStore.modalPrivacy = true
+  //     $q.notify({
+  //       type: 'warning',
+  //       message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งานแผนที่',
+  //       position: 'top',
+  //     })
+  //     return false
+  //   }
+  //   return true
+  // }
+
+  const checkPrivacyAccepted = (): boolean => {
+    if (!privacyStore.isAccepted) {
+      privacyStore.modalPrivacy = true
+      $q.notify({
+        type: 'warning',
+        message: 'กรุณายอมรับนโยบายคุ้มครองข้อมูลส่วนบุคคลก่อนใช้งาน',
+        position: 'top',
+      })
+      return false
+    }
+    return true
+  }
+
+  return {
+    // checkCameraPermission,
+    // checkLocationPermission,
+    checkPrivacyAccepted,
+  }
+}

src/stores/privacy.ts

@@ -0,0 +1,22 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const usePrivacyStore = defineStore('privacy', () => {
+  const modalPrivacy = ref<boolean>(false)
+  const isAccepted = ref<boolean>(false)
+
+  const setAccepted = (value: boolean) => {
+    isAccepted.value = value
+  }
+
+  const reset = () => {
+    isAccepted.value = false
+  }
+
+  return {
+    modalPrivacy,
+    isAccepted,
+    setAccepted,
+    reset,
+  }
+})

src/views/HomeView.vue

@@ -7,6 +7,8 @@ import Camera from 'simple-vue-camera'
 import config from '@/app.config'
 import http from '@/plugins/http'
 import { useCounterMixin } from '@/stores/mixin'
+import { usePermissions } from '@/composables/usePermissions'
+import { usePrivacyStore } from '@/stores/privacy'
 
 import type { FormRef, OptionReason } from '@/interface/response/checkin'
 
@@ -15,6 +17,8 @@ import MapCheck from '@/components/AscGISMap.vue'
 const mixin = useCounterMixin()
 const { date2Thai, showLoader, hideLoader, messageError, dialogConfirm } = mixin
 const $q = useQuasar()
+const { checkPrivacyAccepted } = usePermissions()
+const privacyStore = usePrivacyStore()
 
 const modalTime = ref<boolean>(false) // Dailog ลงเวลาเข้างานของคุณ
 const checkStatus = ref<string>('')
@@ -261,6 +265,11 @@ async function stopChecking() {
 
 /** function เปิดกล้อง*/
 async function openCamera() {
+  // เช็คสิทธิ์ privacy ก่อนเปิดกล้อง
+  if (!checkPrivacyAccepted()) {
+    return
+  }
+
   // change camera device
   if (cameraIsOn.value) {
     await camera.value?.stop()
@@ -336,6 +345,11 @@ const timeChickin = ref<string>('') //เวลาเข้างาน,เว
 
 /** function ยืนยันการลงเวลาเข้า - ออก*/
 async function confirm() {
+  // เช็คสิทธิ์ privacy ก่อนใช้งานแผนที่และกล้อง
+  if (!checkPrivacyAccepted()) {
+    return
+  }
+
   if (!formLocation.POI || !formLocation.lat || !formLocation.lng) {
     mapRef.value?.requestLocationPermission()
     return
@@ -473,7 +487,11 @@ onMounted(async () => {
   isLoadingCheckTime.value = true
   updateClock()
   startChecking() //เช็ค status จาก คิว #1
-  mapRef.value?.requestLocationPermission()
+
+  // เรียกแผนที่เฉพาะเมื่อยอมรับ privacy แล้ว
+  if (privacyStore.isAccepted) {
+    mapRef.value?.requestLocationPermission()
+  }
 })
 </script>
 

src/views/MainView.vue

@@ -8,6 +8,7 @@ import config from '@/app.config'
 import avatar from '@/assets/avatar_user.jpg'
 import { logout, tokenParsed, getCookie } from '@/plugins/auth'
 import { useCounterMixin } from '@/stores/mixin'
+import { usePrivacyStore } from '@/stores/privacy'
 
 import type { notiType } from '@/interface/index/Main'
 import type { Noti } from '@/interface/response/Main'
@@ -16,6 +17,7 @@ import DialogHeader from '@/components/DialogHeader.vue'
 import PopupPrivacy from '@/components/PopupPrivacy.vue'
 
 const mixin = useCounterMixin()
+const privacyStore = usePrivacyStore()
 const {
   date2Thai,
   hideLoader,
@@ -56,8 +58,6 @@ const isPwdOld = ref<boolean>(true)
 const isPwdNewOld = ref<boolean>(true)
 const isPwdReNewOld = ref<boolean>(true)
 
-const modalPrivacy = ref<boolean>(false)
-
 /**
  *  ฟังก์ชั่นดึงข้อมูลจำนวนการแจ้งเตือน
  */
@@ -173,7 +173,7 @@ async function fetchKeycloakPosition() {
     .get(config.API.keycloakPosition())
     .then(async (res) => {
       const data = await res.data.result
-      modalPrivacy.value = !data.privacyCheckin ? true : false
+      privacyStore.modalPrivacy = !data.privacyCheckin ? true : false
       //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
       if (data.avatarName) {
         await getImg(data.profileId, data.avatarName)
@@ -606,7 +606,7 @@ onMounted(async () => {
     </q-card>
   </q-dialog>
 
-  <popup-privacy v-model:modal="modalPrivacy" />
+  <popup-privacy v-model:modal="privacyStore.modalPrivacy" />
 </template>
 
 <style>