This commit is contained in:
2019-04-23 19:32:21 +00:00
parent b25a5834bf
commit 3cc5cd53a4
4 changed files with 121 additions and 83 deletions

View File

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

View File

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

View File

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

View File

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