From cd40d0bf6f95b8bdd8de24d3200680638971a630 Mon Sep 17 00:00:00 2001
From: raxelsen <raxelsen@sipwise.com>
Date: Tue, 11 Sep 2018 11:57:48 +0200
Subject: [PATCH] TT#40252 Validation for PBXDevice add form

Change-Id: Ie43af84b92529e81a50620af917805b6a66e231e
---
 .../PbxConfiguration/CscPbxDeviceAddForm.vue  | 68 +++++++++++++++++--
 .../PbxConfiguration/CscPbxModelSelect.vue    |  2 +-
 .../PbxConfiguration/CscPbxSeatAddForm.vue    |  1 -
 3 files changed, 64 insertions(+), 7 deletions(-)

diff --git a/src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue
index 3ce1d05c..84869554 100644
--- a/src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxDeviceAddForm.vue
@@ -1,7 +1,10 @@
 <template>
     <div>
-        <q-field>
+        <q-field :error-label="stationNameErrorMessage">
             <q-input
+                @input="$v.data.station_name.$touch"
+                @blur="$v.data.station_name.$touch"
+                :error="$v.data.station_name.$error"
                 v-model="data.station_name"
                 :disabled="loading"
                 :readonly="loading"
@@ -10,8 +13,11 @@
                 clearable
             />
         </q-field>
-        <q-field>
+        <q-field :error-label="identifierErrorMessage">
             <q-input
+                @input="$v.data.identifier.$touch"
+                @blur="$v.data.identifier.$touch"
+                :error="$v.data.identifier.$error"
                 v-model="data.identifier"
                 :disabled="loading"
                 :readonly="loading"
@@ -26,6 +32,7 @@
                 :label="$t('pbxConfig.deviceModel')"
                 @opened="modelSelectOpened()"
                 @select="selectProfile"
+                @reseted="resetProfile"
             />
         </q-field>
         <div
@@ -36,14 +43,19 @@
                 flat color="secondary"
                 icon="clear"
                 @click="cancel()"
-            >{{ $t('buttons.cancel') }}</q-btn>
+            >
+                {{ $t('buttons.cancel') }}
+            </q-btn>
             <q-btn
                 v-if="!loading"
                 flat
                 color="primary"
                 icon="done"
                 @click="save()"
-            >{{ $t('buttons.save') }}</q-btn>
+                :disabled="$v.data.$invalid || !data.profile_id"
+            >
+                {{ $t('buttons.save') }}
+            </q-btn>
         </div>
         <q-inner-loading
             v-show="loading"
@@ -58,7 +70,10 @@
 </template>
 
 <script>
-
+    import {
+        required,
+        maxLength
+    } from 'vuelidate/lib/validators'
     import {
         QCard,
         QCardTitle,
@@ -100,12 +115,52 @@
             QItem,
             QItemMain
         },
+        validations: {
+            data: {
+                station_name: {
+                    required,
+                    maxLength: maxLength(64)
+                },
+                identifier: {
+                    required,
+                    maxLength: maxLength(64)
+                }
+            }
+        },
         data () {
             return {
                 formEnabled: false,
                 data: this.getDefaults()
             }
         },
+        computed: {
+            stationNameErrorMessage() {
+                if (!this.$v.data.station_name.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.deviceStationName')
+                    });
+                }
+                else if (!this.$v.data.station_name.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.deviceStationName'),
+                        maxLength: this.$v.data.station_name.$params.maxLength.max
+                    });
+                }
+            },
+            identifierErrorMessage() {
+                if (!this.$v.data.identifier.required) {
+                    return this.$t('validationErrors.fieldRequired', {
+                        field: this.$t('pbxConfig.deviceIdentifier')
+                    });
+                }
+                else if (!this.$v.data.identifier.maxLength) {
+                    return this.$t('validationErrors.maxLength', {
+                        field: this.$t('pbxConfig.deviceIdentifier'),
+                        maxLength: this.$v.data.identifier.$params.maxLength.max
+                    });
+                }
+            }
+        },
         methods: {
             getDefaults() {
                 return {
@@ -136,6 +191,9 @@
             },
             selectProfile(profile) {
                 this.data.profile_id = profile.id;
+            },
+            resetProfile() {
+                this.data.profile_id = null;
             }
         }
     }
diff --git a/src/components/pages/PbxConfiguration/CscPbxModelSelect.vue b/src/components/pages/PbxConfiguration/CscPbxModelSelect.vue
index 4799c671..8cd12610 100644
--- a/src/components/pages/PbxConfiguration/CscPbxModelSelect.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxModelSelect.vue
@@ -123,7 +123,7 @@
                 let buttons = [];
                 if (this.selectedProfile.device_id !== null && this.erasable === true) {
                     buttons = [{
-                        icon: 'clear',
+                        icon: 'cancel',
                         error: false,
                         handler (event) {
                             event.stopPropagation();
diff --git a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
index 302401d2..9d29c908 100644
--- a/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
+++ b/src/components/pages/PbxConfiguration/CscPbxSeatAddForm.vue
@@ -77,7 +77,6 @@
 </template>
 
 <script>
-
     import {
         required,
         maxLength,