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