feat: Modify line number in mass creation form

cof_clubs/static/cof_clubs/formset.js

@@ -0,0 +1,35 @@
+function updateAttr(el, attr, total) {
+  let v = el.getAttribute(attr);
+  el.setAttribute(attr, v.replace(`form-${total-1}`, `form-${total}`));
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const el = document.getElementById('add-formset-field');
+
+  // Add a click event on each of them
+  el.addEventListener('click', () => {
+
+    // Get the target from the "data-target" attribute
+    const total = document.getElementById('id_form-TOTAL_FORMS');
+    const totalValue = parseInt(total.value);
+
+    const toClone = document.querySelector(`div:has(#id_form-${totalValue - 1}-id`);
+    const cloned = toClone.cloneNode(true);
+    cloned.querySelectorAll('input, label, select').forEach(el => {
+      if (el.hasAttribute("for")) {
+        updateAttr(el, "for", totalValue);
+      }
+      if (el.hasAttribute("id")) {
+        updateAttr(el, "id", totalValue);
+      }
+      if (el.hasAttribute("name")) {
+        updateAttr(el, "name", totalValue);
+      }
+    });
+    document.getElementById('main-form').appendChild(cloned);
+    total.value = totalValue + 1;
+  });
+
+});

cof_clubs/templates/cof_clubs/clubbudgetline_mass_form.html

@@ -1,23 +1,33 @@
 {% extends "cof_clubs/base.html" %}
 
 {% load i18n %}
+{% load static %}
 
 {% block content %}
   <section class="section">
     <h1 class="title">
-      {% if object %}
-      {% trans "Modification d'une ligne de budget" %}
-      {% else %}
-      {% trans "Création d'une ligne de budget" %}
-      {% endif %}
+      {% trans "Création en masse de lignes de budget" %}
     </h1>
-    <form action="" method="post">
+    <form id="main-form" action="" method="post">
       {% csrf_token %}
 
       {% include "bulma/form.html" with errors=True form=common_form %}
       
       <hr/>
 
+      <div class="field is-grouped">
+        <div class="control">
+          <button class="button is-primary" type="submit">
+            <span>{% trans "Enregister" %}</span>
+          </button>
+          <button id="add-formset-field" class="button is-secondary">
+            <span>{% trans "Ajouter une ligne" %}</span>
+          </button>
+        </div>
+      </div>
+
+      <hr/>
+
       {{ form.management_form }}
 
       {% for f in form %}
@@ -25,14 +35,10 @@
       {% include "bulma/form.html" with errors=True form=f %}
       </div>
       {% endfor %}
-
-      <div class="field is-grouped">
-        <div class="control">
-          <button class="button is-primary" type="submit">
-            <span>{% trans "Enregister" %}</span>
-          </button>
-        </div>
-      </div>
     </form>
   </section>
 {% endblock %}
+
+{% block extra_scripts %}
+<script src="{% static "cof_clubs/formset.js" %}" defer></script>
+{% endblock %}