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

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