Skip to content

Commit

Permalink
Merge branch 'main' into #280-i18n-update
Browse files Browse the repository at this point in the history
  • Loading branch information
R-Sourabh committed Nov 7, 2024
2 parents 655d83e + fe10633 commit 68c6963
Show file tree
Hide file tree
Showing 11 changed files with 219 additions and 41 deletions.
4 changes: 3 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -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"]
VUE_APP_MAARG_LOGIN=["atp", "company", "order-routing", "inventorycount"]
VUE_APP_USERS_LOGIN_URL="http://users.hotwax.io/login"
VUE_APP_OMS_WITH_MAARG=["job-manager", "preorder", "users"]
15 changes: 13 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "Launchpad",
"version": "2.1.0",
"version": "3.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
Expand All @@ -10,6 +10,7 @@
"dependencies": {
"@hotwax/dxp-components": "^1.12.2",
"@hotwax/oms-api": "^1.13.0",
"@hotwax/apps-theme": "^1.2.8",
"@ionic/core": "^7.6.0",
"@ionic/vue": "^7.6.0",
"@ionic/vue-router": "^7.6.0",
Expand Down
64 changes: 64 additions & 0 deletions src/components/Image.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<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: {},
mounted() {
this.setImageUrl();
},
updated() {
this.setImageUrl();
},
data() {
return {
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 {
const authStore = useAuthStore();
const baseURL = authStore.getBaseUrl.replace("/api", "")
const imageUrl = baseURL.concat(this.src)
this.checkIfImageExists(imageUrl).then(() => {
this.imageUrl = imageUrl;
}).catch(() => {
console.error("Image doesn't exist", imageUrl);
})
}
}
}
},
});
</script>
64 changes: 64 additions & 0 deletions src/components/UserActionsPopover.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<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() {
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() {
await this.authStore.logout()
popoverController.dismiss()
}
},
setup() {
const authStore = useAuthStore();
return {
authStore,
exitOutline,
personCircleOutline,
translate
}
}
});
</script>
3 changes: 2 additions & 1 deletion src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,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"
}
1 change: 1 addition & 0 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import '@ionic/vue/css/display.css';

/* Theme variables */
import './theme/variables.css';
import '@hotwax/apps-theme';
import { dxpComponents } from '@hotwax/dxp-components';
import localeMessages from './locales';

Expand Down
10 changes: 0 additions & 10 deletions src/theme/variables.css
Original file line number Diff line number Diff line change
Expand Up @@ -236,16 +236,6 @@ http://ionicframework.com/docs/theming/ */
}

body {
/** Spacer variables **/
--spacer-2xs: 0.25rem; /* 4px */
--spacer-xs: 0.5rem; /* 8px */
--spacer-sm: 1rem; /* 16px */
--spacer-base: 1.5rem; /* 24px */
--spacer-lg: 2rem; /* 32px */
--spacer-xl: 2.5rem; /* 40px */
--spacer-2xl: 5rem; /* 80px */
--spacer-3xl: 10rem; /* 160px */

/** Border variable **/
--border-medium: 1px solid var(--ion-color-medium);
}
13 changes: 10 additions & 3 deletions src/util/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,16 @@ const showToast = async (message: string) => {
return toast.present();
}

