I'm passing the data to the vuex store and accessing in the components through a getter getRuntimeParameters and the data is getting stored fine.
However, i'm getting
Code: Select all
can't access property "toString", Date.parse(...) is null
Code: Select all
JSON.parse: unexpected end of data at line 1 column 1 of the JSON data
Everything works if I pass the data through the URL and use
Code: Select all
window.location.href
Code: Select all
this.$router.push
Everything seems to be loading in the right way, and it works fine on the viewer , just not on the designer?
Saved in the Store...
Code: Select all
[{
"bespoke_report_datasource_id": 94,
"datasource_id": 1,
"datasource_runtime_params_array": [{
"name": "parent.name",
"friendly_name": "Home Name",
"data_type": "list-single-homes",
"operator": "in",
"friendly_operator": "Is In",
"value": "Any",
"default": "Any"
}, {
"name": "fv_tasks.override_date",
"friendly_name": "Log Date",
"data_type": "date-range",
"operator": "between",
"friendly_operator": "Is Between",
"value": "17 Aug 2020 - 24 Aug 2020",
"default": "7,0"
}]
}]
Code: Select all
<template>
<div class="reporting-panel">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<h1 class="text-center">Edit Bespoke Report <span class="fa fa-file-pdf-o text-warning"></span></h1>
<div class="row">
<div class="col-md-6 text-right">
<button @click="saveChanges" class="btn btn-success btn-fill">
<i class="fa fa-floppy-o"></i> Save Changes
</button>
</div>
</div>
<div class="mt-3">
<div v-if="!loaded" class="text-center">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw text-warning mt-3"></i>
<span class="sr-only">Loading...</span>
</div>
<div id="designer"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
export default {
data() {
return {
report_id: this.$route.params.bespoke_report_id,
definition: '',
instance_name: '',
instance_id: null,
datasources: [],
datasets: [],
loaded: false,
}
},
mounted() {
this.fetchReportDetails();
},
computed: {
...mapGetters({
getRuntimeParameters: 'Reporting/getRuntimeParameters'
}),
designer() {
let options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.allowChangeWindowTitle = false;
options.toolbar.showOpenButton = false;
options.toolbar.showSaveButton = false;
options.toolbar.showSetupToolboxButton = false;
options.toolbar.showFileMenu = false;
options.viewerOptions.toolbar.showOpenButton = false;
options.viewerOptions.toolbar.showSaveButton = false;
options.viewerOptions.toolbar.viewMode = 2;
options.height = "75vh";
return new Stimulsoft.Designer.StiDesigner(options, 'StiDesigner', false)
},
report() {
return new Stimulsoft.Report.StiReport();
}
},
methods: {
...mapActions({
loadReport: 'Reporting/loadReport',
loadDatasets: 'Reporting/loadDatasets',
updateReport: 'Reporting/updateReport'
}),
fetchReportDetails() {
this.loadReport(this.report_id)
.then(response => {
this.definition = response.report.bespoke_report_definition;
this.datasources = response.report.datasources;
})
.catch(error => {
this.buildErrorMessages(error)
this.$router.replace('/reporting')
})
.then(() => {
this.$nextTick(() => {
this.setupReport();
});
})
},
setupReport() {
this.report.load(this.definition);
this.report.dictionary.databases.clear();
this.populateReport();
},
async populateReport() {
for (const datasource of this.datasources) {
this.instance_id = datasource.pivot.bespoke_report_datasource_id;
this.instance_name = datasource.pivot.datasource_instance_name;
this.grouping_name = datasource.pivot.datasource_instance_grouping;
await this.loadDatasets({ id: this.instance_id, runtime_parameters: JSON.stringify(this.getRuntimeParameters) }) // HERE I AM GETTING THE RUNTIME PARAMETERS FROM THE STORE
.then(response => {
let dataSet = new Stimulsoft.System.Data.DataSet(this.grouping_name);
dataSet.readJson(response)
this.report.regData(dataSet.dataSetName, "", dataSet)
})
.catch(error => {
this.buildErrorMessages(error)
this.$router.replace('/reporting')
})
}
this.renderDesigner()
},
renderDesigner() {
this.report.dictionary.synchronize();
this.designer.report = this.report;
this.designer.renderHtml('designer');
this.loaded = true;
},
}
}
</script>