qb-core-qbcore-fivem/html/js/editor.js

// editor.js – NUI-based config editor with type-aware, recursive editing

// State
let allData = {};
let currentFile = null;

// Select a file and render its data
function selectFile(file, liElement) {
    document.querySelectorAll(".file-list li").forEach((li) => li.classList.remove("active"));
    liElement.classList.add("active");
    currentFile = file;
    renderData();
}

// Render JSON data for the current file
function renderData() {
    if (!currentFile) return;
    const data = allData[currentFile];
    if (!data) {
        console.error(`No data found for ${currentFile}`);
        return;
    }
    buildEditor(data);
}

// Build main editor UI from data object
function buildEditor(data) {
    const container = document.getElementById("data-container");
    container.innerHTML = "";
    Object.entries(data).forEach(([key, value]) => {
        const card = document.createElement("div");
        card.className = "data-card";
        card.dataset.key = key;
        card.innerHTML = `<h3>${key}</h3>`;

        // value preview
        const preview = document.createElement("div");
        preview.className = "data-preview";
        if (typeof value === "boolean") {
            preview.textContent = value;
        } else if (Array.isArray(value)) {
            preview.textContent = `[${value.map((v) => (typeof v === "object" ? JSON.stringify(v) : v)).join(", ")}]`;
        } else if (typeof value === "object" && value !== null) {
            preview.textContent = JSON.stringify(value);
        } else {
            preview.textContent = value;
        }
        card.appendChild(preview);

        const editBtn = document.createElement("button");
        editBtn.className = "btn-edit";
        editBtn.innerHTML = `<span class='material-symbols-rounded'>edit</span> Edit`;
        editBtn.addEventListener("click", () => openEditModal(key, value));
        card.appendChild(editBtn);

        container.appendChild(card);
    });
}

// Recursive field builder
function buildFormFields(container, data, prefix = "") {
    Object.entries(data).forEach(([field, val]) => {
        const group = document.createElement("div");
        group.className = "form-group";

        const label = document.createElement("label");
        label.htmlFor = "field-" + prefix + field;
        label.textContent = field;
        group.appendChild(label);

        if (typeof val === "boolean") {
            const input = document.createElement("input");
            input.type = "checkbox";
            input.checked = val;
            input.name = prefix + field;
            input.id = "field-" + prefix + field;
            input.className = "form-control";
            group.appendChild(input);
        } else if (Array.isArray(val)) {
            // Array handling: differentiate primitives and objects
            val.forEach((item, idx) => {
                if (item !== null && typeof item === "object") {
                    // Nested object in array: use fieldset
                    const fieldset = document.createElement("fieldset");
                    fieldset.className = "nested-fieldset";
                    const legend = document.createElement("legend");
                    legend.textContent = `${field}[${idx}]`;
                    fieldset.appendChild(legend);
                    buildFormFields(fieldset, item, prefix + field + `[${idx}].`);
                    group.appendChild(fieldset);
                } else {
                    // Primitive in array
                    const itemGroup = document.createElement("div");
                    itemGroup.className = "form-group";
                    const itemLabel = document.createElement("label");
                    itemLabel.htmlFor = `${prefix}${field}[${idx}]`;
                    itemLabel.textContent = `${field}[${idx}]`;

                    const input = document.createElement("input");
                    input.type = typeof item === "boolean" ? "checkbox" : "text";
                    if (typeof item === "boolean") input.checked = item;
                    else input.value = item;
                    input.name = `${prefix}${field}[${idx}]`;
                    input.id = `field-${prefix}${field}[${idx}]`;
                    input.className = "form-control";

                    itemGroup.append(itemLabel, input);
                    group.appendChild(itemGroup);
                }
            });
        } else if (val !== null && typeof val === "object") {
            // Nested object
            const fieldset = document.createElement("fieldset");
            fieldset.className = "nested-fieldset";
            const legend = document.createElement("legend");
            legend.textContent = field;
            fieldset.appendChild(legend);
            buildFormFields(fieldset, val, prefix + field + ".");
            group.appendChild(fieldset);
        } else {
            const input = document.createElement("input");
            input.type = "text";
            input.value = val;
            input.name = prefix + field;
            input.id = "field-" + prefix + field;
            input.className = "form-control";
            group.appendChild(input);
        }
        container.appendChild(group);
    });
}

