Can't access property “toString”, Date.parse is null

[nickdavies07]

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

Code: Select all

can't access property "toString", Date.parse(...) is null

and

Code: Select all

JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

errors.

Everything works if I pass the data through the URL and use

Code: Select all

window.location.href 

when submitting to the Edit component, but if I use

Code: Select all

this.$router.push

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...

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"
    }]
}]

Stimulsoft Designer Edit Component

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>

[Lech Kulikowski]

Hello,

Please send us a sample project that reproduces the issue for analysis.

Thank you.