Implemented: centralized user profile component and image component on settings page (#169)

src/components/DxpImage.vue

@@ -0,0 +1,56 @@
+<template>
+  <img :src="imageUrl"/>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUpdated, ref } from 'vue';
+import { imageContext as context } from "../index";
+import { useUserStore } from '../store/user'
+
+const userStore = useUserStore();
+
+const props = defineProps(['src']);
+let imageUrl = ref(context.defaultImgUrl);
+const resourceUrl = computed(() => userStore.getAppResourceUrl).value || "";
+
+const setImageUrl = () => {
+  if (props.src) {
+    if (props.src.indexOf('assets/') != -1) {
+      // Assign directly in case of assets
+      imageUrl.value = props.src;
+    } else if (props.src.startsWith('http')) {
+      // If starts with http, it is web url check for existence and assign
+      checkIfImageExists(props.src).then(() => {
+        imageUrl.value = props.src;
+      }).catch(() => {
+        console.error("Image doesn't exist");
+      })
+    } else {
+      // Image is from resource server, hence append to base resource url, check for existence and assign
+      const newImageUrl = resourceUrl.concat(props.src)
+      checkIfImageExists(imageUrl).then(() => {
+        imageUrl.value = newImageUrl;
+      }).catch(() => {
+        console.error("Image doesn't exist");
+      })
+    }
+  }
+}
+
+const checkIfImageExists = (src: string) => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(true);
+    img.onerror = () => reject(false);
+    img.src = src;
+  })
+}
+
+onMounted(() => {
+  setImageUrl();
+})
+
+onUpdated(() => {
+  setImageUrl();
+});
+</script>

src/components/DxpUserProfile.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="user-profile">
+    <ion-card>
+      <ion-item lines="full">
+        <ion-avatar slot="start" v-if="userProfile?.partyImageUrl">
+          <DxpImage :src="userProfile.partyImageUrl"/>
+        </ion-avatar>
+        <!-- ion-no-padding to remove extra side/horizontal padding as additional padding 
+        is added on sides from ion-item and ion-padding-vertical to compensate the removed
+        vertical padding -->
+        <ion-card-header class="ion-no-padding ion-padding-vertical">
+          <ion-card-subtitle>{{ userProfile.userLoginId }}</ion-card-subtitle>
+          <ion-card-title>{{ userProfile.partyName }}</ion-card-title>
+        </ion-card-header>
+      </ion-item>
+      <ion-button color="danger" @click="logout()">{{ profileButtonsText.logoutText }}</ion-button>
+      <ion-button fill="outline" @click="goToLaunchpad()">
+        {{ profileButtonsText.launchpadText }}
+        <ion-icon slot="end" :icon="openOutline" />
+      </ion-button>
+      <!-- Commenting this code as we currently do not have reset password functionality -->
+      <!-- <ion-button fill="outline" color="medium">{{ $t("Reset password") }}</ion-button> -->
+    </ion-card>
+  </div>
+</template>
+<script setup lang="ts">
+import {
+  IonAvatar,
+  IonButton,
+  IonCard,
+  IonCardHeader,
+  IonCardSubtitle,
+  IonCardTitle,
+  IonIcon,
+  IonItem
+} from '@ionic/vue';
+import { DxpImage } from './index';
+import { openOutline } from 'ionicons/icons';
+import { computed } from 'vue';
+import { appContext } from '../index';
+import { useUserStore } from '../store/user'
+
+const userStore = useUserStore();
+const appState = appContext.config.globalProperties.$store;
+
+defineProps(['userProfile', 'profileButtonsText'])
+const emit = defineEmits(['reset-state-before-logout'])
+const appLoginUrl = computed(() => userStore.getAppLoginUrl).value;
+
+const logout = () => {
+  // Emit to handle actions and resets performed by apps before logout.
+  emit('reset-state-before-logout')
+
+  appState.dispatch('user/logout').then(() => {
+    const redirectUrl = window.location.origin + '/login'
+    window.location.href = `${appLoginUrl}?isLoggedOut=true&redirectUrl=${redirectUrl}`
+  })
+}
+
+const goToLaunchpad = () => {
+  window.location.href = appLoginUrl;
+}
+</script>

src/components/index.ts

@@ -14,6 +14,8 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+export { default as DxpImage } from './DxpImage.vue';
+export { default as DxpUserProfile } from './DxpUserProfile.vue'
 export { default as AppVersionInfo } from './AppVersionInfo.vue';
 export { default as LanguageSwitcher } from './LanguageSwitcher.vue';
 export { default as OmsInstanceNavigator } from './OmsInstanceNavigator.vue'

src/index.ts

@@ -3,7 +3,7 @@ declare var process: any;
 import { createPinia } from "pinia";
 import { useProductIdentificationStore } from "./store/productIdentification";
 import { useAuthStore } from "./store/auth";
-import { AppVersionInfo, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
+import { AppVersionInfo, DxpImage, DxpUserProfile, LanguageSwitcher, OmsInstanceNavigator, ProductIdentifier, Scanner, ShopifyImg } from "./components";
 import Login from "./components/Login";
 import { goToOms, getProductIdentificationValue } from "./utils";
 import { initialiseFirebaseApp } from "./utils/firebase"
@@ -17,6 +17,7 @@ const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate)
 
 let i18n: any
+let imageContext = {} as any
 let translate: any;
 let loginContext = {} as any
 let shopifyImgContext = {} as any
@@ -43,6 +44,8 @@ export let dxpComponents = {
     app.use(i18n);
 
     app.component('AppVersionInfo', AppVersionInfo)
+    app.component('DxpImage', DxpImage)
+    app.component('DxpUserProfile', DxpUserProfile)
     app.component('LanguageSwitcher', LanguageSwitcher)
     app.component('Login', Login)
     app.component('OmsInstanceNavigator', OmsInstanceNavigator)
@@ -55,6 +58,7 @@ export let dxpComponents = {
     loginContext.loader = options.loader
     loginContext.appLoginUrl = options.appLoginUrl
 
+    imageContext.defaultImgUrl = options.defaultImgUrl
     shopifyImgContext.defaultImgUrl = options.defaultImgUrl
 
     userContext.getUserPreference = options.getUserPreference
@@ -80,9 +84,12 @@ export let dxpComponents = {
 
 export {
   appContext,
+  DxpImage,
+  DxpUserProfile,
   getProductIdentificationValue,
   goToOms,
   i18n,
+  imageContext,
   initialiseFirebaseApp,
   Login,
   loginContext,

src/store/user.ts

@@ -6,13 +6,17 @@ declare let process: any;
 export const useUserStore = defineStore('user', {
   state: () => {
     return {
+      appLoginUrl: process.env.VUE_APP_LOGIN_URL,
+      appResourceUrl: process.env.VUE_APP_RESOURCE_URL,
       localeOptions: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" },
       preference: {
         locale: 'en'
       } as any
     }
   },
   getters: {
+    getAppLoginUrl: (state) => state.appLoginUrl,
+    getAppResourceUrl: (state) => state.appResourceUrl,
     getLocale: (state) => state.preference.locale,
     getLocaleOptions: (state) => state.localeOptions
   },