From 98ed94e0b80d03f672a74a62331a13317293a4a4 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Tue, 23 Apr 2019 00:03:36 +0000 Subject: [PATCH] --- ayanova/src/api/gzvalidate.js | 32 +++++++++++++--- ayanova/src/views/inventory-widget-edit.vue | 42 +++++++++++++++------ 2 files changed, 57 insertions(+), 17 deletions(-) diff --git a/ayanova/src/api/gzvalidate.js b/ayanova/src/api/gzvalidate.js index 1672e554..e6ba5823 100644 --- a/ayanova/src/api/gzvalidate.js +++ b/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(); } }; diff --git a/ayanova/src/views/inventory-widget-edit.vue b/ayanova/src/views/inventory-widget-edit.vue index a473c8f1..2a76e197 100644 --- a/ayanova/src/views/inventory-widget-edit.vue +++ b/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')" > @@ -119,6 +119,8 @@ READY: {{formReady}}
+ LOADING: {{formLoading}} +
DIRTY: {{formDirty}}
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); }); }