feat: add permission edit modal

claims/templates/claims/base.html

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

claims/templates/claims/user_management.html

@@ -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">
+                        <div class="rounded-2xl bg-slate-50 p-4">
-                            {% csrf_token %}
+                            <p class="text-sm font-semibold text-gray-700">{% trans "Behörigheter" %}</p>
-                            <input type="hidden" name="action" value="update">
+                            <div class="mt-3 flex flex-wrap gap-2 text-xs">
-                            {{ form.user_id }}
+                                <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>
-                            <div class="space-y-3 text-sm text-gray-700">
+                                <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>
-                                <label class="flex items-center gap-2" for="{{ form.is_staff.id_for_label }}">
+                                <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>
-                                    {{ form.is_staff }}
+                                <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>{% trans "Admin/staff" %}</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>
-                                </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>
-                            <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">
+                            <button type="button"
-                                {% trans "Spara behörigheter" %}
+                                    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 %}

locale/en/LC_MESSAGES/django.po

@@ -2,7 +2,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: claims-system 0.1\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-11-11 19:34+0000\n"
+"POT-Creation-Date: 2025-11-11 19:43+0000\n"
 "PO-Revision-Date: 2025-11-08 23:40+0100\n"
 "Last-Translator: ChatGPT <noreply@example.com>\n"
 "Language-Team: English\n"
@@ -126,23 +126,28 @@ msgstr "That username is already taken."
 msgid "Lösenorden matchar inte."
 msgstr "Passwords do not match."
 
-#: claims/forms.py:158 claims/templates/claims/user_management.html:118
+#: claims/forms.py:158 claims/templates/claims/user_management.html:114
+#: claims/templates/claims/user_management.html:184
 msgid "Admin/staff"
 msgstr "Admin/staff"
 
-#: claims/forms.py:159 claims/templates/claims/user_management.html:122
+#: claims/forms.py:159 claims/templates/claims/user_management.html:115
+#: claims/templates/claims/user_management.html:188
 msgid "Får se utlägg"
 msgstr "May view claims"
 
-#: claims/forms.py:160 claims/templates/claims/user_management.html:126
+#: claims/forms.py:160 claims/templates/claims/user_management.html:116
+#: claims/templates/claims/user_management.html:192
 msgid "Får besluta utlägg"
 msgstr "May decide claims"
 
-#: claims/forms.py:161
+#: claims/forms.py:161 claims/templates/claims/user_management.html:117
+#: claims/templates/claims/user_management.html:196
 msgid "Får redigera utlägg"
 msgstr "May edit claims"
 
-#: claims/forms.py:162
+#: claims/forms.py:162 claims/templates/claims/user_management.html:118
+#: claims/templates/claims/user_management.html:200
 msgid "Får markera betalningar"
 msgstr "May mark payments"
 
@@ -438,8 +443,7 @@ msgstr "Double-check the amount and account number before confirming."
 #: claims/templates/claims/dashboard.html:201
 msgid ""
 "Du saknar behörighet att markera betalningar. Kontakta en administratör."
-msgstr ""
+msgstr "You do not have permission to mark payments. Contact an administrator."
-"You do not have permission to mark payments. Contact an administrator."
 
 #: claims/templates/claims/dashboard.html:208
 msgid ""
@@ -534,6 +538,7 @@ msgid "Redigera utlägg"
 msgstr "Edit claim"
 
 #: claims/templates/claims/dashboard.html:513
+#: claims/templates/claims/user_management.html:174
 msgid "Stäng"
 msgstr "Close"
 
@@ -542,6 +547,7 @@ msgid "Ingen"
 msgstr "None"
 
 #: claims/templates/claims/dashboard.html:563
+#: claims/templates/claims/user_management.html:207
 msgid "Avbryt"
 msgstr "Cancel"
 
@@ -802,10 +808,12 @@ msgid ""
 msgstr ""
 "The permissions <code class=\"break-normal rounded bg-slate-800 px-2 py-1 "
 "text-xs\">claims.view_claim</code>, <code class=\"break-normal rounded bg-"
