#320. Take control of validators to enable an OR validation.

qcif · Jan 25, 2018 · efd5c29 · efd5c29
1 parent 378aff6
commit efd5c29
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 5 deletions.
diff --git a/src/renderer/mixins/ValidationRules.vue b/src/renderer/mixins/ValidationRules.vue
@@ -34,6 +34,9 @@ export default {
   mounted: function() {
     const dict = {
       en: {
+        // messages: {
+        //   email: () => `The email field must be a valid email.`
+        // },
         custom: {
           version: {
             regex: 'The version field must comply with semantic versioning e.g. 1.0.0'
@@ -49,6 +52,12 @@ export default {
           },
           formatValue: {
             required: 'There must be a format value pattern present.'
+          },
+          sourceUrl: {
+            url: 'The path field must be a valid email or path.'
+          },
+          sourcePath: {
+            regex: 'The path field must be a valid email or path.'
           }
         }
       }

diff --git a/src/renderer/partials/ColumnProperties.vue b/src/renderer/partials/ColumnProperties.vue
@@ -32,7 +32,7 @@
               <input type="text" :class="{ 'form-group-sm constraint-text': true,'validate-danger': errors.has(option) }" :value="getConstraintValue(option)" @input="setConstraintValue(option, $event.target.value)" v-validate.initial="constraintValidationRules(option)" :name="option"/>
             </template>
             <div v-show="errors.has(option) && removeConstraint(option)" class="row help validate-danger">
-              {{ errors.first(option)}}
+              {{ errors.collect(option)}}
             </div>
           </div>
         </div>

diff --git a/src/renderer/partials/Sources.vue b/src/renderer/partials/Sources.vue
@@ -4,7 +4,10 @@
       <div class="inputs-container">
         <div v-for="prop in Object.keys(source)" class="input-group">
           <span class="input-group-addon input-sm">{{prop}}</span>
-          <input class="form-control input-sm" :value="source[prop]" @input="setSourceProp(index, prop, $event.target.value)" type="text" />
+          <input :class="{ 'form-control input-sm': true, 'validate-danger': errors.has(prop + index) }" :value="source[prop]" @input="setSourceProp(index, prop, $event.target.value)" type="text" :id="prop + index" v-validate="sourceValidationRules(prop)" :name="prop + index"/>
+          <div v-show="errors.has(prop + index) || errors.has('coupon')" class="row help validate-danger">
+            {{ errors}}
+          </div>
         </div>
       </div>
       <button v-show="getSources.length > 1" type="button" class="btn btn-danger btn-sm" @click="removeSource(index)">
@@ -26,10 +29,13 @@ import {
 } from 'vuex'
 import SideNav from './SideNav'
 import AsyncComputed from 'vue-async-computed'
+import ValidationRules from '../mixins/ValidationRules'
+import VeeValidate from 'vee-validate'
 import Vue from 'vue'
 Vue.use(AsyncComputed)
 export default {
   name: 'sources',
+  mixins: [ValidationRules],
   data() {
     return {
       sources: []
@@ -38,7 +44,10 @@ export default {
   props: ['setProperty', 'getProperty', 'getPropertyGivenHotId'],
   extends: SideNav,
   computed: {
-    ...mapGetters(['getActiveTab'])
+    ...mapGetters(['getActiveTab']),
+    regexForPath() {
+      return /^([.](?![.])(?=[/]))?(([^\0])+[/]?)+$/
+    }
   },
   asyncComputed: {
     getSources: {
@@ -68,7 +77,7 @@ export default {
       this.setProperty('sources', sources)
       this.sources = sources
     },
-    emptySource() {
+    emptySource: function() {
       return {'title': '', 'path': '', 'email': ''}
     },
     getSourcesFromTab: async function(tab) {
@@ -85,10 +94,42 @@ export default {
         }, 100)
       }
     },
-    setSourceProp: function(index, prop, value) {
+    setSourceProp: async function(index, prop, value) {
+      let vueValidator = this.$validator.errors
+      let sourceErrors = true
+      if (prop === 'path') {
+        try {
+          sourceErrors = await this.$validator.validateAll({sourcePath: value, sourceUrl: value})
+        } catch (err) {
+          console.log('Problem with validation', err)
+        }
+      }
       this.setProperty(`sources[${index}][${prop}]`, value)
       let sources = this.getProperty('sources') || []
       this.sources = sources
+      let name = `${prop}${index}`
+      if (!sourceErrors) {
+        if (!this.$validator.errors.has('sourcePath') || !this.$validator.errors.has('sourceUrl')) {
+          // 1 of validations passed so ensure neither error message remains
+          this.$validator.errors.remove('sourcePath')
+          this.$validator.errors.remove('sourceUrl')
+        } else if (this.$validator.errors.has('sourcePath') && this.$validator.errors.has('sourceUrl')) {
+          // we only need 1 error message
+          this.$validator.errors.remove('sourcePath')
+        }
+      }
+
+      console.log(this.$validator.errors)
+    },
+    sourceValidationRules: function(prop) {
+      switch (prop) {
+        case 'email':
+          return 'email'
+        case 'title':
+          return 'required'
+        default:
+          return ''
+      }
     }
   },
   mounted: function() {
@@ -99,9 +140,28 @@ export default {
     getActiveTab: function(tab) {
       this.initSources(tab)
     }
+  },
+  beforeDestroy: function() {
+    this.$validator.detach('sourceUrl')
+    this.$validator.detach('sourcePath')
+  },
+  created: function() {
+    this.$validator.attach({
+      name: 'sourceUrl',
+      rules: 'url:true'
+    })
+    this.$validator.attach({
+      name: 'sourcePath',
+      rules: {
+        regex: this.regexForPath
+      }
+    })
   }
 }
 </script>
 <style lang="styl" scoped>
 @import '~static/css/sources'
 </style>
+<style lang="styl" scoped>
+@import '~static/css/validationrules'
+</style>