diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt index 47ce9b17..ad671c18 100644 --- a/ayanova/devdocs/todo.txt +++ b/ayanova/devdocs/todo.txt @@ -47,6 +47,8 @@ CURRENT TODOs todo: widget edit form, is it using all the latest thinking on Created, beforeCreate, initform calls to async functions etc? - compare and contrast with DataListview editor form which is fully up to date. +todo: widget edit, NEW button? (v7 has a new button for every type of record?? Save and new??) + todo: apparently I can change the buttons to display the text not uppercase with class="text-none" or something, should I go back to buttons? (kinda looked cooler, but...) - https://github.com/vuetifyjs/vuetify/issues/3948 diff --git a/ayanova/src/views/test-inventory-widget-edit.vue b/ayanova/src/views/test-inventory-widget-edit.vue index 920be9fc..ce4704f6 100644 --- a/ayanova/src/views/test-inventory-widget-edit.vue +++ b/ayanova/src/views/test-inventory-widget-edit.vue @@ -94,19 +94,6 @@ :error-messages="form().serverErrors(this, 'dollarAmount')" @input="onChange('dollarAmount')" > - - @@ -201,26 +188,8 @@ :error-messages="form().serverErrors(this, 'customFields')" @change="onChange('customFields')" > - - - @@ -237,80 +206,39 @@ const API_BASE_URL = "Widget/"; const FORM_CUSTOM_TEMPLATE_KEY = "Widget"; export default { - beforeRouteEnter(to, from, next) { - var ltKeysRequired = [ - "Widget", - "WidgetName", - "WidgetSerial", - "WidgetDollarAmount", - "WidgetCount", - "WidgetUserType", - "WidgetStartDate", - "WidgetEndDate", - "WidgetNotes", - "WidgetCustom1", - "WidgetCustom2", - "WidgetCustom3", - "WidgetCustom4", - "WidgetCustom5", - "WidgetCustom6", - "WidgetCustom7", - "WidgetCustom8", - "WidgetCustom9", - "WidgetCustom10", - "WidgetCustom11", - "WidgetCustom12", - "WidgetCustom13", - "WidgetCustom14", - "WidgetCustom15", - "WidgetCustom16" - ]; - - window.$gz.locale.fetch(ltKeysRequired).then( - //ensure cached any form customizations for this particular form - window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY).then(next) - ); - }, - beforeCreate() { + created() { var vm = this; - initForm(this) + initForm(vm) .then(() => { - vm.pickLists.usertypes = window.$gz.enums.getPickList("usertype"); + vm.rights = window.$gz.role.getRights(window.$gz.type.Widget); vm.formState.ready = true; + window.$gz.eventBus.$on("menu-click", clickHandler); + //id 0 means create a new record don't load one + if (vm.$route.params.recordid != 0) { + vm.getDataFromApi(vm.$route.params.recordid); + } else { + //setup for new record + var readOnly = !vm.rights.change; + //Update the form status + window.$gz.form.setFormState({ + vm: vm, + dirty: false, + valid: true, + loading: false, + readOnly: readOnly + }); + + //bugbug WTF? This doesn't make sense, if it's an attempt to hide delete button then that's wrong + //it's a new record so it can't be deleted so... + vm.rights.delete = false; + generateMenu(vm); + } }) .catch(err => { vm.formState.ready = true; window.$gz.errorHandler.handleFormError(err); }); }, - created() { - this.rights = window.$gz.role.getRights(window.$gz.type.Widget); - - window.$gz.eventBus.$on("menu-click", clickHandler); - //id 0 means create a new record don't load one - if (this.$route.params.recordid != 0) { - this.getDataFromApi(this.$route.params.recordid); - } else { - //setup for new record - var readOnly = !this.rights.change; - //Update the form status - window.$gz.form.setFormState({ - vm: this, - dirty: false, - valid: true, - loading: false, - readOnly: readOnly - }); - - //it's a new record so it can't be deleted so... - this.rights.delete = false; - - //NOTE: If this object requires defaults from the server for a new object then here is where it woudld fetch them - - //modify the menu as necessary - generateMenu(this); - } - }, beforeRouteUpdate(to, from, next) { //This triggers a fetch of the data when the ID value changes on the route //which happens on duplicate, submit new record and change of active record id (backward nav/forward nav etc) @@ -434,13 +362,14 @@ export default { } }, getDataFromApi(recordId) { - this.formState.loading = true; + var vm = this; + vm.formState.loading = true; if (!recordId) { throw FORM_KEY + "::getDataFromApi -> Missing recordID!"; } var url = API_BASE_URL + recordId; - var vm = this; - window.$gz.form.deleteAllErrorBoxErrors(this); + + window.$gz.form.deleteAllErrorBoxErrors(vm); window.$gz.api .get(url) @@ -483,15 +412,16 @@ export default { }); }, submit() { - if (this.canSave) { - this.formState.loading = true; - var vm = this; - var url = API_BASE_URL + this.$route.params.recordid; + var vm = this; + if (vm.canSave) { + vm.formState.loading = true; + + var url = API_BASE_URL + vm.$route.params.recordid; //clear any errors vm might be around from previous submit - window.$gz.form.deleteAllErrorBoxErrors(this); + window.$gz.form.deleteAllErrorBoxErrors(vm); window.$gz.api - .upsert(url, this.obj) + .upsert(url, vm.obj) .then(res => { vm.formState.loading = false; if (res.error != undefined) { @@ -503,10 +433,8 @@ export default { //Handle "post" of new record (CREATE) //change url to new record in history - //NOTE: will not cause a new navigate, almost nothing does unless forced with a KEY property or using router.GO() - //but will trigger navigation guard beforeRouteUpdate which we use here in this form - - //NOTE: THIS IS THE ONLY PLACE ON THIS FORM THAT WILL TRIGGER BEFOREROUTEUPDATE + //NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO() + //but will trigger navigation guard beforeRouteUpdate which we use here in this form to fetch data freshly vm.$router.replace( vm.$route.fullPath.slice(0, -1) + res.data.id ); @@ -533,7 +461,7 @@ export default { //do the delete vm.formState.loading = true; //No need to delete a new record, just abandon it... - if (this.$route.params.recordid == 0) { + if (vm.$route.params.recordid == 0) { //this should not get offered for delete but to be safe and clear just in case: JUST_DELETED = true; // navigate backwards @@ -569,13 +497,14 @@ export default { }); }, duplicate() { - if (this.canDuplicate && this.$route.params.recordid != 0) { - this.formState.loading = true; - var vm = this; - var url = API_BASE_URL + "duplicate/" + this.$route.params.recordid; + var vm = this; + if (vm.canDuplicate && vm.$route.params.recordid != 0) { + vm.formState.loading = true; + + var url = API_BASE_URL + "duplicate/" + vm.$route.params.recordid; //clear any errors vm might be around from previous submit - window.$gz.form.deleteAllErrorBoxErrors(this); + window.$gz.form.deleteAllErrorBoxErrors(vm); window.$gz.api .duplicate(url) .then(res => { @@ -717,12 +646,56 @@ function generateMenu(vm) { var JUST_DELETED = false; -////////////////////// -// +///////////////////////////////// // // function initForm(vm) { - return populatePickLists(vm); + return new Promise(function(resolve, reject) { + (async function() { + try { + await fetchUILocalizedText(vm); + await window.$gz.formCustomTemplate.get(FORM_CUSTOM_TEMPLATE_KEY); + await populatePickLists(vm); + } catch (err) { + reject(err); + } + resolve(); + })(); + }); +} + +////////////////////////////////////////////////////////// +// +// Ensures UI localized text is available +// +function fetchUILocalizedText(vm) { + return window.$gz.locale.fetch([ + "Widget", + "WidgetName", + "WidgetSerial", + "WidgetDollarAmount", + "WidgetCount", + "WidgetUserType", + "WidgetStartDate", + "WidgetEndDate", + "WidgetNotes", + "WidgetCustom1", + "WidgetCustom2", + "WidgetCustom3", + "WidgetCustom4", + "WidgetCustom5", + "WidgetCustom6", + "WidgetCustom7", + "WidgetCustom8", + "WidgetCustom9", + "WidgetCustom10", + "WidgetCustom11", + "WidgetCustom12", + "WidgetCustom13", + "WidgetCustom14", + "WidgetCustom15", + "WidgetCustom16" + ]); } ////////////////////// @@ -730,51 +703,10 @@ function initForm(vm) { // function populatePickLists(vm) { //ensure the pick lists required are pre-fetched - //this is called before form is fully opened - return window.$gz.enums.fetchEnumList("usertype"); - // return window.$gz.api.get("EnumPickList/list/usertype").then(res => { - // if (res.error) { - // throw res.error; - // } - // vm.pickLists.usertypes = res.data; - // }); + return window.$gz.enums.fetchEnumList("usertype").then(() => { + vm.pickLists.usertypes = window.$gz.enums.getPickList("usertype"); + }); } - -////////////////////// -// -// -// function fetchLocaleText(vm) { -// //Cache all required lt keys -// var ltKeysRequired = [ -// "Widget", -// "WidgetName", -// "WidgetSerial", -// "WidgetDollarAmount", -// "WidgetCount", -// "WidgetUserType", -// "WidgetStartDate", -// "WidgetEndDate", -// "WidgetNotes", -// "WidgetCustom1", -// "WidgetCustom2", -// "WidgetCustom3", -// "WidgetCustom4", -// "WidgetCustom5", -// "WidgetCustom6", -// "WidgetCustom7", -// "WidgetCustom8", -// "WidgetCustom9", -// "WidgetCustom10", -// "WidgetCustom11", -// "WidgetCustom12", -// "WidgetCustom13", -// "WidgetCustom14", -// "WidgetCustom15", -// "WidgetCustom16" -// ]; - -// return window.$gz.locale.fetch(ltKeysRequired); -// }