delete list

This commit is contained in:
2026-08-29 16:54:25 +02:00
parent d3bc028fce
commit 2912f7c455
8 changed files with 105 additions and 21 deletions
+68 -19
View File
@@ -4,27 +4,45 @@
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-body">
<% if (lists.length === 0) { %>
<p class="text-secondary">Je hebt nog geen boodschappenlijsten.</p>
<% } else { %>
<div class="list-group">
<% lists.forEach(list => { %>
<a href="/lists/<%= list.id %>" class="list-group-item list-group-item-action">
<div class="d-flex justify-content-between">
<strong><%= list.name %></strong>
<span><%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan</span>
</div>
<small class="text-muted">
Aangemaakt <%= new Date(list.created_at).toLocaleDateString("nl-NL") %>
</small>
</a>
<% }); %>
<div class="card">
<div class="card-body">
<% if (lists.length === 0) { %>
<p class="text-secondary">Je hebt nog geen boodschappenlijsten.</p>
<% } else { %>
<div class="list-group">
<% lists.forEach(list => { %>
<div class="list-group-item d-flex justify-content-between align-items-center">
<!-- Link + info -->
<a href="/lists/<%= list.id %>" class="flex-grow-1 text-decoration-none">
<div class="d-flex justify-content-between">
<strong><%= list.name %></strong>
<span><%= list.checked_count || 0 %>/<%= list.item_count || 0 %> gedaan</span>
</div>
<small class="text-muted">
Aangemaakt <%= new Date(list.created_at).toLocaleDateString("nl-NL") %>
</small>
</a>
<!-- Delete button -->
<button class="btn btn-sm btn-danger ms-3 delete-list-button"
type="button"
data-list-id="<%= list.id %>"
aria-label="Lijst <%= list.name %> verwijderen">
🗑️
</button>
</div>
<% } %>
<% }); %>
</div>
</div>
<% } %>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
@@ -40,3 +58,34 @@
</div>
</div>
</div>
<script>
document.querySelectorAll(".delete-list-button").forEach((button) => {
button.addEventListener("click", async () => {
const listId = button.dataset.listId;
const listName = button.closest(".list-group-item")?.querySelector("strong")?.textContent?.trim() || "deze lijst";
if (!confirm(`"${listName}" verwijderen?`)) return;
const response = await fetch(`/lists/${listId}`, {
method: "DELETE",
headers: { Accept: "application/json" }
});
if (response.ok) {
window.location.reload();
return;
}
let message = "Lijst kon niet worden verwijderd.";
try {
const data = await response.json();
if (data.error) message = data.error;
} catch (_) {
// ignore json parse errors
}
alert(message);
});
});
</script>