TT#131362 MajorIssue - English translation for language translation is missing

Change-Id: I1a30b5dfd68c5fb255e66e95d9601c6f9e2ebe67

src/boot/i18n.js

@@ -2,7 +2,6 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import {
-    getLanguageLabels,
     messages
 } from 'src/i18n'
 import {
@@ -23,15 +22,12 @@ export const i18n = new VueI18n({
 })
 
 export default ({ app, store }) => {
-    store.commit('user/setLanguageLabels', getLanguageLabels())
-
     app.i18n = i18n
     store.$i18n = i18n
     if (!hasSession('locale')) {
         setSession('locale', navigator.language)
     }
     i18n.locale = getSession('locale') + ''
-    store.commit('user/changeSessionLocaleSucceeded', i18n.locale)
 
     store.watch(() => i18n.locale, () => {
         store.dispatch('reloadLanguageRelatedData')

src/components/CscLanguageMenu.vue

@@ -1,56 +0,0 @@
-<template>
-    <q-list
-        no-border
-    >
-        <q-expansion-item
-            ref="languageCollapsible"
-            v-model="expanded"
-            :label="languageLabel"
-        >
-            <q-list
-                no-border
-            >
-                <q-item
-                    v-for="(language, index) in languageLabels"
-                    :key="index"
-                    v-close-popup
-                    clickable
-                    @click="changeSessionLanguage(language[0])"
-                >
-                    <q-item-section>
-                        <q-item-label>{{ language[1] }}</q-item-label>
-                    </q-item-section>
-                </q-item>
-            </q-list>
-        </q-expansion-item>
-    </q-list>
-</template>
-
-<script>
-import {
-    mapActions
-} from 'vuex'
-export default {
-    name: 'CscLanguageMenu',
-    props: {
-        languageLabel: {
-            type: String,
-            required: true
-        },
-        languageLabels: {
-            type: Array,
-            required: true
-        }
-    },
-    data () {
-        return {
-            expanded: false
-        }
-    },
-    methods: {
-        ...mapActions('user', [
-            'changeSessionLanguage'
-        ])
-    }
-}
-</script>

src/components/CscSelectionLanguage.vue

@@ -0,0 +1,60 @@
+<template>
+    <q-btn
+        icon="language"
+        :color="iconColor"
+        round
+        small
+        flat
+    >
+        <q-menu>
+            <q-item
+                v-close-popup
+            >
+                <q-item-section
+                    class="text-weight-medium"
+                >
+                    {{ languageLabel }}
+                </q-item-section>
+            </q-item>
+            <q-separator />
+            <q-item
+                v-for="(language, index) in options"
+                :key="index"
+                v-close-popup
+                clickable
+                @click="changeLanguage(language.value)"
+            >
+                <q-item-section>{{ language.label }}</q-item-section>
+            </q-item>
+        </q-menu>
+    </q-btn>
+</template>
+
+<script>
+import _ from 'lodash'
+import { i18n } from 'boot/i18n'
+import { getLanguageLabels, setLanguage } from 'src/i18n'
+export default {
+    name: 'CscSelectionLanguage',
+    props: {
+        iconColor: {
+            type: String,
+            default: 'primary'
+        }
+    },
+    computed: {
+        languageLabel () {
+            const lang = _.first(this.options.filter(item => item.value === i18n.locale))
+            return this.$t('Language') + ' (' + lang.label + ')'
+        },
+        options () {
+            return getLanguageLabels()
+        }
+    },
+    methods: {
+        changeLanguage (lang) {
+            setLanguage(lang)
+        }
+    }
+}
+</script>

src/components/CscSelectionLanguageMobile.vue

@@ -0,0 +1,57 @@
+<template>
+    <q-list
+        no-border
+    >
+        <q-expansion-item
+            ref="languageCollapsible"
+            v-model="expanded"
+            :label="languageLabel"
+        >
+            <q-list
+                no-border
+            >
+                <q-item
+                    v-for="(language, index) in options"
+                    :key="index"
+                    v-close-popup
+                    clickable
+                    @click="changeLanguage(language.value)"
+                >
+                    <q-item-section>
+                        <q-item-label>{{ language.label }}</q-item-label>
+                    </q-item-section>
+                </q-item>
+            </q-list>
+        </q-expansion-item>
+    </q-list>
+</template>
+
+<script>
+import _ from 'lodash'
+import { i18n } from 'boot/i18n'
+import { getLanguageLabels, setLanguage } from 'src/i18n'
+
+export default {
+    // TODO: this component has some duplicated code with "CscSelectionLanguage" component. Please recheck do we still need to have a separate UI for Mobile users
+    name: 'CscSelectionLanguageMobile',
+    data () {
+        return {
+            expanded: false
+        }
+    },
+    computed: {
+        languageLabel () {
+            const lang = _.first(this.options.filter(item => item.value === i18n.locale))
+            return this.$t('Language') + ' (' + lang.label + ')'
+        },
+        options () {
+            return getLanguageLabels()
+        }
+    },
+    methods: {
+        changeLanguage (lang) {
+            setLanguage(lang)
+        }
+    }
+}
+</script>

src/i18n/de.json

@@ -227,7 +227,7 @@
     "End date": "",
     "End time": "",
     "Ended": "Anruf beendet",
-    "English": "Deutsch",
+    "German": "Deutsch",
     "Established": "Verbunden",
     "Every caller": "Alle Anrufer",
     "Exit": "Beenden",

src/i18n/en.json

@@ -143,6 +143,7 @@
     "Enable regex matching for "Received from IP" and "Destination" fields.": "Enable regex matching for "Received from IP" and "Destination" fields.",
     "Enable strict mode that requires all mail2fax emails to have the secret key as the very first line of the email + an empty line. The key is removed from the email once matched.": "Enable strict mode that requires all mail2fax emails to have the secret key as the very first line of the email + an empty line. The key is removed from the email once matched.",
     "End time": "End time",
+    "English": "English",
     "Enter a number to dial": "Enter a number to dial",
     "Expires": "Expires",
     "Extension": "Extension",
@@ -169,10 +170,12 @@
     "Forwarding": "Forwarding",
     "Fr": "Fr",
     "Free": "Free",
+    "French": "French",
     "Friday": "Friday",
     "From": "From",
     "From email": "From email",
     "General": "General",
+    "German": "German",
     "Group": "Group",
     "Group Name": "Group Name",
     "Group/Seat/Pilot": "Group/Seat/Pilot",
@@ -198,6 +201,7 @@
     "Input a valid mac address": "Input a valid mac address",
     "Input a valid phone number": "Input a valid phone number",
     "Interval when the secret key is automatically renewed.": "Interval when the secret key is automatically renewed.",
+    "Italian": "Italian",
     "Join conference": "Join conference",
     "Join conference with name": "Join conference with name",
     "Lamp/Key": "Lamp/Key",
@@ -332,6 +336,7 @@
     "Ring primary number": "Ring primary number",
     "Ringing at": "Ringing at",
     "Ringing at {number}...": "Ringing at {number}...",
+    "Russian": "Russian",
     "Sa": "Sa",
     "Same time for selected days": "Same time for selected days",
     "Saturday": "Saturday",
@@ -370,6 +375,7 @@
     "Something went wrong. Please retry later": "Something went wrong. Please retry later",
     "Sound Set": "Sound Set",
     "Sound Sets": "Sound Sets",
+    "Spanish": "Spanish",
     "Speed Dial": "Speed Dial",
     "Start and End time should be set": "Start and End time should be set",
     "Start new call": "Start new call",

src/i18n/es.json

@@ -227,7 +227,7 @@
     "End date": "",
     "End time": "",
     "Ended": "Terminada",
-    "English": "Español",
+    "Spanish": "Español",
     "Established": "Establecida",
     "Every caller": "",
     "Exit": "Salir",

src/i18n/fr.json

@@ -227,7 +227,7 @@
     "End date": "Date de fin",
     "End time": "Date de fin",
     "Ended": "Terminé",
-    "English": "Français",
+    "French": "Français",
     "Established": "Établi",
     "Every caller": "Chaque appelant",
     "Exit": "Sortie",

src/i18n/index.js

@@ -1,4 +1,3 @@
-import _ from 'lodash'
 import localeEn from './en.json'
 import localeFr from './fr.json'
 import localeIt from './it.json'
@@ -13,27 +12,40 @@ export const defaultLocale = 'en-US'
 
 export const messages = {
     'en-US': patchKeysForFallback(localeEn),
+    de: patchKeysForFallback(localeDe),
+    es: patchKeysForFallback(localeEs),
     fr: patchKeysForFallback(localeFr),
     it: patchKeysForFallback(localeIt),
-    es: patchKeysForFallback(localeEs),
-    de: patchKeysForFallback(localeDe),
     ru: patchKeysForFallback(localeRu)
 }
 
 export function getLanguageLabels () {
-    const languageLabels = []
-    Object.keys(messages).forEach((locale) => {
-        languageLabels.push([locale, messages[locale].English])
-    })
-    return languageLabels
-}
-
-export function getLanguageLabel (locale) {
-    if (_.has(messages, locale)) {
-        return messages[locale].English
-    } else {
-        return messages[defaultLocale].English
-    }
+    return [
+        {
+            value: 'en-US',
+            label: i18n.t('English', 'en-US')
+        },
+        {
+            value: 'de',
+            label: i18n.t('German', 'de')
+        },
+        {
+            value: 'es',
+            label: i18n.t('Spanish', 'es')
+        },
+        {
+            value: 'fr',
+            label: i18n.t('French', 'fr')
+        },
+        {
+            value: 'it',
+            label: i18n.t('Italian', 'it')
+        },
+        {
+            value: 'ru',
+            label: i18n.t('Russian', 'ru')
+        }
+    ]
 }
 
 function patchKeysForFallback (messages = {}) {

src/i18n/it.json

@@ -227,7 +227,7 @@
     "End date": "",
     "End time": "",
     "Ended": "Terminata",
-    "English": "Italiano",
+    "Italian": "Italiano",
     "Established": "Stabilita",
     "Every caller": "",
     "Exit": "Esci",

src/i18n/ru.json

@@ -228,7 +228,7 @@
     "End date": "Конечная дата",
     "End time": "Время окончания",
     "Ended": "Завершено",
-    "English": "Русский",
+    "Russian": "Русский",
     "Enter a number to dial": "Введите номер для набора",
     "Established": "Установлено",
     "Every caller": "Каждый звонящий",

src/layouts/CscLayoutMain.vue

@@ -37,25 +37,9 @@
                         />
                     </csc-popup-menu>
                 </q-btn>
-                <q-btn
+                <csc-selection-language
                     v-if="!isMobile"
-                    class="q-mr-sm"
-                    icon="language"
-                    color="primary"
-                    small
-                    flat
-                    dense
-                    round
-                >
-                    <q-menu>
-                        <csc-language-menu
-                            id="csc-language-menu-main"
-                            class="csc-language-menu"
-                            :language-label="languageLabel"
-                            :language-labels="languageLabels"
-                        />
-                    </q-menu>
-                </q-btn>
+                />
                 <q-btn
                     icon="person"
                     color="primary"
@@ -145,12 +129,10 @@
                     />
                 </div>
             </div>
-            <csc-language-menu
+            <csc-selection-language-mobile
                 v-if="$q.platform.is.mobile"
                 id="csc-language-menu-main-mobile"
                 class="csc-language-menu"
-                :language-label="languageLabel"
-                :language-labels="languageLabels"
             />
             <csc-main-menu-top
                 id="csc-main-menu-top"
@@ -226,25 +208,24 @@ import CscCall from 'components/call/CscCall'
 import CscSendFax from 'components/CscSendFax'
 import CscLogo from 'components/CscLogo'
 import CscCustomLogo from 'components/CscCustomLogo'
-import CscLanguageMenu from 'components/CscLanguageMenu'
 import CscUserMenu from 'components/CscUserMenu'
-import {
-    getLanguageLabel
-} from 'src/i18n'
 import CscMainMenuTop from 'components/CscMainMenuTop'
 import CscPopupMenu from 'components/CscPopupMenu'
 import CscPopupMenuItem from 'components/CscPopupMenuItem'
 import AuiMobileAppBadges from 'components/AuiMobileAppBadges'
 import CscDialogQrCode from 'components/CscDialogQrCode'
+import CscSelectionLanguage from 'components/CscSelectionLanguage'
+import CscSelectionLanguageMobile from 'components/CscSelectionLanguageMobile'
 
 export default {
     name: 'CscMainLayout',
     components: {
+        CscSelectionLanguage,
+        CscSelectionLanguageMobile,
         AuiMobileAppBadges,
         CscPopupMenuItem,
         CscPopupMenu,
         CscMainMenuTop,
-        CscLanguageMenu,
         CscCall,
         CscSendFax,
         CscLogo,
@@ -313,9 +294,6 @@ export default {
             'hasSendFaxFeature',
             'userDataRequesting',
             'userDataSucceeded',
-            'changeSessionLocaleState',
-            'locale',
-            'languageLabels',
             'isRtcEngineUiVisible',
             'isLogoRequesting',
             'isLogoRequested'
@@ -362,11 +340,6 @@ export default {
             }
             return classes
         },
-        languageLabel () {
-            return this.$t('Language ({language})', {
-                language: getLanguageLabel(this.locale)
-            })
-        },
         pinMenuButtonIcon () {
             if (!this.menuPinned) {
                 return 'push_pin'
@@ -444,11 +417,6 @@ export default {
             if (route.path === '/user/home') {
                 this.forwardHome()
             }
-        },
-        changeSessionLocaleState (state) {
-            if (state === 'succeeded') {
-                showToast(this.$t('Session language successfully changed'))
-            }
         }
     },
     async mounted () {

src/pages/CscPageLogin.vue

@@ -11,23 +11,7 @@
             <q-toolbar
                 id="csc-header-toolbar-login"
             >
-                <q-btn
-                    icon="language"
-                    color="primary"
-                    round
-                    small
-                    flat
-                >
-                    <q-menu>
-                        <csc-language-menu
-                            id="csc-language-menu-login"
-                            class="csc-language-menu"
-                            :language-label="languageLabel"
-                            :language-labels="languageLabels"
-                            @change-language="changeLanguage"
-                        />
-                    </q-menu>
-                </q-btn>
+                <csc-selection-language />
             </q-toolbar>
         </q-header>
         <q-page-container>
@@ -121,21 +105,18 @@ import {
 import {
     Platform
 } from 'quasar'
-import {
-    getLanguageLabel
-} from '../i18n'
-import CscLanguageMenu from 'components/CscLanguageMenu'
 import CscSpinner from 'components/CscSpinner'
 import CscInputPassword from 'components/form/CscInputPassword'
 import CscInput from 'components/form/CscInput'
 import CscRetrievePasswordDialog from 'components/CscRetrievePasswordDialog'
+import CscSelectionLanguage from 'components/CscSelectionLanguage'
 export default {
     name: 'Login',
     components: {
+        CscSelectionLanguage,
         CscInput,
         CscInputPassword,
         CscSpinner,
-        CscLanguageMenu,
         CscRetrievePasswordDialog
     },
     data () {
@@ -159,15 +140,8 @@ export default {
         ...mapGetters('user', [
             'loginRequesting',
             'loginSucceeded',
-            'loginError',
-            'locale',
-            'languageLabels'
-        ]),
-        languageLabel () {
-            return this.$t('Language ({language})', {
-                language: getLanguageLabel(this.locale)
-            })
-        }
+            'loginError'
+        ])
     },
     watch: {
         loginSucceeded (loggedIn) {
@@ -188,9 +162,6 @@ export default {
                 password: this.password
             })
         },
-        changeLanguage (language) {
-            this.$store.dispatch('user/changeSessionLanguage', language)
-        },
         showRetrievePasswordDialog () {
             this.showDialog = true
         }

src/store/user.js

@@ -24,7 +24,6 @@ import QRCode from 'qrcode'
 import {
     qrPayload
 } from 'src/helpers/qr'
-import { setLanguage } from 'src/i18n'
 
 export default {
     namespaced: true,
@@ -46,10 +45,6 @@ export default {
         userDataError: null,
         rtcEngineInitState: RequestState.initiated,
         rtcEngineInitError: null,
-        sessionLocale: null,
-        changeSessionLocaleState: RequestState.initiated,
-        changeSessionLocaleError: null,
-        languageLabels: [],
         changePasswordState: RequestState.initiated,
         changePasswordError: null,
         newPasswordRequesting: false,
@@ -157,15 +152,6 @@ export default {
         isRtcEngineInitializing (state) {
             return state.rtcEngineInitState === RequestState.requesting
         },
-        changeSessionLocaleState (state) {
-            return state.changeSessionLocaleState
-        },
-        locale (state) {
-            return state.sessionLocale
-        },
-        languageLabels (state) {
-            return state.languageLabels
-        },
         getSubscriber (state) {
             return state.subscriber
         },
@@ -265,22 +251,6 @@ export default {
             state.rtcEngineInitState = RequestState.failed
             state.rtcEngineInitError = error
         },
-        changeSessionLocaleRequesting (state) {
-            state.changeSessionLocaleState = RequestState.requesting
-            state.changeSessionLocaleError = null
-        },
-        changeSessionLocaleSucceeded (state, locale) {
-            state.sessionLocale = locale
-            state.changeSessionLocaleState = RequestState.succeeded
-            state.changeSessionLocaleError = null
-        },
-        changeSessionLocaleFailed (state, error) {
-            state.changeSessionLocaleState = RequestState.failed
-            state.changeSessionLocaleError = error
-        },
-        setLanguageLabels (state, languageLabels) {
-            state.languageLabels = languageLabels
-        },
         userPasswordRequesting (state) {
             state.changePasswordState = RequestState.requesting
             state.changePasswordError = null
@@ -376,16 +346,6 @@ export default {
                 await context.dispatch('forwardHome')
             }
         },
-        changeSessionLanguage (context, locale) {
-            context.commit('changeSessionLocaleRequesting')
-            try {
-                setLanguage(locale)
-
-                context.commit('changeSessionLocaleSucceeded', locale)
-            } catch (error) {
-                context.commit('changeSessionLocaleFailed', error)
-            }
-        },
         changePassword (context, newPassword) {
             const subscriberId = getSubscriberId()
             context.commit('userPasswordRequesting')