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

feat: add permission edit modal

Browse Source
This commit is contained in:
Victor Andersson
2025-11-11 20:44:56 +01:00
parent cbada0794f
commit 9fe70ac13b
6 changed files with 234 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
claims/templates/claims/base.html
View File

@@ -92,5 +92,6 @@
{% block content %}{% endblock %}
</main>
{% block modals %}{% endblock %}
{% block extra_js %}{% endblock %}
</body>
</html>

168
claims/templates/claims/user_management.html
View File

@@ -108,28 +108,21 @@
<p class="text-xs uppercase tracking-wide text-gray-400">ID: {{ user.id }}</p>
</div>
<div class="mt-4 grid gap-6 lg:grid-cols-[2fr,1fr]">
<form method="post" class="space-y-4 rounded-2xl bg-slate-50 p-4">
{% csrf_token %}
<input type="hidden" name="action" value="update">
{{ form.user_id }}
<div class="space-y-3 text-sm text-gray-700">
<label class="flex items-center gap-2" for="{{ form.is_staff.id_for_label }}">
{{ form.is_staff }}
<span>{% trans "Admin/staff" %}</span>
</label>
<label class="flex items-center gap-2" for="{{ form.grant_view.id_for_label }}">
{{ form.grant_view }}
<span>{% trans "Får se utlägg" %}</span>
</label>
<label class="flex items-center gap-2" for="{{ form.grant_change.id_for_label }}">
{{ form.grant_change }}
<span>{% trans "Får besluta utlägg" %}</span>
</label>
<div class="rounded-2xl bg-slate-50 p-4">
<p class="text-sm font-semibold text-gray-700">{% trans "Behörigheter" %}</p>
<div class="mt-3 flex flex-wrap gap-2 text-xs">
<span class="rounded-full px-3 py-1 {% if user.is_staff %}bg-emerald-100 text-emerald-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Admin/staff" %}</span>
<span class="rounded-full px-3 py-1 {% if user.has_perm('claims.view_claim') %}bg-blue-100 text-blue-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Får se utlägg" %}</span>
<span class="rounded-full px-3 py-1 {% if user.has_perm('claims.change_claim') %}bg-indigo-100 text-indigo-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Får besluta utlägg" %}</span>
<span class="rounded-full px-3 py-1 {% if user.has_perm('claims.edit_claim_details') %}bg-purple-100 text-purple-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Får redigera utlägg" %}</span>
<span class="rounded-full px-3 py-1 {% if user.has_perm('claims.mark_claim_paid') %}bg-amber-100 text-amber-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Får markera betalningar" %}</span>
</div>
<button type="submit" class="w-full rounded-2xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700">
{% trans "Spara behörigheter" %}
<button type="button"
data-open-permission-edit="{{ user.id }}"
class="mt-4 inline-flex items-center gap-2 rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700">
{% trans "Redigera behörigheter" %}
</button>
</form>
</div>
<div class="rounded-2xl border border-red-100 bg-red-50 p-4 text-sm text-red-800">
<p class="font-semibold">{% trans "Ta bort konto" %}</p>
{% if delete_form %}
@@ -159,3 +152,138 @@
</section>
</section>
{% endblock %}
{% block modals %}
{{ block.super }}
{% for row in user_rows %}
{% with user=row.user form=row.permission_form %}
<div class="fixed inset-0 z-40 hidden items-center justify-center bg-slate-900/80 p-4"
data-permission-modal="{{ user.id }}"
aria-hidden="true"
role="dialog"
aria-modal="true">
<div class="w-full max-w-xl rounded-3xl bg-white p-6 shadow-2xl">
<div class="flex items-center justify-between">
<div>
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Redigera behörigheter" %}</p>
<h3 class="text-xl font-semibold text-gray-900">{{ user.username }}</h3>
</div>
<button type="button"
data-close-permission-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">
{% csrf_token %}
<input type="hidden" name="action" value="update">
{{ form.user_id }}
<div class="space-y-3 text-sm text-gray-800">
<label class="flex items-center gap-3" for="{{ form.is_staff.id_for_label }}">
{{ form.is_staff }}
<span>{% trans "Admin/staff" %}</span>
</label>
<label class="flex items-center gap-3" for="{{ form.grant_view.id_for_label }}">
{{ form.grant_view }}
<span>{% trans "Får se utlägg" %}</span>
</label>
<label class="flex items-center gap-3" for="{{ form.grant_change.id_for_label }}">
{{ form.grant_change }}
<span>{% trans "Får besluta utlägg" %}</span>
</label>
<label class="flex items-center gap-3" for="{{ form.grant_edit.id_for_label }}">
{{ form.grant_edit }}
<span>{% trans "Får redigera utlägg" %}</span>
</label>
<label class="flex items-center gap-3" for="{{ form.grant_pay.id_for_label }}">
{{ form.grant_pay }}
<span>{% trans "Får markera betalningar" %}</span>
</label>
</div>
<div class="flex items-center justify-end gap-3">
<button type="button"
data-close-permission-edit
class="rounded-full border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-600 transition hover:bg-gray-100">
{% trans "Avbryt" %}
</button>
<button type="submit" class="rounded-full bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700">
{% trans "Spara behörigheter" %}
</button>
</div>
</form>
</div>
</div>
{% endwith %}
{% endfor %}
{% endblock %}
{% block extra_js %}
{{ block.super }}
<script>
(function () {
function lockScroll() {
document.body.classList.add("overflow-hidden");
}
function unlockScrollIfNeeded() {
const anyOpen = Array.from(document.querySelectorAll("[data-permission-modal]")).some(
(modal) => !modal.classList.contains("hidden")
);
if (!anyOpen) {
document.body.classList.remove("overflow-hidden");
}
}
function openModal(id) {
const modal = document.querySelector(`[data-permission-modal="${id}"]`);
if (!modal) return;
modal.classList.remove("hidden");
modal.classList.add("flex");
modal.setAttribute("aria-hidden", "false");
lockScroll();
}
function closeModal(modal) {
modal.classList.add("hidden");
modal.classList.remove("flex");
modal.setAttribute("aria-hidden", "true");
unlockScrollIfNeeded();
}
document.addEventListener("click", (event) => {
const backdrop = event.target.closest("[data-permission-modal]");
if (backdrop && event.target === backdrop) {
closeModal(backdrop);
}
});
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
document.querySelectorAll("[data-permission-modal]").forEach((modal) => {
if (!modal.classList.contains("hidden")) {
closeModal(modal);
}
});
}
});
document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[data-open-permission-edit]").forEach((button) => {
button.addEventListener("click", (event) => {
event.preventDefault();
openModal(button.dataset.openPermissionEdit);
});
});
document.querySelectorAll("[data-close-permission-edit]").forEach((button) => {
button.addEventListener("click", (event) => {
event.preventDefault();
const modal = button.closest("[data-permission-modal]");
if (modal) {
closeModal(modal);
}
});
});
});
})();
</script>
{% endblock %}