feat: page to edit and reorder club role

club/templates/club/club_roles.jinja

@@ -0,0 +1,82 @@
+{% extends "core/base.jinja" %}
+
+{% block additional_js %}
+  <script type="module" src="{{ static("bundled/club/role-list-index.ts") }}"></script>
+{% endblock %}
+
+{% block additional_css %}
+  <link rel="stylesheet" href="{{ static("club/roles.scss") }}">
+{% endblock %}
+
+{% macro display_subform(subform) %}
+  <div
+    class="row"
+    x-data="{
+            isPresidency: {{ subform.is_presidency.value()|lower }},
+            isBoard: {{ subform.is_board.value()|lower }},
+            }"
+    x-sort:item="$data"
+  >
+    {# hidden fields #}
+    {{ subform.ORDER }}
+    {{ subform.id }}
+    {{ subform.club }}
+    {{ subform.is_presidency|add_attr("x-model=isPresidency") }}
+    {{ subform.is_board|add_attr("x-model=isBoard") }}
+    <i class="fa fa-grip-vertical" x-sort:handle></i>
+    <details class="accordion grow" {% if subform.errors %}open{% endif %}>
+      <summary>
+        {{ subform.name.value() }}
+        {% if not subform.instance.is_active -%}
+          ({% trans %}inactive{% endtrans %})
+        {%- endif %}
+      </summary>
+      <div class="accordion-content">
+        {{ subform.non_field_errors() }}
+        <div class="form-group">
+          {{ subform.name.as_field_group() }}
+        </div>
+        <div class="form-group">
+          {{ subform.description.as_field_group() }}
+        </div>
+        <div class="form-group">
+          {{ subform.is_active }}
+          {{ subform.is_active.label_tag() }}
+        </div>
+      </div>
+    </details>
+  </div>
+{% endmacro %}
+
+{% block content %}
+  <form method="post" x-data="clubRoleList">
+    {% csrf_token %}
+    {{ form.management_form }}
+    {{ form.non_form_errors() }}
+    <h3>{% trans %}Presidency{% endtrans %}</h3>
+    <div x-sort="reorder($item, { isBoard: true, isPresidency: true })" x-sort:group="roles">
+      {% for subform in form %}
+        {% if subform.is_presidency.value() %}
+          {{ display_subform(subform) }}
+        {% endif %}
+      {% endfor %}
+    </div>
+    <h3>{% trans %}Board{% endtrans %}</h3>
+    <div x-sort="reorder($item, { isBoard: true, isPresidency: false })" x-sort:group="roles">
+      {% for subform in form %}
+        {% if subform.is_board.value() and not subform.is_presidency.value() %}
+          {{ display_subform(subform) }}
+        {% endif %}
+      {% endfor %}
+    </div>
+    <h3>{% trans %}Members{% endtrans %}</h3>
+    <div x-sort="reorder($item, { isBoard: false, isPresidency: false })" x-sort:group="roles">
+      {% for subform in form %}
+        {% if not subform.is_board.value() %}
+          {{ display_subform(subform) }}
+        {% endif %}
+      {% endfor %}
+    </div>
+    <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
+  </form>
+{% endblock content %}