TT#32961 Call number input field auto focused

Change-Id: Ieed37a45f6c5083e71f033f911b9ac8e73c89879

src/components/CscCall.vue

@@ -30,10 +30,10 @@
             <q-card-main>
 
                 <div class="csc-call-info">
-                    <q-field v-if="isPreparing" :helper="$t('call.inputNumber')" :count="64" dark
+                    <q-field v-show="isPreparing" :helper="$t('call.inputNumber')" :count="64" dark
                              :error="validationEnabled && phoneNumberError" :error-label="$t('call.inputValidNumber')">
                         <q-input :float-label="$t('call.number')" v-model.trim="formattedPhoneNumber"
-                                 dark clearable max="64" @blur="phoneNumberBlur()" @focus="phoneNumberFocus()"/>
+                                 ref="numberInput" dark clearable max="64" @blur="phoneNumberBlur()" @focus="phoneNumberFocus()"/>
                     </q-field>
                     <div v-if="!isPreparing" class="phone-number">
                         <q-icon v-if="isCalling && (localMediaType == 'audioVideo' || remoteMediaType == 'audioVideo')"
@@ -73,6 +73,7 @@
 </template>
 
 <script>
+    import Vue from 'vue';
     import _ from 'lodash';
     import { mapState, mapGetters } from 'vuex'
     import CscMedia from './CscMedia'
@@ -92,14 +93,6 @@
                 validationEnabled: false
             }
         },
-        updated() {
-            if(this.$store.state.call.callState === 'incoming' ||
-                this.$store.state.call.callState === 'ringing') {
-                this.$refs.incomingSound.play();
-            } else {
-                this.$refs.incomingSound.pause();
-            }
-        },
         components: {
             QLayout,
             QCard,
@@ -116,6 +109,14 @@
             Dialog
         },
         methods: {
+            focusNumberInput() {
+                Vue.nextTick(() => {
+                    this.$refs.numberInput.focus();
+                });
+            },
+            blurNumberInput() {
+                this.$refs.numberInput.blur();
+            },
             init() {
                 this.phoneNumber = '';
                 this.validationEnabled = false;
@@ -278,16 +279,24 @@
                 'localMediaType',
                 'remoteMediaType',
                 'isCaller',
-                'isCallee'
+                'isCallee',
+                'callState'
             ]),
             isMobile() {
                 return Platform.is.mobile;
             }
         },
         watch: {
-            isIncoming(value) {
-                if(value) {
+            callState(state) {
+                if(state === 'incoming') {
                     showCallNotification(numberFormat(this.getNumber));
+                    this.$refs.incomingSound.play();
+                } else if (state === 'input') {
+                    this.focusNumberInput();
+                } else if (state === 'ringing') {
+                    this.$refs.incomingSound.play();
+                } else {
+                    this.$refs.incomingSound.pause();
                 }
             }
         }

src/components/layouts/Default.vue

@@ -238,8 +238,7 @@
                 this.$store.commit('layout/toggleFullscreen');
             },
             call() {
-                this.$store.commit('layout/showRight');
-                this.$refs.cscCall.init();
+                this.$store.dispatch('call/showCall');
             },
             logout() {
                 startLoading();
@@ -262,8 +261,10 @@
             applyLayout() {
                 if(this.right) {
                     this.$refs.layout.showRight();
+                    this.$refs.cscCall.focusNumberInput();
                 } else {
                     this.$refs.layout.hideRight();
+                    this.$refs.cscCall.blurNumberInput();
                 }
                 if(this.left) {
                     this.$refs.layout.showLeft();
@@ -276,8 +277,10 @@
             right(value) {
                 if(value) {
                     this.$refs.layout.showRight();
+                    this.$refs.cscCall.focusNumberInput();
                 } else {
                     this.$refs.layout.hideRight();
+                    this.$refs.cscCall.blurNumberInput();
                 }
             },
             left(value) {

src/components/pages/Home.vue

@@ -127,14 +127,14 @@
         methods: {
             call() {
                 if(this.isCallAvailable) {
-                    this.$store.commit('layout/showRight');
+                    this.$store.dispatch('call/showCall');
                 } else {
                     showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
                 }
             },
             screenShare() {
                 if(this.isCallAvailable && !this.isMobile) {
-                    this.$store.commit('layout/showRight');
+                    this.$store.dispatch('call/showCall');
                 } else {
                     showGlobalWarning(this.$i18n.t('pages.home.featureNotAvailable'));
                 }

src/store/call.js

@@ -124,6 +124,9 @@ export default {
         },
         isCallee(state) {
             return state.callee;
+        },
+        callState(state) {
+            return state.callState;
         }
     },
     mutations: {
@@ -284,6 +287,12 @@ export default {
         enableVideo(context) {
             Vue.call.enableVideo();
             context.commit('enableVideo');
+        },
+        showCall(context) {
+            context.commit('layout/showRight', null, { root: true });
+        },
+        hideCall() {
+            context.commit('layout/hideRight', null, { root: true });
         }
     }
 };