TT#130352 missing localisations on JS CSC

Change-Id: Ie47db6b1b137edf0411fdddd125b768b70e242e2

src/api/subscriber.js

@@ -18,6 +18,7 @@ import {
 import {
     assignNumbers
 } from './user'
+import { getCurrentLangAsV1Format } from 'src/i18n'
 
 export function getPreferences (id) {
     return new Promise((resolve, reject) => {
@@ -30,7 +31,11 @@ export function getPreferences (id) {
 }
 
 export async function getPreferencesDefs (id) {
-    const result = await Vue.http.get('api/subscriberpreferencedefs/')
+    const result = await Vue.http.get('api/subscriberpreferencedefs/', {
+        params: {
+            lang: getCurrentLangAsV1Format()
+        }
+    })
     return getJsonBody(result.body)
 }
 

src/boot/constants.js

@@ -1,8 +1,17 @@
 export default ({ Vue, app }) => {
     Vue.prototype.$faxQualityOptions = [
-        { label: app.i18n.t('Normal'), value: 'normal' },
-        { label: app.i18n.t('Fine'), value: 'fine' },
-        { label: app.i18n.t('Super'), value: 'super' }
+        {
+            get label () { return app.i18n.t('Normal') },
+            value: 'normal'
+        },
+        {
+            get label () { return app.i18n.t('Fine') },
+            value: 'fine'
+        },
+        {
+            get label () { return app.i18n.t('Super') },
+            value: 'super'
+        }
     ]
     Vue.prototype.$faxQualityOptionsDefault = Vue.prototype.$faxQualityOptions[0]
 }

src/boot/i18n.js

@@ -32,4 +32,8 @@ export default ({ app, store }) => {
     }
     i18n.locale = getSession('locale') + ''
     store.commit('user/changeSessionLocaleSucceeded', i18n.locale)
+
+    store.watch(() => i18n.locale, () => {
+        store.dispatch('reloadLanguageRelatedData')
+    })
 }

src/components/CscSendFax.vue

@@ -103,7 +103,7 @@ export default {
         return {
             selectedFile: false,
             form: {
-                destination: null,
+                destination: '',
                 pageHeader: null,
                 data: null,
                 quality: this.$faxQualityOptionsDefault.value,

src/components/form/CscInputFile.vue

@@ -59,7 +59,7 @@ export default {
             if (this.selectedFile !== null) {
                 return this.selectedFile.name + ' (' + this.selectedFile.size + ' Byte)'
             }
-            return 'No file'
+            return this.$t('No file')
         }
     },
     methods: {

src/components/pages/Conversations/CscConversationsFilter.vue

@@ -6,7 +6,7 @@
             class="q-mr-sm"
             dense
             clearable
-            label="From"
+            :label="$t('From')"
             :disable="loading"
             @input="inputFrom"
         />
@@ -14,7 +14,7 @@
             v-model="value.to"
             dense
             clearable
-            label="To"
+            :label="$t('To')"
             :disable="loading"
             @input="inputTo"
         />

src/components/pages/FaxSettings/CscMailToFaxACLForm.vue

@@ -88,7 +88,7 @@
                 icon="person"
                 :loading="loading"
                 :disable="$v.data.$invalid || loading"
-                label="Create ACL"
+                :label="$t('Create ACL')"
                 @click="save()"
             />
         </div>

src/components/pages/PbxConfiguration/CscPbxSoundSetSound.vue

@@ -106,7 +106,7 @@
                 >
                     <q-checkbox
                         :value="soundFileLoopplay"
-                        label="Loop"
+                        :label="$t('Loop')"
                         left-label
                         @input="toggleLoopPlay"
                     />

src/components/pages/Voicebox/CscVoiceboxSettings.vue

@@ -30,7 +30,7 @@
                             color="primary"
                             flat
                             dense
-                            label="Save"
+                            :label="$t('Save')"
                             :disable="pinRequesting"
                             @click="updatePin"
                         />
@@ -67,7 +67,7 @@
                             color="primary"
                             flat
                             dense
-                            label="Save"
+                            :label="$t('Save')"
                             :disable="emailRequesting"
                             @click="updateEmail"
                         />

src/i18n/en.json

@@ -93,6 +93,7 @@
     "Could not enable incoming call notifications.": "Could not enable incoming call notifications.",
     "Could not find any device matching any of the filter criteria": "Could not find any device matching any of the filter criteria",
     "Could not find any group matching any of the filter criteria": "Could not find any group matching any of the filter criteria",
+    "Create ACL": "Create ACL",
     "Create Call Queue": "Create Call Queue",
     "Create Config": "Create Config",
     "Create List": "Create List",
@@ -169,6 +170,7 @@
     "Fr": "Fr",
     "Free": "Free",
     "Friday": "Friday",
+    "From": "From",
     "From email": "From email",
     "General": "General",
     "Group": "Group",
@@ -209,6 +211,7 @@
     "List of registered devices for the subscriber": "List of registered devices for the subscriber",
     "Login": "Login",
     "Logout": "Logout",
+    "Loop": "Loop",
     "MAC address": "MAC address",
     "Mail To Fax feature is not active": "Mail To Fax feature is not active",
     "Mail to Fax": "Mail to Fax",
@@ -239,6 +242,7 @@
     "No data to save. Please provide at least one time range.": "No data to save. Please provide at least one time range.",
     "No destinations created yet": "No destinations created yet",
     "No devices created yet": "No devices created yet",
+    "No file": "No file",
     "No groups": "No groups",
     "No groups created yet": "No groups created yet",
     "No manager secretary configuration created yet": "No manager secretary configuration created yet",
@@ -389,6 +393,7 @@
     "Time": "Time",
     "Time is invalid": "Time is invalid",
     "Timerange": "Timerange",
+    "To": "To",
     "Today": "Today",
     "Tu": "Tu",
     "Tuesday": "Tuesday",

src/i18n/index.js

@@ -6,6 +6,8 @@ import localeEs from './es.json'
 import localeDe from './de.json'
 import localeRu from './ru.json'
 import { i18n } from 'src/boot/i18n'
+import { setSession } from 'src/storage'
+import Quasar from 'quasar'
 
 export const defaultLocale = 'en-US'
 
@@ -45,6 +47,20 @@ function patchKeysForFallback (messages = {}) {
     return messages
 }
 
+export function setLanguage (lang) {
+    setSession('locale', lang)
+    i18n.locale = lang
+
+    import(
+        /* webpackInclude: /(en-us|de|es|fr|it|ru)\.js$/ */
+        'quasar/lang/' + lang.toLowerCase()
+    ).then(lang => {
+        Quasar.lang.set(lang.default)
+    })
+
+    // Note: please extend "reloadLanguageRelatedData" action in the store if you are using language related API endpoints
+}
+
 /**
  * It converts language code from V2 (new CSC) to V1 UI (old Panel CSC) format
  * @param {string} lang

src/pages/CscPageCallSettings.vue

@@ -42,7 +42,7 @@
                         :readonly="dataLoading"
                         :label="$t('Language for voicemail and app server')"
                         :title="$t('Voice prompts language for voicemail, conference and application server')"
-                        :options="options"
+                        :options="languages"
                         @input="languageSelected()"
                     />
                 </q-item-section>
@@ -81,8 +81,7 @@ export default {
     },
     data () {
         return {
-            selectedOption: this.$defaultVoicePromptLanguage,
-            options: []
+            selectedOption: this.$defaultVoicePromptLanguage
         }
     },
     computed: {
@@ -107,15 +106,16 @@ export default {
     },
     async mounted () {
         try {
+            await this.loadPreferencesDefsAction()
             await this.loadSubscriberPreferencesAction()
-            this.options = await this.languages
-            this.selectedOption = this.language || await this.defaultLanguage
+            this.selectedOption = this.language || this.defaultLanguage
         } catch (err) {
             showGlobalError(err?.message || this.$t('Unknown error'))
         }
     },
     methods: {
         ...mapWaitingActions('callSettings', {
+            loadPreferencesDefsAction: 'processing subscriberPreferences',
             loadSubscriberPreferencesAction: 'processing subscriberPreferences',
             setMusicOnHold: 'processing subscriberPreferences',
             setLanguage: 'processing subscriberPreferences'

src/store/call-settings.js

@@ -10,7 +10,8 @@ export default {
     namespaced: true,
     state: {
         subscriberPreferencesInitialized: false,
-        subscriberPreferences: {}
+        subscriberPreferences: {},
+        preferencesDefs: {}
     },
     getters: {
         subscriberId (state, getters, rootState, rootGetters) {
@@ -22,16 +23,15 @@ export default {
         language (state) {
             return state.subscriberPreferences.language
         },
-        async defaultLanguage (state, getters) {
-            const languages = await getters.languages
+        defaultLanguage (state, getters) {
+            const languages = getters.languages
             return languages.find(lang => lang.default_val).label
         },
-        async languages (state) {
-            const preferencesDefs = await getPreferencesDefs()
-            return preferencesDefs
-                .language
-                .enum_values
-                .map((lang) => { return { value: lang.value, label: lang.label, default_val: lang.default_val } })
+        languages (state) {
+            return state.preferencesDefs
+                .language?.enum_values?.map((lang) => {
+                    return { value: lang.value, label: lang.label, default_val: lang.default_val }
+                })
         }
     },
     mutations: {
@@ -41,6 +41,9 @@ export default {
         },
         subscriberPreferencesUpdate (state, { field, value }) {
             Vue.set(state.subscriberPreferences, field, value)
+        },
+        preferencesDefsSucceeded (state, res) {
+            state.preferencesDefs = res
         }
     },
     actions: {
@@ -55,6 +58,10 @@ export default {
                 value: options.value
             })
         },
+        async loadPreferencesDefsAction (context) {
+            const preferencesDefs = await getPreferencesDefs()
+            context.commit('preferencesDefsSucceeded', preferencesDefs)
+        },
         async setMusicOnHold (context, value) {
             await context.dispatch('fieldUpdateAction', { field: 'music_on_hold', value })
         },

src/store/index.js

@@ -118,6 +118,17 @@ export default function (/* { ssrContext } */) {
                 state.route = route
             }
         },
+        actions: {
+            async reloadLanguageRelatedData (context) {
+                /* NOTE: this action will be called after UI language change. So you could place here actions calls for
+                   refreshing language related data in the store */
+
+                if (Object.keys(context.state.callSettings.preferencesDefs).length > 0) {
+                    // preferencesDefs were loaded already so we need updated them for a new language
+                    await context.dispatch('callSettings/loadPreferencesDefsAction')
+                }
+            }
+        },
         plugins: [
             function rtcEngine (store) {
                 Vue.$rtcEngine.setNgcpApiBaseUrl(Vue.$config.baseHttpUrl)

src/store/user.js

@@ -2,9 +2,6 @@
 
 import router from '../router'
 import Vue from 'vue'
-import {
-    i18n
-} from 'src/boot/i18n'
 import _ from 'lodash'
 import {
     RequestState
@@ -23,11 +20,11 @@ import {
     getSubscriberProfile
 } from '../api/subscriber'
 import { deleteJwt, getJwt, getSubscriberId, setJwt, setSubscriberId } from 'src/auth'
-import { setSession } from 'src/storage'
 import QRCode from 'qrcode'
 import {
     qrPayload
 } from 'src/helpers/qr'
+import { setLanguage } from 'src/i18n'
 
 export default {
     namespaced: true,
@@ -382,8 +379,8 @@ export default {
         changeSessionLanguage (context, locale) {
             context.commit('changeSessionLocaleRequesting')
             try {
-                setSession('locale', locale)
-                i18n.locale = locale
+                setLanguage(locale)
+
                 context.commit('changeSessionLocaleSucceeded', locale)
             } catch (error) {
                 context.commit('changeSessionLocaleFailed', error)