ayanova/devdocs/todo.txt

@@ -20,6 +20,7 @@ DATETIME
 - Validation
 	- after much fuckery it's becoming clear that between the localization requirements and the complexity of server broken rules coming back from the api that I should just use my own validation code
 		- See here: https://vuetifyjs.com/en/components/forms#form
+		- And here: https://vuetifyjs.com/en/components/text-fields#custom-validation
 		- What is needed is a class that returns an array of functions that can be passed to vuetify "rules" property of components
 		On change each rule is called in turn and if one returns false or a string then it's in an error state
 		- I also need to add that it scans and or keeps a collection of broken rules that come back from the server and each component checks a rule that checks in turn for server broken rules in last api call

ayanova/src/components/gzdateandtimepicker.vue

@@ -62,14 +62,6 @@ export default {
       throw "GzDateAndTimePicker: $gzlocale is required and missing";
     }
   },
-  $_veeValidate: {
-    name() {
-      return this.label;
-    },
-    value() {
-      return this.value;
-    }
-  },
   data: () => ({ date: null, dlgdate: false, dlgtime: false }),
   props: {
     label: String,

ayanova/src/main.js

@@ -32,19 +32,7 @@ Object.defineProperty(Vue.prototype, "$gzerror", {
 /////////////////////////////////////////////////////////////////
 // FORM VALIDATION
 //
-import VeeValidate from "vee-validate";
+//TODO: CODE THIS
-//My custom rules
-import gzaftervalidator from "./api/gzaftervalidator";
-VeeValidate.Validator.extend("gzafter", gzaftervalidator);
-// VeeValidate.Validator.extend(
-//   gzaftervalidator,
-//   Rules[gzaftervalidator].validate,
-//   assign({}, Rules[gzaftervalidator].options, {
-//     paramNames: Rules[gzaftervalidator].paramNames
-//   })
-// );
-Vue.use(VeeValidate);
-//Vue.config.productionTip = false;
 
 /////////////////////////////////////////////////////////////////
 // ERROR HANDLING

ayanova/src/views/inventory-widget-edit.vue

@@ -5,10 +5,8 @@
         <v-layout align-center justify-left row wrap>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.name"
+              v-model="obj.name"              
-              v-validate="'required|max:255'"
+              :counter="255"              
-              :counter="255"
-              :error-messages="errors.collect('name')"
               :label="this.$gzlocale.get('WidgetName')"
               name="name"
               required
@@ -16,10 +14,8 @@
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.serial"
+              v-model="obj.serial"              
-              v-validate="'required|max:10'"
+              :counter="10"              
-              :counter="10"
-              :error-messages="errors.collect('serial')"
               :label="this.$gzlocale.get('WidgetSerial')"
               name="serial"
               required
@@ -27,10 +23,8 @@
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
-              v-model="obj.count"
+              v-model="obj.count"             
-              v-validate="'required|max:10'"
+              :counter="10"             
-              :counter="10"
-              :error-messages="errors.collect('count')"
               :label="this.$gzlocale.get('WidgetCount')"
               name="count"
               required
@@ -40,16 +34,16 @@
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
               v-model="obj.dollarAmount"
-              :prefix="this.$gzlocale.formats.currencySymbol"
+              :prefix="this.$gzlocale.formats.currencySymbol"                           
-              v-validate="this.$gzlocale.decimalValidate(true)"
-              :error-messages="errors.collect('dollarAmount')"
               :label="this.$gzlocale.get('WidgetDollarAmount')"
               name="dollarAmount"
               required
             ></v-text-field>
           </v-flex>
 
-          <!-- <v-flex xs12 sm6 lg4 xl3 px-2>
+          <!--
+            This block was for testing date validation outside of my custom control with v-validate, keeping it just for now until done my own validator code
+             <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-text-field
               :label="this.$gzlocale.get('WidgetStartDate')"
               v-model="obj.startDate"
@@ -71,38 +65,12 @@
               required
             ></v-text-field>
           </v-flex>-->
-          <v-flex xs12 sm6 lg4 xl3 px-2>
-            <v-text-field
-              label="PW"
-              v-model="pw"
-              name="pw"
-              v-validate="'required'"
-              ref="THEPW"
-              :error-messages="errors.collect('pw')"
-              required
-            ></v-text-field>
-          </v-flex>
-
-          <v-flex xs12 sm6 lg4 xl3 px-2>
-            <v-text-field
-              label="PW2"
-              v-model="pw2"
-              name="pw2"
-              v-validate="'required|confirmed:THEPW'"
-              :error-messages="errors.collect('pw2')"
-              required
-            ></v-text-field>
-          </v-flex>
           <!-- YYYY-MM-DDTHH:mm:ss.sssZ -->
-          <!-- <v-flex xs12 sm6 lg4 xl3 px-2>
+          <v-flex xs12 sm6 lg4 xl3 px-2>
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetStartDate')"
               v-model="obj.startDate"
-              name="startDate"
+              name="startDate"             
-              data-vv-as="startDate"
-              v-validate="'required'"
-              ref="startDate"
-              :error="errors.first('startDate')"
             ></gz-date-time-picker>
           </v-flex>
 
@@ -110,32 +78,19 @@
             <gz-date-time-picker
               :label="this.$gzlocale.get('WidgetEndDate')"
               v-model="obj.endDate"
-              name="endDate"
+              name="endDate"             
-              data-vv-as="endDate"
-              v-validate="'after:startDate'"
-              :error="errors.first('endDate')"
             ></gz-date-time-picker>
-          </v-flex>-->
+          </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
             <v-checkbox
-              v-model="obj.active"
+              v-model="obj.active"             
-              v-validate="'required'"
-              :error-messages="errors.collect('checkbox')"
               value="1"
               :label="this.$gzlocale.get('Active')"
               name="checkbox"
               required
             ></v-checkbox>
           </v-flex>
-          <v-flex xs12 sm6 lg4 xl3 px-2>
+         
-            <ul>
-              <li v-for="(group, index) in errors.collect()" :key="index">
-                <ul>
-                  <li v-for="(error,index) in group" :key="index">{{ error }}</li>
-                </ul>
-              </li>
-            </ul>
-          </v-flex>
         </v-layout>
 
         <v-layout align-center justify-space-around row wrap mt-5>
@@ -158,9 +113,6 @@
 /*  eslint-disable */
 
 export default {
-  $_veeValidate: {
-    validator: "new"
-  },
   beforeCreate() {
     //Cache all required lt keys
     var ltKeysRequired = [