feat(0.31.0): description éditable, pièces jointes d'issues, clic carte fiable
CI / test (push) Successful in 2m10s
CI / test (push) Successful in 2m10s
- Tiroir : édition du titre et de la description (PATCH forge, journal 'edited', EVENT_TYPES étendu), création avec description dépliable. - Pièces jointes Gitea de bout en bout : client list/upload/delete/download (le téléchargement suit browser_download_url — l'endpoint asset ne sert que du JSON, attrapé au smoke réel), routes proxifiées avec CSRF et plafond 25 Mio, UI liste/envoi/suppression ; GitHub : supports_attachments=False, message propre. - Clic carte en délégation d'événement : les écouteurs par carte mouraient au premier rafraîchissement live. - 261 tests verts (7 nouveaux, palier 21) ; cycle réel complet validé sur une issue jetable du vrai Gitea (création, édition, envoi, téléchargement, suppression).
This commit is contained in:
Spark
@@ -1683,3 +1683,14 @@ body.sidebar-collapsed .ws-switch { display: none; }
|
||||
.conn-badge { font-size: 0.78em; padding: 1px 7px; border-radius: 999px;
|
||||
border: 1px solid var(--border, #333); white-space: nowrap; }
|
||||
.seg-link { align-self: center; margin-left: 8px; font-size: 0.85em; text-decoration: none; }
|
||||
|
||||
/* ── Tiroir de détail : édition et pièces jointes (0.31.0) ── */
|
||||
.kanban-card { cursor: pointer; }
|
||||
.detail-actions { margin: 10px 0; }
|
||||
#detail-edit-form input[type="text"] { width: 100%; margin-bottom: 8px; }
|
||||
#detail-edit-form textarea { width: 100%; }
|
||||
.asset-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border, #333); }
|
||||
.asset-row a { text-decoration: none; font-weight: 600; }
|
||||
.asset-meta { color: var(--muted, #999); font-size: 0.85em; margin-right: auto; }
|
||||
.asset-form { display: flex; gap: 8px; align-items: center; margin: 8px 0 4px; flex-wrap: wrap; }
|
||||
#create-issue-form textarea { flex-basis: 100%; margin-top: 6px; }
|
||||
|
||||
+151
-6
@@ -104,6 +104,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const formData = new FormData();
|
||||
formData.append('repo_full_name', repoFullName);
|
||||
formData.append('title', title);
|
||||
const bodyInput = document.getElementById('new-issue-body');
|
||||
if (bodyInput && bodyInput.value.trim()) {
|
||||
formData.append('body', bodyInput.value.trim());
|
||||
}
|
||||
formData.append('column', 'backlog');
|
||||
formData.append('csrf_token', csrfToken);
|
||||
try {
|
||||
@@ -118,6 +122,11 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('new-issue-desc-toggle')?.addEventListener('click', () => {
|
||||
const area = document.getElementById('new-issue-body');
|
||||
if (area) { area.hidden = !area.hidden; if (!area.hidden) area.focus(); }
|
||||
});
|
||||
|
||||
// The "Glissez une carte ici" hint is rendered by the server only
|
||||
// for columns empty at page load. After a drag, the DOM is the
|
||||
// truth: remove the hint from columns that hold cards, restore it
|
||||
@@ -323,14 +332,17 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// ── Card detail drawer ─────────────────────────────────
|
||||
// A click opens the panel; a drag must not. Track pointer travel.
|
||||
// DELEGATED on purpose (0.31.0): the live board swaps card
|
||||
// fragments in place — listeners attached per card died at the
|
||||
// first refresh, which made cards "hard to click". One listener
|
||||
// on the document keeps working whatever the DOM becomes.
|
||||
let downX = 0, downY = 0;
|
||||
document.addEventListener('pointerdown', (e) => { downX = e.clientX; downY = e.clientY; });
|
||||
document.querySelectorAll('.kanban-card').forEach(card => {
|
||||
card.addEventListener('click', (e) => {
|
||||
if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6) return;
|
||||
if (e.target.closest('a')) return;
|
||||
openDetail(card.dataset.repo, card.dataset.issue);
|
||||
});
|
||||
document.addEventListener('click', (e) => {
|
||||
if (Math.hypot(e.clientX - downX, e.clientY - downY) > 6) return;
|
||||
if (e.target.closest('a') || e.target.closest('button')) return;
|
||||
const card = e.target.closest('.kanban-card');
|
||||
if (card) openDetail(card.dataset.repo, card.dataset.issue);
|
||||
});
|
||||
|
||||
const drawer = document.getElementById('card-detail');
|
||||
@@ -355,6 +367,9 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
overlay?.addEventListener('click', closeDetail);
|
||||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeDetail(); });
|
||||
|
||||
let currentComments = [];
|
||||
let currentIssueData = null;
|
||||
|
||||
async function openDetail(repoFull, number) {
|
||||
const [owner, repo] = repoFull.split('/', 2);
|
||||
currentIssue = { repo: repoFull, number };
|
||||
@@ -368,6 +383,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const r = await fetch(`/api/issues/${owner}/${repo}/${number}`);
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||||
currentComments = data.comments || [];
|
||||
currentIssueData = data.issue;
|
||||
fillDetail(data.issue, data.comments);
|
||||
loadCodeLinks(repoFull, number);
|
||||
} catch (err) {
|
||||
@@ -432,6 +449,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function fillDetail(issue, comments) {
|
||||
currentIssueData = issue;
|
||||
document.getElementById('detail-title').textContent = issue.title;
|
||||
const stateChip = document.getElementById('detail-state');
|
||||
stateChip.textContent = issue.state === 'closed' ? '✅ Fermée' : '🟢 Ouverte';
|
||||
@@ -457,6 +475,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
renderLabelToggles(issue);
|
||||
document.getElementById('detail-body').innerHTML =
|
||||
issue.body ? renderMarkdown(issue.body) : '<p class="detail-empty">Aucune description.</p>';
|
||||
renderAssets(issue);
|
||||
setEditMode(false);
|
||||
document.getElementById('detail-gitea-link').href = issue.html_url || '#';
|
||||
const box = document.getElementById('detail-comments');
|
||||
box.innerHTML = '';
|
||||
@@ -520,6 +540,131 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
function setEditMode(on) {
|
||||
const form = document.getElementById('detail-edit-form');
|
||||
const btn = document.getElementById('detail-edit-btn');
|
||||
const title = document.getElementById('detail-title');
|
||||
const body = document.getElementById('detail-body');
|
||||
if (!form || !btn) return;
|
||||
form.hidden = !on;
|
||||
btn.hidden = on;
|
||||
if (title) title.hidden = on;
|
||||
if (body) body.hidden = on;
|
||||
if (on && currentIssueData) {
|
||||
document.getElementById('detail-title-input').value = currentIssueData.title || '';
|
||||
document.getElementById('detail-body-input').value = currentIssueData.body || '';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('detail-edit-btn')?.addEventListener('click', () => setEditMode(true));
|
||||
document.getElementById('detail-edit-cancel')?.addEventListener('click', () => setEditMode(false));
|
||||
document.getElementById('detail-edit-form')?.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (!currentIssue) return;
|
||||
const title = document.getElementById('detail-title-input').value.trim();
|
||||
const body = document.getElementById('detail-body-input').value;
|
||||
if (!title) { showToast('❌ Le titre ne peut pas être vide', true); return; }
|
||||
const [owner, repo] = currentIssue.repo.split('/', 2);
|
||||
const fd = new FormData();
|
||||
fd.append('title', title);
|
||||
fd.append('body', body);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
try {
|
||||
const r = await fetch(`/api/issues/${owner}/${repo}/${currentIssue.number}/update`,
|
||||
{ method: 'POST', body: fd });
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||||
fillDetail(data.issue, currentComments);
|
||||
const card = document.querySelector(`.kanban-card[data-issue="${currentIssue.number}"]`);
|
||||
if (card) {
|
||||
const t = card.querySelector('.card-title');
|
||||
if (t) t.textContent = data.issue.title;
|
||||
card.dataset.title = (data.issue.title || '').toLowerCase();
|
||||
}
|
||||
showToast('✅ Issue mise à jour');
|
||||
} catch (err) { showToast('❌ ' + err.message, true); }
|
||||
});
|
||||
|
||||
function humanSize(bytes) {
|
||||
if (!bytes) return '0 o';
|
||||
const units = ['o', 'Kio', 'Mio', 'Gio'];
|
||||
let i = 0, v = bytes;
|
||||
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
|
||||
return v.toFixed(v >= 10 || i === 0 ? 0 : 1) + ' ' + units[i];
|
||||
}
|
||||
|
||||
function renderAssets(issue) {
|
||||
const box = document.getElementById('detail-assets');
|
||||
const form = document.getElementById('asset-form');
|
||||
if (!box) return;
|
||||
box.innerHTML = '';
|
||||
if (!issue.attachments_supported) {
|
||||
box.innerHTML = '<p class="detail-empty">Non pris en charge par l\'API de cette forge — joignez les fichiers depuis son interface web.</p>';
|
||||
if (form) form.hidden = true;
|
||||
return;
|
||||
}
|
||||
if (form) form.hidden = false;
|
||||
const assets = issue.assets || [];
|
||||
if (!assets.length) {
|
||||
box.innerHTML = '<p class="detail-empty">Aucune pièce jointe.</p>';
|
||||
return;
|
||||
}
|
||||
const [owner, repo] = (currentIssue?.repo || '/').split('/', 2);
|
||||
assets.forEach(a => {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'asset-row';
|
||||
const link = document.createElement('a');
|
||||
link.href = `/api/issues/${owner}/${repo}/${currentIssue.number}/assets/${a.id}/download`;
|
||||
link.textContent = '📎 ' + a.name;
|
||||
link.title = 'Télécharger';
|
||||
row.appendChild(link);
|
||||
const meta = document.createElement('span');
|
||||
meta.className = 'asset-meta';
|
||||
meta.textContent = humanSize(a.size) + (a.created_at ? ' · ' + String(a.created_at).slice(0, 10) : '');
|
||||
row.appendChild(meta);
|
||||
const del = document.createElement('button');
|
||||
del.type = 'button';
|
||||
del.className = 'btn-mini btn-danger';
|
||||
del.textContent = 'Supprimer';
|
||||
del.addEventListener('click', async () => {
|
||||
if (!confirm('Supprimer la pièce jointe « ' + a.name + ' » ?')) return;
|
||||
const fd = new FormData();
|
||||
fd.append('csrf_token', csrfToken);
|
||||
try {
|
||||
const r = await fetch(`/api/issues/${owner}/${repo}/${currentIssue.number}/assets/${a.id}/delete`,
|
||||
{ method: 'POST', body: fd });
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||||
showToast('✅ Pièce jointe supprimée');
|
||||
openDetail(currentIssue.repo, currentIssue.number);
|
||||
} catch (err) { showToast('❌ ' + err.message, true); }
|
||||
});
|
||||
row.appendChild(del);
|
||||
box.appendChild(row);
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById('asset-form')?.addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
if (!currentIssue) return;
|
||||
const input = document.getElementById('asset-file');
|
||||
const file = input?.files?.[0];
|
||||
if (!file) { showToast('❌ Choisis un fichier d\'abord', true); return; }
|
||||
const [owner, repo] = currentIssue.repo.split('/', 2);
|
||||
const fd = new FormData();
|
||||
fd.append('attachment', file);
|
||||
fd.append('csrf_token', csrfToken);
|
||||
try {
|
||||
const r = await fetch(`/api/issues/${owner}/${repo}/${currentIssue.number}/assets`,
|
||||
{ method: 'POST', body: fd });
|
||||
const data = await r.json().catch(() => ({}));
|
||||
if (!r.ok || !data.ok) throw new Error(data.error || ('HTTP ' + r.status));
|
||||
input.value = '';
|
||||
showToast('✅ Fichier joint : ' + data.asset.name);
|
||||
openDetail(currentIssue.repo, currentIssue.number);
|
||||
} catch (err) { showToast('❌ ' + err.message, true); }
|
||||
});
|
||||
|
||||
function commentNode(c) {
|
||||
const div = document.createElement('div');
|
||||
div.className = 'comment';
|
||||
|
||||
Reference in New Issue
Block a user