fix: User profile logo.

EdwinBetanc0urt · Apr 9, 2024 · e9289b7 · e9289b7
1 parent 0cb5b1d
commit e9289b7
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 35 deletions.
diff --git a/src/layout/components/ProfilePreview.vue b/src/layout/components/ProfilePreview.vue
@@ -36,8 +36,11 @@ import store from '@/store'
 // Components and Mixins
 import RolesNavbar from '@/views/profile/components/RolesNavbar'
 
+// Constants
+import { config } from '@/utils/ADempiere/config'
+
 // Utils and Helper Methods
-import { getImagePath } from '@/utils/ADempiere/resource.js'
+// import { getImagePath } from '@/utils/ADempiere/resource.js'
 
 export default defineComponent({
   name: 'ProfilePreview',
@@ -72,6 +75,10 @@ export default defineComponent({
       return store.getters['user/userInfo']
     })
 
+    const userAvatar = computed(() => {
+      return store.getters['user/getUserAvatar']
+    })
+
     const userName = computed(() => {
       if (userInfo.value) return userInfo.value.name
       return ''
@@ -86,14 +93,15 @@ export default defineComponent({
     avatarResize.value = require('@/image/ADempiere/avatar/no-avatar.png')
 
     async function loadImage() {
-      const { image } = userInfo.value
-      if (image) {
-        const blobImage = await getImagePath({
-          file: image,
-          width: 200,
-          height: 200
-        })
-        avatarResize.value = blobImage.href
+      // const { image } = userInfo.value
+      if (userAvatar.value) {
+        // const blobImage = await getImagePath({
+        //   file: image,
+        //   width: 200,
+        //   height: 200
+        // })
+        // avatarResize.value = blobImage.href
+        avatarResize.value = config.adempiere.resource.url + userAvatar.value
       }
     }
 

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
@@ -24,15 +24,15 @@
           <div slot="content">
             {{ getRole.name }} | {{ getRole.client.name }} | {{ storedOrganization.name }}
           </div>
-          <img v-if="logo" :src="logo" class="sidebar-logo" style="height: 50px;width: 50px;">
+          <img v-if="clientLogo" :src="clientLogo" class="sidebar-logo" style="height: 50px;width: 50px;">
           <svg-icon v-else icon-class="AD" class="standard-logo" />
           <b style="margin-left: 5px;">{{ title }}</b>
         </el-tooltip>
       </router-link>
 
       <span v-else>
         <p key="expand" style="display: flex;text-align: center;width: 100%;padding: 0px 15px;margin-top: 0px;">
-          <img v-if="logo" :src="logo" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
+          <img v-if="clientLogo" :src="clientLogo" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
           <svg-icon v-else icon-class="AD" class="standard-logo" />
           <b style="color: white;font-size: 18px;padding-top: 15px;cursor: pointer; margin-left: 5px;" @click="dashboard()">
             {{ systemName }}
@@ -54,7 +54,10 @@ import router from '@/router'
 import store from '@/store'
 
 // Utils and Helper Methods
-import { getImagePath } from '@/utils/ADempiere/resource.js'
+// import { getImagePath } from '@/utils/ADempiere/resource.js'
+
+// Constants
+import { config } from '@/utils/ADempiere/config'
 
 export default defineComponent({
   name: 'SidebarLogo',
@@ -69,7 +72,8 @@ export default defineComponent({
   setup() {
     // Ref
     const title = ref('ADempiere')
-    const logo = ref('')
+    const clientLogo = ref('')
+
     // Computed
     const getRole = computed(() => {
       return store.getters['user/getRole']
@@ -89,12 +93,13 @@ export default defineComponent({
     async function loadImage() {
       const { client } = getRole.value
       if (client.logo) {
-        const blobImage = await getImagePath({
-          file: client.logo,
-          width: 50,
-          height: 50
-        })
-        logo.value = blobImage.href
+        // const blobImage = await getImagePath({
+        //   file: client.logo,
+        //   width: 50,
+        //   height: 50
+        // })
+        // logo.value = blobImage.href
+        clientLogo.value = config.adempiere.resource.url + client.logo
       }
     }
 
@@ -115,7 +120,7 @@ export default defineComponent({
     return {
       // Ref
       title,
-      logo,
+      clientLogo,
       // Computed
       getRole,
       systemName,

diff --git a/src/store/modules/user.js b/src/store/modules/user.js
@@ -19,7 +19,7 @@
 import language from '@/lang'
 
 // Constants
-import { ORGANIZATION, WAREHOUSE } from '@/utils/ADempiere/constants/systemColumns'
+import { CLIENT, ORGANIZATION, WAREHOUSE } from '@/utils/ADempiere/constants/systemColumns'
 import { title } from '@/settings'
 
 // API Request Methods
@@ -215,8 +215,15 @@ const actions = {
           commit('SET_NAME', name)
           commit('SET_USER', userInfo)
           commit('SET_USER_ID', userInfo.id)
+
           const avatar = userInfo.image
-          commit('SET_AVATAR', avatar)
+          if (!isEmptyValue(avatar)) {
+            // 108=window User
+            // 11/client/window/108/ad_user/101/logo_id/2024-04-0811-55.png
+            const clientId = defaultContext[`#${CLIENT}`]
+            const newLogoPath = `${clientId}/client/window/108/ad_user/${userInfo.id}/logo_id/${userInfo.image}`
+            commit('SET_AVATAR', newLogoPath)
+          }
 
           // TODO: Check decimals Number as String '0.123'
           // set multiple context
@@ -777,6 +784,9 @@ const getters = {
   userInfo: (state) => {
     return state.userInfo
   },
+  getUserAvatar: (state) => {
+    return state.avatar
+  },
   // TODO: Manage with vuex module to personal lock
   getIsPersonalLock: (state) => {
     return state.role.isPersonalLock

diff --git a/src/views/profile/components/UserCard.vue b/src/views/profile/components/UserCard.vue
@@ -38,14 +38,24 @@
 </template>
 
 <script>
-import PanThumb from '@/components/PanThumb'
-import { getImagePath, buildLinkHref } from '@/utils/ADempiere/resource.js'
 import { defineComponent, computed, ref } from '@vue/composition-api'
+
 import store from '@/store'
+
+// Components and Mixins
+import PanThumb from '@/components/PanThumb'
+
+// Constants
+import { config } from '@/utils/ADempiere/config'
+
+// Utils and Helper Methods
+// import { getImagePath } from '@/utils/ADempiere/resource.js'
+
 export default defineComponent({
   components: {
     PanThumb
   },
+
   props: {
     user: {
       type: Object,
@@ -59,6 +69,7 @@ export default defineComponent({
       }
     }
   },
+
   setup() {
     const currentRole = computed(() => {
       return store.getters['user/getRole']
@@ -74,17 +85,22 @@ export default defineComponent({
 
     const avatarResize = ref('')
 
+    const userAvatar = computed(() => {
+      return store.getters['user/getUserAvatar']
+    })
+
     avatarResize.value = require('@/image/ADempiere/avatar/no-avatar.png')
 
     async function loadImage() {
-      const { image } = userInfo.value
-      if (image) {
-        const blobImage = await getImagePath({
-          file: image,
-          width: 200,
-          height: 200
-        })
-        avatarResize.value = blobImage.href
+      // const { image } = userInfo.value
+      if (userAvatar.value) {
+        // const blobImage = await getImagePath({
+        //   file: image,
+        //   width: 200,
+        //   height: 200
+        // })
+        // avatarResize.value = blobImage.href
+        avatarResize.value = config.adempiere.resource.url + userAvatar.value
       }
     }
 
@@ -98,9 +114,8 @@ export default defineComponent({
       rolesList,
       userInfo,
       // Methods
-      loadImage,
-      getImagePath,
-      buildLinkHref
+      // getImagePath,
+      loadImage
     }
   }
 })