/** * 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); } });