-"slate-800 px-2 py-1 text-xs\">claims.change_claim</code>, <code class=\"break-"
+"slate-800 px-2 py-1 text-xs\">claims.change_claim</code>, <code "
-"normal rounded bg-slate-800 px-2 py-1 text-xs\">claims.edit_claim_details</code>, "
+"class=\"break-normal rounded bg-slate-800 px-2 py-1 text-"
-"and <code class=\"break-normal rounded bg-slate-800 px-2 py-1 text-xs\">claims.mark_claim_paid</code> "
+"xs\">claims.edit_claim_details</code>, and <code class=\"break-normal "
-"control access to the dashboard, decision flow, edit dialog, and payment panel."
+"rounded bg-slate-800 px-2 py-1 text-xs\">claims.mark_claim_paid</code> "
+"control access to the dashboard, decision flow, edit dialog, and payment "
+"panel."
 
 #: claims/templates/claims/user_management.html:77
 msgid ""
@@ -843,40 +851,48 @@ msgstr "No name"
 msgid "Ingen e-post"
 msgstr "No email"
 
-#: claims/templates/claims/user_management.html:130
+#: claims/templates/claims/user_management.html:112
-msgid "Spara behörigheter"
+msgid "Behörigheter"
-msgstr "Save permissions"
+msgstr "Permissions"
 
-#: claims/templates/claims/user_management.html:134
+#: claims/templates/claims/user_management.html:123
+#: claims/templates/claims/user_management.html:168
+msgid "Redigera behörigheter"
+msgstr "Edit permissions"
+
+#: claims/templates/claims/user_management.html:127
 msgid "Ta bort konto"
 msgstr "Remove account"
 
-#: claims/templates/claims/user_management.html:136
+#: claims/templates/claims/user_management.html:129
 msgid "Åtgärden går inte att ångra. Användaren förlorar omedelbart åtkomst."
 msgstr "This action cannot be undone. The user loses access immediately."
 
-#: claims/templates/claims/user_management.html:137
+#: claims/templates/claims/user_management.html:130
-#, fuzzy, python-format
+#, python-format
-#| msgid "Ta bort {{ user.username }}?"
 msgid "Ta bort %(user.username)s?"
-msgstr "Remove {{ user.username }}?"
+msgstr "Delete %(user.username)s?"
 
-#: claims/templates/claims/user_management.html:142
+#: claims/templates/claims/user_management.html:135
 msgid "Ta bort användare"
 msgstr "Delete user"
 
-#: claims/templates/claims/user_management.html:146
+#: claims/templates/claims/user_management.html:139
 msgid "Kan inte tas bort (antingen du själv eller superuser)."
 msgstr "Cannot be removed (either yourself or a superuser)."
 
-#: claims/templates/claims/user_management.html:154
+#: claims/templates/claims/user_management.html:147
 msgid "Inga användare upplagda."
 msgstr "No users yet."
 
-#: claims/templates/claims/user_management.html:155
+#: claims/templates/claims/user_management.html:148
 msgid "Skapa det första kontot via formuläret ovan."
 msgstr "Create the first account using the form above."
 
+#: claims/templates/claims/user_management.html:210
+msgid "Spara behörigheter"
+msgstr "Save permissions"
+
 #: claims/validators.py:87
 #, python-format
 msgid "Kvitton får vara max %(size)s MB."

locale/sv/LC_MESSAGES/django.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2025-11-11 19:34+0000\n"
+"POT-Creation-Date: 2025-11-11 19:43+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -132,23 +132,28 @@ msgstr ""
 msgid "Lösenorden matchar inte."
 msgstr ""
 
-#: claims/forms.py:158 claims/templates/claims/user_management.html:118
+#: claims/forms.py:158 claims/templates/claims/user_management.html:114
+#: claims/templates/claims/user_management.html:184
 msgid "Admin/staff"
 msgstr ""
 
