ayanova/src/views/ay-customize.vue

@@ -16,7 +16,7 @@
                 <v-card-text>
                   <v-checkbox
                     v-model="item.visible"
-                    :readOnly="formState.readOnly"
+                    :readonly="formState.readOnly"
                     :label="$ay.t('FormFieldVisible')"
                     :ref="item.key"
                     :disabled="item.stockRequired"
@@ -25,7 +25,7 @@
                   ></v-checkbox>
                   <v-checkbox
                     v-model="item.required"
-                    :readOnly="formState.readOnly"
+                    :readonly="formState.readOnly"
                     :label="$ay.t('FormFieldEntryRequired')"
                     :disabled="item.stockRequired"
                     @change="requiredChanged(item)"
@@ -33,7 +33,7 @@
                   <v-select
                     v-if="item.custom"
                     v-model="item.type"
-                    :readOnly="formState.readOnly"
+                    :readonly="formState.readOnly"
                     :items="selectLists.uiFieldDataTypes"
                     item-text="name"
                     item-value="id"
@@ -84,8 +84,7 @@ export default {
 
     initForm(vm)
       .then(() => {
-        vm.formState.ready = true;
-        vm.readOnly = !vm.rights.change;
+        vm.formState.readOnly = !vm.rights.change;
         window.$gz.eventBus.$on("menu-click", clickHandler);
         //NOTE: this would normally be in getDataFromAPI but this form doesn't really need that function so doing it here
         //modify the menu as necessary
@@ -94,8 +93,11 @@ export default {
         window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
       })
       .catch(err => {
-        vm.formState.ready = true;
         window.$gz.errorHandler.handleFormError(err, vm);
+      })
+      .finally(function() {
+        vm.formState.ready = true;
+        vm.formState.loading = false;
       });
   },
   data() {
@@ -120,7 +122,25 @@ export default {
       rights: window.$gz.role.getRights(window.$gz.type.FormCustom)
     };
   },
+  //WATCHERS
+  watch: {
+    formState: {
+      handler: function(val) {
+        //,oldval is available here too if necessary
+        if (this.formState.loading) {
+          return;
+        }
 
+        //enable / disable save button
+        if (val.dirty && val.valid && !val.readOnly) {
+          window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
+        } else {
+          window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
+        }
+      },
+      deep: true
+    }
+  },
   methods: {
     visibleChanged: function(item) {
       //Note: stock items can't be changed so no need to take that into account
@@ -128,7 +148,6 @@ export default {
         item.required = false;
       }
       this.formState.dirty = true;
-      enableSaveButton();
     },
     requiredChanged: function(item) {
       //Note: stock items can't be changed so no need to take that into account
@@ -136,15 +155,15 @@ export default {
         item.visible = true;
       }
       this.formState.dirty = true;
-      enableSaveButton();
     },
     dataTypeChanged: function(item) {
       //nothing to scan here just set form dirty
       this.formState.dirty = true;
-      enableSaveButton();
     },
     submit() {
       let vm = this;
+
+      vm.formState.loading = true;
       let url = API_BASE_URL + vm.formCustomTemplateKey;
 
       //clear any errors vm might be around from previous submit
@@ -195,7 +214,6 @@ export default {
       window.$gz.api
         .upsert(url, newObj)
         .then(res => {
-          vm.formState.loading = false;
           if (res.error) {
             vm.formState.serverError = res.error;
             window.$gz.form.setErrorBoxErrors(vm);
@@ -220,17 +238,15 @@ export default {
           }
         })
         .catch(function handleSubmitError(error) {
-          vm.formState.loading = false;
           window.$gz.errorHandler.handleFormError(error, vm);
+        })
+        .finally(function() {
+          vm.formState.loading = false;
         });
     }
   }
 };
 
-function enableSaveButton() {
-  window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
-}
-
 /////////////////////////////
 //
 //