const isMaargLogin = (handle: string) => {
const isMaargLogin = (handle: string, environment = "") => {
const appHandle = environment ? handle + environment : handle
const maargLoginApps = JSON.parse(process.env.VUE_APP_MAARG_LOGIN ? process.env.VUE_APP_MAARG_LOGIN : [])
return maargLoginApps.some((appName: string) => handle.includes(appName))
return maargLoginApps.some((appName: string) => appHandle.includes(appName))
}

export { isMaargLogin, showToast }
const isOmsWithMaarg = (handle: string, environment = "") => {
const appHandle = environment ? handle + environment : handle
const appsWithMarg = JSON.parse(process.env.VUE_APP_OMS_WITH_MAARG ? process.env.VUE_APP_OMS_WITH_MAARG : [])
return appsWithMarg.some((appName: string) => appHandle.includes(appName))
}

export { isMaargLogin, isOmsWithMaarg, showToast }
52 changes: 36 additions & 16 deletions src/views/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,21 +9,21 @@

<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()">
{{ translate('Logout') }}
</ion-button>
<ion-item lines="full" button @click="openUserActionsPopover($event)">
<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-icon slot="end" :icon="chevronForwardOutline" class="ion-margin-start" />
</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-icon color="medium" slot="icon-only" :icon="openOutline" />
</ion-button>
<ion-icon slot="end" :icon="openOutline" class="ion-margin-start" />
</ion-item>
</ion-list>
</ion-card>
Expand All @@ -46,10 +46,12 @@
{{ translate("Not configured") }}
</ion-badge>
<ion-buttons class="app-links" v-else>
<ion-button color="medium" @click.stop="generateAppLink(app, devHandle)">
<!-- Disabled is added on the buttons only for the case when specific instance of the app support maarg login -->
<!-- This checks can be removed when all the app instance uses a single login flow either from ofbiz or from moqui -->
<ion-button color="medium" :disabled="authStore.isAuthenticated && isMaargLogin(app.handle, devHandle) && !authStore.getMaargOms" @click.stop="generateAppLink(app, devHandle)">
<ion-icon slot="icon-only" :icon="codeWorkingOutline" />
</ion-button>
<ion-button color="medium" @click.stop="generateAppLink(app, uatHandle)">
<ion-button color="medium" :disabled="authStore.isAuthenticated && isMaargLogin(app.handle, uatHandle) && !authStore.getMaargOms" @click.stop="generateAppLink(app, uatHandle)">
<ion-icon slot="icon-only" :icon="shieldHalfOutline" />
</ion-button>
</ion-buttons>
Expand All @@ -64,6 +66,7 @@

<script lang="ts">
import {
IonAvatar,
IonBadge,
IonButton,
IonButtons,
Expand All @@ -75,10 +78,12 @@ import {
IonItem,
IonLabel,
IonList,
IonPage
IonPage,
popoverController
} from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import {
chevronForwardOutline,
codeWorkingOutline,
hardwareChipOutline,
lockClosedOutline,
Expand All @@ -90,11 +95,15 @@ import {
import { useAuthStore } from '@/store/auth';
import { useRouter } from "vue-router";
import { goToOms, translate } from '@hotwax/dxp-components'
import { isMaargLogin } from '@/util';
import { isMaargLogin, isOmsWithMaarg } from '@/util';
import UserActionsPopover from '@/components/UserActionsPopover.vue'
import Image from "@/components/Image.vue";
export default defineComponent({
name: 'Home',
components: {
Image,
IonAvatar,
IonBadge,
IonButton,
IonButtons,
Expand Down Expand Up @@ -133,8 +142,17 @@ export default defineComponent({
}
},
generateAppLink(app: any, appEnvironment = '') {
const oms = isMaargLogin(app.handle) ? 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) ? oms : oms.includes('/api') ? oms : `${oms}/api/` : oms}&token=${this.authStore.token.value}&expirationTime=${this.authStore.token.expiration}${isMaargLogin(app.handle) ? '&omsRedirectionUrl=' + this.authStore.getOMS : ''}` : '')
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 : isOmsWithMaarg(app.handle, appEnvironment) ? '&omsRedirectionUrl=' + this.authStore.getMaargOms : ''}` : '')
},
async openUserActionsPopover(event: any) {
const userActionsPopover = await popoverController.create({
component: UserActionsPopover,
event,
showBackdrop: false,
});
userActionsPopover.present();
}
},
setup() {
Expand Down Expand Up @@ -226,11 +244,13 @@ export default defineComponent({
return {
authStore,
appCategory,
chevronForwardOutline,
codeWorkingOutline,
devHandle,
domain,
goToOms,
isMaargLogin,
isOmsWithMaarg,
lockClosedOutline,
hardwareChipOutline,
openOutline,
Expand Down
Loading

0 comments on commit 68c6963

Please sign in to comment.