Can't access property “toString”, Date.parse is null
Posted: Tue Aug 25, 2020 10:50 am
I'm trying to pass the runtime parameters for the report into the vuex state. I have this working perfectly on the Show component, but it doesn't work with the designer on the Edit component.
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 and errors.
Everything works if I pass the data through the URL and use when submitting to the Edit component, but if I use even with the parameters in the URL I get the above errors.
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...
Stimulsoft Designer Edit Component
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 nullCode: Select all
JSON.parse: unexpected end of data at line 1 column 1 of the JSON dataEverything works if I pass the data through the URL and use
Code: Select all
window.location.href Code: Select all
this.$router.pushEverything 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>