Validation messages client side.

Author: vedovelli

client/src/app/categories/form.vue

@@ -40,6 +40,14 @@
       isEditing() {
         return this.category.id > 0
       },
+      isValid() {
+        this.resetMessages()
+        if (this.category.name === '') {
+          this.setMessage({ type: 'error', message: ['Please fill category name'] })
+          return false
+        }
+        return true
+      },
     },
 
     methods: {
@@ -72,19 +80,11 @@
           })
         }
       },
-      isValid() {
-        this.resetMessages()
-        if (this.category.name === '') {
-          this.setMessage({ type: 'error', message: ['Please fill category name'] })
-          return false
-        }
-        return true
-      },
       submit() {
         /**
         * Pre-conditions are met
         */
-        if (this.isValid()) {
+        if (this.isValid) {
           /**
           * Shows the global spinner
           */
@@ -124,7 +124,7 @@
         })
       },
       update() {
-        this.$http.put(`categories/${this.category.id}/update`, { category: this.category }).then(() => {
+        this.$http.put(`categories/${this.category.id}/update`, this.category).then(() => {
           /**
           * This event will notify the world about
           * the category creation. In this case

client/src/components/general/alerts.vue

@@ -1,6 +1,7 @@
 
 <script>
   import { mapState, mapActions } from 'vuex'
+  import { isEmpty } from 'lodash'
 
   export default {
     computed: {
@@ -11,13 +12,18 @@
       hasErrorMessages() {
         return this.messages.error.length > 0
       },
+      hasValidationMessages() {
+        return !isEmpty(this.messages.validation)
+      },
     },
     methods: {
       ...mapActions(['setMessage']),
       dismiss(type) {
         let obj
         if (type === 'error') {
           obj = { type, message: [] }
+        } else if (type === 'validation') {
+          obj = { type, message: {} }
         } else {
           obj = { type, message: '' }
         }
@@ -48,5 +54,15 @@
       </ul>
     </div>
 
+    <!-- Validation messages -->
+    <div class="alert alert-danger" v-show="hasValidationMessages">
+      <button type="button" class="close" aria-label="Close" @click="dismiss('validation')">
+        <span aria-hidden="true">&times;</span>
+      </button>
+      <ul>
+        <li v-for="error in messages.validation">{{ error[0] }}</li>
+      </ul>
+    </div>
+
   </div>
 </template>

client/src/plugins/http.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { isArray } from 'lodash'
 import store from '../store'
 import router from '../router'
 import { apiUrl } from '../config'
@@ -30,7 +31,18 @@ http.interceptors.response.use(
     if (error.response.data.reason === 'token') {
       router.push({ name: 'login.index' })
     }
-    store.dispatch('setMessage', { type: 'error', message: error.response.data.messages })
+    /**
+    * Error messages are sent in arrays
+    */
+    if (isArray(error.response.data)) {
+      store.dispatch('setMessage', { type: 'error', message: error.response.data.messages })
+    /**
+    * Laravel generated validation errors are
+    * sent in an object
+    */
+    } else {
+      store.dispatch('setMessage', { type: 'validation', message: error.response.data })
+    }
     store.dispatch('setFetching', { fetching: false })
     return Promise.reject(error)
   }