LIMS-2137: Update vee-validate to v3

client/package.json

@@ -91,7 +91,7 @@
     "uglymol": "^0.6.4",
     "underscore": "1.8.3",
     "util": "^0.12.4",
-    "vee-validate": "^2.2.15",
+    "vee-validate": "^3.0.0",
     "vue": "^2.6.10",
     "vue-router": "^3.4.3",
     "vuex": "^3.5.1"

client/src/js/app/components/extended-validation-provider.vue

@@ -1,14 +1,14 @@
 <template>
   <validation-provider
     :ref="ref"
-    v-slot="{ errors, flags: { changed } }"
+    v-slot="{ errors, dirty }"
     :rules="rules"
     :name="name"
     :tag="tag"
     :vid="vid"
     :slim="slim"
   >
-    <div :class="{'tw-bg-dark-amber': changed, [classNames]: true }">
+    <div :class="{'tw-bg-dark-amber': dirty, [classNames]: true }">
       <slot
         :errors="errors"
         :input-changed="updateFieldFlags"
@@ -56,8 +56,8 @@ export default {
   },
   methods: {
     updateFieldFlags() {
-      this.$refs[this.ref].setFlags({ changed: true })
+      this.$refs[this.ref].setFlags({ dirty: true })
     }
   }
 }
-</script>
+</script>

client/src/js/app/index.js

@@ -2,7 +2,8 @@ require('font-awesome/css/font-awesome.css')
 require('css/main.scss')
 
 import Vue from 'vue'
-import VeeValidate from 'vee-validate'
+import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'
+import * as rules from 'vee-validate/dist/rules'
 import PortalVue from 'portal-vue'
 
 import Main from 'app/layouts/main.vue'
@@ -13,20 +14,23 @@ import router from 'app/router/router'
 import MarionetteApp from 'app/marionette-application.js'
 
 import config from 'config.json'
-import VeeValidateCustomRules from 'app/mixins/vee-validate-custom-rules'
+import 'app/mixins/vee-validate-custom-rules'
 
-Vue.use(VeeValidate)
 Vue.use(PortalVue)
 