-#: claims/forms.py:159 claims/templates/claims/user_management.html:122
+#: claims/forms.py:159 claims/templates/claims/user_management.html:115
+#: claims/templates/claims/user_management.html:188
 msgid "Får se utlägg"
 msgstr ""
 
-#: claims/forms.py:160 claims/templates/claims/user_management.html:126
+#: claims/forms.py:160 claims/templates/claims/user_management.html:116
+#: claims/templates/claims/user_management.html:192
 msgid "Får besluta utlägg"
 msgstr ""
 
-#: claims/forms.py:161
+#: claims/forms.py:161 claims/templates/claims/user_management.html:117
+#: claims/templates/claims/user_management.html:196
 msgid "Får redigera utlägg"
 msgstr ""
 
-#: claims/forms.py:162
+#: claims/forms.py:162 claims/templates/claims/user_management.html:118
+#: claims/templates/claims/user_management.html:200
 msgid "Får markera betalningar"
 msgstr ""
 
@@ -531,6 +536,7 @@ msgid "Redigera utlägg"
 msgstr ""
 
 #: claims/templates/claims/dashboard.html:513
+#: claims/templates/claims/user_management.html:174
 msgid "Stäng"
 msgstr ""
 
@@ -539,6 +545,7 @@ msgid "Ingen"
 msgstr ""
 
 #: claims/templates/claims/dashboard.html:563
+#: claims/templates/claims/user_management.html:207
 msgid "Avbryt"
 msgstr ""
 
@@ -814,40 +821,49 @@ msgstr ""
 
 #: claims/templates/claims/user_management.html:105
 msgid "Ingen e-post"
-msgstr ""
+msgstr "Ingen e-post"
+
+#: claims/templates/claims/user_management.html:112
+msgid "Behörigheter"
+msgstr "Behörigheter"
+
+#: claims/templates/claims/user_management.html:123
+#: claims/templates/claims/user_management.html:168
+msgid "Redigera behörigheter"
+msgstr "Redigera behörigheter"
+
+#: claims/templates/claims/user_management.html:127
+msgid "Ta bort konto"
+msgstr "Ta bort konto"
+
+#: claims/templates/claims/user_management.html:129
+msgid "Åtgärden går inte att ångra. Användaren förlorar omedelbart åtkomst."
+msgstr "Åtgärden går inte att ångra. Användaren förlorar omedelbart åtkomst."
 
 #: claims/templates/claims/user_management.html:130
-msgid "Spara behörigheter"
-msgstr ""
-
-#: claims/templates/claims/user_management.html:134
-msgid "Ta bort konto"
-msgstr ""
-
-#: claims/templates/claims/user_management.html:136
-msgid "Åtgärden går inte att ångra. Användaren förlorar omedelbart åtkomst."
-msgstr ""
-
-#: claims/templates/claims/user_management.html:137
 #, python-format
 msgid "Ta bort %(user.username)s?"
-msgstr ""
+msgstr "Ta bort %(user.username)s?"
 
-#: claims/templates/claims/user_management.html:142
+#: claims/templates/claims/user_management.html:135
 msgid "Ta bort användare"
-msgstr ""
+msgstr "Ta bort användare"
 
-#: claims/templates/claims/user_management.html:146
+#: claims/templates/claims/user_management.html:139
 msgid "Kan inte tas bort (antingen du själv eller superuser)."
-msgstr ""
+msgstr "Kan inte tas bort (antingen du själv eller superuser)."
 
-#: claims/templates/claims/user_management.html:154
+#: claims/templates/claims/user_management.html:147
 msgid "Inga användare upplagda."
-msgstr ""
+msgstr "Inga användare upplagda."
 
-#: claims/templates/claims/user_management.html:155
+#: claims/templates/claims/user_management.html:148
 msgid "Skapa det första kontot via formuläret ovan."
-msgstr ""
+msgstr "Skapa det första kontot via formuläret ovan."
+
+#: claims/templates/claims/user_management.html:210
+msgid "Spara behörigheter"
+msgstr "Spara behörigheter"
 
 #: claims/validators.py:87
 #, python-format