Improved: user card so as to allow user jump directly to the details page (#91)

.env.example

@@ -4,4 +4,6 @@ VUE_APP_I18N_FALLBACK_LOCALE=en
 VUE_APP_LOCALES={"en": "English", "ja": "日本語", "es": "Español"}
 VUE_APP_CURRENCY_FORMATS={"en": {"currency": {"style": "currency","currency": "USD"}}, "ja": {"currency": {"style": "currency", "currency": "JPY"}}, "es": {"currency": {"style": "currency","currency": "ESP"}}}
 VUE_APP_DEFAULT_ALIAS=
-VUE_APP_MAARG_LOGIN=["atp", "company", "order-routing", "inventorycount-dev", "inventorycount-uat"]
+VUE_APP_MAARG_LOGIN=["atp", "company", "order-routing", "inventorycount-dev", "inventorycount-uat"]
+VUE_APP_USERS_LOGIN_URL="http://users.hotwax.io/login"
+VUE_APP_RESOURCE_URL=

src/components/Image.vue

@@ -0,0 +1,74 @@
+<template>
+  <img :src="imageUrl"/>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useAuthStore } from '@/store/auth';
+
+export default defineComponent({
+  name: "Image",
+  props: ['src'],
+  components: {},
+  created() {
+    if (
+      process.env.VUE_APP_RESOURCE_URL
+    ) {
+      this.resourceUrl = process.env.VUE_APP_RESOURCE_URL;
+    } else {
+      const authStore = useAuthStore();
+      const baseURL = authStore.getBaseUrl
+      this.resourceUrl = baseURL.replace("/api", "")
+    }
+  },
+  mounted() {
+    this.setImageUrl();
+  },
+  updated() {
+    this.setImageUrl();
+  },
+  data() {
+    return {
+      resourceUrl: '',
+      imageUrl: require("@/assets/images/defaultImage.png")
+    }
+  },
+  methods: {
+    checkIfImageExists(src: string) {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = function () {
+          resolve(true);
+        }
+        img.onerror = function (error) {
+          reject(false);
+        }
+        img.src = src;
+      })
+    },
+    setImageUrl() {
+      if (this.src) {
+        if (this.src.indexOf('assets/') != -1) {
+          // Assign directly in case of assets
+          this.imageUrl = this.src;
+        } else if (this.src.startsWith('http')) {
+          // If starts with http, it is web url check for existence and assign
+          this.checkIfImageExists(this.src).then(() => {
+            this.imageUrl = this.src;
+          }).catch(() => {
+            console.error("Image doesn't exist", this.src);
+          })
+        } else {
+          // Image is from resource server, hence append to base resource url, check for existence and assign
+          const imageUrl = this.resourceUrl.concat(this.src)
+          this.checkIfImageExists(imageUrl).then(() => {
+            this.imageUrl = imageUrl;
+          }).catch(() => {
+            console.error("Image doesn't exist", imageUrl);
+          })
+        }
+      }
+    }
+  },
+});
+</script>

src/components/UserActionsPopover.vue

@@ -0,0 +1,65 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>{{ authStore.current?.partyName ? authStore.current?.partyName : authStore.current.userLoginId }}</ion-list-header>
+
+      <ion-item button @click="redirectToUserDetails()">
+        <ion-label>{{ translate("View profile") }}</ion-label>
+        <ion-icon :icon="personCircleOutline" />
+      </ion-item>
+      <ion-item button lines="none"  @click="logout()">
+        <ion-label color="danger">{{ translate("Logout") }}</ion-label>
+        <ion-icon :icon="exitOutline" color="danger"/>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  popoverController,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@/i18n";
+import { exitOutline, personCircleOutline } from 'ionicons/icons';
+import { useAuthStore } from '@/store/auth';
+
+export default defineComponent({
+  name: "UserActionsPopover",
+  components: {
+    IonContent,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+  },
+  methods: {
+    redirectToUserDetails() {
+      const userDetailUrl = `${process.env.VUE_APP_USERS_LOGIN_URL}?oms=${this.authStore.oms}&token=${this.authStore.token.value}&expirationTime=${this.authStore.token.expiration}&partyId=${this.authStore.current.partyId}`
+      window.location.href = userDetailUrl
+      popoverController.dismiss()
+    },
+    async logout() {
+      await this.authStore.logout()
+      popoverController.dismiss()
+    }
+  },
+  setup() {
+    const authStore = useAuthStore();
+
+    return {
+      authStore,
+      exitOutline,
+      personCircleOutline,
+      translate
+    }
+  }
+});
+</script>

