lucent-laravel/front/js/recordEditor/recordDialog.js

import axios from "axios";

export function recordDialog() {
    document.querySelectorAll("[data-open-modal]").forEach(el => {
        const schema = el.dataset.openModal
        el.addEventListener("click", e => {
            e.preventDefault()
            load(schema)
        })
    })
}


function load(schema) {
    axios
        .get("/lucent/content/" + schema)
        .then((response) => {

            const dialogWrapperEl = document.createElement("div");
            dialogWrapperEl.innerHTML = response.data;
            document.body.appendChild(dialogWrapperEl);
            const dialogEl = dialogWrapperEl.querySelector("dialog");
            dialogEl.showModal();
            dialogWrapperEl.querySelector(".close").addEventListener("click", e => dialogEl.close());

            dialogEl.addEventListener("close", (event) => {
                dialogWrapperEl.remove();
            });
        })
        .catch((error) => console.log(error));
}