DataDash/src/main/resources/static/add.js

import Dataset from "./dataset.js";

const form = document.forms[0];
const {
    title: titleEntry,
    author: authorEntry,
    ["is-dataset"]: isDatasetSwitch,
    ["short-description"]: shortDescriptionEntry,
    url: urlEntry,
    ["terms-of-use"]: termsOfUseEntry,
    license: licenseEntry,
    category: categorySpinner,
    ["new-category"]: newCategoryEntry,
    ["change-category-btn"]: changeCategoryBtn,
    ["full-description"]: fullDescriptionEntry,
    ["btn-add"]: addBtn,
    ["btn-cancel"]: cancelBtn,
} = form.elements;
const newCategoryGroup = document.getElementById("new-category-group");

const validationListener = () => {
    addBtn.disabled = !form.checkValidity();
};

// Register validationListener on all required inputs that must be valid
[
    titleEntry,
    authorEntry,
    shortDescriptionEntry,
    urlEntry,
    termsOfUseEntry,
    licenseEntry,
    newCategoryEntry,
    fullDescriptionEntry,
].forEach(input => input.addEventListener("input", validationListener));

// Category spinner
const categorySpinnerSet = (...args) => {
    if (args.length > 0) {
        categorySpinner.value = args[0];
    }

    categorySpinner.setAttribute("value", categorySpinner.value);

    if (categorySpinner.value == "new") {
        newCategoryGroup.classList.remove("hidden");
        newCategoryEntry.disabled = false;
        newCategoryEntry.focus();
    } else {
        newCategoryGroup.classList.add("hidden");
        newCategoryEntry.disabled = true;
    }
};

const getCategory = () => {
    return categorySpinner.value == "new"
        ? newCategoryEntry.value
        : categorySpinner.value;
}

categorySpinner.addEventListener("input", e => {
    categorySpinnerSet();
    validationListener();
});

changeCategoryBtn.addEventListener("click", e => {
    e.preventDefault();
    categorySpinnerSet("");
    validationListener();
});

let categoriesResponse = await fetch(`${location.origin}/api/v1/categories`);
let categories = [];
if (!categoriesResponse.ok) {
    console.warn("Could not load categories!");
} else {
    categories = await categoriesResponse.json();
    for (const category of categories) {
        let option = document.createElement("option");
        option.value = category.id;
        option.text = category.name;
        categorySpinner.add(option);
    }
}

// Form listeners
cancelBtn.addEventListener("click", () => {
    window.location.href = location.origin;
})

form.addEventListener("submit", async e => {
    e.preventDefault();
    if (!form.reportValidity()) {
        addBtn.disabled = true;
        return;
    }

    let categoryID = categorySpinner.value;

    if (categoryID == "new") {
        const newCategoryName = newCategoryEntry.value.trim();

        if (!categories.map(c => c.name).includes(newCategoryName)) {
            // Try to add the new category
            const newCategoryResponse = await fetch(`/api/v1/categories`, {
                method: "POST",
                headers: { "Content-Type": "application/json;charset=utf-8" },
                body: JSON.stringify({ name: newCategoryName }),
            });

            if (!newCategoryResponse.ok) {
                newCategoryEntry.setCustomValidity(
                    `Could not create new category: ${newCategoryResponse.statusText}`
                );
                form.reportValidity();
                return;
            }

            const newCategory = await newCategoryResponse.json();
            categoryID = newCategory.id;
        }
    }

    // Create the request body
    const newContent = {
        title: titleEntry.value,
        author: authorEntry.value,
        type: isDatasetSwitch.checked ? "API" : "DATASET",
        abst: shortDescriptionEntry.value,
        url: urlEntry.value,
        termsOfUse: termsOfUseEntry.value,
        licence: licenseEntry.value,
        categorie: {
            id: categoryID,
        },
        description: fullDescriptionEntry.value,
    };

    // Don't allow several requests to be sent at the same time
    addBtn.disabled = true;

    let response = await fetch("/api/v1/datasets", {
        method: "POST",
        headers: { "Content-Type": "application/json;charset=utf-8" },
        body: JSON.stringify(newContent),
    });
    let data = await response.json();

    let dataset = new Dataset(data);
    dataset.storageSetKey("created-locally", true);

    if (response.ok) {
        location.assign("/");
    } else {
        addBtn.disabled = !form.checkValidity();
    }
});