// Open modal to edit a key
function openEditModal(key, value) {
    const modal = document.getElementById("edit-modal");
    modal.querySelector("h2").textContent = `Edit '${key}'`;
    const formContainer = document.getElementById("editor-form");
    formContainer.innerHTML = "";

    const form = document.createElement("form");
    form.id = "editor-form-inner";

    // Determine if value is object or primitive
    const isObj = value !== null && typeof value === "object";
    const editableData = isObj ? value : { [key]: value };
    const prefix = isObj ? "" : key + ".";

    buildFormFields(form, editableData, prefix);
    formContainer.appendChild(form);

    // Save handler
    document.getElementById("save-item-btn").onclick = async (e) => {
        e.preventDefault();
        const formElem = document.getElementById("editor-form-inner");
        const updated = { ...allData[currentFile] };
        const resultValue = {};

        Array.from(formElem.elements).forEach((el) => {
            if (!el.name) return;
            const name = el.name;
            let val;
            if (el.type === "checkbox") val = el.checked;
            else if (el.tagName === "TEXTAREA") {
                try {
                    val = JSON.parse(el.value);
                } catch {
                    val = el.value;
                }
            } else val = el.value;

            // assign into nested structure
            const path = name.split(/\.|\[|\]/).filter((p) => p);
            let target = resultValue;
            path.forEach((part, idx) => {
                const last = idx === path.length - 1;
                if (last) target[part] = val;
                else {
                    target[part] = target[part] || {};
                    target = target[part];
                }
            });
        });

        updated[key] = Array.isArray(value) || (value !== null && typeof value === "object") ? resultValue : resultValue[key];
        await saveConfig(updated);
    };

    setupModalClose();
    modal.classList.remove("hidden");
}

// Open modal to add a new key/value
function openNewItemModal() {
    const modal = document.getElementById("edit-modal");
    modal.querySelector("h2").textContent = "Add New Item";
    const formContainer = document.getElementById("editor-form");
    formContainer.innerHTML = "";

    const form = document.createElement("form");
    form.id = "editor-form-inner";

    // Key input
    const keyGroup = document.createElement("div");
    keyGroup.className = "form-group";
    const keyLabel = document.createElement("label");
    keyLabel.htmlFor = "new-key";
    keyLabel.textContent = "Key";
    const keyInput = document.createElement("input");
    keyInput.type = "text";
    keyInput.id = "new-key";
    keyInput.name = "key";
    keyInput.className = "form-control";
    keyGroup.append(keyLabel, keyInput);
    form.appendChild(keyGroup);

    // Value input
    const valGroup = document.createElement("div");
    valGroup.className = "form-group";
    const valLabel = document.createElement("label");
    valLabel.htmlFor = "new-value";
    valLabel.textContent = "Value";
    const valInput = document.createElement("input");
    valInput.type = "text";
    valInput.id = "new-value";
    valInput.name = "value";
    valInput.className = "form-control";
    valGroup.append(valLabel, valInput);
    form.appendChild(valGroup);

    formContainer.appendChild(form);

    // Add handler
    document.getElementById("save-item-btn").onclick = async (e) => {
        e.preventDefault();
        const key = document.getElementById("new-key").value.trim();
        const raw = document.getElementById("new-value").value;
        if (!key) {
            console.error("Key cannot be empty.");
            return;
        }
        let val;
        if (raw.toLowerCase() === "true" || raw.toLowerCase() === "false") val = raw.toLowerCase() === "true";
        else if ((raw.startsWith("{") && raw.endsWith("}")) || (raw.startsWith("[") && raw.endsWith("]"))) {
            try {
                val = JSON.parse(raw);
            } catch {
                val = raw;
            }
        } else val = raw;
        const updated = { ...allData[currentFile] };
        updated[key] = val;
        await saveConfig(updated);
    };

    setupModalClose();
    modal.classList.remove("hidden");
}

// Save full config via NUI
async function saveConfig(configData) {
    try {
        const res = await fetch(`https://${GetParentResourceName()}/saveConfig`, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ file: currentFile, data: configData }),
        });
        const result = await res.json();
        if (result === "ok") {
            allData[currentFile] = configData;
            console.log("Saved successfully!");
            closeModal();
            renderData();
        } else throw new Error(result);
    } catch (err) {
        console.error("Save failed.", err);
    }
}

// Modal close handlers
function setupModalClose() {
    document.getElementById("close-modal-btn").onclick = closeModal;
    document.getElementById("cancel-edit-btn").onclick = (e) => {
        e.preventDefault();
        closeModal();
    };
}

function closeModal() {
    document.getElementById("edit-modal").classList.add("hidden");
}

// Search/filter cards
function setupSearch() {
    document.getElementById("search-input").addEventListener("input", (e) => {
        const term = e.target.value.toLowerCase();
        document.querySelectorAll(".data-card").forEach((card) => {
            card.style.display = card.dataset.key.toLowerCase().includes(term) ? "" : "none";
        });
    });
}

// Keyboard shortcuts
function setupKeyboard() {
    window.addEventListener("keydown", (e) => {
        if (e.key === "Escape") closeModal();
    });
}

// Initialize UI
window.addEventListener("DOMContentLoaded", () => {
    document.querySelectorAll(".file-list li").forEach((li) => {
        const file = li.dataset.file;
        li.addEventListener("click", () => selectFile(file, li));
    });
    document.getElementById("add-item-fab").onclick = openNewItemModal;
    setupSearch();
    setupKeyboard();
});

// Listen for NUI messages and auto-select first file
window.addEventListener("message", (event) => {
    if (event.data.action === "populateData") {
        allData = event.data.data;
        if (!currentFile) {
            const firstLi = document.querySelector(".file-list li");
            if (firstLi) firstLi.click();
        }
    }
});