mykanban2/assets/js/view/Dialog.js

import KanbanAPI from "../api/KanbanAPI.js";
import Item from "./Item.js";

export default class Dialog {
    static new_task(status) {
        Dialog.reset();

        const dialog = Dialog.getDialog();

        document.getElementById("task-status").value =
            String(status);

        document.getElementById("save-button").hidden = false;
        document.getElementById("edit-button").hidden = true;
        document.getElementById("delete-button").hidden = true;

        Dialog.display_color();
        Dialog.open(dialog);

        document.getElementById("task-name").focus();
    }

    static modify_task(itemId) {
        const data = KanbanAPI.getItem(itemId);

        if (!data) {
            alert("This task could not be found.");
            return;
        }

        Dialog.reset();

        Dialog.setValue("edit-id", data.id);
        Dialog.setValue("task-assign", data.assign ?? "me");
        Dialog.setValue(
            "task-status",
            data.columnId ?? data.status
        );
        Dialog.setValue("task-name", data.content);
        Dialog.setValue("task-description", data.description);
        Dialog.setValue("task-tags", data.tags);
        Dialog.setValue("task-color", data.color || "yellow");
        Dialog.setValue("task-due", data.due);
        Dialog.setValue("task-start", data.start);
        Dialog.setValue("task-priority", data.priority ?? 0);
        Dialog.setValue("task-complexity", data.complexity ?? 0);
        Dialog.setValue("task-estimate", data.estimate);
        Dialog.setValue("task-time-spent", data.timeSpent);

        document.getElementById("save-button").hidden = true;
        document.getElementById("edit-button").hidden = false;
        document.getElementById("delete-button").hidden = false;

        Dialog.display_color();
        Dialog.open(Dialog.getDialog());
    }

    static async edit_task() {
        const editId = Dialog.getEditId();

        if (editId === null) {
            alert("No task has been selected for editing.");
            return;
        }

        const data = Dialog.readForm();

        try {
            const updatedItem = await KanbanAPI.updateItem(
                editId,
                data
            );

            Dialog.replaceRenderedItem(updatedItem);
            Dialog.close_task();
        } catch (error) {
            console.error(error);
            alert(error.message);
        }
    }

    static async save_task() {
        const data = Dialog.readForm();

        if (data.content === "") {
            alert("Please enter a task name.");
            document.getElementById("task-name").focus();
            return;
        }

        try {
            const newItem = await KanbanAPI.insertItem(data);

            Dialog.appendRenderedItem(newItem);
            Dialog.close_task();
        } catch (error) {
            console.error(error);
            alert(error.message);
        }
    }

    static async delete_task() {
        const editId = Dialog.getEditId();

        if (editId === null) {
            return;
        }

        const confirmed = confirm(
            "Are you sure you want to delete this item?"
        );

        if (!confirmed) {
            return;
        }

        const deleted = await KanbanAPI.deleteItem(editId);

        if (deleted) {
            const itemElement = document.querySelector(
                `.kanban__item[data-id="${editId}"]`
            );

            itemElement?.remove();
        }

        Dialog.close_task();
    }

    static close_task() {
        const dialog = Dialog.getDialog();

        if (dialog.open) {
            dialog.close();
        }

        Dialog.reset();
    }

    static readForm() {
        const columnId = Number(
            document.getElementById("task-status").value
        );

        return {
            columnId,
            status: columnId,
            assign: document.getElementById("task-assign").value,
            content: document
                .getElementById("task-name")
                .value
                .trim(),
            description: document
                .getElementById("task-description")
                .value
                .trim(),
            tags: document
                .getElementById("task-tags")
                .value
                .trim(),
            color: document.getElementById("task-color").value,
            due: document.getElementById("task-due").value,
            start: document.getElementById("task-start").value,
            priority: Number(
                document.getElementById("task-priority").value
            ),
            complexity: Number(
                document.getElementById("task-complexity").value
            ),
            estimate: Dialog.numberOrNull("task-estimate"),
            timeSpent: Dialog.numberOrNull("task-time-spent")
        };
    }

    static appendRenderedItem(data) {
        const column = document.querySelector(
            `.kanban__column[data-id="${data.columnId}"]`
        );

        if (!column) {
            return;
        }

        const item = new Item(data);

        column
            .querySelector(".kanban__column-items")
            .appendChild(item.elements.root);
    }

    static replaceRenderedItem(data) {
        const existingElement = document.querySelector(
            `.kanban__item[data-id="${data.id}"]`
        );

        const targetColumn = document.querySelector(
            `.kanban__column[data-id="${data.columnId}"]`
        );

        if (!targetColumn) {
            return;
        }

        const newItem = new Item(data);

        if (
            existingElement &&
            existingElement.closest(".kanban__column") ===
                targetColumn
        ) {
            existingElement.replaceWith(newItem.elements.root);
            return;
        }

        existingElement?.remove();

        targetColumn
            .querySelector(".kanban__column-items")
            .appendChild(newItem.elements.root);
    }

    static reset() {
        const fields = [
            "task-name",
            "task-description",
            "task-tags",
            "task-due",
            "task-start",
            "task-estimate",
            "task-time-spent"
        ];

        for (const fieldId of fields) {
            document.getElementById(fieldId).value = "";
        }

        Dialog.setValue("edit-id", "NAN");
        Dialog.setValue("task-color", "yellow");
        Dialog.setValue("task-assign", "me");
        Dialog.setValue("task-priority", 0);
        Dialog.setValue("task-complexity", 0);

        Dialog.display_color();
    }

    static display_color() {
        const colorDisplay =
            document.getElementById("color-display");

        const selectedColor =
            document.getElementById("task-color").value;

        colorDisplay.className =
            `color-picker-square color-${selectedColor}`;
    }

    static getEditId() {
        const value = document.getElementById("edit-id").value;

        if (value === "" || value === "NAN") {
            return null;
        }

        const id = Number(value);

        return Number.isInteger(id) ? id : null;
    }

    static getDialog() {
        return document.getElementById("new-task");
    }

    static open(dialog) {
        if (!dialog.open) {
            dialog.showModal();
        }
    }

    static setValue(id, value) {
        document.getElementById(id).value =
            value === undefined || value === null
                ? ""
                : String(value);
    }

    static numberOrNull(id) {
        const value = document.getElementById(id).value;

        return value === "" ? null : Number(value);
    }
}