Implemented: usage of language switcher through DXP module (#163)

hotwax · Jul 17, 2023 · fc236bd · fc236bd
1 parent f00c19b
commit fc236bd
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -76,6 +76,13 @@
         <ion-label> {{ userProfile && userProfile.userTimeZone ? userProfile.userTimeZone : '-' }} </ion-label>
         <ion-button @click="changeTimeZone()" fill="outline" color="dark">{{ $t("Change") }}</ion-button>
       </ion-item>
+      <ion-item>
+        <ion-icon :icon="languageOutline" slot="start"/>
+        <ion-label>{{$t("Choose language")}}</ion-label>
+        <ion-select interface="popover" :value="localeStore.getLocale" @ionChange="localeStore.setLocale($event.detail.value)">
+          <ion-select-option v-for="locale in Object.keys(locales)" :key="locale" :value="locale" >{{ locales[locale] }}</ion-select-option>
+        </ion-select>
+      </ion-item>
       <ion-item>
         <ion-label>{{ userProfile !== null ? userProfile.partyName : '' }}</ion-label>
         <ion-button fill="outline" color="medium" @click="logout()">{{ $t("Logout") }}</ion-button>
@@ -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
     }
   }
 });