ayanova/src/api/gzvalidate.js

@@ -124,6 +124,9 @@ export default {
   // REQUIRED
   //
   required(vm, ref) {
+    if (vm.formLoading) {
+      return false;
+    }
     var ctrl = getControl(vm, ref);
     if (typeof ctrl == "undefined") {
       return false;
@@ -140,12 +143,16 @@ export default {
     err = vm.$_.replace(err, "{0}", fieldName);
     //lodash replace only replaces first instance so need to do it twice
     err = vm.$_.replace(err, "{0}", fieldName);
+    vm.formValid = false;
     return err;
   },
   ///////////////////////////////
   // MAXLENGTH
   //
   maxLength(vm, ref, max) {
+    if (vm.formLoading) {
+      return false;
+    }
     var ctrl = getControl(vm, ref);
     if (typeof ctrl == "undefined") {
       return false;
@@ -163,6 +170,7 @@ export default {
       var fieldName = getControlLabel(ctrl);
       err = vm.$_.replace(err, "{0}", fieldName);
       err = vm.$_.replace(err, "{1}", max);
+      vm.formValid = false;
       return err;
     } else {
       return false;
@@ -172,6 +180,9 @@ export default {
   // MAX 255
   //
   max255(vm, ref) {
+    if (vm.formLoading) {
+      return false;
+    }
     return this.maxLength(vm, ref, 255);
   },
   ///////////////////////////////
@@ -179,6 +190,9 @@ export default {
   // (start date must precede end date)
   //
   datePrecedence(vm, refStart, refEnd) {
+    if (vm.formLoading) {
+      return false;
+    }
     var ctrlStart = getControl(vm, refStart);
     if (typeof ctrlStart == "undefined") {
       return false;
@@ -210,6 +224,7 @@ export default {
     if (valueStart.isAfter(valueEnd)) {
       //   "ErrorStartDateAfterEndDate": "Start date must be earlier than stop / end date",
       var err = vm.$gzlocale.get("ErrorStartDateAfterEndDate");
+      vm.formValid = false;
       return err;
     } else {
       return false;
@@ -219,6 +234,9 @@ export default {
   // INTEGER IS VALID
   //
   integerValid(vm, ref) {
+    if (vm.formLoading) {
+      return false;
+    }
     var ctrl = getControl(vm, ref);
     if (typeof ctrl == "undefined") {
       return false;
@@ -238,7 +256,7 @@ export default {
 
     //   "ErrorFieldValueNotInteger": "Value must be an integer"
     var err = vm.$gzlocale.get("ErrorFieldValueNotInteger");
-
+    vm.formValid = false;
     return err;
   },
   ///////////////////////////////
@@ -246,6 +264,9 @@ export default {
   // Basically anything that can be a number is valid
   //
   decimalValid(vm, ref) {
+    if (vm.formLoading) {
+      return false;
+    }
     //TODO: Handle commas and spaces in numbers
     //as per vm.$gzlocale rules for numbers
 
@@ -268,7 +289,7 @@ export default {
 
     //    "ErrorFieldValueNotDecimal": "Value must be a number"
     var err = vm.$gzlocale.get("ErrorFieldValueNotDecimal");
-
+    vm.formValid = false;
     return err;
   },
   ///////////////////////////////
@@ -317,6 +338,7 @@ export default {
         if (vm.serverError.message) {
           err = err + "\r\n" + vm.serverError.message;
         }
+        vm.formValid = false;
         ret.push(err);
       }
       //DETAIL ERRORS
@@ -341,7 +363,7 @@ export default {
             }
             ret.push(fldErr);
           });
-
+          vm.formValid = false;
           return ret;
         }
       }
@@ -378,7 +400,7 @@ export default {
   //  This is required so that server errors can be cleared when input is changed
   //
   onChange(vm, ref) {
-    if (triggeringChange) {
+    if (triggeringChange || vm.formLoading) {
       return;
     }
     //If ref appears in the servererrors details collection, remove each one
@@ -409,6 +431,6 @@ export default {
       triggeringChange = false;
     }
     vm.formDirty = true;
-    vm.formValid = vm.$refs.form.validate();
+    //vm.formValid = vm.$refs.form.validate();
   }
 };

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

@@ -98,7 +98,7 @@
               ref="active"
               :error-messages="this.$gzv.serverErrors(this,'active')"
               required
-              @change="onChange('active')"              
+              @change="onChange('active')"
             ></v-checkbox>
           </v-flex>
           <v-flex xs12 sm6 lg4 xl3 px-2>
@@ -119,6 +119,8 @@
           <v-flex xs6 sm4>
             READY: {{formReady}}
             <br>
+            LOADING: {{formLoading}}
+            <br>
             DIRTY: {{formDirty}}
             <br>
             VALID: {{formValid}}
@@ -254,24 +256,27 @@ export default {
       formReady: false,
       formDirty: false,
       formValid: true,
-      formReadOnly: false
+      formReadOnly: false,
+      formLoading: true
     };
   },
 
-  // watch: {
-  //   obj: {
-  //     handler: function(newObj, oldObj) {
-  //       console.log("WATCH OBJ CHANGED ");
-  //     },
-  //     deep: true
-  //   }
-  // },
+  watch: {
+    formValid: {
+      handler: function(newObj, oldObj) {
+        console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
+      }
+    }
+  },
   methods: {
     onChange(ref) {
-      console.log("onChange:" + ref);
-      this.$gzv.onChange(this, ref);
+      if (!this.formLoading) {
+        console.log("onChange:" + ref);
+        this.$gzv.onChange(this, ref);
+      }
     },
     getDataFromApi() {
+      this.formLoading = true;
       var url = "Widget/" + this.$route.params.id;
       var vm = this;
       this.$gzv.deleteAllErrorBoxErrors(this);
@@ -283,15 +288,26 @@ export default {
             vm.$gzv.setErrorBoxErrors(vm);
           } else {
             vm.obj = res.data;
+            //WTF?  Can't seem to set this to valid after the data has loaded, it seems to validate outside of here
+            //tried to set nexttick as latest attempt, but it's not working
+            //tried to defer validation until form is loaded but that's also not working for some reason
+            //wtf is going on here???
+            vm.nextTick(function() {
+              vm.formValid = true;
+              vm.formDirty = false;
+            });
           }
+          this.formLoading = false;
         })
         .catch(function handleGetDataFromAPIError(error) {
+          vm.formLoading = false;
           vm.$gzHandleFormError(error, vm);
         });
     },
     submit() {
       //check if form is valid, as far as I know this is the way you're supposed to do it and in testing it does not force all fields to revalidate individually
       if (this.$refs.form.validate()) {
+        this.formLoading = true;
         var vm = this;
         var url = "Widget/" + this.$route.params.id;
 
@@ -301,6 +317,7 @@ export default {
         this.$gzapi
           .upsert(url, this.obj)
           .then(res => {
+            this.formLoading = false;
             if (res.error) {
               vm.serverError = res.error;
               vm.$gzv.setErrorBoxErrors(vm);
@@ -319,6 +336,7 @@ export default {
             }
           })
           .catch(function handleSubmitError(error) {
+            vm.formLoading = false;
             vm.$gzHandleFormError(error, vm);
           });
       }