TT#55909 i18n: After first login the current selected language shows "unknown"

Change-Id: I4ee74d78e33030149cfa4067603a35c6c98b6010

src/components/layouts/Default.vue

@@ -33,6 +33,7 @@
                     <q-popover ref="languagePopover">
                         <csc-user-menu
                             :language-label="languageLabel"
+                            :language-labels="languageLabels"
                             @change-language="changeLanguage"
                         />
                     </q-popover>
@@ -188,7 +189,10 @@
     } from 'quasar-framework'
     import CscMainMenu from "./MainMenu"
     import CscUserMenu from "./UserMenu"
-    import { i18n } from "../../i18n"
+    import {
+        getLanguageLabel
+    } from "../../i18n";
+
     export default {
         name: 'default',
         data() {
@@ -278,7 +282,9 @@
                 'hasSendFaxFeature',
                 'userDataRequesting',
                 'userDataSucceeded',
-                'changeSessionLocaleState'
+                'changeSessionLocaleState',
+                'locale',
+                'languageLabels'
             ]),
             ...mapGetters('communication', [
                 'createFaxState',
@@ -331,15 +337,9 @@
                 return classes;
             },
             languageLabel() {
-                let i18nLocale = i18n.locale.split('-')[0];
+                return this.$t('language', {
-                let locale = 'Unknown';
+                    language: getLanguageLabel(this.locale)
-                if (i18nLocale === 'en') {
+                });
-                    locale = 'English';
-                }
-                else if (i18nLocale === 'fr') {
-                    locale = 'français';
-                }
-                return this.$t('language', {language: locale});
             }
         },
         methods: {

src/components/layouts/MainMenu.vue

@@ -70,7 +70,8 @@
         </q-collapsible>
         <q-collapsible
             :opened="isCallBlocking"
-            intend icon="block"
+            intend
+            icon="block"
             :label="$t('navigation.callBlocking.title')"
         >
             <q-side-link

src/components/layouts/UserMenu.vue

@@ -3,28 +3,24 @@
         no-border
         link
         highlight
-        class="csc-toolbar-btn-popover"
+        class="csc-language-selection csc-toolbar-btn-popover"
     >
         <q-collapsible
             ref="languageCollapsible"
             :label="languageLabel"
-            class="csc-collapsible-menu"
+            intend
         >
-            <q-list
+            <q-item
-                no-border
+                v-for="(language, index) in languageLabels"
+                @click="changeLanguage(language[0])"
+                :key="index"
                 highlight
+                link
             >
-                <q-item
+                <q-item-main
-                    v-for="(language, index) in languages"
+                    :label="language[1]"
-                    @click="changeLanguage(language[0])"
+                />
-                    class="csc-subitem"
+            </q-item>
-                    :key="index"
-                >
-                    <q-item-main
-                        :label="language[1]"
-                    />
-                </q-item>
-            </q-list>
         </q-collapsible>
     </q-list>
 </template>
@@ -34,30 +30,29 @@
         QList,
         QItem,
         QItemMain,
-        QCollapsible
+        QCollapsible,
+        QItemSide,
+        QSideLink
     } from 'quasar-framework'
     export default {
         name: 'csc-user-menu',
         props: [
-            'languageLabel'
+            'languageLabel',
+            'languageLabels'
         ],
         data () {
-            return {
+            return {}
-                languages: [
-                    ['en', 'English'],
-                    ['fr', 'français']
-                ]
-            }
         },
         components: {
             QList,
             QItem,
             QItemMain,
-            QCollapsible
+            QCollapsible,
+            QItemSide,
+            QSideLink
         },
         methods: {
             changeLanguage(language) {
-                console.log(language);
                 this.$emit('change-language', language);
                 this.$refs.languageCollapsible.close();
             }
@@ -66,4 +61,7 @@
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
+    .csc-language-selection
+        .q-item-side-right
+            color white
 </style>

src/i18n.js

@@ -3,18 +3,36 @@ import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import localeEn from './locales/en'
 import localeFr from './locales/fr'
-import { SessionStorage } from 'quasar-framework'
+import {
+    SessionStorage
+} from 'quasar-framework'
 
 Vue.use(VueI18n);
 
-export const locales = {
+export const defaultLocale = 'en-US';
-    en: localeEn,
+
-    fr: localeFr
+if(!SessionStorage.has('locale')) {
-};
+    SessionStorage.set('locale', navigator.language);
+}
 
 export const i18n = new VueI18n({
-    locale: SessionStorage.get.item('locale') || navigator.language || navigator.userLanguage,
+    locale: SessionStorage.get.item('locale'),
-    fallbackLocale: 'en',
+    fallbackLocale: defaultLocale,
-    messages: locales
+    messages: {
+        'en-US': localeEn,
+        'fr': localeFr
+    }
 });
 
+export function getLanguageLabels() {
+    let languageLabels = [];
+    Object.keys(i18n.messages).forEach((locale)=>{
+        languageLabels.push([locale, i18n.messages[locale].languageLabel]);
+    });
+    return languageLabels;
+}
+
+export function getLanguageLabel(locale) {
+    return i18n.messages[locale].languageLabel;
+}
+

src/locales/en.json

@@ -10,6 +10,7 @@
     "loggedInAs": "Logged in as",
     "notFound" : "404 Not Found",
     "language": "Language ({language})",
+    "languageLabel": "English",
     "buttons": {
         "cancel": "Cancel",
         "save": "Save",

src/locales/fr.json

@@ -9,6 +9,7 @@
     "sendFax": "Envoyer un Fax",
     "loggedInAs": "Connecté en tant que",
     "notFound": "Erreur 404",
+    "languageLabel": "français",
     "buttons": {
         "cancel": "Annuler",
         "save": "Enregistrer",

src/store/index.js

@@ -15,7 +15,8 @@ import CommunicationModule from './communication'
 import VoiceboxModule from './voicebox'
 import ConferenceModule from './conference'
 import {
-    i18n
+    i18n,
+    getLanguageLabels
 } from '../i18n';
 import RtcEnginePlugin from "../plugins/rtc-engine";
 import CallPlugin from "../plugins/call";
@@ -90,6 +91,10 @@ export const store = new Vuex.Store({
                     store.commit('call/inputNumber');
                 }, errorVisibilityTimeout);
             });
+        },
+        function initI18n(store) {
+            store.commit('user/setLanguageLabels', getLanguageLabels());
+            store.commit('user/changeSessionLocaleSucceeded', i18n.locale);
         }
     ]
 });

