From f6795c77b0f0773bb4ea5ce160015ebb211bd995 Mon Sep 17 00:00:00 2001
From: raxelsen <raxelsen@sipwise.com>
Date: Thu, 30 Aug 2018 14:56:23 +0200
Subject: [PATCH] TT#40253 Notify user invalid destination input

What has been done:
- TT#43257, Bind validation functions to the input fields
- TT#43256, Provide proper error messages and put these in the
  translation file

Change-Id: I3b8d9c7b627fab960fc5491b0bb8aa9266f6bc73
---
 src/components/call/CscPhoneNumberInput.vue   |   4 +-
 .../CallForward/CscAddDestinationForm.vue     | 103 +++++++++++++++---
 .../PbxConfiguration/CscPbxGroupAddForm.vue   |  35 ++++--
 .../pages/PbxConfiguration/CscPbxSeat.vue     |   2 +-
 .../PbxConfiguration/CscPbxSeatAddForm.vue    |  26 +++--
 src/locales/en.json                           |  28 ++---
 6 files changed, 142 insertions(+), 56 deletions(-)

diff --git a/src/components/call/CscPhoneNumberInput.vue b/src/components/call/CscPhoneNumberInput.vue
index fe334533..e323f2a3 100644
--- a/src/components/call/CscPhoneNumberInput.vue
+++ b/src/components/call/CscPhoneNumberInput.vue
@@ -71,10 +71,10 @@
         ],
         computed: {
             errorMessage() {
-                return this.$t('call.inputValidNumber');
+                return this.$t('validationErrors.inputValidNumber');
             },
             helperMessage() {
-                return this.$t('call.inputNumber');
+                return this.$t('validationErrors.inputNumber');
             },
             inputReadonly() {
                 return this.isMobile;
diff --git a/src/components/pages/CallForward/CscAddDestinationForm.vue b/src/components/pages/CallForward/CscAddDestinationForm.vue
index ccc61392..02ef5a22 100644
--- a/src/components/pages/CallForward/CscAddDestinationForm.vue
+++ b/src/components/pages/CallForward/CscAddDestinationForm.vue
@@ -29,8 +29,7 @@
         </q-btn>
         <div v-if="isFormEnabled">
             <q-field
-                :error="addFormError"
-                :error-label="$t('pages.callForward.addInputError')"
+                :error-label="destinationInputError"
             >
                 <q-input
                     :before="beforeIconDestination"
@@ -41,11 +40,13 @@
                     :clearable="isFormTypeNumber"
                     :autofocus="isFormTypeNumber"
                     :disable="!isFormTypeNumber || addDestinationIsRequesting"
+                    @input="$v.destinationForm.destination.$touch"
+                    @blur="$v.destinationForm.destination.$touch"
+                    :error="$v.destinationForm.destination.$error"
                 />
             </q-field>
             <q-field
-                :error="addFormError"
-                :error-label="$t('pages.callForward.addInputError')"
+                :error-label="timeoutInputError"
             >
                 <q-input
                     v-if="isFormTypeNumber"
@@ -54,6 +55,9 @@
                     type="number"
                     v-model="destinationForm.timeout"
                     suffix="seconds"
+                    @input="$v.destinationForm.timeout.$touch"
+                    @blur="$v.destinationForm.timeout.$touch"
+                    :error="$v.destinationForm.timeout.$error"
                 />
             </q-field>
             <q-btn
@@ -68,6 +72,7 @@
                 color="primary"
                 icon-right="fa-save"
                 @click="addDestination()"
+                :disable="$v.destinationForm.destination.$error || $v.destinationForm.timeout.$error"
             >
                 {{ $t('buttons.save') }}
             </q-btn>
@@ -76,12 +81,31 @@
 </template>
 
 <script>
-
     import _ from 'lodash'
-    import { startLoading } from '../../../helpers/ui'
-    import { mapGetters, mapState } from 'vuex'
-    import { QItem, Toast, QBtn, QSelect, QPopover, QList,
-        QField, QInput, QSlider } from 'quasar-framework'
+    import {
+        startLoading,
+        showGlobalError
+    } from '../../../helpers/ui'
+    import {
+        mapGetters,
+        mapState
+    } from 'vuex'
+    import {
+        required,
+        maxLength,
+        minValue
+    } from 'vuelidate/lib/validators'
+    import {
+        QItem,
+        Toast,
+        QBtn,
+        QSelect,
+        QPopover,
+        QList,
+        QField,
+        QInput,
+        QSlider
+    } from 'quasar-framework'
     export default {
         name: 'csc-add-destination-form',
         props: [
@@ -95,7 +119,6 @@
         ],
         data () {
             return {
-                addFormError: false,
                 formEnabled: false,
                 destinationForm: {
                     destination: '',
@@ -114,6 +137,18 @@
             Toast,
             QBtn
         },
+        validations: {
+            destinationForm: {
+                destination: {
+                    required,
+                    maxLength: maxLength(64)
+                },
+                timeout: {
+                    required,
+                    minValue: minValue(1)
+                }
+            }
+        },
         computed: {
             ...mapState('callForward', [
                 'activeForm',
@@ -124,6 +159,32 @@
                 '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.minValue) {
+                    return this.$t('validationErrors.minValueSecond', {
+                        field: this.$t('pages.callForward.timeout'),
+                        minValue: this.$v.destinationForm.timeout.$params.minValue.min
+                    });
+                }
+                else if (!this.$v.destinationForm.timeout.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pages.callForward.timeout')
+                    });
+                }
+            },
             isFormTypeNumber() {
                 return this.formType === 'number';
             },
@@ -178,14 +239,20 @@
                 this.$store.commit('callForward/resetDestinationState');
             },
             addDestination() {
-                startLoading();
-                this.$store.dispatch('callForward/addDestination', {
-                    form: this.destinationForm,
-                    destinations: this.destinations,
-                    timeset: this.timeset,
-                    timesetId: this.timesetId,
-                    sourcesetId: this.sourcesetId
-                });
+                if (this.$v.destinationForm.destination.$error ||
+                    this.$v.destinationForm.timeout.$error) {
+                        showGlobalError(this.$t('validationErrors.generic'));
+                }
+                else {
+                    startLoading();
+                    this.$store.dispatch('callForward/addDestination', {
+                        form: this.destinationForm,
+                        destinations: this.destinations,
+                        timeset: this.timeset,
+                        timesetId: this.timesetId,
+                        sourcesetId: this.sourcesetId
+                    });
+                }
             }
         }
     }
diff --git a/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
index a862d13e..3149af08 100644
--- a/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxGroupAddForm.vue
@@ -3,6 +3,7 @@
         <q-field :error-label="groupNameErrorMessage">
             <q-input
                 @input="$v.data.name.$touch"
+                @blur="$v.data.name.$touch"
                 :error="$v.data.name.$error"
                 :disabled="loading"
                 :readonly="loading"
@@ -15,6 +16,7 @@
         <q-field :error-label="extensionErrorMessage">
             <q-input
                 @input="$v.data.extension.$touch"
+                @blur="$v.data.extension.$touch"
                 :error="$v.data.extension.$error"
                 :disabled="loading"
                 :readonly="loading"
@@ -100,7 +102,6 @@
 </template>
 
 <script>
-
     import {
         required,
         minValue,
@@ -171,38 +172,50 @@
         computed: {
             groupNameErrorMessage() {
                 if (!this.$v.data.name.required) {
-                    return this.$t('pbxConfig.requiredGroupName');
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.groupName')
+                    });
                 }
                 else if (!this.$v.data.name.maxLength) {
-                    return this.$t('pbxConfig.groupNameMaxLength', {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.groupName'),
                         maxLength: this.$v.data.name.$params.maxLength.max
                     });
                 }
             },
             extensionErrorMessage() {
                 if (!this.$v.data.extension.required) {
-                    return this.$t('pbxConfig.requiredExtension');
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.extension')
+                    });
                 }
