Split user preferences in two sections

Author: Simrayz

changelog.d/1557.changed.md

@@ -0,0 +1 @@
+Split user preferences into multiple sections

src/argus/htmx/static/styles.css

@@ -5196,6 +5196,11 @@ details.collapse summary::-webkit-details-marker {
   margin-bottom: 1rem;
 }
 
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .-ml-2 {
   margin-left: -0.5rem;
 }
@@ -5406,6 +5411,14 @@ details.collapse summary::-webkit-details-marker {
   max-width: 20rem;
 }
 
+.max-w-md {
+  max-width: 28rem;
+}
+
+.max-w-screen-md {
+  max-width: 768px;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -5819,6 +5832,10 @@ details.collapse summary::-webkit-details-marker {
   padding: 1.5rem;
 }
 
+.p-0\.5 {
+  padding: 0.125rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -6201,6 +6218,10 @@ details.collapse summary::-webkit-details-marker {
   .lg\:grid-cols-4 {
     grid-template-columns: repeat(4, minmax(0, 1fr));
   }
+
+  .lg\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }
 
 @media (min-width: 1280px) {

src/argus/htmx/templates/htmx/user/preference_form/_base_form.html

@@ -0,0 +1,19 @@
+<section id="{% block section_id %}{% endblock section_id %}"
+         class="card card-base border border-base-200 p-4 max-w-screen-md mx-auto space-y-2">
+  <h3 class="card-title text-xl">
+    {% block section_title %}
+    {% endblock section_title %}
+  </h3>
+  <form hx-post="{% url 'htmx:update-preferences' namespace='argus_htmx' %}"
+        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
+        class="space-y-2">
+    <ul class="card-body menu">
+      {% block section_forms %}
+      {% endblock section_forms %}
+    </ul>
+    <div class="preference-form-actions flex justify-end gap-2 px-2">
+      <button class="btn btn-primary btn-sm">Save preferences</button>
+      <button type="reset" class="btn btn-sm">Reset</button>
+    </div>
+  </form>
+</section>

src/argus/htmx/templates/htmx/user/preference_form/_incident_table_form.html

@@ -0,0 +1,10 @@
+{% extends "htmx/user/preference_form/_base_form.html" %}
+{% block section_id %}
+  user-settings
+{% endblock section_id %}
+{% block section_title %}
+  Incident Table
+{% endblock section_title %}
+{% block section_forms %}
+  {% for form in incident_forms %}{{ form }}{% endfor %}
+{% endblock section_forms %}

src/argus/htmx/templates/htmx/user/preference_form/_preference_form_script.html

@@ -0,0 +1,26 @@
+<script>
+const BUTTON_SELECTOR = '.preference-form-actions button';
+document.querySelectorAll('form').forEach(form => {
+    const getFormData = f => JSON.stringify(Object.fromEntries(new FormData(f)));
+    const initial = getFormData(form);
+
+    // Disable all preference buttons on initialization
+    form.querySelectorAll(BUTTON_SELECTOR).forEach(btn => {
+        btn.disabled = true;
+    });
+
+    const updateButtons = () => {
+        const current = getFormData(form);
+        const dirty = current !== initial;
+        form.querySelectorAll(BUTTON_SELECTOR).forEach(btn => {
+            btn.disabled = !dirty;
+        });
+    };
+
+    form.addEventListener('input', updateButtons);
+    form.addEventListener('change', updateButtons);
+    form.addEventListener('reset', () => {
+        setTimeout(updateButtons, 0);
+    });
+});
+</script>

src/argus/htmx/templates/htmx/user/preference_form/_theme_and_format_form.html

@@ -0,0 +1,10 @@
+{% extends "htmx/user/preference_form/_base_form.html" %}
+{% block section_id %}
+  theme-settings
+{% endblock section_id %}
+{% block section_title %}
+  Theme and Format
+{% endblock section_title %}
+{% block section_forms %}
+  {% for form in theme_forms %}{{ form }}{% endfor %}
+{% endblock section_forms %}

src/argus/htmx/templates/htmx/user/preferences_list.html

@@ -2,13 +2,11 @@
 {% extends "htmx/base.html" %}
 {% block main %}
   <div class="p-4 space-y-4">
-    <h1 class="text-3xl">{{ page_title }}</h1>
-    <section id="user-settings" class="card">
-      <ul class="menu card-body">
-        {% block preferences %}
-          {% for form in forms.values %}{{ form }}{% endfor %}
-        {% endblock preferences %}
-      </ul>
-    </section>
+    {% include "htmx/components/_page_title.html" %}
+    {% block preferences %}
+      {% include "htmx/user/preference_form/_theme_and_format_form.html" %}
+      {% include "htmx/user/preference_form/_incident_table_form.html" %}
+      {% include "htmx/user/preference_form/_preference_form_script.html" %}
+    {% endblock preferences %}
   </div>
 {% endblock main %}

src/argus/htmx/templates/htmx/user/radio_option.html

@@ -2,9 +2,7 @@
 <input type="radio"
        class="btn btn-sm btn-block btn-ghost justify-start"
        {% if widget.value != None %}value="{{ widget.value|stringformat:'s' }}"{% endif %}
+       {% if widget.attrs.checked %}checked="checked"{% endif %}
        aria-label="{{ widget.label }}"
        name="{{ widget.name }}"
-       autocomplete="off"
-       hx-post="{% url 'htmx:update-preferences' namespace='argus_htmx' %}"
-       hx-trigger="change"
-       hx-headers='{"X-CSRFToken": "{{ widget.attrs.csrf_token }}"}' />
+       autocomplete="off" />

src/argus/htmx/user/views.py

@@ -9,15 +9,21 @@
 from argus.htmx.user.preferences.utils import setup_preference_forms
 
 
+THEME_PREFERENCES = ["theme", "datetime_format_name"]
+
+
 @require_GET
 def user_preferences(request) -> HttpResponse:
     """Renders the main preferences page for a user"""
 
     forms = setup_preference_forms(request)
+    theme_forms = [form for name, form in forms.items() if name in THEME_PREFERENCES]
+    incident_forms = [form for name, form in forms.items() if name not in THEME_PREFERENCES]
 
     context = {
         "page_title": "User preferences",
-        "forms": forms,
+        "theme_forms": theme_forms,
+        "incident_forms": incident_forms,
     }
 
     return render(request, "htmx/user/preferences_list.html", context=context)