This commit is contained in:
@@ -107,19 +107,26 @@ export default {
|
||||
// MENU EVENT HANDLERS
|
||||
//
|
||||
//
|
||||
var that = this;
|
||||
var vm = this;
|
||||
this.$gzevent.$on("menu-change", function handleMenuChange(ctx) {
|
||||
that.$gzmenu.handleMenuChange(that, ctx);
|
||||
vm.$gzmenu.handleMenuChange(vm, ctx);
|
||||
});
|
||||
|
||||
this.$gzevent.$on("menu-replace-item", function handleReplaceMenuItem(
|
||||
newItem
|
||||
) {
|
||||
that.$gzmenu.handleReplaceMenuItem(that, newItem);
|
||||
vm.$gzmenu.handleReplaceMenuItem(vm, newItem);
|
||||
});
|
||||
|
||||
this.$gzevent.$on("menu-disable-item", function handleDisableMenuItem(
|
||||
key,
|
||||
disabled
|
||||
) {
|
||||
vm.$gzmenu.handleDisableMenuItem(vm, key, disabled);
|
||||
});
|
||||
|
||||
this.$gzevent.$on("menu-click", function handleMenuClick(menuitem) {
|
||||
that.$gzmenu.handleAppClick(that, menuitem);
|
||||
vm.$gzmenu.handleAppClick(vm, menuitem);
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
|
||||
@@ -127,7 +127,7 @@ export default {
|
||||
// REQUIRED
|
||||
//
|
||||
required(vm, ref) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
var ctrl = getControl(vm, ref);
|
||||
@@ -149,7 +149,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return err;
|
||||
},
|
||||
@@ -157,7 +157,7 @@ export default {
|
||||
// MAXLENGTH
|
||||
//
|
||||
maxLength(vm, ref, max) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
var ctrl = getControl(vm, ref);
|
||||
@@ -180,7 +180,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return err;
|
||||
} else {
|
||||
@@ -191,7 +191,7 @@ export default {
|
||||
// MAX 255
|
||||
//
|
||||
max255(vm, ref) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
return this.maxLength(vm, ref, 255);
|
||||
@@ -201,7 +201,7 @@ export default {
|
||||
// (start date must precede end date)
|
||||
//
|
||||
datePrecedence(vm, refStart, refEnd) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
var ctrlStart = getControl(vm, refStart);
|
||||
@@ -238,7 +238,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return err;
|
||||
} else {
|
||||
@@ -249,7 +249,7 @@ export default {
|
||||
// INTEGER IS VALID
|
||||
//
|
||||
integerValid(vm, ref) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
var ctrl = getControl(vm, ref);
|
||||
@@ -274,7 +274,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return err;
|
||||
},
|
||||
@@ -283,7 +283,7 @@ export default {
|
||||
// Basically anything that can be a number is valid
|
||||
//
|
||||
decimalValid(vm, ref) {
|
||||
if (vm.formLoading) {
|
||||
if (vm.formState.loading) {
|
||||
return false;
|
||||
}
|
||||
//TODO: Handle commas and spaces in numbers
|
||||
@@ -311,7 +311,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return err;
|
||||
},
|
||||
@@ -364,7 +364,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
ret.push(err);
|
||||
}
|
||||
@@ -394,7 +394,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: false
|
||||
valid: false
|
||||
});
|
||||
return ret;
|
||||
}
|
||||
@@ -419,7 +419,7 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formValid: true
|
||||
valid: true
|
||||
});
|
||||
},
|
||||
///////////////////////////////
|
||||
@@ -436,7 +436,7 @@ export default {
|
||||
// This is required so that server errors can be cleared when input is changed
|
||||
//
|
||||
onChange(vm, ref) {
|
||||
if (triggeringChange || vm.formLoading) {
|
||||
if (triggeringChange || vm.formState.loading) {
|
||||
return;
|
||||
}
|
||||
//If ref appears in the servererrors details collection, remove each one
|
||||
@@ -470,29 +470,29 @@ export default {
|
||||
//Update the form status
|
||||
this.setFormState({
|
||||
vm: vm,
|
||||
formDirty: true,
|
||||
formValid: vm.$refs.form.validate()
|
||||
dirty: true,
|
||||
valid: vm.$refs.form.validate()
|
||||
});
|
||||
},
|
||||
////////////////////////////////////
|
||||
// set calling form Valid state
|
||||
//
|
||||
// {vm:vm,formDirty:bool | undefined,
|
||||
// formValid:bool | undefined,
|
||||
// formLoading:bool | undefined}
|
||||
// {vm:vm,dirty:bool | undefined,
|
||||
// valid:bool | undefined,
|
||||
// loading:bool | undefined}
|
||||
//
|
||||
setFormState(theState) {
|
||||
setFormState(newState) {
|
||||
Vue.nextTick(function() {
|
||||
if (theState.formValid != undefined) {
|
||||
theState.vm.formValid = theState.formValid;
|
||||
if (newState.valid != undefined) {
|
||||
newState.vm.formState.valid = newState.valid;
|
||||
}
|
||||
|
||||
if (theState.formDirty != undefined) {
|
||||
theState.vm.formDirty = theState.formDirty;
|
||||
if (newState.dirty != undefined) {
|
||||
newState.vm.formState.dirty = newState.dirty;
|
||||
}
|
||||
|
||||
if (theState.formLoading != undefined) {
|
||||
theState.vm.formLoading = theState.formLoading;
|
||||
if (newState.loading != undefined) {
|
||||
newState.vm.formState.loading = newState.loading;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -10,21 +10,21 @@ export default {
|
||||
//
|
||||
// Deal with a menu change request
|
||||
// called from App.vue
|
||||
handleMenuChange(that, ctx) {
|
||||
that.appBar.isMain = ctx.isMain;
|
||||
that.appBar.icon = ctx.icon;
|
||||
that.appBar.title = ctx.title;
|
||||
handleMenuChange(vm, ctx) {
|
||||
vm.appBar.isMain = ctx.isMain;
|
||||
vm.appBar.icon = ctx.icon;
|
||||
vm.appBar.title = ctx.title;
|
||||
//set the help url if presented or default to the top of the index
|
||||
that.appBar.helpUrl = ctx.helpUrl ? ctx.helpUrl : "index.html";
|
||||
that.appBar.menuItems = [];
|
||||
vm.appBar.helpUrl = ctx.helpUrl ? ctx.helpUrl : "index.html";
|
||||
vm.appBar.menuItems = [];
|
||||
|
||||
//CONTEXT TOP PORTION
|
||||
//populate the context portion of the menu so handle accordingly
|
||||
if (ctx.menuItems) {
|
||||
that.appBar.menuItems = ctx.menuItems;
|
||||
vm.appBar.menuItems = ctx.menuItems;
|
||||
//DIVIDER
|
||||
//Insert the devider between context and global items
|
||||
that.appBar.menuItems.push({ divider: true, inset: false });
|
||||
vm.appBar.menuItems.push({ divider: true, inset: false });
|
||||
}
|
||||
|
||||
//GLOBAL BOTTOM PORTION
|
||||
@@ -36,27 +36,27 @@ export default {
|
||||
//global menu items
|
||||
|
||||
//LOGOUT
|
||||
that.appBar.menuItems.push({
|
||||
title: that.$gzlocale.get("Logout"),
|
||||
vm.appBar.menuItems.push({
|
||||
title: vm.$gzlocale.get("Logout"),
|
||||
icon: "sign-out-alt",
|
||||
color: "pink",
|
||||
key: "app:logout"
|
||||
});
|
||||
|
||||
//divider
|
||||
that.appBar.menuItems.push({ divider: true, inset: false });
|
||||
vm.appBar.menuItems.push({ divider: true, inset: false });
|
||||
|
||||
//HELP
|
||||
that.appBar.menuItems.push({
|
||||
title: that.$gzlocale.get("MenuHelp"),
|
||||
vm.appBar.menuItems.push({
|
||||
title: vm.$gzlocale.get("MenuHelp"),
|
||||
icon: "question-circle",
|
||||
key: "app:help",
|
||||
data: that.appBar.helpUrl
|
||||
data: vm.appBar.helpUrl
|
||||
});
|
||||
|
||||
//ABOUT
|
||||
that.appBar.menuItems.push({
|
||||
title: that.$gzlocale.get("HelpAboutAyaNova"),
|
||||
vm.appBar.menuItems.push({
|
||||
title: vm.$gzlocale.get("HelpAboutAyaNova"),
|
||||
icon: "info-circle",
|
||||
key: "app:nav:abt",
|
||||
data: "about"
|
||||
@@ -67,27 +67,45 @@ export default {
|
||||
//
|
||||
// Deal with a menu item update request
|
||||
// called from App.vue
|
||||
handleReplaceMenuItem(that, newItem) {
|
||||
if (!that.appBar.menuItems || !newItem) {
|
||||
handleReplaceMenuItem(vm, newItem) {
|
||||
if (!vm.appBar.menuItems || !newItem) {
|
||||
return;
|
||||
}
|
||||
//Find the key that is in the collection and replace it
|
||||
for (var i = 0; i < that.appBar.menuItems.length; i++) {
|
||||
if (that.appBar.menuItems[i].key == newItem.key) {
|
||||
for (var i = 0; i < vm.appBar.menuItems.length; i++) {
|
||||
if (vm.appBar.menuItems[i].key == newItem.key) {
|
||||
//NOTE: since we are adding a new object, it has no reactivity in it so we need to use the Vue.Set to set it which
|
||||
//automatically adds the setters and getters that trigger reactivity
|
||||
//If it was set directly on the array it wouldn't update the UI
|
||||
that.$set(that.appBar.menuItems, i, newItem);
|
||||
vm.$set(vm.appBar.menuItems, i, newItem);
|
||||
return;
|
||||
}
|
||||
}
|
||||
},
|
||||
///////////////////////////////
|
||||
// ENABLE / DISABLE HANDLER
|
||||
//
|
||||
// Deal with a menu item enable / disable
|
||||
// called from App.vue
|
||||
handleDisableMenuItem(vm, key, disabled) {
|
||||
if (!vm.appBar.menuItems || !key) {
|
||||
return;
|
||||
}
|
||||
//Find the key that is in the collection and replace it
|
||||
for (var i = 0; i < vm.appBar.menuItems.length; i++) {
|
||||
var menuItem = vm.appBar.menuItems[i];
|
||||
if (menuItem.key == key) {
|
||||
menuItem.disabled = disabled;
|
||||
}
|
||||
return;
|
||||
}
|
||||
},
|
||||
///////////////////////////////
|
||||
// APP (GLOBAL) CLICK HANDLER
|
||||
//
|
||||
// Deal with a menu change request
|
||||
// called from App.vue
|
||||
handleAppClick(that, menuItem) {
|
||||
handleAppClick(vm, menuItem) {
|
||||
//Key will start with the string "app:" if it's a global application command that should be handled here,
|
||||
//otherwise it's a local command for a local form only
|
||||
//If there is any extended information required for the command it will be in the data property of the menu item
|
||||
@@ -99,15 +117,15 @@ export default {
|
||||
if (!item.disabled && item.owner == "app") {
|
||||
switch (item.key) {
|
||||
case "help":
|
||||
var helpurl = that.$store.state.helpUrl + item.data;
|
||||
var helpurl = vm.$store.state.helpUrl + item.data;
|
||||
window.open(helpurl, "_blank");
|
||||
break;
|
||||
case "logout":
|
||||
processLogout();
|
||||
that.$router.push({ name: "login" });
|
||||
vm.$router.push({ name: "login" });
|
||||
break;
|
||||
case "nav":
|
||||
that.$router.push({ name: item.data });
|
||||
vm.$router.push({ name: item.data });
|
||||
break;
|
||||
default:
|
||||
alert(
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<v-layout v-if="this.formReady">
|
||||
<v-layout v-if="this.formState.ready">
|
||||
<v-flex>
|
||||
<v-form ref="form">
|
||||
<v-layout align-center justify-left row wrap>
|
||||
@@ -117,15 +117,15 @@
|
||||
|
||||
<v-layout align-left justify-center row wrap mt-5>
|
||||
<v-flex xs6 sm4>
|
||||
READY: {{formReady}}
|
||||
READY: {{formState.ready}}
|
||||
<br>
|
||||
LOADING: {{formLoading}}
|
||||
LOADING: {{formState.loading}}
|
||||
<br>
|
||||
DIRTY: {{formDirty}}
|
||||
DIRTY: {{formState.dirty}}
|
||||
<br>
|
||||
VALID: {{formValid}}
|
||||
VALID: {{formState.valid}}
|
||||
<br>
|
||||
READONLY: {{formReadOnly}}
|
||||
READONLY: {{formState.readOnly}}
|
||||
<br>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
@@ -146,7 +146,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* XXeslint-disable */
|
||||
/* Xeslint-disable */
|
||||
|
||||
function clickHandler(menuItem) {
|
||||
if (!menuItem) {
|
||||
@@ -203,9 +203,9 @@ export default {
|
||||
var vm = this;
|
||||
this.$gzlocale
|
||||
.fetch(ltKeysRequired)
|
||||
.then(() => (this.formReady = true))
|
||||
.then(() => (this.formState.ready = true))
|
||||
.catch(err => {
|
||||
this.formReady = true;
|
||||
this.formState.ready = true;
|
||||
vm.$gzHandleFormError(err);
|
||||
});
|
||||
},
|
||||
@@ -254,29 +254,42 @@ export default {
|
||||
serverError: {},
|
||||
errorBoxMessage: null,
|
||||
appError: null,
|
||||
formReady: false,
|
||||
formDirty: false,
|
||||
formValid: true,
|
||||
formReadOnly: false,
|
||||
formLoading: true
|
||||
formState: {
|
||||
ready: false,
|
||||
dirty: false,
|
||||
valid: true,
|
||||
readOnly: false,
|
||||
loading: true
|
||||
}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
formValid: {
|
||||
handler: function(newObj, oldObj) {
|
||||
canSave: {
|
||||
// xeslint-disable-next-line
|
||||
handler: function(newState) {
|
||||
this.$gzevent.$emit(
|
||||
"menu-replace-item",
|
||||
"inventory-widget-edit:save",
|
||||
newState
|
||||
);
|
||||
//todo: change the save button state here
|
||||
//console.log("Valid CHANGED, was " + oldObj + " Now is " + newObj);
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canSave: function() {
|
||||
return this.formState.valid && this.formState.dirty;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onChange(ref) {
|
||||
if (!this.formLoading) {
|
||||
if (!this.formState.loading) {
|
||||
this.$gzform.onChange(this, ref);
|
||||
}
|
||||
},
|
||||
getDataFromApi() {
|
||||
this.formLoading = true;
|
||||
this.formState.loading = true;
|
||||
var url = "Widget/" + this.$route.params.id;
|
||||
var vm = this;
|
||||
this.$gzform.deleteAllErrorBoxErrors(this);
|
||||
@@ -291,9 +304,9 @@ export default {
|
||||
//Update the form status
|
||||
vm.$gzform.setFormState({
|
||||
vm: vm,
|
||||
formDirty: false,
|
||||
formValid: true,
|
||||
formLoading: false
|
||||
dirty: false,
|
||||
valid: true,
|
||||
loading: false
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -301,15 +314,15 @@ export default {
|
||||
//Update the form status
|
||||
vm.$gzform.setFormState({
|
||||
vm: vm,
|
||||
formLoading: false
|
||||
loading: 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.formValid && this.formDirty) {
|
||||
this.formLoading = true;
|
||||
if (this.canSave()) {
|
||||
this.formState.loading = true;
|
||||
var vm = this;
|
||||
var url = "Widget/" + this.$route.params.id;
|
||||
|
||||
@@ -319,14 +332,14 @@ export default {
|
||||
this.$gzapi
|
||||
.upsert(url, this.obj)
|
||||
.then(res => {
|
||||
this.formLoading = false;
|
||||
this.formState.loading = false;
|
||||
if (res.error) {
|
||||
vm.serverError = res.error;
|
||||
vm.$gzform.setErrorBoxErrors(vm);
|
||||
} else {
|
||||
vm.$gzform.setFormState({
|
||||
vm: vm,
|
||||
formDirty: false
|
||||
dirty: false
|
||||
});
|
||||
|
||||
//Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
|
||||
@@ -340,7 +353,7 @@ export default {
|
||||
}
|
||||
})
|
||||
.catch(function handleSubmitError(error) {
|
||||
vm.formLoading = false;
|
||||
vm.formState.loading = false;
|
||||
vm.$gzHandleFormError(error, vm);
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user