This commit is contained in:
2020-03-02 20:19:47 +00:00
parent 803f80a444
commit 41eb47f8b3
2 changed files with 96 additions and 162 deletions

View File

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

View File

@@ -94,19 +94,6 @@
:error-messages="form().serverErrors(this, 'dollarAmount')"
@input="onChange('dollarAmount')"
></gz-currency>
<!-- <gz-decimal
v-model="obj.dollarAmount"
:readonly="this.formState.readOnly"
:label="lt('WidgetDollarAmount')"
ref="dollarAmount"
:rules="[
form().decimalValid(this, 'dollarAmount'),
form().required(this, 'dollarAmount')
]"
:error-messages="form().serverErrors(this, 'dollarAmount')"
@input="onChange('dollarAmount')"
></gz-decimal> -->
</v-col>
<v-col cols="12" sm="6" lg="4" xl="3">
@@ -201,26 +188,8 @@
:error-messages="form().serverErrors(this, 'customFields')"
@change="onChange('customFields')"
></gz-custom-fields>
<!-- v-model="obj.customFields" -->
</v-col>
</v-row>
<!-- <v-layout align-left justify-center row wrap mt-12>
<v-col xs6 sm4> FORMtags: {{ obj.tags }} </v-col>
</v-row> -->
<!-- <v-layout align-left justify-center row wrap mt-12>
<v-col xs6 sm4>
READY: {{ formState.ready }}
<br />
LOADING: {{ formState.loading }}
<br />
DIRTY: {{ formState.dirty }}
<br />
VALID: {{ formState.valid }}
<br />
READONLY: {{ formState.readOnly }}
<br />
</v-col>
</v-row>-->
</v-form>
</v-col>
</v-row>
@@ -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);
// }
</script>
<style></style>