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

@@ -1,5 +1,5 @@
 <template>
-  <v-layout v-if="this.formReady">
+  <v-layout v-if="this.formState.ready">
     <v-flex>
       <v-form ref="form">
         <v-layout align-center justify-left row wrap>
@@ -117,15 +117,15 @@
 
         <v-layout align-left justify-center row wrap mt-5>
           <v-flex xs6 sm4>
-            READY: {{formReady}}
+            READY: {{formState.ready}}
             <br>
-            LOADING: {{formLoading}}
+            LOADING: {{formState.loading}}
             <br>
-            DIRTY: {{formDirty}}
+            DIRTY: {{formState.dirty}}
             <br>
-            VALID: {{formValid}}
+            VALID: {{formState.valid}}
             <br>
-            READONLY: {{formReadOnly}}
+            READONLY: {{formState.readOnly}}
             <br>
           </v-flex>
         </v-layout>
@@ -146,7 +146,7 @@
 </template>
 
 <script>
-/*  XXeslint-disable    */
+/*  Xeslint-disable    */
 
 function clickHandler(menuItem) {
   if (!menuItem) {
@@ -203,9 +203,9 @@ export default {
     var vm = this;
     this.$gzlocale
       .fetch(ltKeysRequired)
-      .then(() => (this.formReady = true))
+      .then(() => (this.formState.ready = true))
       .catch(err => {
-        this.formReady = true;
+        this.formState.ready = true;
         vm.$gzHandleFormError(err);
       });
   },
@@ -254,29 +254,42 @@ export default {
       serverError: {},
       errorBoxMessage: null,
       appError: null,
-      formReady: false,
-      formDirty: false,
-      formValid: true,
-      formReadOnly: false,
-      formLoading: true
+      formState: {
+        ready: false,
+        dirty: false,
+        valid: true,
+        readOnly: false,
+        loading: true
+      }
     };
   },
   watch: {
-    formValid: {
-      handler: function(newObj, oldObj) {
+    canSave: {
+      // xeslint-disable-next-line
+      handler: function(newState) {
+        this.$gzevent.$emit(
+          "menu-replace-item",
+          "inventory-widget-edit:save",
+          newState
+        );
         //todo: change the save button state here
         //console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
       }
     }
   },
+  computed: {
+    canSave: function() {
+      return this.formState.valid && this.formState.dirty;
+    }
+  },
   methods: {
     onChange(ref) {
-      if (!this.formLoading) {
+      if (!this.formState.loading) {
         this.$gzform.onChange(this, ref);
       }
     },
     getDataFromApi() {
-      this.formLoading = true;
+      this.formState.loading = true;
       var url = "Widget/" + this.$route.params.id;
       var vm = this;
       this.$gzform.deleteAllErrorBoxErrors(this);
@@ -291,9 +304,9 @@ export default {
             //Update the form status
             vm.$gzform.setFormState({
               vm: vm,
-              formDirty: false,
-              formValid: true,
-              formLoading: false
+              dirty: false,
+              valid: true,
+              loading: false
             });
           }
         })
@@ -301,15 +314,15 @@ export default {
           //Update the form status
           vm.$gzform.setFormState({
             vm: vm,
-            formLoading: false
+            loading: 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.formValid && this.formDirty) {
-        this.formLoading = true;
+      if (this.canSave()) {
+        this.formState.loading = true;
         var vm = this;
         var url = "Widget/" + this.$route.params.id;
 
@@ -319,14 +332,14 @@ export default {
         this.$gzapi
           .upsert(url, this.obj)
           .then(res => {
-            this.formLoading = false;
+            this.formState.loading = false;
             if (res.error) {
               vm.serverError = res.error;
               vm.$gzform.setErrorBoxErrors(vm);
             } else {
               vm.$gzform.setFormState({
                 vm: vm,
-                formDirty: false
+                dirty: false
               });
 
               //Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
@@ -340,7 +353,7 @@ export default {
             }
           })
           .catch(function handleSubmitError(error) {
-            vm.formLoading = false;
+            vm.formState.loading = false;
             vm.$gzHandleFormError(error, vm);
           });
       }