kanbante/static/js/board.js

/**
 * Kanbante — Kanban board: drag & drop with persisted order,
 * filters, and issue creation.
 *
 * Failure contract: if the server rejects a move (HTTP error, network
 * error, or ok:false), the card is put back where it came from and an
 * error (red) toast is shown — the UI never claims a move that the
 * backend did not record.
 */
document.addEventListener('DOMContentLoaded', () => {
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
    const repoFullName = document.querySelector('.kanban-card')?.dataset.repo
        || document.querySelector('footer span')?.textContent || '';

    function orderOf(columnEl) {
        return Array.from(columnEl.querySelectorAll('.kanban-card'))
            .map(card => card.dataset.issue).join(',');
    }

    function revert(evt) {
        const from = evt.from;
        const ref = from.children[evt.oldIndex] || null;
        from.insertBefore(evt.item, ref);
        updateCounts();
    }

    document.querySelectorAll('.column-cards').forEach(col => {
        new Sortable(col, {
            group: 'kanban',
            animation: 200,
            ghostClass: 'dragging',
            dragClass: 'dragging',
            onEnd: function (evt) {
                if (evt.from === evt.to && evt.oldIndex === evt.newIndex) return;
                const card = evt.item;
                const formData = new FormData();
                formData.append('repo_full_name', card.dataset.repo);
                formData.append('issue_number', card.dataset.issue);
                formData.append('to_column', evt.to.dataset.column);
                formData.append('from_column', evt.from.dataset.column);
                formData.append('to_order', orderOf(evt.to));
                formData.append('from_order', orderOf(evt.from));
                formData.append('csrf_token', csrfToken);

                fetch('/api/move', { method: 'POST', body: formData })
                    .then(async r => {
                        const data = await r.json().catch(() => ({}));
                        if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
                        return data;
                    })
                    .then(data => {
                        updateCounts();
                        let msg = '✅ Déplacé vers ' + evt.to.dataset.column.replace('_', ' ');
                        if (data.gitea_sync === 'closed') msg += ' · issue fermée dans Gitea';
                        if (data.gitea_sync === 'reopened') msg += ' · issue rouverte dans Gitea';
                        if (data.gitea_sync === 'failed') {
                            showToast('⚠️ Déplacé localement, mais la synchro Gitea a échoué', true);
                            return;
                        }
                        showToast(msg);
                    })
                    .catch(err => {
                        console.error('Move failed:', err);
                        revert(evt);
                        showToast('❌ Échec du déplacement — carte replacée', true);
                    });
            }
        });
    });

    // ── Filters (text + label), client-side ────────────────
    const textFilter = document.getElementById('card-filter');
    const labelFilter = document.getElementById('label-filter');
    function applyFilters() {
        const q = (textFilter?.value || '').toLowerCase();
        const label = (labelFilter?.value || '').toLowerCase();
        document.querySelectorAll('.kanban-card').forEach(card => {
            const matchesText = !q || (card.dataset.title || '').includes(q);
            const matchesLabel = !label || (card.dataset.labels || '').split(',').includes(label);
            card.style.display = (matchesText && matchesLabel) ? '' : 'none';
        });
        updateCounts();
    }
    textFilter?.addEventListener('input', applyFilters);
    labelFilter?.addEventListener('change', applyFilters);

    // ── Create issue (goes to Gitea, card lands in Backlog) ─
    const createForm = document.getElementById('create-issue-form');
    createForm?.addEventListener('submit', async (e) => {
        e.preventDefault();
        const titleInput = document.getElementById('new-issue-title');
        const title = titleInput.value.trim();
        if (!title || !repoFullName) return;
        const formData = new FormData();
        formData.append('repo_full_name', repoFullName);
        formData.append('title', title);
        formData.append('column', 'backlog');
        formData.append('csrf_token', csrfToken);
        try {
            const r = await fetch('/api/issues', { method: 'POST', body: formData });
            const data = await r.json().catch(() => ({}));
            if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
            showToast('✅ Issue #' + data.issue.number + ' créée');
            setTimeout(() => location.reload(), 600);
        } catch (err) {
            console.error('Create failed:', err);
            showToast('❌ Échec de la création : ' + err.message, true);
        }
    });

    function updateCounts() {
        document.querySelectorAll('.kanban-column').forEach(col => {
            const count = col.querySelectorAll('.kanban-card').length;
            const badge = col.querySelector('.column-count');
            if (badge) badge.textContent = count;
        });
    }

    function showToast(msg, isError = false) {
        const toast = document.createElement('div');
        toast.className = 'toast' + (isError ? ' error' : '');
        toast.textContent = msg;
        document.body.appendChild(toast);
        setTimeout(() => toast.remove(), 3000);
    }
});