stimulsoft-reports-js-vuejs/designer.js

Stimulsoft Reports.JS is a reporting tool for VueJs

import { watch, h, onMounted, onUnmounted, useTemplateRef } from 'vue'
import { } from "./stimulsoft.reports.engine.mjs";
import { } from "./stimulsoft.reports.chart.mjs";
import { } from "./stimulsoft.reports.export.mjs";
import { } from "./stimulsoft.reports.import.xlsx.mjs";
import { } from "./stimulsoft.reports.maps.mjs";
import { } from "./stimulsoft.viewer.mjs";
import { } from "./stimulsoft.designer.mjs";
import { Stimulsoft } from "./stimulsoft.blockly.editor.mjs";

export const Designer = {
    props: {
        report: {
            type: Stimulsoft.Report.StiReport,
            default: null
        },
        visible: {
            type: Boolean,
            default: true
        },
        options: {
            type: Stimulsoft.Designer.StiDesignerOptions,
            default: null
        },
        id: {
            type: String,
            default: null
        }
    },
    emits: ["prepareVariables", "beginProcessData", "endProcessData", "createReport", "closeReport", "openReport", "openedReport", "saveReport", "saveAsReport", "previewReport", "exit", "assignedReport"],
    setup(props, context) {
        var designer;
        var parentRef = useTemplateRef('parentRef')

        const createDesigner = () => {
            designer = new Stimulsoft.Designer.StiDesigner(props.options, props.id, false);
            designer.renderHtml(parentRef.value);
            bindEvents();

            designer.visible = props.visible;
        }

        const bindEvents = () => {
            designer.onPrepareVariables = (args, callback) => context.emit("prepareVariables", args, callback);
            designer.onBeginProcessData = (args, callback) => context.emit("beginProcessData", args, callback);
            designer.onEndProcessData = (args) => context.emit("endProcessData", args);
            designer.onCreateReport = (args, callback) => context.emit("createReport", args, callback);
            designer.onCloseReport = (args, callback) => context.emit("closeReport", args, callback);
            designer.onOpenReport = (args, callback) => {
                args.preventDefault = false;
                context.emit("openReport", args, callback);
            }
            designer.onOpenedReport = (args, callback) => context.emit("openedReport", args, callback);
            designer.onSaveReport = (args, callback) => {
                args.preventDefault = false;
                context.emit("saveReport", args, callback);
            }
            designer.onSaveAsReport = (args, callback) => context.emit("saveAsReport", args, callback);
            designer.onPreviewReport = (args, callback) => context.emit("previewReport", args, callback);
            designer.onExit = (args) => context.emit("exit", args);

            designer.onAssignedReport = (args) => context.emit("assignedReport", args);
        }

        onMounted(() => {
            setTimeout(() => {
                createDesigner();
                designer.report = props.report;
            });
        });

        onUnmounted(() => {
            if (designer != null)
                designer.dispose();
        });

        watch(
            () => props.report,
            () => {
                if (designer)
                    designer.report = props.report;
            },
            { immediate: true }
        )

        watch(
            () => props.options,
            () => {
                if (designer) {
                    createDesigner();
                    designer.report = props.report;
                }
            },
            { immediate: true, deep: true }
        )

        watch(
            () => props.visible,
            () => {
                if (designer)
                    designer.visible = props.visible;
            },
            { immediate: true }
        )

        watch(
            () => props.id,
            () => {
                if (designer) {
                    createDesigner();
                    designer.report = props.report;
                }
            },
            { immediate: true}
        )

        return () => h('div', { ref: 'parentRef' })
    }
}

export { Stimulsoft };