victor/claims-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch edit overlay to modal dialog

Browse Source
This commit is contained in:
Victor Andersson
2025-11-09 21:53:22 +01:00
parent caf3df24cf
commit 78377a7ae9
1 changed files with 28 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
claims/templates/claims/dashboard.html
View File

@@ -302,17 +302,17 @@
</div> </div>
{% endif %} {% endif %}
{% if can_change %} {% if can_change %}
<div class="fixed inset-0 z-40 hidden items-center justify-center bg-black/60 p-4" data-edit-panel="{{ claim.id }}"> <dialog class="w-full max-w-2xl rounded-3xl border-0 bg-white p-6 text-left shadow-2xl"
<div class="w-full max-w-2xl rounded-3xl bg-white p-6 text-left shadow-2xl"> data-edit-dialog="{{ claim.id }}">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div> <div>
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera utlägg" %}</p> <p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera utlägg" %}</p>
<h3 class="text-xl font-semibold text-gray-900">{{ claim.full_name }}</h3> <h3 class="text-xl font-semibold text-gray-900">{{ claim.full_name }}</h3>
</div>
<button type="button" data-close-edit class="rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 transition hover:bg-gray-200">
{% trans "Stäng" %}
</button>
</div> </div>
<button type="button" data-close-edit class="rounded-full bg-gray-100 px-3 py-1 text-xs font-semibold text-gray-600 transition hover:bg-gray-200">
{% trans "Stäng" %}
</button>
</div>
<form method="post" class="mt-4 space-y-4"> <form method="post" class="mt-4 space-y-4">
{% csrf_token %} {% csrf_token %}
<input type="hidden" name="action_type" value="edit"> <input type="hidden" name="action_type" value="edit">
@@ -370,8 +370,7 @@
{% trans "Aktivera JavaScript för att kunna redigera uppgifter direkt här." %} {% trans "Aktivera JavaScript för att kunna redigera uppgifter direkt här." %}
</p> </p>
</noscript> </noscript>
</div> </dialog>
</div>
{% endif %} {% endif %}
</div> </div>
@@ -426,39 +425,31 @@
</aside> </aside>
</div> </div>
</section> </section>
<style>
dialog[data-edit-dialog]::backdrop {
background-color: rgba(15, 23, 42, 0.75);
}
</style>
<script> <script>
document.addEventListener("DOMContentLoaded", () => { document.addEventListener("DOMContentLoaded", () => {
const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]")); const filterButtons = Array.from(document.querySelectorAll("[data-filter-button]"));
const cards = Array.from(document.querySelectorAll("[data-claim-card]")); const cards = Array.from(document.querySelectorAll("[data-claim-card]"));
const emptyState = document.querySelector("[data-claim-empty]"); const emptyState = document.querySelector("[data-claim-empty]");
const editButtons = Array.from(document.querySelectorAll("[data-open-edit]")); const editButtons = Array.from(document.querySelectorAll("[data-open-edit]"));
const panels = Array.from(document.querySelectorAll("[data-edit-panel]")); const dialogs = Array.from(document.querySelectorAll("[data-edit-dialog]"));
if (!filterButtons.length || !cards.length) { editButtons.forEach((button) => {
// still set up edit panels if filters missing button.addEventListener("click", () => {
} const dialog = document.querySelector(`[data-edit-dialog="${button.dataset.openEdit}"]`);
if (editButtons.length) { if (dialog && typeof dialog.showModal === "function") {
editButtons.forEach((button) => { dialog.showModal();
button.addEventListener("click", () => { } else if (dialog) {
const target = document.querySelector(`[data-edit-panel="${button.dataset.openEdit}"]`); dialog.setAttribute("open", "open");
if (target) {
target.classList.remove("hidden");
target.classList.add("flex");
}
});
});
}
panels.forEach((panel) => {
panel.addEventListener("click", (event) => {
if (event.target === panel) {
panel.classList.add("hidden");
panel.classList.remove("flex");
} }
}); });
panel.querySelectorAll("[data-close-edit]").forEach((btn) => { });
btn.addEventListener("click", () => { dialogs.forEach((dialog) => {
panel.classList.add("hidden"); dialog.querySelectorAll("[data-close-edit]").forEach((btn) => {
panel.classList.remove("flex"); btn.addEventListener("click", () => dialog.close());
});
}); });
}); });