This commit is contained in:
2019-04-23 18:34:37 +00:00
parent d6e6b006ae
commit aab019d797
4 changed files with 119 additions and 78 deletions

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