This commit is contained in:
@@ -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
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user