HUGE REFACTOR / CLEANUP

if there is a issue it's probably something in here that was changed
This commit is contained in:
2021-09-28 20:19:44 +00:00
parent 51eddfede9
commit d0afdd9855
238 changed files with 3127 additions and 8614 deletions

View File

@@ -6,8 +6,6 @@
>
<v-progress-circular indeterminate size="64"></v-progress-circular>
</v-overlay>
<!-- {{ formState }} -->
<v-row v-show="formState.ready">
<gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
<v-col cols="12" class="d-sm-none accent--text">
@@ -311,42 +309,22 @@
</v-row>
</div>
</template>
<script>
/////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* Xeslint-disable */
//
////////////////////////////////////////////////////////////////////////////////////////////////////////////
import * as monaco from "monaco-editor";
//Monaco editor info page with links
//https://microsoft.github.io/monaco-editor/
const FORM_KEY = "ay-report-edit";
let JUST_DELETED = false;
let editor = null;
export default {
async created() {
let vm = this;
// console.log(
// "ay-report created reportdataoptions:",
// vm.$route.params.reportDataOptions
// );
const vm = this;
try {
await initForm(vm);
vm.rights = window.$gz.role.getRights(window.$gz.type.Report);
vm.formState.readOnly = !vm.rights.change;
window.$gz.eventBus.$on("menu-click", clickHandler);
//console.log("report-edit created params are:", vm.$route.params);
let setDirty = false;
let setValid = true;
//id 0 means create or duplicate to new
if (vm.$route.params.recordid != 0) {
//is there already an obj from a prior operation?
@@ -355,7 +333,7 @@ export default {
this.obj = this.$route.params.obj;
} else {
//FETCH EXISTING
await vm.getDataFromApi(vm.$route.params.recordid); //let getdata handle loading
await vm.getDataFromApi(vm.$route.params.recordid);
}
} else {
//Might be a duplicate and contain another record
@@ -375,12 +353,11 @@ export default {
"notify-error",
"ay-report-edit::created - missing report data options cannot proceed"
);
// // navigate backwards
//
vm.$router.go(-1);
return;
}
vm.obj.aType = vm.$route.params.reportDataOptions.AType;
//trigger rule breaking / validation
this.$nextTick(() => {
this.obj.name = null;
@@ -388,14 +365,12 @@ export default {
});
}
}
//in any case we need the sample data so fetch it here after the setup for new or existing or duplicate is completed above
await fetchReportData(vm);
//---------------
//setup the editor and models
//Created editor models for each type of report element that can be edited
vm.editData.template.model = monaco.editor.createModel(
vm.obj.template,
"html"
@@ -427,9 +402,8 @@ export default {
vm.editData.template.state = editor.saveViewState();
//change subscription
editor.onDidChangeModelContent(event => {
editor.onDidChangeModelContent(() => {
const editorValue = editor.getValue();
switch (vm.activeTab) {
case "template":
vm.obj.template = editorValue;
@@ -450,24 +424,13 @@ export default {
//pretend the name field changed even though it didn't
vm.fieldValueChanged("name");
});
vm.view = "properties";
//---------------
// window.$gz.form.setFormState({
// vm: vm,
// dirty: false,
// valid: true
// });
window.$gz.form.setFormState({
vm: vm,
loading: false,
dirty: setDirty,
valid: setValid
valid: true
});
generateMenu(vm);
} catch (error) {
window.$gz.errorHandler.handleFormError(error, vm);
@@ -488,7 +451,7 @@ export default {
},
beforeDestroy() {
window.$gz.eventBus.$off("menu-click", clickHandler);
//TODO: dispose all models and editor
//dispose all models and editor
editor && editor.dispose();
},
@@ -498,7 +461,7 @@ export default {
editAreaHeight: 300,
activeTab: "properties",
lastTab: "properties",
view: "edit", //"edit","properties","test"
view: "edit",
editData: {
template: {
model: null,
@@ -533,10 +496,10 @@ export default {
template: `<html>
<body>
{{#each ayReportData}}
<h2>{{ Name }}</h2>
<div>Notes: <span class='example'>{{ Notes }}</span></div>
{{/each}}
{{#each ayReportData}}
<h2>{{ Name }}</h2>
<div>Notes: <span class='example'>{{ Notes }}</span></div>
{{/each}}
</body>
</html>`,
@@ -602,32 +565,18 @@ Handlebars.registerHelper('loud', function (aString) {
}
};
},
/*{"data":{"id":10,"concurrency":19494847,"name":"test basic","active":true,"notes":"",
"roles":124927,"aType":2,
"template":"<html>\n\n<body>\n\t{{#each ayReportData}}\n\t<h2>{{ Name }}</h2>\n\t<div>Notes: <span class='example'>{{ Notes }}</span></div>\n\t{{/each}}\n</body>\n\n</html>","style":".example {\n color: blue;\n}","jsPrerender":"async function ayPrepareData(reportData){ \n //this function (if present) is called with the report data \n //before the report is rendered\n //modify data as required here and return it to change the data before the report renders\n //see the help documentation for details\n return reportData;\n}","jsHelpers":"//Register custom Handlebars helpers here to use in your report script\n//https://handlebarsjs.com/guide/#custom-helpers\nHandlebars.registerHelper('loud', function (aString) {\n return aString.toUpperCase()\n})",
"renderType":0,
"headerTemplate":null,"footerTemplate":null,"displayHeaderFooter":false,
"paperFormat":0,"landscape":false,"marginOptionsBottom":null,
"marginOptionsLeft":null,"marginOptionsRight":null,
"marginOptionsTop":null,"pageRanges":null,"preferCSSPageSize":false,
"printBackground":false,"scale":1}}
*/
//WATCHERS
watch: {
formState: {
handler: function(val) {
//,oldval is available here too if necessary
if (this.formState.loading) {
return;
}
//enable / disable save button
if (val.dirty && val.valid && !val.readOnly) {
window.$gz.eventBus.$emit("menu-enable-item", FORM_KEY + ":save");
} else {
window.$gz.eventBus.$emit("menu-disable-item", FORM_KEY + ":save");
}
//enable / disable RENDER button if it can be rendered (has data)
if (this.reportData != null) {
if (!val.dirty) {
@@ -641,8 +590,6 @@ Handlebars.registerHelper('loud', function (aString) {
);
}
}
//enable / disable duplicate / new button
if (!val.dirty && val.valid && !val.readOnly) {
window.$gz.eventBus.$emit(
"menu-enable-item",
@@ -680,18 +627,9 @@ Handlebars.registerHelper('loud', function (aString) {
}
},
methods: {
//alternate method, one editor with tabs example
//probably should do this way
//https://github.com/Microsoft/monaco-editor/issues/604
//https://github.com/Microsoft/monaco-editor/blob/bad3c34056624dca34ac8be5028ae3454172125c/website/playground/playground.js#L108
//https://github.com/microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-monaco-plugin
//
onViewChange() {
let vm = this;
let currentState = editor.saveViewState();
let currentModel = editor.getModel();
// debugger;
const vm = this;
const currentState = editor.saveViewState();
//save edit state before switching
switch (vm.lastTab) {
case "properties":
@@ -717,17 +655,13 @@ Handlebars.registerHelper('loud', function (aString) {
break;
}
vm.lastTab = vm.activeTab;
//set new view stuff
switch (vm.activeTab) {
case "properties":
vm.view = "properties";
return;
break;
case "pdfoptions":
vm.view = "pdfoptions";
return;
break;
case "template":
editor.setModel(vm.editData.template.model);
editor.restoreViewState(vm.editData.template.state);
@@ -763,13 +697,12 @@ Handlebars.registerHelper('loud', function (aString) {
editor.layout();
editor.focus();
});
// vm.lastTab = vm.activeTab;
},
onResize() {
this.$nextTick(() => {
//resize related links:
//https://github.com/Microsoft/monaco-editor/issues/28
let el = document.getElementById("editContainer");
const el = document.getElementById("editContainer");
el.style = `width:100%;height:${window.innerHeight * 0.77}px`;
if (editor != null) {
editor.layout();
@@ -798,7 +731,7 @@ Handlebars.registerHelper('loud', function (aString) {
}
},
async getDataFromApi(recordId) {
let vm = this;
const vm = this;
window.$gz.form.setFormState({
vm: vm,
loading: true
@@ -806,12 +739,10 @@ Handlebars.registerHelper('loud', function (aString) {
if (!recordId) {
throw new Error(FORM_KEY + "::getDataFromApi -> Missing recordID!");
}
let url = "report/" + recordId;
try {
window.$gz.form.deleteAllErrorBoxErrors(vm);
let res = await window.$gz.api.get(url);
const res = await window.$gz.api.get("report/" + recordId);
if (res.error) {
//Not found?
if (res.error.code == "2010") {
window.$gz.form.handleObjectNotFound(vm);
}
@@ -819,9 +750,7 @@ Handlebars.registerHelper('loud', function (aString) {
window.$gz.form.setErrorBoxErrors(vm);
} else {
vm.obj = res.data;
//modify the menu as necessary
generateMenu(vm);
//Update the form status
window.$gz.form.setFormState({
vm: vm,
dirty: false,
@@ -839,13 +768,7 @@ Handlebars.registerHelper('loud', function (aString) {
}
},
async submit() {
//######################
//need to set vm.obj first with model get value of text of each type being edited
//as only properties will be set already on obj, the rest is still as it was upon initial fetch
//unless I code it to always save to obj on each change of view or something but not necessary really
//USE MODEL.getValue() to get the text value of the model being edited
//Models sb already set in vm if they were set or edited previously
let vm = this;
const vm = this;
if (vm.canSave == false) {
return;
}
@@ -855,37 +778,27 @@ Handlebars.registerHelper('loud', function (aString) {
vm: vm,
loading: true
});
let url = "report/"; // + vm.$route.params.recordid;
//clear any errors vm might be around from previous submit
window.$gz.form.deleteAllErrorBoxErrors(vm);
let res = await window.$gz.api.upsert(url, vm.obj);
const res = await window.$gz.api.upsert("report/", vm.obj);
if (res.error) {
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
//Logic for detecting if a post or put: if id then it was a post, if no id then it was a put
if (res.data.id) {
//POST - whole new object returned
//POST
vm.obj = res.data;
//Change URL to new record
//NOTE: will not cause a page re-render, almost nothing does unless forced with a KEY property or using router.GO()
this.$router.replace({
name: "ay-report-edit",
params: {
recordid: res.data.id,
obj: res.data, // Pass data object to new form
obj: res.data,
reportDataOptions: vm.$route.params.reportDataOptions
}
});
} else {
//PUT - only concurrency token is returned (**warning, if server changes object other fields then this needs to act more like POST above but is more efficient this way**)
//Handle "put" of an existing record (UPDATE)
//PUT
vm.obj.concurrency = res.data.concurrency;
}
//Update the form status
window.$gz.form.setFormState({
vm: vm,
dirty: false,
@@ -902,41 +815,33 @@ Handlebars.registerHelper('loud', function (aString) {
}
},
async remove() {
let vm = this;
const vm = this;
try {
let dialogResult = await window.$gz.dialog.confirmDelete();
const dialogResult = await window.$gz.dialog.confirmDelete();
if (dialogResult != true) {
return;
}
//do the delete
window.$gz.form.setFormState({
vm: vm,
loading: true
});
//No need to delete a new record, just abandon it...
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
vm.$router.go(-1);
} else {
let url = "report/" + vm.$route.params.recordid;
window.$gz.form.deleteAllErrorBoxErrors(vm);
let res = await window.$gz.api.remove(url);
const res = await window.$gz.api.remove(
"report/" + vm.$route.params.recordid
);
if (res.error) {
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
//workaround to prevent warning about leaving dirty record
//For some reason I couldn't just reset isdirty in formstate
JUST_DELETED = true;
// navigate backwards
vm.$router.go(-1);
}
}
} catch (error) {
//Update the form status
window.$gz.form.setFormState({
vm: vm,
loading: false
@@ -945,50 +850,46 @@ Handlebars.registerHelper('loud', function (aString) {
}
},
duplicate() {
//Navigate to new record
this.$router.push({
name: "ay-report-edit",
params: {
recordid: 0,
obj: this.obj, // Pass data object to new form
obj: this.obj,
reportDataOptions: this.$route.params.reportDataOptions
}
});
},
async render() {
let vm = this;
const vm = this;
if (vm.$route.params.recordid == 0) {
return;
}
let reportDataOptions = vm.$route.params.reportDataOptions;
const reportDataOptions = vm.$route.params.reportDataOptions;
if (!reportDataOptions) {
throw new Error(
"Missing report data: to view report must come here from an object edit form or list so data can be provided for viewing the report"
);
}
reportDataOptions.ReportId = vm.obj.id;
//Meta data from client for use by report script
reportDataOptions.ClientMeta = window.$gz.api.reportClientMetaData();
window.$gz.form.setFormState({
vm: vm,
loading: true
});
let url = "report/render";
try {
window.$gz.form.deleteAllErrorBoxErrors(vm);
vm.rendering = true;
let res = await window.$gz.api.upsert(url, reportDataOptions);
const res = await window.$gz.api.upsert(
"report/render",
reportDataOptions
);
vm.rendering = false;
if (res.error) {
vm.formState.serverError = res.error;
window.$gz.form.setErrorBoxErrors(vm);
} else {
let reportUrl = window.$gz.api.reportDownloadUrl(res.data);
const reportUrl = window.$gz.api.reportDownloadUrl(res.data);
if (window.open(reportUrl, "Report") == null) {
vm.formState.serverError =
"Problem displaying report in new window. Browser must allow pop-ups to view reports; check your browser setting";
@@ -1008,7 +909,6 @@ Handlebars.registerHelper('loud', function (aString) {
}
}
};
//end of vue object
/////////////////////////////
//
@@ -1017,7 +917,7 @@ async function clickHandler(menuItem) {
if (!menuItem) {
return;
}
let m = window.$gz.menu.parseMenuItem(menuItem);
const m = window.$gz.menu.parseMenuItem(menuItem);
if (m.owner == FORM_KEY && !m.disabled) {
switch (m.key) {
case "export":
@@ -1055,7 +955,7 @@ async function clickHandler(menuItem) {
//
//
function generateMenu(vm) {
let menuOptions = {
const menuOptions = {
isMain: false,
readOnly: vm.formState.readOnly,
icon: "$ayiDraftingCompass",
@@ -1120,7 +1020,7 @@ function generateMenu(vm) {
//EXPORT
if (vm.$route.params.recordid != 0) {
let href = window.$gz.api.genericDownloadUrl(
const href = window.$gz.api.genericDownloadUrl(
"report/export/" + vm.$route.params.recordid
);
@@ -1179,7 +1079,7 @@ async function fetchTranslatedText(vm) {
////////////////////
//
async function fetchReportData(vm) {
let reportDataOptions = vm.$route.params.reportDataOptions;
const reportDataOptions = vm.$route.params.reportDataOptions;
if (!reportDataOptions) {
vm.reportData = null;
return;
@@ -1190,15 +1090,10 @@ async function fetchReportData(vm) {
);
}
vm.obj.aType = reportDataOptions.AType;
//handle includeWoItemDescendants by adding it's value to the request for report data
reportDataOptions["includeWoItemDescendants"] =
vm.obj.includeWoItemDescendants;
//reportDataOptions["reportDesignerSample"] = true; //used to indicate to server that it should limit the rows returned to a sensible level
let res = await window.$gz.api.upsert("report/data", reportDataOptions);
//We never expect there to be no data here
const res = await window.$gz.api.upsert("report/data", reportDataOptions);
if (!res.hasOwnProperty("data")) {
return Promise.reject(res);
} else {