feat: club link management in club edit view

club/templates/club/edit_club.jinja

@@ -1,9 +1,60 @@
 {% extends "core/base.jinja" %}
 
+{% block additional_js %}
+  <script type="module" src="{{ static("bundled/core/dynamic-formset-index.ts") }}"></script>
+{% endblock %}
+
 {% block title %}
   {% trans name=object %}Edit {{ name }}{% endtrans %}
 {% endblock %}
 
+{% macro link_form(form) %}
+  <fieldset
+    {# set url in x-init rather than in x-data,
+       in order to trigger the $watch on initial load #}
+    x-data="{ url: '', linkType: { icon: '', id: 0 } }"
+    x-init="() => {
+            $watch('url', (u) => linkType = linkTypes.find((t) => u.startsWith(t.url)));
+            url = '{{ form.url.value() or "" }}';
+            }"
+  >
+    {{ form.non_field_errors() }}
+    <div class="form-group row gap-2x">
+      <div>
+        {{ form.url.label_tag() }}
+        {{ form.url.errors }}
+        <span>
+          {# we change the icon when the user change it and leave the input,
+             or when it is pasted from the clipboard #}
+          {{ form.url|add_attr("x-model.change=url,@paste.prevent=url = $event.clipboardData.getData('text')") }}
+          <i :class="linkType.icon || 'fa fa-link'"></i>
+        </span>
+      </div>
+      <div>{{ form.name.as_field_group() }}</div>
+    </div>
+    {%- if form.DELETE -%}
+      <div class="form-group row gap">
+        {{ form.DELETE.as_field_group() }}
+      </div>
+    {%- else -%}
+      <br>
+      <button
+        class="btn btn-grey"
+        @click.prevent="removeForm($event.target.closest('fieldset'))"
+      >
+        <i class="fa fa-minus"></i> {% trans %}Remove link{% endtrans %}
+      </button>
+    {%- endif -%}
+    {{ form.link_type|add_attr(":value=linkType.id") }}
+    {%- for field in form.hidden_fields() -%}
+      {%- if field != form.link_type -%}
+        {{ field }}
+      {%- endif -%}
+    {%- endfor -%}
+  </fieldset>
+{% endmacro %}
+
+
 {% block content %}
   <h2>{% trans name=object %}Edit {{ name }}{% endtrans %}</h2>
 
@@ -17,7 +68,7 @@
          and explicitly separate them from the non-admin ones,
          with some help text.
          Non-admin users will only see the regular form fields,
-         so they don't need thoses explanations #}
+         so they don't need those explanations #}
       <h3>{% trans %}Club properties{% endtrans %}</h3>
       <p class="helptext">
         {% trans trimmed %}
@@ -25,7 +76,7 @@
           Only admin users can see and edit them.
         {% endtrans %}
       </p>
-      <fieldset class="required margin-bottom">
+      <fieldset class="margin-bottom">
         {% for field_name in form.admin_fields %}
           {% set field = form[field_name] %}
           <div class="form-group">
@@ -36,11 +87,13 @@
           {# Remove the the admin fields from the form.
              The remaining non-admin fields will be rendered
              at once with a simple {{ form.as_p() }} #}
-          {% set _ = form.fields.pop(field_name) %}
+          {% do form.fields.pop(field_name) %}
         {% endfor %}
       </fieldset>
+    {% endif %}
 
-      <h3>{% trans %}Club informations{% endtrans %}</h3>
+    <h3>{% trans %}Club informations{% endtrans %}</h3>
+    {% if form.admin_fields %}
       <p class="helptext">
         {% trans trimmed %}
           The following form fields are linked to the basic description of a club.
@@ -48,7 +101,45 @@
         {% endtrans %}
       </p>
     {% endif %}
-    {{ form.as_p() }}
-    <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
+    <fieldset class="margin-bottom">
+      {{ form.as_p() }}
+    </fieldset>
+
+    <h3>{% trans %}Club links{% endtrans %}</h3>
+    <div x-data="dynamicFormSet({ prefix: '{{ form.link_formset.prefix }}' })" class="margin-bottom">
+      {{ form.link_formset.management_form }}
+      <div x-ref="formContainer">
+        {%- for f in form.link_formset.forms -%}
+          {{ link_form(f) }}
+        {%- endfor -%}
+      </div>
+      <template x-ref="formTemplate">
+        {{ link_form(form.link_formset.empty_form) }}
+      </template>
+      <p>
+        <i>{% trans trimmed %}
+          Note: if the icon of one of your links doesn't exist yet,
+          you can ask the info team to add it.
+        {% endtrans %}</i>
+      </p>
+      <br>
+      <button @click.prevent="addForm()" class="btn btn-grey">
+        <i class="fa fa-plus"></i>{% trans %}Add link{% endtrans %}
+      </button>
+    </div>
+    <hr>
+    <button type="submit" class="btn btn-blue">
+      <i class="fa fa-check"></i>{% trans %}Save{% endtrans %}
+    </button>
   </form>
 {% endblock content %}
+
+{% block script %}
+  <script>
+    const linkTypes = [
+      {%- for t in link_types -%}
+        { id: {{ t.id }}, url: '{{ t.url_base }}', icon: '{{ t.icon }}' },
+      {%- endfor -%}
+    ];
+  </script>
+{% endblock %}