Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(sacred-valley): drag-to-reorder with server-persisted layout

Browse Source 
Adds HTML5 drag-to-reorder for .sv-card elements in Sacred Valley. The
pure moveId helper is unit-tested. Drop calls PUT /api/dashboard/layout
to persist the new card_order; DOM reflects the new order immediately.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-02 22:39:57 +10:00
parent 01177a2cbd
commit e368ea41d8
4 changed files with 53 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/components/sv_reorder.js Normal file
View File

@@ -0,0 +1,28 @@
export function moveId(order, dragId, beforeId) {
if (dragId === beforeId) return [...order];
const out = order.filter(id => id !== dragId);
if (beforeId == null) { out.push(dragId); return out; }
const i = out.indexOf(beforeId);
if (i < 0) { out.push(dragId); return out; }
out.splice(i, 0, dragId);
return out;
}
// Wires HTML5 drag on .sv-card elements in `grid`. onReorder(newOrderIds) fires
// after a drop. Drag handle = the whole card (cursor:grab on the title via CSS).
export function attachReorder(grid, onReorder) {
let dragId = null;
grid.querySelectorAll('.sv-card').forEach(card => {
card.draggable = true;
card.addEventListener('dragstart', () => { dragId = card.dataset.cardId; card.classList.add('dragging'); });
card.addEventListener('dragend', () => { card.classList.remove('dragging'); dragId = null; });
card.addEventListener('dragover', e => { e.preventDefault(); card.classList.add('drag-over'); });
card.addEventListener('dragleave', () => card.classList.remove('drag-over'));
card.addEventListener('drop', e => {
e.preventDefault(); card.classList.remove('drag-over');
if (!dragId || dragId === card.dataset.cardId) return;
const ids = [...grid.querySelectorAll('.sv-card')].map(c => c.dataset.cardId);
onReorder(moveId(ids, dragId, card.dataset.cardId));
});
});
}