src/locales/en.json

@@ -14,5 +14,6 @@
   "Something went wrong while login. Please contact administrator.": "Something went wrong while login. Please contact administrator.",
   "Sorry, your username or password is incorrect. Please try again.": "Sorry, your username or password is incorrect. Please try again.",
   "This application is not enabled for your account": "This application is not enabled for your account",
-  "Username": "Username"
+  "Username": "Username",
+  "View profile": "View profile"
 }

src/views/Home.vue

@@ -10,10 +10,14 @@
         <ion-card v-if="authStore.isAuthenticated">
           <ion-list>
             <ion-item lines="full">
-              <ion-icon slot="start" :icon="lockClosedOutline"/>
-              {{ authStore.current?.partyName ? authStore.current?.partyName : authStore.current.userLoginId }}
-              <ion-button fill="outline" color="medium" slot="end" @click="authStore.logout()">
-                {{ $t('Logout') }}
+              <ion-avatar slot="start">
+                <Image :src="authStore.current?.partyImageUrl" />
+              </ion-avatar>
+              <ion-label class="ion-text-nowrap">
+                <h2>{{ authStore.current?.partyName ? authStore.current?.partyName : authStore.current.userLoginId }}</h2>
+              </ion-label>
+              <ion-button fill="clear" slot="end" @click="openUserActionsPopover($event)">
+                <ion-icon color="medium" slot="icon-only" :icon="chevronForwardOutline" />
               </ion-button>
             </ion-item>
             <ion-item lines="none">
@@ -66,6 +70,7 @@
 
 <script lang="ts">
 import {
+  IonAvatar,
   IonBadge,
   IonButton,
   IonButtons,
@@ -77,10 +82,12 @@ import {
   IonItem,
   IonLabel,
   IonList,
-  IonPage
+  IonPage,
+  popoverController
 } from '@ionic/vue';
 import { defineComponent, ref } from 'vue';
 import {
+  chevronForwardOutline,
   codeWorkingOutline,
   hardwareChipOutline,
   lockClosedOutline,
@@ -94,10 +101,14 @@ import { useRouter } from "vue-router";
 import { goToOms } from '@hotwax/dxp-components'
 import { isMaargLogin } from '@/util';
 import { translate } from '@/i18n';
+import UserActionsPopover from '@/components/UserActionsPopover.vue'
+import Image from "@/components/Image.vue";
 
 export default defineComponent({
   name: 'Home',
   components: {
+    Image,
+    IonAvatar,
     IonBadge,
     IonButton,
     IonButtons,
@@ -138,6 +149,15 @@ export default defineComponent({
     generateAppLink(app: any, appEnvironment = '') {
       const oms = isMaargLogin(app.handle, appEnvironment) ? this.authStore.getMaargOms : this.authStore.getOMS;
       window.location.href = this.scheme + app.handle + appEnvironment + this.domain + (this.authStore.isAuthenticated ? `/login?oms=${oms.startsWith('http') ? isMaargLogin(app.handle, appEnvironment) ? oms : oms.includes('/api') ? oms : `${oms}/api/` : oms}&token=${this.authStore.token.value}&expirationTime=${this.authStore.token.expiration}${isMaargLogin(app.handle, appEnvironment) ? '&omsRedirectionUrl=' + this.authStore.getOMS : ''}` : '')
+    },
+    async openUserActionsPopover(event: any) {
+      const userActionsPopover = await popoverController.create({
+        component: UserActionsPopover,
+        event,
+        showBackdrop: false,
+      });
+
+      userActionsPopover.present();
     }
   },
   setup() {
@@ -229,6 +249,7 @@ export default defineComponent({
     return {
       authStore,
       appCategory,
+      chevronForwardOutline,
       codeWorkingOutline,
       devHandle,
       domain,