-                else if (!this.$v.data.name.maxLength) {
-                    return this.$t('pbxConfig.extensionMaxLength', {
+                else if (!this.$v.data.extension.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.extension'),
                         maxLength: this.$v.data.extension.$params.maxLength.max
                     });
                 }
-                else if (!this.$v.data.name.numeric) {
-                    return this.$t('pbxConfig.extensionAlphaNum');
+                else if (!this.$v.data.extension.numeric) {
+                    return this.$t('validationErrors.alphaNum', {
+                        field: this.$t('pbxConfig.extension'),
+                    });
                 }
             },
             huntTimeoutErrorMessage() {
                 if (!this.$v.data.huntTimeout.required) {
-                    return this.$t('pbxConfig.requiredHuntTimeout');
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.huntTimeoutSentence')
+                    });
                 }
                 else if (!this.$v.data.huntTimeout.minValue) {
-                    return this.$t('pbxConfig.huntTimeoutMinValue', {
+                    return this.$t('validationErrors.minValueSecond', {
+                        field: this.$t('pbxConfig.huntTimeoutSentence'),
                         minValue: this.$v.data.huntTimeout.$params.minValue.min
                     });
                 }
                 else if (!this.$v.data.huntTimeout.maxValue) {
-                    return this.$t('pbxConfig.huntTimeoutMaxValue', {
+                    return this.$t('validationErrors.maxValueSecond', {
+                        field: this.$t('pbxConfig.huntTimeoutSentence'),
                         maxValue: this.$v.data.huntTimeout.$params.maxValue.max
                     });
                 }
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeat.vue b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
index 3655be7f..1b213b9f 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeat.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeat.vue
@@ -58,7 +58,7 @@
                 class="csc-list-item-main"
                 v-if="expanded"
             >
-                <q-field :label="$t('pbxConfig.seatName')">
+                <q-field :label="$t('pbxConfig.name')">
                     <q-input
                         v-model="changes.name"
                         :after="nameButtons"
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
index 54a8cf6d..302401d2 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
@@ -3,18 +3,20 @@
         <q-field :error-label="seatNameErrorMessage">
             <q-input
                 @input="$v.data.name.$touch"
+                @blur="$v.data.name.$touch"
                 :error="$v.data.name.$error"
                 :disabled="loading"
                 :readonly="loading"
                 v-model="data.name"
                 autofocus
-                :float-label="$t('pbxConfig.seatName')"
+                :float-label="$t('pbxConfig.name')"
                 clearable
             />
         </q-field>
         <q-field :error-label="extensionErrorMessage">
             <q-input
                 @input="$v.data.extension.$touch"
+                @blur="$v.data.extension.$touch"
                 :error="$v.data.extension.$error"
                 :disabled="loading"
                 :readonly="loading"
@@ -138,25 +140,33 @@
         computed: {
             seatNameErrorMessage() {
                 if (!this.$v.data.name.required) {
-                    return this.$t('pbxConfig.requiredSeatName');
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.seatName')
+                    });
                 }
                 else if (!this.$v.data.name.maxLength) {
-                    return this.$t('pbxConfig.seatNameMaxLength', {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.seatName'),
                         maxLength: this.$v.data.name.$params.maxLength.max
                     });
                 }
             },
             extensionErrorMessage() {
                 if (!this.$v.data.extension.required) {
-                    return this.$t('pbxConfig.requiredExtension');
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.extension')
+                    });
                 }
-                else if (!this.$v.data.name.maxLength) {
-                    return this.$t('pbxConfig.extensionMaxLength', {
+                else if (!this.$v.data.extension.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.extension'),
                         maxLength: this.$v.data.extension.$params.maxLength.max
                     });
                 }
-                else if (!this.$v.data.name.numeric) {
-                    return this.$t('pbxConfig.extensionAlphaNum');
+                else if (!this.$v.data.extension.numeric) {
+                    return this.$t('validationErrors.alphaNum', {
+                        field: this.$t('pbxConfig.extension'),
+                    });
                 }
             }
         },
diff --git a/src/locales/en.json b/src/locales/en.json
index 117e41de..405caf2b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -24,8 +24,15 @@
         "callNotAvailable": "Could not initialize call functionality properly"
     },
     "validationErrors": {
+        "generic": "You have invalid form input. Please check and try again.",
+        "required": "This field is required.",
+        "maxLength": "{field} must have at most {maxLength} letters",
         "fieldRequired": "{field} is required",
-        "minValueSecond": "{field} must be at least {minValue} second"
+        "minValueSecond": "{field} must be at least {minValue} second",
+        "maxValueSecond": "{field} must be maximum of {maxValue} seconds",
+        "alphaNum": "{field} must consist of numeric characters only",
+        "inputNumber": "Input a phone number",
+        "inputValidNumber": "Input a valid phone number"
     },
     "navigation": {
         "home": {
@@ -277,8 +284,6 @@
         "incoming": "Incoming ...",
         "ended": "Ended",
         "call": "Established",
-        "inputNumber": "Input a phone number",
-        "inputValidNumber": "Input a valid phone number",
         "number": "Phone number",
         "endCall": "End Call",
         "endCallDialog": "You are about to end the current call. Are you sure?",
@@ -297,6 +302,7 @@
         "groupName": "Group Name",
         "huntPolicy": "Hunt Policy",
         "huntTimeout": "Hunt Timeout",
+        "huntTimeoutSentence": "Hunt timeout",
         "primaryNumber": "Primary Number",
         "aliasNumbers": "Alias Numbers",
         "serialRinging": "Serial Ringing",
@@ -309,7 +315,9 @@
         "removeGroup": "Remove group",
         "removeGroupTitle": "Remove group",
         "removeGroupText": "You are about to remove group {group}",
-        "seatName": "Name",
+        "groupName": "Group name",
+        "name": "Name",
+        "seatName": "Seat name",
         "addSeat": "Add Seat",
         "removeSeat": "Remove seat",
         "removeSeatTitle": "Remove seat",
@@ -327,18 +335,6 @@
         "noStationName": "Could not find any device with station name matching the filter criteria",
         "noGroups": "No groups created yet",
         "noSeats": "No seats created yet",
-        "requiredGroupName": "Group name is required",
-        "groupNameMaxLength": "Group name must have at most {maxLength} letters",
-        "requiredExtension": "Extension is required",
-        "extensionMinValue": "Extension must be at least {minValue}",
-        "extensionMaxValue": "Extension must be maximum {maxValue}",
-        "requiredHuntTimeout": "Hunt timeout is required",
-        "huntTimeoutMinValue": "Hunt timeout must be at least {minValue} second",
-        "huntTimeoutMaxValue": "Hunt timeout must be maximum {maxValue} seconds",
-        "requiredSeatName": "Seat name is required",
-        "seatNameMaxLength": "Seat name must have at most {maxLength} letters",
-        "extensionMaxLength": "Extension must have at most {maxLength} letters",
-        "extensionAlphaNum": "Only numeric characters are allowed",
         "toasts": {
             "changedFieldToast": "Changed {type} to {name}",
             "updatedAliasNumbersToast": "Alias numbers field updated!",