TT#46176 CallForward destination input validation

Change-Id: Icdd8dd3aeccaa3056bd9a2598918f1b6b3bce7d6

src/components/form/CscCallInput.vue

@@ -16,6 +16,7 @@
             @input="input"
             @blur="blur"
             :error="$v.inputValue.$error"
+            :before="beforeButtons"
         />
     </q-field>
 </template>
@@ -34,7 +35,8 @@
     export default {
         name: 'csc-call-input',
         props: {
-            label: String
+            label: String,
+            before: Array
         },
         data () {
             return {
@@ -69,6 +71,9 @@
                 else if (!this.$v.inputValue.userInfo) {
                     return this.$t('validationErrors.inputValidNumber');
                 }
+            },
+            beforeButtons() {
+                return this.before ? this.before : [];
             }
         },
         methods: {

src/components/pages/CallForward/CscAddDestinationForm.vue

@@ -28,24 +28,13 @@
             </q-popover>
         </q-btn>
         <div v-if="isFormEnabled">
-            <q-field
+            <csc-call-input
-                :error-label="destinationInputError"
+                :label="$t('pages.callForward.destination')"
-            >
-                <q-input
-                    dark
-                    :before="beforeIconDestination"
-                    :float-label="$t('pages.callForward.destination')"
-                    type="text"
                 v-model="destinationForm.destination"
-                    @keyup.enter="addDestination()"
+                @submit="addDestination"
-                    :clearable="isFormTypeNumber"
+                @error="error"
-                    :autofocus="isFormTypeNumber"
+                :before="beforeIconDestination"
-                    :disable="!isFormTypeNumber || addDestinationIsRequesting"
-                    @input="$v.destinationForm.destination.$touch"
-                    @blur="$v.destinationForm.destination.$touch"
-                    :error="$v.destinationForm.destination.$error"
             />
-            </q-field>
             <q-field
                 :error-label="timeoutInputError"
             >
@@ -74,7 +63,7 @@
                 icon="check"
                 color="primary"
                 @click="addDestination()"
-                :disable="$v.destinationForm.destination.$error || $v.destinationForm.timeout.$error"
+                :disable="$v.destinationForm.timeout.$error || destinationError"
             >
                 {{ $t('buttons.save') }}
             </q-btn>
@@ -84,6 +73,7 @@
 
 <script>
     import _ from 'lodash'
+    import CscCallInput from '../../form/CscCallInput'
     import {
         startLoading,
         showGlobalError
@@ -94,7 +84,6 @@
     } from 'vuex'
     import {
         required,
-        maxLength,
         minValue,
         numeric
     } from 'vuelidate/lib/validators'
@@ -126,10 +115,12 @@
                 destinationForm: {
                     destination: '',
                     timeout: 300
-                }
+                },
+                destinationError: false
             }
         },
         components: {
+            CscCallInput,
             QSelect,
             QPopover,
             QField,
@@ -142,10 +133,6 @@
         },
         validations: {
             destinationForm: {
-                destination: {
-                    required,
-                    maxLength: maxLength(64)
-                },
                 timeout: {
                     required,
                     minValue: minValue(1),
@@ -163,19 +150,6 @@
                 'hasSendFaxFeature',
                 'hasFaxCapability'
             ]),
-            destinationInputError() {
-                if (!this.$v.destinationForm.destination.maxLength) {
-                    return this.$t('validationErrors.maxLength', {
-                        field: this.$t('pages.callForward.destination'),
-                        maxLength: this.$v.destinationForm.destination.$params.maxLength.max
-                    });
-                }
-                else if (!this.$v.destinationForm.destination.required) {
-                    return this.$t('validationErrors.fieldRequired', {
-                        field: this.$t('pages.callForward.destination')
-                    });
-                }
-            },
             timeoutInputError() {
                 if (!this.$v.destinationForm.timeout.required) {
                     return this.$t('validationErrors.fieldRequired', {
@@ -194,9 +168,6 @@
                     });
                 }
             },
-            isFormTypeNumber() {
-                return this.formType === 'number';
-            },
             isFormEnabled() {
                 return this.activeForm === this.groupName && this.formEnabled;
             },
@@ -252,8 +223,8 @@
                 this.$store.commit('callForward/resetDestinationState');
             },
             addDestination() {
-                if (this.$v.destinationForm.destination.$error ||
+                if (this.$v.destinationForm.timeout.$error ||
-                    this.$v.destinationForm.timeout.$error) {
+                    this.destinationError) {
                         showGlobalError(this.$t('validationErrors.generic'));
                 }
                 else {
@@ -266,6 +237,9 @@
                         sourcesetId: this.sourcesetId
                     });
                 }
+            },
+            error(state) {
+                this.destinationError = state;
             }
         }
     }

src/components/pages/SpeedDial/CscSpeedDialAddForm.vue

@@ -71,6 +71,9 @@
     import 'quasar-extras/animate/bounceInRight.css'
     import 'quasar-extras/animate/bounceOutRight.css'
     import CscCallInput from '../../form/CscCallInput'
+    import {
+        showGlobalError
+    } from '../../../helpers/ui'
     import {
         QCard,
         QCardTitle,
@@ -137,10 +140,15 @@
                 this.formEnabled = false;
             },
             save() {
+                if (this.destinationError) {
+                    showGlobalError(this.$t('validationErrors.generic'));
+                }
+                else {
                     this.$emit('save', {
                         destination: this.destination,
                         slot: this.slot
                     });
+                }
             },
             reset() {
                 this.destination = '';