diff --git a/.env.example b/.env.example
index 72552f03..3fe8d950 100644
--- a/.env.example
+++ b/.env.example
@@ -7,3 +7,4 @@ VUE_APP_PERMISSION_ID=
VUE_APP_ALIAS={}
VUE_APP_DEFAULT_LOG_LEVEL="error"
VUE_APP_UPLD_IMP_ORD={"orderId": { "label": "Order ID", "required": true }, "facilityId": { "label": "Facility ID", "required": true },"trackingCode": { "label": "Tracking Code", "required": true }}
+VUE_APP_LOCALES={"en": "English", "es": "EspaƱol"}
diff --git a/src/App.vue b/src/App.vue
index 93a556a1..ba8a1413 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,6 +17,7 @@ import { mapGetters, useStore } from 'vuex';
import { initialise, resetConfig } from '@/adapter'
import { useRouter } from 'vue-router';
import { Settings } from 'luxon'
+import { useLocaleStore } from 'dxp-components';
export default defineComponent({
name: 'App',
@@ -93,6 +94,7 @@ export default defineComponent({
if (this.userProfile && this.userProfile.userTimeZone) {
Settings.defaultZone = this.userProfile.userTimeZone;
}
+ this.localeStore.setLocale(this.localeStore.getLocale)
},
unmounted() {
emitter.off('presentLoader', this.presentLoader);
@@ -102,9 +104,11 @@ export default defineComponent({
setup() {
const store = useStore();
const router = useRouter();
+ const localeStore = useLocaleStore()
return {
router,
- store
+ store,
+ localeStore
}
}
});
diff --git a/src/locales/en.json b/src/locales/en.json
index 08d53391..6c794425 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -11,6 +11,7 @@
"Box added successfully": "Box added successfully",
"Boxes": "Boxes",
"Cancel": "Cancel",
+ "Choose language": "Choose language",
"Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
"Change": "Change",
"Completed": "Completed",
diff --git a/src/locales/es.json b/src/locales/es.json
index 3a5e0c87..119c36b5 100644
--- a/src/locales/es.json
+++ b/src/locales/es.json
@@ -13,6 +13,7 @@
"Cancel": "Cancel",
"Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
"Change": "Cancelar",
+ "Choose language": "Choose language",
"Completed": "Completado",
"Configuration Missing": "Configuration Missing",
"Confirm": "Confirmar",
diff --git a/src/main.ts b/src/main.ts
index b333a6b6..d476e701 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -27,6 +27,7 @@ import './theme/variables.css';
import i18n from './i18n'
import store from './store'
+import { dxpComponents } from 'dxp-components';
const app = createApp(App)
.use(IonicVue, {
@@ -37,7 +38,10 @@ const app = createApp(App)
})
.use(router)
.use(i18n)
- .use(store);
+ .use(store)
+ .use(dxpComponents, {
+ i18n
+ });
router.isReady().then(() => {
app.mount('#app');
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 613a3470..26484996 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -76,6 +76,13 @@
{{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }}
{{ $t("Change") }}
+
+
+ {{$t("Choose language")}}
+
+ {{ locales[locale] }}
+
+
{{ userProfile !== null ? userProfile.partyName : '' }}
{{ $t("Logout") }}
@@ -104,7 +111,7 @@ import {
modalController,
alertController} from '@ionic/vue';
import { defineComponent } from 'vue';
-import { codeWorkingOutline, ellipsisVerticalOutline, globeOutline, timeOutline } from 'ionicons/icons'
+import { codeWorkingOutline, ellipsisVerticalOutline, globeOutline, languageOutline, timeOutline } from 'ionicons/icons'
import RecyclePopover from '@/views/RecyclePopover.vue'
import { mapGetters, useStore } from 'vuex';
import { useRouter } from 'vue-router';
@@ -114,6 +121,7 @@ import { showToast } from '@/utils';
import { hasError } from '@/adapter';
import { translate } from '@/i18n';
import logger from '@/logger';
+import { useLocaleStore } from 'dxp-components';
export default defineComponent({
name: 'Settings',
@@ -136,6 +144,7 @@ export default defineComponent({
data() {
return {
baseURL: process.env.VUE_APP_BASE_URL,
+ locales: process.env.VUE_APP_LOCALES ? JSON.parse(process.env.VUE_APP_LOCALES) : { "en": "English" },
currentFacilityDetails: {} as any,
outstandingOrdersCount: 0,
inProgressOrdersCount: 0
@@ -441,14 +450,17 @@ export default defineComponent({
setup() {
const store = useStore();
const router = useRouter();
+ const localeStore = useLocaleStore()
return {
codeWorkingOutline,
ellipsisVerticalOutline,
globeOutline,
+ languageOutline,
timeOutline,
router,
- store
+ store,
+ localeStore
}
}
});