src/store/user.js

@@ -37,7 +37,8 @@ export default {
         rtcEngineInitError: null,
         sessionLocale: null,
         changeSessionLocaleState: RequestState.initiated,
-        changeSessionLocaleError: null
+        changeSessionLocaleError: null,
+        languageLabels: []
     },
     getters: {
         isLogged(state) {
@@ -129,6 +130,12 @@ export default {
         },
         changeSessionLocaleState(state) {
             return state.changeSessionLocaleState;
+        },
+        locale(state) {
+            return state.sessionLocale;
+        },
+        languageLabels(state) {
+            return state.languageLabels;
         }
     },
     mutations: {
@@ -193,7 +200,6 @@ export default {
             state.changeSessionLocaleError = null;
         },
         changeSessionLocaleSucceeded(state, locale) {
-            i18n.locale = locale;
             state.sessionLocale = locale;
             state.changeSessionLocaleState = RequestState.succeeded;
             state.changeSessionLocaleError = null;
@@ -201,6 +207,9 @@ export default {
         changeSessionLocaleFailed(state, error) {
             state.changeSessionLocaleState = RequestState.failed;
             state.changeSessionLocaleError = error;
+        },
+        setLanguageLabels(state, languageLabels) {
+            state.languageLabels = languageLabels;
         }
     },
     actions: {
@@ -260,13 +269,12 @@ export default {
             context.commit('changeSessionLocaleRequesting');
             try {
                 SessionStorage.set('locale', locale);
+                i18n.locale = locale;
+                context.commit('changeSessionLocaleSucceeded', locale);
             }
             catch(error) {
                 context.commit('changeSessionLocaleFailed', error);
             }
-            finally {
-                context.commit('changeSessionLocaleSucceeded', locale);
-            }
         }
     }
 };