Menu d'actions rapides par carte; barre d'outils tri + regroupement par propriétaire (sections repliables, préférences localStorage); bascule Grille/Liste persistée avec tableaux triables réutilisant jalon/santé des cartes; dashboard.js dédié.
This commit is contained in:
Spark
@@ -1371,3 +1371,75 @@ body.sidebar-collapsed .side-foot { justify-content: center; }
|
||||
.proj-dim { color: var(--text-3); }
|
||||
.proj-empty { color: var(--text-2); font-size: 0.92rem; }
|
||||
.proj-notes-body { white-space: pre-wrap; font-size: 0.93rem; background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
|
||||
|
||||
/* ── Dashboard vague 2 suite (0.18.0, #19 #21 #22 #23) ── */
|
||||
.activity-line { margin-top: 8px; font-size: 0.82rem; color: var(--text-2); }
|
||||
.dash-tools {
|
||||
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
|
||||
padding: 0 24px; margin: 4px 0 14px;
|
||||
}
|
||||
.dash-tool { display: inline-flex; align-items: center; gap: 8px; font-size: 0.88rem; color: var(--text-2); }
|
||||
.dash-tool select {
|
||||
background: var(--surface-2); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px;
|
||||
}
|
||||
.dash-tool-check input { width: 17px; height: 17px; accent-color: #7c5cfc; }
|
||||
.dash-view-toggle { margin-left: auto; display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
|
||||
.dash-view-toggle button {
|
||||
background: var(--surface-1); color: var(--text-2); border: none;
|
||||
padding: 7px 14px; cursor: pointer; font-size: 0.88rem;
|
||||
}
|
||||
.dash-view-toggle button.active { background: var(--surface-3, #1d2942); color: var(--text); font-weight: 700; }
|
||||
.owner-group { grid-column: 1 / -1; }
|
||||
.owner-head {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
width: 100%; padding: 9px 12px; margin-bottom: 10px; cursor: pointer;
|
||||
background: var(--surface-1); color: var(--text);
|
||||
border: 1px solid var(--border); border-radius: 10px;
|
||||
font-size: 0.95rem; font-weight: 700;
|
||||
}
|
||||
.owner-head:hover { border-color: var(--accent, #58a6ff); }
|
||||
.owner-head .owner-chevron { transition: transform 0.2s ease; font-size: 0.7rem; }
|
||||
.owner-head[aria-expanded="false"] .owner-chevron { transform: rotate(-90deg); }
|
||||
.owner-grid { padding: 0 !important; }
|
||||
.card-menu-wrap { position: relative; }
|
||||
.card-menu-btn {
|
||||
background: transparent; border: none; cursor: pointer;
|
||||
color: var(--text-2); font-size: 1.15rem; font-weight: 800;
|
||||
padding: 2px 7px; border-radius: 8px; line-height: 1;
|
||||
}
|
||||
.card-menu-btn:hover { background: var(--surface-2); color: var(--text); }
|
||||
.card-menu {
|
||||
position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
|
||||
min-width: 210px; display: flex; flex-direction: column; gap: 2px;
|
||||
background: var(--surface-1); border: 1px solid var(--border);
|
||||
border-radius: 12px; padding: 6px;
|
||||
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
|
||||
}
|
||||
.card-menu[hidden] { display: none !important; }
|
||||
.card-menu a {
|
||||
display: flex; align-items: center; min-height: 32px;
|
||||
padding: 8px 10px; border-radius: 8px;
|
||||
color: var(--text-2); font-size: 0.92rem;
|
||||
}
|
||||
.card-menu a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
|
||||
.proj-table {
|
||||
width: calc(100% - 48px); margin: 0 24px 18px;
|
||||
border-collapse: collapse; font-size: 0.93rem;
|
||||
background: var(--surface-1); border: 1px solid var(--border);
|
||||
border-radius: 12px; overflow: hidden;
|
||||
}
|
||||
.proj-table th, .proj-table td {
|
||||
text-align: left; padding: 10px 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.proj-table thead th { color: var(--text-2); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
|
||||
.proj-table th.sortable { cursor: pointer; }
|
||||
.proj-table th.sortable:hover { color: var(--text); }
|
||||
.proj-table th[data-dir="asc"]::after { content: " ↑"; }
|
||||
.proj-table th[data-dir="desc"]::after { content: " ↓"; }
|
||||
.proj-table tbody tr:hover { background: var(--surface-2); }
|
||||
@media (max-width: 900px) {
|
||||
.proj-table { display: block; overflow-x: auto; }
|
||||
.dash-view-toggle { margin-left: 0; }
|
||||
}
|
||||
|
||||
@@ -0,0 +1,186 @@
|
||||
/**
|
||||
* Kanbante — dashboard display tools (issues #21, #22, #23).
|
||||
* Sort + group-by-owner for the card grids, sortable dense tables,
|
||||
* and the per-card quick-actions menu. Preferences live in
|
||||
* localStorage; the server markup stays the single source.
|
||||
*/
|
||||
(function () {
|
||||
var LS_SORT = 'kanbante-dash-sort';
|
||||
var LS_GROUP = 'kanbante-dash-group';
|
||||
var LS_OWNERS = 'kanbante-dash-owners-closed';
|
||||
|
||||
function lsGet(key, fallback) {
|
||||
try {
|
||||
var v = localStorage.getItem(key);
|
||||
return v === null ? fallback : v;
|
||||
} catch (e) { return fallback; }
|
||||
}
|
||||
function lsSet(key, value) {
|
||||
try { localStorage.setItem(key, value); } catch (e) { /* non-fatal */ }
|
||||
}
|
||||
|
||||
/* ── Tri des grilles de cartes ─────────────────────────── */
|
||||
var sortSelect = document.getElementById('dash-sort');
|
||||
var grids = ['grid-active', 'grid-inactive', 'grid-archived']
|
||||
.map(function (id) { return document.getElementById(id); })
|
||||
.filter(Boolean);
|
||||
|
||||
function cardKey(card, mode) {
|
||||
if (mode === 'name') return (card.getAttribute('data-name') || '').toLowerCase();
|
||||
if (mode === 'open') return -(parseInt(card.getAttribute('data-open') || '0', 10));
|
||||
if (mode === 'updated') return card.getAttribute('data-updated') || '';
|
||||
if (mode === 'activity') return card.getAttribute('data-activity') || '';
|
||||
return null; // 'default' : ordre serveur, on ne touche à rien
|
||||
}
|
||||
function sortCards(container, mode) {
|
||||
var cards = Array.prototype.slice.call(
|
||||
container.querySelectorAll('.project-card'));
|
||||
if (mode === 'default' || !cards.length) return;
|
||||
cards.sort(function (a, b) {
|
||||
var ka = cardKey(a, mode), kb = cardKey(b, mode);
|
||||
if (ka < kb) return mode === 'name' ? -1 : 1;
|
||||
if (ka > kb) return mode === 'name' ? 1 : -1;
|
||||
return 0;
|
||||
});
|
||||
cards.forEach(function (c) { container.appendChild(c); });
|
||||
}
|
||||
function applySort() {
|
||||
var mode = sortSelect ? sortSelect.value : 'default';
|
||||
lsSet(LS_SORT, mode);
|
||||
grids.forEach(function (grid) {
|
||||
if (groupToggle && groupToggle.checked) {
|
||||
grid.querySelectorAll('.owner-grid').forEach(function (og) {
|
||||
sortCards(og, mode);
|
||||
});
|
||||
} else {
|
||||
sortCards(grid, mode);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/* ── Regroupement par propriétaire ─────────────────────── */
|
||||
var groupToggle = document.getElementById('dash-group');
|
||||
function closedOwners() {
|
||||
try { return JSON.parse(lsGet(LS_OWNERS, '[]')); } catch (e) { return []; }
|
||||
}
|
||||
function setOwnerClosed(owner, closed) {
|
||||
var list = closedOwners().filter(function (o) { return o !== owner; });
|
||||
if (closed) list.push(owner);
|
||||
lsSet(LS_OWNERS, JSON.stringify(list));
|
||||
}
|
||||
function groupGrid(grid) {
|
||||
var cards = Array.prototype.slice.call(
|
||||
grid.querySelectorAll(':scope > .project-card'));
|
||||
if (!cards.length) return;
|
||||
var byOwner = {};
|
||||
cards.forEach(function (c) {
|
||||
var o = c.getAttribute('data-owner') || '—';
|
||||
(byOwner[o] = byOwner[o] || []).push(c);
|
||||
});
|
||||
Object.keys(byOwner).sort().forEach(function (owner) {
|
||||
var wrap = document.createElement('div');
|
||||
wrap.className = 'owner-group';
|
||||
var head = document.createElement('button');
|
||||
head.type = 'button';
|
||||
head.className = 'owner-head';
|
||||
var closed = closedOwners().indexOf(owner) >= 0;
|
||||
head.setAttribute('aria-expanded', closed ? 'false' : 'true');
|
||||
head.innerHTML = '<span>🗂️ ' + owner + ' (' + byOwner[owner].length + ')</span><span class="owner-chevron">▾</span>';
|
||||
var body = document.createElement('div');
|
||||
body.className = 'project-grid owner-grid';
|
||||
if (closed) body.hidden = true;
|
||||
head.addEventListener('click', function () {
|
||||
body.hidden = !body.hidden;
|
||||
head.setAttribute('aria-expanded', body.hidden ? 'false' : 'true');
|
||||
setOwnerClosed(owner, body.hidden);
|
||||
});
|
||||
byOwner[owner].forEach(function (c) { body.appendChild(c); });
|
||||
wrap.appendChild(head);
|
||||
wrap.appendChild(body);
|
||||
grid.appendChild(wrap);
|
||||
});
|
||||
}
|
||||
function ungroupGrid(grid) {
|
||||
grid.querySelectorAll('.owner-group').forEach(function (wrap) {
|
||||
var body = wrap.querySelector('.owner-grid');
|
||||
Array.prototype.slice.call(body.querySelectorAll('.project-card'))
|
||||
.forEach(function (c) { grid.appendChild(c); });
|
||||
wrap.remove();
|
||||
});
|
||||
}
|
||||
function applyGrouping() {
|
||||
var on = !!(groupToggle && groupToggle.checked);
|
||||
lsSet(LS_GROUP, on ? '1' : '0');
|
||||
grids.forEach(function (grid) {
|
||||
ungroupGrid(grid);
|
||||
if (on) groupGrid(grid);
|
||||
});
|
||||
applySort();
|
||||
}
|
||||
|
||||
if (sortSelect) {
|
||||
sortSelect.value = lsGet(LS_SORT, 'default');
|
||||
sortSelect.addEventListener('change', applySort);
|
||||
}
|
||||
if (groupToggle) {
|
||||
groupToggle.checked = lsGet(LS_GROUP, '0') === '1';
|
||||
groupToggle.addEventListener('change', applyGrouping);
|
||||
}
|
||||
applyGrouping(); // applique regroupement + tri mémorisés
|
||||
|
||||
/* ── Menu ⋯ d'actions rapides (#23) ────────────────────── */
|
||||
function closeMenus() {
|
||||
document.querySelectorAll('.card-menu').forEach(function (m) {
|
||||
m.hidden = true;
|
||||
});
|
||||
document.querySelectorAll('[data-menu-btn]').forEach(function (b) {
|
||||
b.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
}
|
||||
document.querySelectorAll('[data-menu-btn]').forEach(function (btn) {
|
||||
btn.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
var menu = btn.parentElement.querySelector('.card-menu');
|
||||
var willOpen = menu.hidden;
|
||||
closeMenus();
|
||||
if (willOpen) {
|
||||
menu.hidden = false;
|
||||
btn.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
document.addEventListener('click', closeMenus);
|
||||
document.addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Escape') closeMenus();
|
||||
});
|
||||
|
||||
/* ── Tri des tableaux denses (#22) ─────────────────────── */
|
||||
document.querySelectorAll('.proj-table').forEach(function (table) {
|
||||
var tbody = table.querySelector('tbody');
|
||||
table.querySelectorAll('th[data-sort]').forEach(function (th) {
|
||||
th.classList.add('sortable');
|
||||
th.addEventListener('click', function () {
|
||||
var key = th.getAttribute('data-sort');
|
||||
var dir = th.getAttribute('data-dir') === 'asc' ? 'desc' : 'asc';
|
||||
table.querySelectorAll('th').forEach(function (h) {
|
||||
h.removeAttribute('data-dir');
|
||||
});
|
||||
th.setAttribute('data-dir', dir);
|
||||
var rows = Array.prototype.slice.call(tbody.querySelectorAll('tr'));
|
||||
rows.sort(function (a, b) {
|
||||
var va = a.getAttribute('data-' + key) || '';
|
||||
var vb = b.getAttribute('data-' + key) || '';
|
||||
var na = parseFloat(va), nb = parseFloat(vb);
|
||||
var cmp;
|
||||
if (!isNaN(na) && !isNaN(nb) && va !== '' && vb !== '') {
|
||||
cmp = na - nb;
|
||||
} else {
|
||||
cmp = va < vb ? -1 : (va > vb ? 1 : 0);
|
||||
}
|
||||
return dir === 'asc' ? cmp : -cmp;
|
||||
});
|
||||
rows.forEach(function (r) { tbody.appendChild(r); });
|
||||
});
|
||||
});
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user