-Vue.use(VeeValidate)
+Vue.component('ValidationObserver', ValidationObserver)
+Vue.component('ValidationProvider', ValidationProvider)
+
+Object.keys(rules).forEach(rule => {
+  extend(rule, rules[rule]);
+});
 
 Vue.config.productionTip = false
 Vue.config.devtools = !config.production
 
 const vm = new Vue({
   store,
   router,
-  mixins: [VeeValidateCustomRules],
   created: function() {
     console.log("VUE::created")
 

client/src/js/app/mixins/vee-validate-custom-rules.js

@@ -1,17 +1,14 @@
+import { extend } from 'vee-validate'
+
 const isNullOrUndefined = (...values) => {
   return values.every(value => {
     return value === null || value === undefined;
   });
 };
 
-export default {
-  data() {
-    return {}
-  },
-  created() {
-    this.$validator.extend('closeExp', {
-      getMessage: field => field+ ' must have correctly closed brackets',
-      validate: value => {
+extend('closeExp', {
+    message: fieldName => fieldName + ' must have correctly closed brackets',
+    validate: value => {
         let count = 0;
         for(let i=0; i < value.length; i++){
           if(value.charAt(i) === '(')
@@ -24,16 +21,12 @@ export default {
           }
         }
         return count === 0;
-      }
-    })
+    }
+})
 
-    this.$validator.extend('field_exists', (value, [otherValue]) => {
-      if (otherValue) return true;
-    }, {
-      hasTarget: true
-    })
-
-    this.$validator.extend('positive_decimal', (value, { decimals = '*', separator = '.' } = {}) => {
+extend('positive_decimal', {
+  params: ['decimals', 'separator'],
+  validate: (value, { decimals = '*', separator = '.' } = {}) => {
       const validatePositiveDecimalValues = (val) => {
         if (isNullOrUndefined(val) || val === '' || val <= 0) {
           return false;
@@ -57,11 +50,17 @@ export default {
       }
 
       return validatePositiveDecimalValues(value)
-    }, {
-      paramNames: ['decimals', 'separator']
-    })
+  },
+  message: (fieldName, { decimals } = {}) => {
+    if (decimals && decimals !== '*') {
+      return fieldName + ' must be a positive decimal with a maximum of ' + decimals + ' decimal places'
+    }
+    return fieldName + ' must be a positive decimal'
+  }
+})
 
-    this.$validator.extend('non_zero_numeric', (value) => {
+extend('non_zero_numeric', {
+  validate: (value) => {
       const validateNonZeroNumericValues = (val) => {
         if (isNullOrUndefined(val) || val === '' || Number(val) <= 0) {
           return false;
@@ -75,6 +74,17 @@ export default {
       }
 
       return validateNonZeroNumericValues(value)
-    })
-  }
-}
+  },
+  message: fieldName => fieldName + ' must be a non-zero whole number'
+})
+
+extend('decimal', {
+  validate: value => {
+    if (value === null || value === undefined || value === '') {
+      return true
+    }
+    // Matches positive and negative floats/integers (e.g., 12, -3.4, 0.5)
+    return !isNaN(parseFloat(value)) && isFinite(value);
+  },
+  message: fieldName => fieldName + ' must be a valid decimal number'
+})

client/src/js/app/router/router.js

@@ -36,7 +36,6 @@ import CellRoutes from 'modules/cell/routes.js'
 import StatusRoutes from 'modules/status/routes.js'
 import FaultRoutes from 'modules/fault/routes.js'
 import StatsRoutes from 'modules/stats/routes.js'
-import SubmissionRoutes from 'modules/submission/routes.js'
 import VisitsRoutes from 'modules/visits/routes.js'
 import { resolve } from 'promise'
 
@@ -101,7 +100,6 @@ router.addRoutes(CellRoutes)
 router.addRoutes(StatusRoutes)
 router.addRoutes(FaultRoutes)
 router.addRoutes(StatsRoutes)
-router.addRoutes(SubmissionRoutes)
 router.addRoutes(VisitsRoutes)
 
 
@@ -193,4 +191,4 @@ function handleRoutePermissions(routes) {
   return permission
 }
 
-export default router
+export default router

client/src/js/app/store/modules/store.menus.js

@@ -6,7 +6,6 @@ import SmMenu from 'modules/types/sm/menu.js'
 import TomoMenu from 'modules/types/tomo/menu.js'
 import XpdfMenu from 'modules/types/xpdf/menu.js'
 import GenProcMenu from 'modules/types/genproc/menu.js'
-import ConexsMenu from 'modules/types/conexs/menu.js'
 import EmMenu from 'modules/types/em/menu.js'
 
 const menuStore = {
@@ -21,14 +20,14 @@ const menuStore = {
         'sm': SmMenu,
         'tomo': TomoMenu,
         'xpdf': XpdfMenu,
-        'b18': ConexsMenu,
+        'b18': GenProcMenu,
         'i16': GenProcMenu,
         'i14': GenProcMenu,
-        'i18': ConexsMenu,
+        'i18': GenProcMenu,
         'i08': GenProcMenu,
         'i11': GenProcMenu,
         'k11': GenProcMenu,
-        'i20': ConexsMenu,
+        'i20': GenProcMenu,
         'i12': GenProcMenu,
         'i13': GenProcMenu,
         'b24': GenProcMenu,

client/src/js/modules/feedback/views/vue-feedback.js

@@ -1,13 +1,8 @@
 define(['vue',
-    'veevalidate',
-    'promise',
     'utils/vuewrapper',
     'modules/feedback/models/feedback',
     'templates/vue/feedback/feedback.html',
-    ], function(Vue, VeeValidate, Promise, VueWrapper, FeedbackModel, template) {
-
-    // Promise is not used, but required for IE if we want to use vee-validate
-    Vue.use(VeeValidate)
+    ], function(Vue, VueWrapper, FeedbackModel, template) {
 
     return VueWrapper.extend({
         vueView: Vue.extend({
@@ -21,10 +16,6 @@ define(['vue',
                 }
             },
             methods: {
-                // With new build and (IE polyfill) we could use
-                // Object.assign() to reset all data to initial state
-                // Using the method below is simple alternative that
-                // allows us to clear form data after submission
                 resetForm: function() {
                     this.name = ''
                     this.email = ''
@@ -33,13 +24,15 @@ define(['vue',
                     // To reset form validation, we should wait for next tick
                     // Vue rectivity means the DOM will not be updated immediately
                     this.$nextTick(function() {
-                        this.$validator.reset()
+                        if (this.$refs.formObserver) {
+                            this.$refs.formObserver.reset();
+                        }
                     })
                 },
                 onSubmit: function() {   
                     let self = this
 
-                    this.$validator.validateAll().then(function(result) {
+                    this.$refs.formObserver.validate().then(function(result) {
                         if (result) {
                             self.submitFeedback()
                         } else {
@@ -77,4 +70,4 @@ define(['vue',
             template: template
         })
     })
-})
+})

client/src/js/modules/samples/components/XpdfSimpleSampleAddWrapper.vue

@@ -16,15 +16,13 @@ import SimpleSample from 'modules/types/xpdf/samples/views/vue-simplesample.vue'
 import Protein from 'models/protein'
 
 import EventBus from 'app/components/utils/event-bus.js'
-import VeeValidateCustom from 'app/mixins/vee-validate-custom-rules'
 
 
 export default {
     name: 'SimpleSampleAddWrapper',
     components: {
         'simple-sample': SimpleSample
     },
-    mixins: [VeeValidateCustom],
     props: {
         'pid': {
             type: Number,
@@ -69,4 +67,4 @@ export default {
         },
     }
 }
-</script>
+</script>