HUGE REFACTOR / CLEANUP
if there is a issue it's probably something in here that was changed
This commit is contained in:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user