feat(frontend): filtres, création d'issues, vue Focus, CDN vendorés
- vendor: HTMX/Alpine/SortableJS servis depuis /static/vendor (M3) - board.js: jeton CSRF, ordres source/destination envoyés, carte replacée + toast rouge en cas d'échec (M8), filtres texte/étiquette, formulaire de création d'issue - dashboard: 3 onglets Actifs/Inactifs/Archivés, recherche via data-search échappé au lieu d'une interpolation JS (M9) - board: cartes liées vers l'issue Gitea, méta CSRF, notes protégées - nouvelles pages focus.html et error.html - CSS: fond des badges en color-mix, l'ancien var(--accent)20 était invalide (M1); styles toolbar/focus/erreur/toast erreur
This commit is contained in:
Spark
+97
-30
@@ -1,59 +1,126 @@
|
||||
/**
|
||||
* Kanbante — Kanban board drag & drop
|
||||
* 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 columns = document.querySelectorAll('.column-cards');
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
|
||||
const repoFullName = document.querySelector('.kanban-card')?.dataset.repo
|
||||
|| document.querySelector('footer span')?.textContent || '';
|
||||
|
||||
columns.forEach(col => {
|
||||
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) {
|
||||
onEnd: function (evt) {
|
||||
if (evt.from === evt.to && evt.oldIndex === evt.newIndex) return;
|
||||
const card = evt.item;
|
||||
const toColumn = evt.to.dataset.column;
|
||||
const issueNumber = card.dataset.issue;
|
||||
const repoFullName = card.dataset.repo;
|
||||
|
||||
// Update column count
|
||||
updateCounts();
|
||||
|
||||
// Save to backend
|
||||
const formData = new FormData();
|
||||
formData.append('repo_full_name', repoFullName);
|
||||
formData.append('issue_number', issueNumber);
|
||||
formData.append('to_column', toColumn);
|
||||
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(r => r.json()).then(data => {
|
||||
if (data.ok) {
|
||||
showToast('✅ Déplacé vers ' + toColumn.replace('_', ' '));
|
||||
}
|
||||
}).catch(err => {
|
||||
console.error('Move failed:', err);
|
||||
showToast('❌ Erreur de déplacement');
|
||||
});
|
||||
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 colName = col.querySelector('.column-cards').dataset.column;
|
||||
const count = col.querySelectorAll('.kanban-card').length;
|
||||
const badge = col.querySelector('.column-count');
|
||||
if (badge) badge.textContent = count;
|
||||
});
|
||||
}
|
||||
|
||||
function showToast(msg) {
|
||||
function showToast(msg, isError = false) {
|
||||
const toast = document.createElement('div');
|
||||
toast.className = 'toast';
|
||||
toast.className = 'toast' + (isError ? ' error' : '');
|
||||
toast.textContent = msg;
|
||||
document.body.appendChild(toast);
|
||||
setTimeout(() => toast.remove(), 2500);
|
||||
setTimeout(() => toast.remove(), 3000);
|
||||
}
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user