From ae07a8c53d12a5b83c4f2676e602334b75e19ce3 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 12 Aug 2024 15:31:14 +0530
Subject: [PATCH 1/5] Improved: user card so as to allow user jump directly to
 the details page (#91)

---
 .env.example                          |  4 +-
 src/components/Image.vue              | 74 +++++++++++++++++++++++++++
 src/components/UserActionsPopover.vue | 65 +++++++++++++++++++++++
 src/views/Home.vue                    | 31 +++++++++--
 4 files changed, 168 insertions(+), 6 deletions(-)
 create mode 100644 src/components/Image.vue
 create mode 100644 src/components/UserActionsPopover.vue

diff --git a/.env.example b/.env.example
index 0721cdd..afb02d1 100644
--- a/.env.example
+++ b/.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"]
\ No newline at end of file
+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=
\ No newline at end of file
diff --git a/src/components/Image.vue b/src/components/Image.vue
new file mode 100644
index 0000000..92b9157
--- /dev/null
+++ b/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>
diff --git a/src/components/UserActionsPopover.vue b/src/components/UserActionsPopover.vue
new file mode 100644
index 0000000..e69d59d
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/views/Home.vue b/src/views/Home.vue
index b0b73b9..72c8d30 100644
--- a/src/views/Home.vue
+++ b/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="openUserActionPopover($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 openUserActionPopover(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,

From 4f2df5103b844325ec1b423f2bce6b552f0e9006 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 12 Aug 2024 16:13:35 +0530
Subject: [PATCH 2/5] Improved: added entry in locales for missing static text
 (#91)

---
 src/locales/en.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/locales/en.json b/src/locales/en.json
index b8ef5a3..851679e 100644
--- a/src/locales/en.json
+++ b/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"
 }
\ No newline at end of file

From 6532e4268f887521aa8cb54add4204234b4fe0b7 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Mon, 12 Aug 2024 16:36:40 +0530
Subject: [PATCH 3/5] Improved: method name for opening popover for user
 actions (#91)

---
 src/views/Home.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index 72c8d30..b1c9206 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -16,7 +16,7 @@
               <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="openUserActionPopover($event)">
+              <ion-button fill="clear" slot="end" @click="openUserActionsPopover($event)">
                 <ion-icon color="medium" slot="icon-only" :icon="chevronForwardOutline" />
               </ion-button>
             </ion-item>
@@ -150,7 +150,7 @@ export default defineComponent({
       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 openUserActionPopover(event: any) {
+    async openUserActionsPopover(event: any) {
       const userActionsPopover = await popoverController.create({
         component: UserActionsPopover,
         event,

From adbcfc621a74ed496f3a2fb657e33c75c3f889b9 Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Tue, 13 Aug 2024 11:20:22 +0530
Subject: [PATCH 4/5] Improved: simplified logic for redirecting to user
 details and removed resource url support (#91)

---
 .env.example                          |  3 +--
 src/components/Image.vue              | 18 ++++--------------
 src/components/UserActionsPopover.vue |  5 ++---
 3 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/.env.example b/.env.example
index afb02d1..31ff5e9 100644
--- a/.env.example
+++ b/.env.example
@@ -5,5 +5,4 @@ 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_USERS_LOGIN_URL="http://users.hotwax.io/login"
-VUE_APP_RESOURCE_URL=
\ No newline at end of file
+VUE_APP_USERS_LOGIN_URL="http://users.hotwax.io/login"
\ No newline at end of file
diff --git a/src/components/Image.vue b/src/components/Image.vue
index 92b9157..ce0da42 100644
--- a/src/components/Image.vue
+++ b/src/components/Image.vue
@@ -10,17 +10,6 @@ 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();
   },
@@ -29,7 +18,6 @@ export default defineComponent({
   },
   data() {
     return {
-      resourceUrl: '',
       imageUrl: require("@/assets/images/defaultImage.png")
     }
   },
@@ -59,8 +47,10 @@ export default defineComponent({
             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)
+          const authStore = useAuthStore();
+          const baseURL = authStore.getBaseUrl.replace("/api", "")
+
+          const imageUrl = baseURL.concat(this.src)
           this.checkIfImageExists(imageUrl).then(() => {
             this.imageUrl = imageUrl;
           }).catch(() => {
diff --git a/src/components/UserActionsPopover.vue b/src/components/UserActionsPopover.vue
index e69d59d..0cfc92d 100644
--- a/src/components/UserActionsPopover.vue
+++ b/src/components/UserActionsPopover.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-content>
     <ion-list>
-      <ion-list-header>{{ authStore.current?.partyName ? authStore.current?.partyName : authStore.current.userLoginId }}</ion-list-header>
+      <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>
@@ -42,8 +42,7 @@ export default defineComponent({
   },
   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
+      window.location.href = `${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}`
       popoverController.dismiss()
     },
     async logout() {

From 65c2fab0fea82457c44e3b8bca6bafe2ef84eded Mon Sep 17 00:00:00 2001
From: amansinghbais <singh11amanbais@gmail.com>
Date: Fri, 16 Aug 2024 00:08:41 +0530
Subject: [PATCH 5/5] Improved: click events over the user card items (#91)

---
 src/views/Home.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/Home.vue b/src/views/Home.vue
index b1c9206..db047b0 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -9,7 +9,7 @@
         
         <ion-card v-if="authStore.isAuthenticated">
           <ion-list>
-            <ion-item lines="full">
+            <ion-item lines="full" button @click="openUserActionsPopover($event)">
               <ion-avatar slot="start">
                 <Image :src="authStore.current?.partyImageUrl" />
               </ion-avatar>
@@ -20,12 +20,12 @@
                 <ion-icon color="medium" slot="icon-only" :icon="chevronForwardOutline" />
               </ion-button>
             </ion-item>
-            <ion-item lines="none">
+            <ion-item lines="none" button @click="goToOms(authStore.token.value, authStore.getOMS)">
               <ion-icon slot="start" :icon="hardwareChipOutline"/>
               <ion-label>
                 <h2>{{ authStore.getOMS }}</h2>
               </ion-label>
-              <ion-button fill="clear" @click="goToOms(authStore.token.value, authStore.getOMS)">
+              <ion-button fill="clear">
                 <ion-icon color="medium" slot="icon-only" :icon="openOutline" />
               </ion-button>
             </ion-item>