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

Browse Source
This commit is contained in:
John Cardinal
2019-04-23 18:34:37 +00:00
parent d6e6b006ae
commit aab019d797
4 changed files with 119 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ayanova/src/api/errorhandler.js
View File

@@ -30,7 +30,7 @@ function dealWithError(msg, form) {
}
}
form.appError = msg;
form.$gzv.setErrorBoxErrors(form);
form.$gzform.setErrorBoxErrors(form);
}
}
export default {

115
ayanova/src/api/gzvalidate.js → ayanova/src/api/gzform.js
View File

@@ -1,8 +1,10 @@
/* Xeslint-disable */
///////////////////////////////
// GZVALIDATE
// gzform
//
// provides form validation services
// provides form services and utilities
// validation services
// dirty and change tracking
// and also general error display in forms
//probably should be broken up more
// All locale keys for validation *MUST* be fetched prior to this being used as it assumes all keys are fetched first
@@ -12,24 +14,6 @@ import errorHandler from "./errorhandler";
var triggeringChange = false;
////////////////////////////////////
// set calling form Dirty state
//
function setFormDirty(vm, isDirty) {
Vue.nextTick(function() {
vm.formDirty = isDirty;
});
}
////////////////////////////////////
// set calling form Valid state
//
function setFormValid(vm, isValid) {
Vue.nextTick(function() {
vm.formValid = isValid;
});
}
function isEmpty(o) {
if (typeof o == "number" && o == 0) {
return false;
@@ -82,7 +66,7 @@ function getControlValue(ctrl) {
function getControlLabel(ctrl) {
if (errorHandler.developmentModeShowErrorsImmediately) {
if (!ctrl.label) {
throw "GZValidate:getControlLabel - the control has no label " + ctrl;
throw "gzform:getControlLabel - the control has no label " + ctrl;
}
}
return ctrl.label;
@@ -162,7 +146,11 @@ 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);
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return err;
},
///////////////////////////////
@@ -189,7 +177,11 @@ export default {
var fieldName = getControlLabel(ctrl);
err = vm.$_.replace(err, "{0}", fieldName);
err = vm.$_.replace(err, "{1}", max);
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return err;
} else {
return false;
@@ -243,7 +235,11 @@ export default {
if (valueStart.isAfter(valueEnd)) {
// "ErrorStartDateAfterEndDate": "Start date must be earlier than stop / end date",
var err = vm.$gzlocale.get("ErrorStartDateAfterEndDate");
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return err;
} else {
return false;
@@ -275,7 +271,11 @@ export default {
// "ErrorFieldValueNotInteger": "Value must be an integer"
var err = vm.$gzlocale.get("ErrorFieldValueNotInteger");
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return err;
},
///////////////////////////////
@@ -308,7 +308,11 @@ export default {
// "ErrorFieldValueNotDecimal": "Value must be a number"
var err = vm.$gzlocale.get("ErrorFieldValueNotDecimal");
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return err;
},
///////////////////////////////
@@ -320,24 +324,24 @@ export default {
if (vm.$gzdevmode()) {
//make sure serverErrors is defined on data
if (!vm.$_.has(vm, "serverError")) {
throw "DEV ERROR gzvalidate::serverErrors -> serverError seems to be missing from form's vue data object";
throw "DEV ERROR gzform::serverErrors -> serverError seems to be missing from form's vue data object";
}
//make sure appError is defined on data
if (!vm.$_.has(vm, "appError")) {
throw "DEV ERROR gzvalidate::serverErrors -> appError seems to be missing from form's vue data object";
throw "DEV ERROR gzform::serverErrors -> appError seems to be missing from form's vue data object";
}
//make sure errorBoxMessage is defined on data
if (!vm.$_.has(vm, "errorBoxMessage")) {
throw "DEV ERROR gzvalidate::serverErrors -> errorBoxMessage seems to be missing from form's vue data object";
throw "DEV ERROR gzform::serverErrors -> errorBoxMessage seems to be missing from form's vue data object";
}
//ensure the error returned is in an expected format to catch coding errors at the server end
if (!vm.$_.isEmpty(vm.serverError)) {
//Make sure there is an error code if there is an error collection
if (!vm.serverError.code) {
throw "DEV ERROR gzvalidate::serverErrors -> server returned error without code";
throw "DEV ERROR gzform::serverErrors -> server returned error without code";
}
}
}
@@ -357,7 +361,11 @@ export default {
if (vm.serverError.message) {
err = err + "\r\n" + vm.serverError.message;
}
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
ret.push(err);
}
//DETAIL ERRORS
@@ -382,7 +390,12 @@ export default {
}
ret.push(fldErr);
});
setFormValid(vm, false);
//Update the form status
this.setFormState({
vm: vm,
formValid: false
});
return ret;
}
}
@@ -403,7 +416,11 @@ export default {
vm.appError = null;
//clear out actual message box display
vm.errorBoxMessage = null;
setFormValid(vm, true);
//Update the form status
this.setFormState({
vm: vm,
formValid: true
});
},
///////////////////////////////
// setErrorBoxErrors
@@ -449,8 +466,34 @@ export default {
vm.obj[ref] = val;
triggeringChange = false;
}
setFormDirty(vm, true);
setFormValid(vm, vm.$refs.form.validate());
//TODO: shouldn't it check for any dirty here and set the isdirty to false if none since each rule can set it dirty
//Update the form status
this.setFormState({
vm: vm,
formDirty: true,
formValid: vm.$refs.form.validate()
});
},
////////////////////////////////////
// set calling form Valid state
//
// {vm:vm,formDirty:bool | undefined,
// formValid:bool | undefined,
// formLoading:bool | undefined}
//
setFormState(theState) {
Vue.nextTick(function() {
if (theState.formValid != undefined) {
theState.vm.formValid = theState.formValid;
}
if (theState.formDirty != undefined) {
theState.vm.formDirty = theState.formDirty;
}
if (theState.formLoading != undefined) {
theState.vm.formLoading = theState.formLoading;
}
});
}
};

4
ayanova/src/main.js
View File

@@ -18,7 +18,7 @@ import gzmenu from "./api/gzmenu";
import gzutil from "./api/gzutil";
import locale from "./api/locale";
import gzapi from "./api/gzapi";
import gzvalidate from "./api/gzvalidate";
import gzform from "./api/gzform";
import "@/assets/css/main.css";
import gzdateandtimepicker from "./components/gzdateandtimepicker.vue";
@@ -34,7 +34,7 @@ Object.defineProperty(Vue.prototype, "$dayjs", { value: dayjs });
Object.defineProperty(Vue.prototype, "$_", { value: lodash });
Object.defineProperty(Vue.prototype, "$gzlocale", { value: locale });
Object.defineProperty(Vue.prototype, "$gzapi", { value: gzapi });
Object.defineProperty(Vue.prototype, "$gzv", { value: gzvalidate });
Object.defineProperty(Vue.prototype, "$gzform", { value: gzform });
Object.defineProperty(Vue.prototype, "$gzHandleFormError", {
value: errorHandler.handleFormError
});

76
ayanova/src/views/inventory-widget-edit.vue
View File

@@ -22,8 +22,8 @@
@click:clear="onChange('name')"
:counter="255"
:label="this.$gzlocale.get('WidgetName')"
:rules="[this.$gzv.max255(this,'name'),this.$gzv.required(this,'name')]"
:error-messages="this.$gzv.serverErrors(this,'name')"
:rules="[this.$gzform.max255(this,'name'),this.$gzform.required(this,'name')]"
:error-messages="this.$gzform.serverErrors(this,'name')"
ref="name"
@change="onChange('name')"
></v-text-field>
@@ -35,8 +35,8 @@
@click:clear="onChange('serial')"
:counter="10"
:label="this.$gzlocale.get('WidgetSerial')"
:rules="[this.$gzv.maxLength(this,'serial',10)]"
:error-messages="this.$gzv.serverErrors(this,'serial')"
:rules="[this.$gzform.maxLength(this,'serial',10)]"
:error-messages="this.$gzform.serverErrors(this,'serial')"
ref="serial"
@change="onChange('serial')"
></v-text-field>
@@ -49,8 +49,8 @@
:counter="10"
:label="this.$gzlocale.get('WidgetCount')"
ref="count"
:rules="[this.$gzv.integerValid(this,'count'),this.$gzv.required(this,'count')]"
:error-messages="this.$gzv.serverErrors(this,'count')"
:rules="[this.$gzform.integerValid(this,'count'),this.$gzform.required(this,'count')]"
:error-messages="this.$gzform.serverErrors(this,'count')"
required
@change="onChange('count')"
type="number"
@@ -64,8 +64,8 @@
:label="this.$gzlocale.get('WidgetDollarAmount')"
ref="dollarAmount"
required
:rules="[this.$gzv.decimalValid(this,'dollarAmount'),this.$gzv.required(this,'dollarAmount')]"
:error-messages="this.$gzv.serverErrors(this,'dollarAmount')"
:rules="[this.$gzform.decimalValid(this,'dollarAmount'),this.$gzform.required(this,'dollarAmount')]"
:error-messages="this.$gzform.serverErrors(this,'dollarAmount')"
@change="onChange('dollarAmount')"
type="number"
></v-text-field>
@@ -76,7 +76,7 @@
:label="this.$gzlocale.get('WidgetStartDate')"
v-model="obj.startDate"
ref="startDate"
:error-messages="this.$gzv.serverErrors(this,'startDate')"
:error-messages="this.$gzform.serverErrors(this,'startDate')"
@change="onChange('startDate')"
></gz-date-time-picker>
</v-flex>
@@ -84,8 +84,8 @@
<v-flex xs12 sm6 lg4 xl3 px-2>
<gz-date-time-picker
:label="this.$gzlocale.get('WidgetEndDate')"
:rules="[this.$gzv.datePrecedence(this,'startDate','endDate')]"
:error-messages="this.$gzv.serverErrors(this,'endDate')"
:rules="[this.$gzform.datePrecedence(this,'startDate','endDate')]"
:error-messages="this.$gzform.serverErrors(this,'endDate')"
v-model="obj.endDate"
ref="endDate"
@change="onChange('endDate')"
@@ -96,7 +96,7 @@
v-model="obj.active"
:label="this.$gzlocale.get('Active')"
ref="active"
:error-messages="this.$gzv.serverErrors(this,'active')"
:error-messages="this.$gzform.serverErrors(this,'active')"
required
@change="onChange('active')"
></v-checkbox>
@@ -106,8 +106,8 @@
v-model="obj.roles"
:label="this.$gzlocale.get('WidgetRoles')"
ref="roles"
:rules="[this.$gzv.integerValid(this,'roles'),this.$gzv.required(this,'roles')]"
:error-messages="this.$gzv.serverErrors(this,'roles')"
:rules="[this.$gzform.integerValid(this,'roles'),this.$gzform.required(this,'roles')]"
:error-messages="this.$gzform.serverErrors(this,'roles')"
required
@change="onChange('roles')"
type="number"
@@ -146,8 +146,7 @@
</template>
<script>
/* eslint-disable */
import Vue from "vue";
/* XXeslint-disable */
function clickHandler(menuItem) {
if (!menuItem) {
@@ -262,60 +261,60 @@ export default {
formLoading: true
};
},
watch: {
formValid: {
handler: function(newObj, oldObj) {
console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
//todo: change the save button state here
//console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
}
}
},
methods: {
onChange(ref) {
if (!this.formLoading) {
console.log("onChange:" + ref);
this.$gzv.onChange(this, ref);
this.$gzform.onChange(this, ref);
}
},
getDataFromApi() {
this.formLoading = true;
var url = "Widget/" + this.$route.params.id;
var vm = this;
this.$gzv.deleteAllErrorBoxErrors(this);
this.$gzform.deleteAllErrorBoxErrors(this);
this.$gzapi
.get(url)
.then(res => {
if (res.error) {
vm.serverError = res.error;
vm.$gzv.setErrorBoxErrors(vm);
vm.$gzform.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???
Vue.nextTick(function() {
vm.formValid = true;
vm.formDirty = false;
vm.formLoading = false;
//Update the form status
vm.$gzform.setFormState({
vm: vm,
formDirty: false,
formValid: true,
formLoading: false
});
}
})
.catch(function handleGetDataFromAPIError(error) {
vm.formLoading = false;
//Update the form status
vm.$gzform.setFormState({
vm: 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()) {
if (this.formValid && this.formDirty) {
this.formLoading = true;
var vm = this;
var url = "Widget/" + this.$route.params.id;
//clear any errors vm might be around from previous submit
this.$gzv.deleteAllErrorBoxErrors(this);
this.$gzform.deleteAllErrorBoxErrors(this);
this.$gzapi
.upsert(url, this.obj)
@@ -323,12 +322,11 @@ export default {
this.formLoading = false;
if (res.error) {
vm.serverError = res.error;
vm.$gzv.setErrorBoxErrors(vm);
vm.$gzform.setErrorBoxErrors(vm);
} else {
//It's ok, form is saved
Vue.nextTick(function() {
// vm.formValid = true;
vm.formDirty = false;
vm.setFormState({
vm: vm,
formDirty: false
});
//Logic for detecting if a post or put: if id then it was a post, if no id then it was a put