TT#163508 Move "voicebox language" settings from "General" to "Voicebox"

Change-Id: Ib369fc3bfc03dba4d6e88a24d23626ac5c9d0301

src/components/CscVoiceboxLanguage.vue

@@ -0,0 +1,72 @@
+<template>
+    <q-item>
+        <q-item-section>
+            <q-select
+                v-model="selectedLanguage"
+                emit-value
+                map-options
+                :disable="loading"
+                :readonly="loading"
+                :label="$t('Language for voicemail and app server')"
+                :title="$t('Voice prompts language for voicemail, conference and application server')"
+                :options="languageOptions"
+                v-on="$listeners"
+            >
+                <template
+                    #prepend
+                >
+                    <q-icon
+                        name="language"
+                    />
+                </template>
+                <template
+                    #append
+                >
+                    <csc-spinner
+                        v-if="loading"
+                        class="self-center"
+                    />
+                </template>
+            </q-select>
+        </q-item-section>
+    </q-item>
+</template>
+
+<script>
+import CscSpinner from 'components/CscSpinner'
+export default {
+    components: { CscSpinner },
+    props: {
+        defaultLanguageOption: {
+            type: Object,
+            default: null
+        },
+        languageOptions: {
+            type: Array,
+            default: null
+        },
+        value: {
+            type: String,
+            default: null
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            selectedLanguage: null
+        }
+    },
+    watch: {
+        value (newLanguage) {
+            if (this.defaultLanguageOption && newLanguage === undefined) {
+                this.selectedLanguage = this.defaultLanguageOption.value
+            } else {
+                this.selectedLanguage = newLanguage
+            }
+        }
+    }
+}
+</script>

src/i18n/en.json

@@ -221,6 +221,7 @@
     "Lamp/Key": "Lamp/Key",
     "Lamps/Keys": "Lamps/Keys",
     "Language": "Language",
+    "Language changed successfully": "Language changed successfully",
     "Language for voicemail and app server": "Language for voicemail and app server",
     "Last Modify Time": "Last Modify Time",
     "Leave conference": "Leave conference",

src/pages/CscPageCallSettings.vue

@@ -29,32 +29,6 @@
                     />
                 </q-item-section>
             </q-item>
-            <q-item
-                v-if="hasSubscriberProfileAttribute('language')"
-            >
-                <q-item-section>
-                    <q-select
-                        v-model="selectedOption"
-                        dense
-                        emit-value
-                        map-options
-                        :disable="dataLoading"
-                        :readonly="dataLoading"
-                        :label="$t('Language for voicemail and app server')"
-                        :title="$t('Voice prompts language for voicemail, conference and application server')"
-                        :options="languages"
-                        @input="languageSelected()"
-                    />
-                </q-item-section>
-                <q-item-section
-                    side
-                >
-                    <csc-spinner
-                        v-if="dataLoading"
-                        class="self-center"
-                    />
-                </q-item-section>
-            </q-item>
         </q-list>
     </csc-page>
 </template>
@@ -79,20 +53,12 @@ export default {
         CscSpinner,
         CscPage
     },
-    data () {
-        return {
-            selectedOption: this.$defaultVoicePromptLanguage
-        }
-    },
     computed: {
         ...mapState('callSettings', [
             'subscriberPreferencesInitialized'
         ]),
         ...mapGetters('callSettings', [
-            'musicOnHold',
-            'language',
-            'defaultLanguage',
-            'languages'
+            'musicOnHold'
         ]),
         ...mapGetters('user', [
             'hasSubscriberProfileAttribute'
@@ -117,8 +83,7 @@ export default {
         ...mapWaitingActions('callSettings', {
             loadPreferencesDefsAction: 'processing subscriberPreferences',
             loadSubscriberPreferencesAction: 'processing subscriberPreferences',
-            setMusicOnHold: 'processing subscriberPreferences',
-            setLanguage: 'processing subscriberPreferences'
+            setMusicOnHold: 'processing subscriberPreferences'
         }),
         async toggleMusicOnHold () {
             try {
@@ -126,13 +91,6 @@ export default {
             } catch (err) {
                 showGlobalError(err?.message || this.$t('Unknown error'))
             }
-        },
-        async languageSelected () {
-            try {
-                await this.setLanguage(this.selectedOption)
-            } catch (err) {
-                showGlobalError(err?.message || this.$t('Unknown error'))
-            }
         }
     }
 }

src/pages/CscPageVoicebox.vue

@@ -6,6 +6,16 @@
         <q-list
             class="col col-xs-12 col-md-6"
         >
+            <csc-voicebox-language
+                :value="language"
+                :language-options="languages"
+                :default-language-option="{
+                    label: defaultLanguage,
+                    value: defaultLanguage
+                }"
+                :loading="$wait.is('processing subscriberPreferences')"
+                @input="selectLanguage"
+            />
             <q-item>
                 <q-item-section>
                     <csc-input-saveable
@@ -142,6 +152,7 @@ import {
     mapState
 } from 'vuex'
 import {
+    showGlobalError,
     showToast
 } from 'src/helpers/ui'
 import CscPage from 'components/CscPage'
@@ -153,8 +164,11 @@ import {
     numeric
 } from 'vuelidate/lib/validators'
 import CscSpinner from 'components/CscSpinner'
+import CscVoiceboxLanguage from 'components/CscVoiceboxLanguage'
+import { mapWaitingActions } from 'vue-wait'
 export default {
     components: {
+        CscVoiceboxLanguage,
         CscSpinner,
         CscPage,
         CscInputSaveable,
@@ -218,6 +232,11 @@ export default {
             'unavailableGreetingLabel',
             'unavailableGreetingDeleting'
         ]),
+        ...mapGetters('callSettings', [
+            'language',
+            'defaultLanguage',
+            'languages'
+        ]),
         soundFileIcon () {
             return 'music_note'
         },
@@ -289,8 +308,12 @@ export default {
             this.formData.delete = value
         }
     },
-    mounted () {
-        this.settingsLoadAction()
+    async mounted () {
+        await Promise.all([
+            this.loadPreferencesDefsAction(),
+            this.loadSubscriberPreferencesAction(),
+            this.settingsLoadAction()
+        ])
         this.formData.pin = this.pinValue
         this.formData.email = this.emailValue
         this.formData.attach = this.attachValue
@@ -316,6 +339,19 @@ export default {
             'unavailableGreetingPlay',
             'unavailableGreetingDelete'
         ]),
+        ...mapWaitingActions('callSettings', {
+            loadPreferencesDefsAction: 'processing subscriberPreferences',
+            loadSubscriberPreferencesAction: 'processing subscriberPreferences',
+            setLanguage: 'processing subscriberPreferences'
+        }),
+        async selectLanguage (language) {
+            try {
+                await this.setLanguage(language)
+                showToast(this.$t('Language changed successfully'))
+            } catch (err) {
+                showGlobalError(err?.message || this.$t('Unknown error'))
+            }
+        },
         pinInput () {
             this.pinInitialize()
             this.$v.formData.pin.$touch()

src/store/call-settings.js

@@ -25,7 +25,7 @@ export default {
         },
         defaultLanguage (state, getters) {
             const languages = getters.languages
-            return languages.find(lang => lang.default_val).label
+            return languages && languages.find(lang => lang.default_val).label
         },
         languages (state) {
             return state.preferencesDefs