TT#48955 Use the CustomDialpad instead of native

What has been done:
- TT#48955, Implement or reuse state handling for CustomDialpad component
- TT#48956, Reuse CustomDialpad UI component in the "start a call" screen

Change-Id: I69845d7cb9d0d1ebef00f044854c83df78bf7873

src/components/CscCallDialpad.vue

@@ -38,7 +38,7 @@
                 :key="rowIndex"
             >
                 <div
-                    class="csc-dialpad-btn"
+                    class="csc-dialpad-btn csc-dialpad-btn-main"
                     v-for="(key, keyIndex) in keyRow"
                     :key="rowIndex + ':' + keyIndex"
                 >
@@ -84,7 +84,8 @@
                     ['1','2','3'],
                     ['4','5','6'],
                     ['7','8','9'],
-                    ['*','0','#']
+                    ['*','0','#'],
+                    ['+']
                 ];
             }
         },
@@ -114,11 +115,17 @@
         flex-direction column
         margin-left 16px
         .q-btn-inner
+            color $dark
             font-size 22px
         .q-btn-small
             .q-btn-inner
+                color $dark
                 font-size 18px
 
+    .csc-dialpad-btn.csc-dialpad-btn-main
+        .q-btn-inner
+            color white
+
     .csc-dialpad-btn:first-child
         margin-left 0
 
@@ -126,7 +133,7 @@
         display: flex
         flex-direction row
         margin-bottom 8px
-        justify-content: flex-end
+        justify-content: center
 
     .csc-dialpad-btn-group.csc-dialpad-btn-group-special
         justify-content: center

src/components/call/CscPhoneNumberInput.vue

@@ -10,11 +10,12 @@
             ref="inputField"
             :dark="dark"
             clearable
-            type="tel"
+            type="text"
             :float-label="$t('call.number')"
             :value="value"
             :disable="!enabled"
             :error="$v.phoneNumber.$error"
+            :readonly="readonly"
             @keypress.space.prevent
             @keydown.space.prevent
             @keyup.space.prevent
@@ -62,6 +63,10 @@
                 type: Boolean,
                 default: true
             },
+            readonly: {
+                type: Boolean,
+                default: false
+            },
             dark: {
                 type: Boolean,
                 default: true
@@ -122,6 +127,7 @@
         watch: {
             value() {
                 this.phoneNumber = this.value;
+                this.$v.phoneNumber.$touch();
             }
         }
     }

src/components/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="csc-call-page row justify-center items-center"
+        :class="pageClasses"
     >
         <div
             class="col col-xs-10 col-md-6 col-lg-4"
@@ -52,15 +52,25 @@
                     class="csc-call-phone-number"
                     :dark="true"
                     :value="callNumberInput"
+                    :readonly="dialpadOpened"
                     :enabled="isCallInitialized"
                     @number-changed="numberInputChanged"
                 />
+                <csc-call-dialpad
+                    v-if="dialpadOpened && isCallInitialized"
+                    :show-backspace-button="true"
+                    :show-clear-button="true"
+                    @click="dialpadClick"
+                    @remove="remove"
+                    @remove-all="removeAll"
+                />
             </div>
         </div>
     </div>
 </template>
 
 <script>
+    import platformMixin from '../../mixins/platform'
     import {
         getChromeExtensionUrl
     } from '../../helpers/cdk-lib'
@@ -69,6 +79,7 @@
     } from 'vuex'
     import CscPage from '../CscPage'
     import CscPhoneNumberInput from "../call/CscPhoneNumberInput";
+    import CscCallDialpad from "../CscCallDialpad";
     import {
         QIcon,
         QAlert,
@@ -80,8 +91,12 @@
             return {
             }
         },
+        mixins: [
+            platformMixin
+        ],
         components: {
             CscPhoneNumberInput,
+            CscCallDialpad,
             CscPage,
             QIcon,
             QAlert,
@@ -97,17 +112,34 @@
             },
             sendFax() {
                 this.$emit('send-fax');
+            },
+            dialpadClick(value) {
+                let number = this.callNumberInput + value;
+                this.$store.commit('call/numberInputChanged', number);
+            },
+            remove() {
+                let number = this.callNumberInput.slice(0, -1);
+                this.$store.commit('call/numberInputChanged', number);
+            },
+            removeAll() {
+                this.$store.commit('call/numberInputChanged', '');
             }
         },
         computed: {
             ...mapGetters('call', [
+                'callState',
                 'callNumberInput',
-                'hasCallInitError',
                 'hasRtcEngineCapabilityEnabled',
                 'desktopSharingInstall',
                 'isCallInitialized',
                 'isCallInitializing'
             ]),
+            dialpadOpened() {
+                return this.callState == 'input' &&
+                    !this.isCallInitializing &&
+                    this.isMobile &&
+                    this.hasRtcEngineCapabilityEnabled;
+            },
             rtcEngineInfoActions() {
                 return [];
             },
@@ -128,6 +160,16 @@
                         }
                     }
                 ]
+            },
+            pageClasses() {
+                let classes = ["csc-call-page", "row", "justify-center"];
+                if(this.isMobile) {
+                    classes.push('items-end');
+                }
+                else {
+                    classes.push('items-center');
+                }
+                return classes;
             }
         }
     }
@@ -135,6 +177,7 @@
 
 <style lang="stylus" rel="stylesheet/stylus">
     @import '../../themes/quasar.variables'
+
     .csc-call-page
         height calc(100vh - 120px)
         padding 0
@@ -148,8 +191,10 @@
                 box-shadow none
                 .q-btn-inner
                     color $dark
+
     .csc-call-page-content
         margin-top -80px
+
     .csc-info
         background-color $info
         padding  $flex-gutter-md