feat: allow editing user profile info via modal
This commit is contained in:
Victor Andersson
@@ -111,17 +111,32 @@
|
||||
<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 row.permission_flags.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 row.permission_flags.view %}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 row.permission_flags.change %}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 row.permission_flags.edit %}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 row.permission_flags.pay %}bg-amber-100 text-amber-800{% else %}bg-slate-200 text-slate-600{% endif %}">{% trans "Får markera betalningar" %}</span>
|
||||
{% if row.permission_flags.is_staff %}
|
||||
<span class="rounded-full px-3 py-1 bg-emerald-100 text-emerald-800">{% trans "Admin/staff" %}</span>
|
||||
{% endif %}
|
||||
{% if row.permission_flags.view %}
|
||||
<span class="rounded-full px-3 py-1 bg-blue-100 text-blue-800">{% trans "Får se utlägg" %}</span>
|
||||
{% endif %}
|
||||
{% if row.permission_flags.change %}
|
||||
<span class="rounded-full px-3 py-1 bg-indigo-100 text-indigo-800">{% trans "Får besluta utlägg" %}</span>
|
||||
{% endif %}
|
||||
{% if row.permission_flags.edit %}
|
||||
<span class="rounded-full px-3 py-1 bg-purple-100 text-purple-800">{% trans "Får redigera utlägg" %}</span>
|
||||
{% endif %}
|
||||
{% if row.permission_flags.pay %}
|
||||
<span class="rounded-full px-3 py-1 bg-amber-100 text-amber-800">{% trans "Får markera betalningar" %}</span>
|
||||
{% endif %}
|
||||
{% if not row.permission_flags.is_staff and not row.permission_flags.view and not row.permission_flags.change and not row.permission_flags.edit and not row.permission_flags.pay %}
|
||||
<span class="rounded-full bg-slate-200 px-3 py-1 text-slate-600">{% trans "Inga behörigheter tilldelade" %}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<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>
|
||||
{% if can_change_users %}
|
||||
<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>
|
||||
{% endif %}
|
||||
</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>
|
||||
@@ -155,8 +170,9 @@
|
||||
|
||||
{% block modals %}
|
||||
{{ block.super }}
|
||||
{% for row in user_rows %}
|
||||
{% with user=row.user form=row.permission_form %}
|
||||
{% if can_change_users %}
|
||||
{% 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"
|
||||
@@ -178,7 +194,55 @@
|
||||
{% csrf_token %}
|
||||
<input type="hidden" name="action" value="update">
|
||||
{{ form.user_id }}
|
||||
<div class="space-y-3 text-sm text-gray-800">
|
||||
<div class="space-y-5 text-sm text-gray-800">
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Kontaktuppgifter" %}</p>
|
||||
<div class="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600" for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
|
||||
{{ form.first_name }}
|
||||
{% for error in form.first_name.errors %}
|
||||
<p class="text-xs text-rose-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600" for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
|
||||
{{ form.last_name }}
|
||||
{% for error in form.last_name.errors %}
|
||||
<p class="text-xs text-rose-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div class="md:col-span-2">
|
||||
<label class="text-xs font-semibold text-gray-600" for="{{ form.email.id_for_label }}">{{ form.email.label }}</label>
|
||||
{{ form.email }}
|
||||
{% for error in form.email.errors %}
|
||||
<p class="text-xs text-rose-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Lösenord" %}</p>
|
||||
<div class="mt-3 grid gap-3 md:grid-cols-2">
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600" for="{{ form.new_password1.id_for_label }}">{{ form.new_password1.label }}</label>
|
||||
{{ form.new_password1 }}
|
||||
{% for error in form.new_password1.errors %}
|
||||
<p class="text-xs text-rose-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div>
|
||||
<label class="text-xs font-semibold text-gray-600" for="{{ form.new_password2.id_for_label }}">{{ form.new_password2.label }}</label>
|
||||
{{ form.new_password2 }}
|
||||
{% for error in form.new_password2.errors %}
|
||||
<p class="text-xs text-rose-600">{{ error }}</p>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-1 text-xs text-gray-500">{% trans "Lämna fälten tomma för att behålla nuvarande lösenord." %}</p>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-gray-500">{% trans "Behörigheter" %}</p>
|
||||
<label class="flex items-center gap-3" for="{{ form.is_staff.id_for_label }}">
|
||||
{{ form.is_staff }}
|
||||
<span>{% trans "Admin/staff" %}</span>
|
||||
@@ -199,6 +263,7 @@
|
||||
{{ form.grant_pay }}
|
||||
<span>{% trans "Får markera betalningar" %}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3">
|
||||
<button type="button"
|
||||
@@ -213,12 +278,14 @@
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endwith %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
{{ block.super }}
|
||||
{% if can_change_users %}
|
||||
<script>
|
||||
(function () {
|
||||
function lockScroll() {
|
||||
@@ -286,4 +353,5 @@
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user