mykanban2/assets/js/view/Column.js

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

export default class Column {
    constructor(id, title) {
        this.id = Number(id);
        this.collapsed = false;

        this.elements = {};
        this.elements.root = Column.createRoot();
        this.elements.title =
            this.elements.root.querySelector(
                ".kanban__column-title"
            );
        this.elements.items =
            this.elements.root.querySelector(
                ".kanban__column-items"
            );
        this.elements.addItem =
            this.elements.root.querySelector(
                ".kanban__add-item"
            );
        this.elements.hideItem =
            this.elements.root.querySelector(
                ".kanban__hide-item"
            );

        this.elements.root.dataset.id = String(this.id);
        this.elements.title.textContent = title;

        this.elements.items.appendChild(
            DropZone.createDropZone()
        );

        this.elements.addItem.addEventListener("click", () => {
            Dialog.new_task(this.id);
        });

        this.elements.hideItem.addEventListener("click", () => {
            this.collapsed = !this.collapsed;
            this.elements.items.hidden = this.collapsed;

            this.elements.hideItem.setAttribute(
                "aria-expanded",
                String(!this.collapsed)
            );
        });

        KanbanAPI.getItems(this.id).forEach(item => {
            this.renderItem(item);
        });
    }

    renderItem(data) {
        const item = new Item(data);
        this.elements.items.appendChild(item.elements.root);
    }

    static createRoot() {
        const template = document.createElement("template");

        template.innerHTML = `
            <div class="kanban__column">
                <button
                    class="kanban__add-item"
                    type="button"
                    title="Add task"
                    aria-label="Add task"
                >
                    <i aria-hidden="true" style="color: blue">&#10010;</i>
                </button>

                <span class="kanban__column-title"></span>

                <button
                    class="kanban__hide-item"
                    type="button"
                    title="Show or hide column"
                    aria-label="Show or hide column"
                    aria-expanded="true"
                >
                    <i aria-hidden="true" style="color: black;">&#10008;</i>
                </button>

                <div class="kanban__column-items"></div>
            </div>
        `;

        return template.content.firstElementChild;
    }
}