Source: data/dasf/DASFForm.js

// vef-internal
import { SidebarElement } from "../../ui/sidebar/SidebarElement.js";
import { widgetRegistry } from "./widgetRegistry.js";

import "./DASFForm.css";

/**
 * Form for creating requests to a DASF (Data Analytics Software Framework) backend
 */
export class DASFForm extends SidebarElement {

    /**
     * @param {HTMLElement} target 
     * @param {object} options {"schema": {}}
     */
    constructor(target, options) {
        super(target, {
            "submit": [],
            "invalid": []
        });

        this.options_ = Object.assign({}, options || {});

        this.setClass("dasf-form");
        this.setTitle(this.options_.title || "DASF Importer");
        this.editors_ = [];
        // this.initForm_();
    }

    /**
     * @override
     */
    dispose() {
        this.editors_.forEach((ed) => ed.destroy());
    }

    /**
     * @public
     */
    initForm(schemata) {
        const wrapperDiv = document.createElement("div")
        schemata.forEach(
            (schema) => {
                let funcNameOptions = schema.properties.func_name;
                // make sure, we use the constant value as default (as this is
                // the only option)
                funcNameOptions.default = funcNameOptions.const;
                // hide the func_name field in the editor
                if (!('options' in funcNameOptions)) {
                    funcNameOptions.options = {};
                }
                funcNameOptions.options.hidden = true;

                const widgets = [];

                if (schema.vefWidgets) {
                    schema.vefWidgets.forEach(
                        (widgetData) => {
                            const widgetType = widgetData.widget_type;
                            if (widgetType in widgetRegistry) {
                                let widget = new widgetRegistry[widgetType](widgetData);
                                widget.setupSchema(schema);
                                widgets.push(widget);
                            }
                        }
                    )
                }

                import("@json-editor/json-editor").then(mod => {
                    const Editor = mod.JSONEditor;
                    const form = document.createElement("div");

                    var editor = new Editor(form, {
                        theme: 'bootstrap4',
                        schema: schema,
                        disable_edit_json: true,
                        disable_collapse: true,
                        disable_properties: true,
                        titleHidden: true
                    });

                    this.editors_.push(editor);

                    editor.on('ready', () => {
                        const submitButton = document.createElement("button");
                        submitButton.innerText = "Submit";
                        form.appendChild(submitButton);
                        submitButton.addEventListener("click", e => {
                            const errors = editor.validate();
                            if (errors.length) {
                                this.fire("invalid", errors);
                            }
                            else {
                                this.fire("submit", editor.getValue());
                            }
                        })

                    });

                    widgets.forEach(
                        (widget) => {
                            widget.createElement(editor, schema);
                        }
                    )

                    wrapperDiv.appendChild(form)
                });
            });
        this.setContent(wrapperDiv);
    }
}