TT#46178 SpeedDial destination input validation

Change-Id: Ib3be8962f17edbced21f2eebf78895ce20379afc

src/components/form/CscCallInput.vue

@@ -0,0 +1,97 @@
+
+<template>
+    <q-field
+        :error-label="errorMessage"
+    >
+        <q-input
+            dark
+            clearable
+            type="text"
+            :float-label="label"
+            v-model="inputValue"
+            @keyup.enter="submit"
+            @keypress.space.prevent
+            @keydown.space.prevent
+            @keyup.space.prevent
+            @input="input"
+            @blur="blur"
+            :error="$v.inputValue.$error"
+        />
+    </q-field>
+</template>
+
+<script>
+    import {
+        QField,
+        QInput
+    } from 'quasar-framework'
+    import { userInfo } from '../../helpers/validation'
+    import {
+        maxLength,
+        required
+    } from 'vuelidate/lib/validators'
+
+    export default {
+        name: 'csc-call-input',
+        props: {
+            label: String
+        },
+        data () {
+            return {
+                inputValue: '',
+                error: ''
+            }
+        },
+        validations: {
+            inputValue: {
+                userInfo,
+                maxLength: maxLength(64),
+                required
+            }
+        },
+        components: {
+            QField,
+            QInput
+        },
+        computed: {
+            errorMessage() {
+                if (!this.$v.inputValue.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.label
+                    });
+                }
+                else if (!this.$v.inputValue.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.label,
+                        maxLength: this.$v.inputValue.$params.maxLength.max
+                    });
+                }
+                else if (!this.$v.inputValue.userInfo) {
+                    return this.$t('validationErrors.inputValidNumber');
+                }
+            }
+        },
+        methods: {
+            submit() {
+                this.$emit('submit');
+            },
+            input() {
+                this.$v.inputValue.$touch();
+                this.error = this.$v.inputValue.$error;
+                this.$emit('input', this.inputValue);
+            },
+            blur() {
+                this.$v.inputValue.$touch();
+                this.error = this.$v.inputValue.$error;
+            }
+        },
+        watch: {
+            error(state) {
+                this.$emit('error', state);
+            }
+        }
+    }
+</script>
+
+<style lang="stylus" rel="stylesheet/stylus">
+</style>

src/components/form/CscDestinationInput.vue

@@ -1,53 +0,0 @@
-
-<template>
-    <q-input
-        dark
-        clearable
-        type="text"
-        :float-label="label"
-        :value="destination"
-        @input="inputDestination"
-        @keyup.enter="submit"
-        @keypress.space.prevent
-        @keydown.space.prevent
-    />
-</template>
-
-<script>
-    import {
-        normalizeNumber,
-        rawNumber
-    } from '../../filters/number-format'
-    import {
-        QInput,
-        Platform
-    } from 'quasar-framework'
-
-    export default {
-        name: 'csc-destination-input',
-        props: {
-            loading: Boolean,
-            label: String
-        },
-        data () {
-            return {
-                destination: ''
-            }
-        },
-        components: {
-            QInput
-        },
-        methods: {
-            submit() {
-                this.$emit('submit');
-            },
-            inputDestination(value) {
-                this.destination = normalizeNumber(value, Platform.is.mobile);
-                this.$emit('input', rawNumber(this.destination));
-            }
-        }
-    }
-</script>
-
-<style lang="stylus" rel="stylesheet/stylus">
-</style>

src/components/pages/SpeedDial/CscSpeedDialAddForm.vue

@@ -12,14 +12,12 @@
                     radio
                 />
             </q-field>
-            <q-field>
-                <csc-destination-input
-                    :loading="loading"
-                    :label="$t('speedDial.destination')"
-                    v-model="destination"
-                    @submit="save()"
-                />
-            </q-field>
+            <csc-call-input
+                :label="$t('speedDial.destination')"
+                v-model="destination"
+                @submit="save"
+                @error="error"
+            />
             <div
                 class="row justify-center form-actions"
             >
@@ -38,6 +36,7 @@
                     color="primary"
                     icon="done"
                     @click="save()"
+                    :disable="destinationError"
                 >
                     {{ $t('buttons.save') }}
                 </q-btn>
@@ -71,7 +70,7 @@
 <script>
     import 'quasar-extras/animate/bounceInRight.css'
     import 'quasar-extras/animate/bounceOutRight.css'
-    import CscDestinationInput from '../../form/CscDestinationInput'
+    import CscCallInput from '../../form/CscCallInput'
     import {
         QCard,
         QCardTitle,
@@ -98,11 +97,12 @@
             return {
                 formEnabled: false,
                 destination: '',
-                slot: ''
+                slot: '',
+                destinationError: false
             }
         },
         components: {
-            CscDestinationInput,
+            CscCallInput,
             QCard,
             QCardTitle,
             QCardMain,
@@ -117,9 +117,6 @@
             QIcon
         },
         methods: {
-            destinationInput(input) {
-                this.destination = input;
-            },
             enableForm(){
                 if (this.slotOptions.length > 0) {
                     this.reset();
@@ -148,6 +145,9 @@
             reset() {
                 this.destination = '';
                 this.slot = this.slotOptions[0].value ? this.slotOptions[0].value : '';
+            },
+            error(state) {
+                this.destinationError = state;
             }
         }
     }

src/locales/en.json

@@ -24,6 +24,9 @@
         "selectNew": "Select new",
         "resetDefaults": "Reset to defaults"
     },
+    "form": {
+        "destinationLabel": "Destination"
+    },
     "toasts": {
         "callAvailable": "You are now able to start and receive calls",
         "callNotAvailable": "Could not initialize call functionality properly"