delete list
This commit is contained in:
+68
-19
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user