fixed image profile to store

src/stores/positionKeycloak.ts

@@ -11,16 +11,26 @@ export const usePositionKeycloakStore = defineStore(
       'รายการลงเวลากรณีพิเศษ',
     ])
     const dataPositionKeycloak = ref<KeycloakPosition | null>(null)
+    const profileImg = ref<string>('')
 
     function setPositionKeycloak(data: KeycloakPosition) {
       dataPositionKeycloak.value = data
     }
 
+    /**
+     * ตั้งค่ารูปโปรไฟล์ผู้ใช้งาน
+     * @param url URL ของรูปโปรไฟล์
+     */
+    function setProfileImg(url: string) {
+      profileImg.value = url
+    }
+
     /**
      * ล้างข้อมูล Keycloak position (ใช้เมื่อ logout)
      */
     function clearPositionKeycloak() {
       dataPositionKeycloak.value = null
+      profileImg.value = ''
       // ลบ localStorage ด้วยเพื่อให้แน่ใจว่าข้อมูลหายจริง
       localStorage.removeItem('positionKeycloak')
     }
@@ -52,7 +62,9 @@ export const usePositionKeycloakStore = defineStore(
     return {
       setPositionKeycloak,
       clearPositionKeycloak,
+      setProfileImg,
       dataPositionKeycloak,
+      profileImg,
       findOrgName,
       menuData,
     }

src/views/MainView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useQuasar } from 'quasar'
 import { useRouter } from 'vue-router'
 
@@ -185,12 +185,6 @@ async function fetchKeycloakPosition() {
     privacyStore.modalPrivacy = !existingData.privacyCheckin
     privacyStore.setAccepted(existingData.privacyCheckin)
 
-    //เช็คว่ามีรูปไหม ถ้ามีรูปเรียกข้อมูลรูป
-    if (existingData.avatarName) {
-      getImg(existingData.profileId, existingData.avatarName)
-    } else {
-      profileImg.value = avatar
-    }
     return
   }
 
@@ -222,7 +216,7 @@ async function fetchKeycloakPosition() {
       if (keycloakData.avatarName) {
         getImg(keycloakData.profileId, keycloakData.avatarName)
       } else {
-        profileImg.value = avatar
+        positionKeycloakStore.setProfileImg(avatar)
       }
     })
     .catch((err) => {
@@ -230,12 +224,15 @@ async function fetchKeycloakPosition() {
     })
 }
 
-const profileImg = ref<string>('')
+const profileImg = computed({
+  get: () => positionKeycloakStore.profileImg,
+  set: (value) => positionKeycloakStore.setProfileImg(value),
+})
 function getImg(id: string, pathName: string) {
   http
     .get(config.API.fileByFile('ทะเบียนประวัติ', 'โปรไฟล์', id, pathName))
     .then((res) => {
-      profileImg.value = res.data.downloadUrl
+      positionKeycloakStore.setProfileImg(res.data.downloadUrl)
     })
 }