feat: Image menu (#2182)

* Image support in the company * Minimal changes
solop-develop · Apr 25, 2024 · aef83c3 · aef83c3
1 parent a8b4a5e
commit aef83c3
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -11,6 +11,10 @@
 <script>
 // components and mixins
 import ModalIdle from '@/components/ADempiere/ModalIdle'
+// Utils and Helper Methods
+import { getResourcePath } from '@/utils/ADempiere/resource'
+// Constants
+import { config } from '@/utils/ADempiere/config'
 
 export default {
   name: 'App',
@@ -21,9 +25,38 @@ export default {
     },
     isSession() {
       return this.$store.getters['user/getIsSession']
+    },
+    getRole() {
+      return this.$store.getters['user/getRole']
+    },
+    getResourceName() {
+      return this.$store.getters['user/getRole'].client.logo
+    }
+  },
+  watch: {
+    getResourceName(value) {
+      this.loadImage()
     }
   },
-  mounted() {
+  async mounted() {
+    const { client } = this.getRole
+    if (client.logo) {
+      const fileName = await getResourcePath({
+        clientId: client.id,
+        containerId: '109',
+        containerType: 'window',
+        columnName: 'Logo_ID',
+        recordId: client.id,
+        tableName: 'AD_ClientInfo',
+        resourceName: client.logo
+      })
+      const link = document.createElement('link')
+      link.rel = 'shortcut icon'
+      link.type = 'image/x-icon'
+      link.href = config.adempiere.resource.url + fileName
+      document.head.appendChild(link)
+    }
+
     this.$nextTick(() => {
       window.addEventListener('resize', this.getWindowWidth)
       window.addEventListener('resize', this.getWindowHeight)
@@ -37,6 +70,25 @@ export default {
     window.removeEventListener('resize', this.getWindowHeight)
   },
   methods: {
+    async loadImage() {
+      const { client } = this.getRole
+      if (client.logo) {
+        const fileName = await getResourcePath({
+          clientId: client.id,
+          containerId: '109',
+          containerType: 'window',
+          columnName: 'Logo_ID',
+          recordId: client.id,
+          tableName: 'AD_ClientInfo',
+          resourceName: client.logo
+        })
+        const link = document.createElement('link')
+        link.rel = 'shortcut icon'
+        link.type = 'image/x-icon'
+        link.href = config.adempiere.resource.url + fileName
+        document.head.appendChild(link)
+      }
+    },
     getWindowWidth(event) {
       this.$store.dispatch('setWidth', document.documentElement.clientWidth)
     },

diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue
@@ -25,15 +25,17 @@
             {{ getRole.name }} | {{ getRole.client.name }} | {{ storedOrganization.name }}
           </div>
           <img v-if="clientLogo" :src="clientLogo" class="sidebar-logo" style="height: 50px;width: 50px;">
-          <svg-icon v-else icon-class="AD" class="standard-logo" />
+          <img v-else src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" 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="clientLogo" :src="clientLogo" class="sidebar-logo" style="height: 50px;width: 50px;" @click="dashboard()">
-          <svg-icon v-else icon-class="AD" class="standard-logo" />
+          <img v-else src="https://avatars1.githubusercontent.com/u/1263359?s=200&v=4" 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 }}
           </b>
@@ -49,6 +51,7 @@
 
 <script>
 import { defineComponent, computed, ref } from '@vue/composition-api'
+import { isEmptyValue } from '@/utils/ADempiere/valueUtils'
 
 import router from '@/router'
 import store from '@/store'
@@ -102,6 +105,10 @@ export default defineComponent({
           tableName: 'AD_ClientInfo',
           resourceName: client.logo
         })
+        if (isEmptyValue(fileName)) {
+          clientLogo.value = 'https://avatars1.githubusercontent.com/u/1263359?s=200&v=4'
+          return
+        }
         clientLogo.value = config.adempiere.resource.url + fileName
       }
     }

diff --git a/src/views/profile/components/RolesNavbar.vue b/src/views/profile/components/RolesNavbar.vue
@@ -168,6 +168,7 @@ export default {
       })
         .finally(() => {
           this.refreshRouter()
+          location.reload(true)
         })
     },
     changeOrganization(organizationId) {