admin/raven-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardized custom controls to fire input event instead of changed which is immediate for ui

Browse Source 
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
This commit is contained in:
John Cardinal
2020-03-26 23:42:37 +00:00
parent 091e6329dc
commit b9fa360d33
14 changed files with 64 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ayanova/src/api/gzform.js
View File

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

12
ayanova/src/components/currency-control.vue
View File

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

14
ayanova/src/components/custom-fields-control.vue
View File

@@ -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: {

1
ayanova/src/components/date-control.vue
View File

@@ -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() {

1
ayanova/src/components/date-time-control.vue
View File

@@ -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() {

4
ayanova/src/components/gz-data-table.vue
View File

@@ -18,7 +18,7 @@
item-text="name"
item-value="id"
:label="lt('DataListView')"
@change="listViewChanged"
@input="listViewChanged"
>
</v-select>
<v-spacer></v-spacer>
@@ -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({

4
ayanova/src/components/pick-list.vue
View File

@@ -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;
},

7
ayanova/src/components/tag-picker.vue
View File

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

2
ayanova/src/components/time-control.vue
View File

@@ -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() {

2
ayanova/src/views/ay-customize.vue
View File

@@ -50,7 +50,7 @@
item-text="name"
item-value="id"
:label="lt('UiFieldDataType')"
@change="dataTypeChanged(item)"
@input="dataTypeChanged(item)"
></v-select>
<!-- <v-divider></v-divider>
<div>{{ item }}</div> -->

12
ayanova/src/views/ay-data-list-view.vue
View File

@@ -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')"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
@@ -55,7 +55,7 @@
:readonly="this.formState.readOnly"
:label="lt('AnyUser')"
ref="public"
@change="onChange('public')"
@change="fieldValueChanged('public')"
></v-checkbox>
</v-col>
</v-row>
@@ -129,7 +129,7 @@
<template v-if="item.isFilterable">
<div class="pt-6">
<!-- ******** BUILDER FOR EACH TYPE Tag, decimal,currency, bool, integer, string, datetime ******** -->
<!-- DATETIME BUILDER @change="dateTokenChanged(item)"-->
<!-- DATETIME BUILDER -->
<div v-if="item.uiFieldDataType === 1">
<v-select
v-model="item.tempFilterToken"
@@ -707,9 +707,9 @@ export default {
// vm.obj.name = vm.lt("FilterUnsaved");
// }
// },
onChange(ref) {
fieldValueChanged(ref) {
if (!this.formState.loading && !this.formState.readOnly) {
window.$gz.form.onChange(this, ref);
window.$gz.form.fieldValueChanged(this, ref);
}
},
submit() {

12
ayanova/src/views/home-password.vue
View File

@@ -33,7 +33,7 @@
:rules="[form().required(this, 'loginName')]"
:error-messages="form().serverErrors(this, 'loginName')"
ref="loginName"
@change="onChange('loginName')"
@input="fieldValueChanged('loginName')"
></v-text-field>
</v-col>
@@ -50,7 +50,7 @@
:rules="[form().required(this, 'oldPassword')]"
:error-messages="form().serverErrors(this, 'oldPassword')"
ref="oldPassword"
@change="onChange('oldPassword')"
@input="fieldValueChanged('oldPassword')"
@click:append-outer="reveal = !reveal"
></v-text-field>
</v-col>
@@ -66,7 +66,7 @@
:rules="[form().required(this, 'newPassword')]"
:error-messages="form().serverErrors(this, 'newPassword')"
ref="newPassword"
@change="onChange('newPassword')"
@input="fieldValueChanged('newPassword')"
@click:append-outer="reveal = !reveal"
></v-text-field>
</v-col>
@@ -85,7 +85,7 @@
]"
:error-messages="form().serverErrors(this, 'confirmPassword')"
ref="confirmPassword"
@change="onChange('confirmPassword')"
@input="fieldValueChanged('confirmPassword')"
@click:append-outer="reveal = !reveal"
></v-text-field>
</v-col>
@@ -200,9 +200,9 @@ export default {
form() {
return window.$gz.form;
},
onChange(ref) {
fieldValueChanged(ref) {
if (!this.formState.loading && !this.formState.readOnly) {
window.$gz.form.onChange(this, ref);
window.$gz.form.fieldValueChanged(this, ref);
}
},

26
ayanova/src/views/home-user-settings.vue
View File

@@ -27,7 +27,7 @@
:label="lt('Translation')"
ref="translationId"
:error-messages="form().serverErrors(this, 'translationId')"
@change="onChange('translationId')"
@input="fieldValueChanged('translationId')"
></v-select>
</v-col>
@@ -36,11 +36,11 @@
v-model="obj.emailAddress"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('emailAddress')"
@click:clear="fieldValueChanged('emailAddress')"
:label="lt('UserEmailAddress')"
:error-messages="form().serverErrors(this, 'emailAddress')"
ref="emailAddress"
@change="onChange('emailAddress')"
@input="fieldValueChanged('emailAddress')"
></v-text-field>
</v-col>
@@ -50,12 +50,12 @@
hint="e.g. USD, EUR, GBP, AUD, CAD etc"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('currencyName')"
@click:clear="fieldValueChanged('currencyName')"
:label="lt('CurrencyCode')"
:rules="[form().required(this, 'currencyName')]"
:error-messages="form().serverErrors(this, 'currencyName')"
ref="currencyName"
@change="onChange('currencyName')"
@input="fieldValueChanged('currencyName')"
></v-text-field>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
@@ -65,7 +65,7 @@
:label="lt('Hour12')"
ref="hour12"
:error-messages="form().serverErrors(this, 'hour12')"
@change="onChange('hour12')"
@change="fieldValueChanged('hour12')"
></v-checkbox>
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
@@ -80,7 +80,7 @@
mode="hexa"
:error-messages="form().serverErrors(this, 'uiColor')"
ref="uiColor"
@input="onChange('uiColor')"
@input="fieldValueChanged('uiColor')"
></v-color-picker>
</v-col>
@@ -90,11 +90,11 @@
:placeholder="locale().getBrowserFirstLanguage()"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('languageOverride')"
@click:clear="fieldValueChanged('languageOverride')"
:label="lt('LanguageCode')"
:error-messages="form().serverErrors(this, 'languageOverride')"
ref="languageOverride"
@change="onChange('languageOverride')"
@input="fieldValueChanged('languageOverride')"
></v-text-field>
</v-col>
@@ -104,11 +104,11 @@
:placeholder="locale().getBrowserTimeZoneName()"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('timeZoneOverride')"
@click:clear="fieldValueChanged('timeZoneOverride')"
:label="lt('TimeZone')"
:error-messages="form().serverErrors(this, 'timeZoneOverride')"
ref="timeZoneOverride"
@change="onChange('timeZoneOverride')"
@input="fieldValueChanged('timeZoneOverride')"
></v-text-field>
</v-col>
</v-row>
@@ -243,9 +243,9 @@ export default {
form() {
return window.$gz.form;
},
onChange(ref) {
fieldValueChanged(ref) {
if (!this.formState.loading && !this.formState.readOnly) {
window.$gz.form.onChange(this, ref);
window.$gz.form.fieldValueChanged(this, ref);
}
},
getDataFromApi() {

37
ayanova/src/views/widget.vue
View File

@@ -21,7 +21,7 @@
v-model="obj.name"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('name')"
@click:clear="fieldValueChanged('name')"
:counter="255"
:label="lt('WidgetName')"
:rules="[
@@ -30,7 +30,7 @@
]"
:error-messages="form().serverErrors(this, 'name')"
ref="name"
@change="onChange('name')"
@input="fieldValueChanged('name')"
></v-text-field>
</v-col>
<v-col
@@ -44,13 +44,13 @@
v-model="obj.serial"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('serial')"
@click:clear="fieldValueChanged('serial')"
:counter="10"
:label="lt('WidgetSerial')"
:rules="[form().maxLength(this, 'serial', 10)]"
:error-messages="form().serverErrors(this, 'serial')"
ref="serial"
@change="onChange('serial')"
@input="fieldValueChanged('serial')"
></v-text-field>
</v-col>
<v-col
@@ -64,13 +64,13 @@
v-model="obj.count"
:readonly="formState.readOnly"
clearable
@click:clear="onChange('count')"
@click:clear="fieldValueChanged('count')"
:counter="10"
:label="lt('WidgetCount')"
ref="count"
:rules="[form().integerValid(this, 'count')]"
:error-messages="form().serverErrors(this, 'count')"
@change="onChange('count')"
@input="fieldValueChanged('count')"
type="number"
></v-text-field>
</v-col>
@@ -92,7 +92,7 @@
form().required(this, 'dollarAmount')
]"
:error-messages="form().serverErrors(this, 'dollarAmount')"
@input="onChange('dollarAmount')"
@input="fieldValueChanged('dollarAmount')"
></gz-currency>
</v-col>
@@ -103,7 +103,7 @@
:readonly="formState.readOnly"
ref="startDate"
:error-messages="form().serverErrors(this, 'startDate')"
@change="onChange('startDate')"
@input="fieldValueChanged('startDate')"
></gz-date-time-picker>
</v-col>
@@ -115,7 +115,7 @@
v-model="obj.endDate"
:readonly="formState.readOnly"
ref="endDate"
@change="onChange('endDate')"
@input="fieldValueChanged('endDate')"
></gz-date-time-picker>
</v-col>
<v-col
@@ -131,7 +131,7 @@
:label="lt('Active')"
ref="active"
:error-messages="form().serverErrors(this, 'active')"
@change="onChange('active')"
@change="fieldValueChanged('active')"
></v-checkbox>
</v-col>
@@ -150,7 +150,7 @@
:label="lt('User')"
ref="userid"
:error-messages="form().serverErrors(this, 'userid')"
@change="onChange('userid')"
@input="fieldValueChanged('userid')"
></gz-pick-list>
</v-col>
@@ -171,7 +171,7 @@
ref="usertype"
:rules="[form().integerValid(this, 'usertype')]"
:error-messages="form().serverErrors(this, 'usertype')"
@change="onChange('usertype')"
@input="fieldValueChanged('usertype')"
></v-select>
</v-col>
@@ -182,7 +182,7 @@
:label="lt('WidgetNotes')"
:error-messages="form().serverErrors(this, 'notes')"
ref="notes"
@change="onChange('notes')"
@input="fieldValueChanged('notes')"
auto-grow
clearable
></v-textarea>
@@ -194,19 +194,19 @@
:readonly="formState.readOnly"
ref="tags"
:error-messages="form().serverErrors(this, 'tags')"
@change="onChange('tags')"
@input="fieldValueChanged('tags')"
></gz-tag-picker>
</v-col>
<v-col cols="12">
<gz-custom-fields
v-model="obj.customFields"
:formKey="formCustomTemplateKey"
v-bind:value.sync="obj.customFields"
:readOnly="formState.readOnly"
:parentVM="this"
ref="customFields"
:error-messages="form().serverErrors(this, 'customFields')"
@change="onChange('customFields')"
@input="fieldValueChanged('customFields')"
></gz-custom-fields>
</v-col>
</v-row>
@@ -219,6 +219,7 @@
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Xeslint-disable */
//v-bind:value.sync="obj.customFields"
////////////////////////////////////////////////////////////////////////////////////////////////////////////
//Illegal1 = O0
const FORM_KEY = "widget-edit";
@@ -379,9 +380,9 @@ export default {
form() {
return window.$gz.form;
},
onChange(ref) {
fieldValueChanged(ref) {
if (!this.formState.loading && !this.formState.readOnly) {
window.$gz.form.onChange(this, ref);
window.$gz.form.fieldValueChanged(this, ref);
}
},
getDataFromApi(recordId) {