From b9fa360d33e22e6aeccc610dc783468f4e24f451 Mon Sep 17 00:00:00 2001 From: John Cardinal Date: Thu, 26 Mar 2020 23:42:37 +0000 Subject: [PATCH] Standardized custom controls to fire input event instead of changed which is immediate for ui renamed onChange handler code to better reflect what it does tested all controls on widget form to ensure they update and roundtrip properly and dirty checking is now fired immediately no need to tab off --- ayanova/src/api/gzform.js | 4 +- ayanova/src/components/currency-control.vue | 12 +++--- .../src/components/custom-fields-control.vue | 14 ++++--- ayanova/src/components/date-control.vue | 1 - ayanova/src/components/date-time-control.vue | 1 - ayanova/src/components/gz-data-table.vue | 4 +- ayanova/src/components/pick-list.vue | 4 +- ayanova/src/components/tag-picker.vue | 7 ---- ayanova/src/components/time-control.vue | 2 +- ayanova/src/views/ay-customize.vue | 2 +- ayanova/src/views/ay-data-list-view.vue | 12 +++--- ayanova/src/views/home-password.vue | 12 +++--- ayanova/src/views/home-user-settings.vue | 26 ++++++------- ayanova/src/views/widget.vue | 37 ++++++++++--------- 14 files changed, 64 insertions(+), 74 deletions(-) diff --git a/ayanova/src/api/gzform.js b/ayanova/src/api/gzform.js index 7a9411aa..4d80df31 100644 --- a/ayanova/src/api/gzform.js +++ b/ayanova/src/api/gzform.js @@ -604,10 +604,10 @@ export default { vm.formState.errorBoxMessage = ret; }, /////////////////////////////// - // On onChange handler + // On fieldValueChanged handler // This is required so that server errors can be cleared when input is changed // - onChange(vm, ref) { + fieldValueChanged(vm, ref) { if (triggeringChange || vm.formState.loading) { return; } diff --git a/ayanova/src/components/currency-control.vue b/ayanova/src/components/currency-control.vue index 45b79689..8e2fc216 100644 --- a/ayanova/src/components/currency-control.vue +++ b/ayanova/src/components/currency-control.vue @@ -54,13 +54,11 @@ export default { return window.$gz.translation; }, handleInput(value) { - this.$emit( - "input", - parseCurrency(value, { - currency: this.currencyName, - locale: this.languageName - }) - ); + var ret = parseCurrency(value, { + currency: this.currencyName, + locale: this.languageName + }); + this.$emit("input", ret); this.formattedValue = value; } } diff --git a/ayanova/src/components/custom-fields-control.vue b/ayanova/src/components/custom-fields-control.vue index 4ee9f132..7fbd414c 100644 --- a/ayanova/src/components/custom-fields-control.vue +++ b/ayanova/src/components/custom-fields-control.vue @@ -165,12 +165,12 @@ export default { //nothing return window.$gz.form; }, - onChange(ref) { + fieldValueChanged(ref) { if ( !this.parentVM.formState.loading && !this.parentVM.formState.readOnly ) { - window.$gz.form.onChange(this.parentVM, ref); + window.$gz.form.fieldValueChanged(this.parentVM, ref); } }, templateHasVisibleCustomFields() { @@ -286,12 +286,14 @@ export default { //emit the new data so it syncs with the parent source var ret = JSON.stringify(cData); - //THis is absolutely required or it won't save any changes, no idea why though - this.$emit("update:value", ret); - //this.$emit("input", ret); //always in UTC + //this seemed to be required previously but I went to change only and it seems to work fine in testing so sticking with change + //for consistency + //this.$emit("update:value", ret); + //this triggers the onchange routine in the parent form //so that the dirty checking works - this.$emit("change", ret); + // this.$emit("change", ret); + this.$emit("input", ret); } }, computed: { diff --git a/ayanova/src/components/date-control.vue b/ayanova/src/components/date-control.vue index a1c0e409..e979dd79 100644 --- a/ayanova/src/components/date-control.vue +++ b/ayanova/src/components/date-control.vue @@ -75,7 +75,6 @@ export default { this.oldDate = this.date; if (hasChanged) { this.$emit("input", this.date); //always in UTC - this.$emit("change", this.date); //always in UTC } }, value() { diff --git a/ayanova/src/components/date-time-control.vue b/ayanova/src/components/date-time-control.vue index 0dcffcf6..b4e2ba48 100644 --- a/ayanova/src/components/date-time-control.vue +++ b/ayanova/src/components/date-time-control.vue @@ -116,7 +116,6 @@ export default { this.oldDate = this.date; if (hasChanged) { this.$emit("input", this.date); //always in UTC - this.$emit("change", this.date); //always in UTC } }, value() { diff --git a/ayanova/src/components/gz-data-table.vue b/ayanova/src/components/gz-data-table.vue index 7d4babda..de05d1fc 100644 --- a/ayanova/src/components/gz-data-table.vue +++ b/ayanova/src/components/gz-data-table.vue @@ -18,7 +18,7 @@ item-text="name" item-value="id" :label="lt('DataListView')" - @change="listViewChanged" + @input="listViewChanged" > @@ -422,7 +422,7 @@ export default { //Note vm this bubbles up all the columns of all the selected rows //so, to be more efficient for now will just send the ID's until I see a need for other shit - this.$emit("update:selected", window.$gz._.map(this.selected, "id")); + this.$emit("input", window.$gz._.map(this.selected, "id")); }, editListView() { this.$router.push({ diff --git a/ayanova/src/components/pick-list.vue b/ayanova/src/components/pick-list.vue index 18829590..95cd9711 100644 --- a/ayanova/src/components/pick-list.vue +++ b/ayanova/src/components/pick-list.vue @@ -149,10 +149,8 @@ export default { return; } if (e.id != null) { - //this is required for the control to update + //this is required for the control to update and parent form to detect it this.$emit("input", e.id); - //this is required for the parent form to trigger the onChange handler - this.$emit("change", e.id); } this.lastSelection = e; }, diff --git a/ayanova/src/components/tag-picker.vue b/ayanova/src/components/tag-picker.vue index 68b205e7..1ac2c07f 100644 --- a/ayanova/src/components/tag-picker.vue +++ b/ayanova/src/components/tag-picker.vue @@ -91,13 +91,6 @@ export default { .catch(err => { window.$gz.errorHandler.handleFormError(err); }); - }, - value(val) { - //this ensures the parent form gets the onchange event - //not actually sure why there are two here but it worked with the datetime picker so I replicated it here - //To answer above it appears both are necessary for proper operation - this.$emit("input", val); - this.$emit("change", val); } }, diff --git a/ayanova/src/components/time-control.vue b/ayanova/src/components/time-control.vue index 8a4d1d69..59e56452 100644 --- a/ayanova/src/components/time-control.vue +++ b/ayanova/src/components/time-control.vue @@ -80,7 +80,7 @@ export default { this.oldDate = this.date; if (hasChanged) { this.$emit("input", this.date); //always in UTC - this.$emit("change", this.date); //always in UTC + //this.$emit("change", this.date); //always in UTC } }, value() { diff --git a/ayanova/src/views/ay-customize.vue b/ayanova/src/views/ay-customize.vue index 0f5c0b80..78384b23 100644 --- a/ayanova/src/views/ay-customize.vue +++ b/ayanova/src/views/ay-customize.vue @@ -50,7 +50,7 @@ item-text="name" item-value="id" :label="lt('UiFieldDataType')" - @change="dataTypeChanged(item)" + @input="dataTypeChanged(item)" > diff --git a/ayanova/src/views/ay-data-list-view.vue b/ayanova/src/views/ay-data-list-view.vue index 6ed8bb3b..d34aac55 100644 --- a/ayanova/src/views/ay-data-list-view.vue +++ b/ayanova/src/views/ay-data-list-view.vue @@ -37,7 +37,7 @@ v-model="obj.name" :readonly="this.formState.readOnly" clearable - @click:clear="onChange('name')" + @click:clear="fieldValueChanged('name')" :counter="255" :label="lt('Name')" :rules="[ @@ -46,7 +46,7 @@ ]" :error-messages="form().serverErrors(this, 'name')" ref="name" - @change="onChange('name')" + @input="fieldValueChanged('name')" > @@ -55,7 +55,7 @@ :readonly="this.formState.readOnly" :label="lt('AnyUser')" ref="public" - @change="onChange('public')" + @change="fieldValueChanged('public')" > @@ -129,7 +129,7 @@