Merge pull request #16 from vedovelli/validation

Bugfixes and improvements

Author: vedovelli

client/config/dev.env.js

@@ -2,5 +2,6 @@ var merge = require('webpack-merge')
 var prodEnv = require('./prod.env')
 
 module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
+  NODE_ENV: '"development"',
+  API_URL: '"http://localhost:8000/api"',
 })

client/config/prod.env.js

@@ -1,4 +1,4 @@
 module.exports = {
   NODE_ENV: '"production"',
-  API_URL: '"http://localhost:8000/api"',
+  API_URL: '"https://spa.vedcasts.com.br/api"',
 }

client/package.json

@@ -17,6 +17,7 @@
     "bootstrap-sass": "^3.3.7",
     "font-awesome": "^4.7.0",
     "jquery": "^3.1.1",
+    "lodash": "^4.17.2",
     "sweetalert": "^1.1.3",
     "vue": "^2.0.1",
     "vue-router": "^2.0.1",

client/src/app/categories/form.vue

@@ -40,10 +40,18 @@
       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: {
-      ...mapActions(['setFetching', 'setMessage']),
+      ...mapActions(['setFetching', 'resetMessages', 'setMessage']),
 
       /**
       * If there's an ID in the route params
@@ -74,14 +82,19 @@
       },
       submit() {
         /**
-        * Shows the global spinner
+        * Pre-conditions are met
         */
-        this.setFetching({ fetching: true })
+        if (this.isValid) {
+          /**
+          * Shows the global spinner
+          */
+          this.setFetching({ fetching: true })
 
-        if (this.isEditing) {
-          this.update()
-        } else {
-          this.save()
+          if (this.isEditing) {
+            this.update()
+          } else {
+            this.save()
+          }
         }
       },
       save() {
@@ -111,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/app/routes.js

@@ -4,4 +4,5 @@ import { routes as login } from './login'
 
 // https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Spread_operator
 // Thus a new array is created, containing all objects that match the routes.
-export default [...login, ...dashboard, ...categories]
+// ...dashboard must be the last one because of the catchall instruction
+export default [...login, ...categories, ...dashboard]

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)
   }

client/src/store/actions.js

@@ -16,8 +16,9 @@ export default {
 
   resetMessages({ commit }) {
     commit(TYPES.MAIN_SET_MESSAGE, { type: 'success', message: '' })
-    commit(TYPES.MAIN_SET_MESSAGE, { type: 'error', message: '' })
+    commit(TYPES.MAIN_SET_MESSAGE, { type: 'error', message: [] })
     commit(TYPES.MAIN_SET_MESSAGE, { type: 'warning', message: '' })
+    commit(TYPES.MAIN_SET_MESSAGE, { type: 'validation', message: {} })
   },
 
   setToken({ commit }, token) {

client/src/store/state.js

@@ -5,8 +5,9 @@ export default {
   user: {},
   messages: {
     success: '',
-    error: '',
+    error: [],
     warning: '',
+    validation: {},
   },
   fetching: false,
 }