From f17f17d8de74c07e24e7dc3f7b711e9cc1183f18 Mon Sep 17 00:00:00 2001
From: imperosol <thgirod@hotmail.com>
Date: Sat, 7 Mar 2026 16:21:18 +0100
Subject: [PATCH] use dynamic formset for product action formset

---
 .../bundled/core/dynamic-formset-index.ts     |  3 +
 core/templates/core/base.jinja                |  4 +-
 counter/forms.py                              |  3 +-
 counter/templates/counter/product_form.jinja  | 81 ++++++++++++-------
 locale/fr/LC_MESSAGES/django.po               |  8 ++
 5 files changed, 68 insertions(+), 31 deletions(-)

diff --git a/core/static/bundled/core/dynamic-formset-index.ts b/core/static/bundled/core/dynamic-formset-index.ts
index d503c55a..6b71e25f 100644
--- a/core/static/bundled/core/dynamic-formset-index.ts
+++ b/core/static/bundled/core/dynamic-formset-index.ts
@@ -21,6 +21,9 @@ document.addEventListener("alpine:init", () => {
    * - a button with `@click="addForm"`
    * - you may also have one or more buttons with `@click="removeForm(element)"`,
    *   where `element` is the HTML element containing the form.
+   *
+   * For an example of how this is used, you can have a look to
+   * `counter/templates/counter/product_form.jinja`
    */
   Alpine.data("dynamicFormSet", (config?: Config) => ({
     init() {
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 34a8040b..025dacdf 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -35,8 +35,8 @@
       <noscript><link rel="stylesheet" href="{{ static('bundled/fontawesome-index.css') }}"></noscript>
 
       <script src="{{ url('javascript-catalog') }}"></script>
-      <script type="module" src={{ static("bundled/core/navbar-index.ts") }}></script>
-      <script type="module" src={{ static("bundled/core/components/include-index.ts") }}></script>
+      <script type="module" src="{{ static("bundled/core/navbar-index.ts") }}"></script>
+      <script type="module" src="{{ static("bundled/core/components/include-index.ts") }}"></script>
       <script type="module" src="{{ static('bundled/alpine-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/htmx-index.js') }}"></script>
       <script type="module" src="{{ static('bundled/country-flags-index.ts') }}"></script>
diff --git a/counter/forms.py b/counter/forms.py
index 1d9fa8a0..33bfd51a 100644
--- a/counter/forms.py
+++ b/counter/forms.py
@@ -291,7 +291,8 @@ ScheduledProductActionFormSet = forms.modelformset_factory(
     absolute_max=None,
     can_delete=True,
     can_delete_extra=False,
-    extra=2,
+    extra=0,
+    min_num=1,
 )
 
 
diff --git a/counter/templates/counter/product_form.jinja b/counter/templates/counter/product_form.jinja
index f3d3728c..ffd751c0 100644
--- a/counter/templates/counter/product_form.jinja
+++ b/counter/templates/counter/product_form.jinja
@@ -1,5 +1,44 @@
 {% extends "core/base.jinja" %}
 
+{% block additional_js %}
+  <script type="module" src="{{ static("bundled/core/dynamic-formset-index.ts") }}"></script>
+{% endblock %}
+
+
+{% macro action_form(form) %}
+  <fieldset x-data="{action: '{{ form.task.initial }}'}">
+    {{ form.non_field_errors() }}
+    <div class="row gap-2x margin-bottom">
+      <div>
+        {{ form.task.errors }}
+        {{ form.task.label_tag() }}
+        {{ form.task|add_attr("x-model=action") }}
+      </div>
+      <div>{{ form.trigger_at.as_field_group() }}</div>
+    </div>
+    <div x-show="action==='counter.tasks.change_counters'" class="margin-bottom">
+      {{ form.counters.as_field_group() }}
+    </div>
+    {%- if form.DELETE -%}
+      <div class="row gap">
+        {{ form.DELETE.as_field_group() }}
+      </div>
+    {%- else -%}
+      <button
+        class="btn btn-grey"
+        @click.prevent="removeForm($event.target.closest('fieldset'))"
+      >
+        <i class="fa fa-minus"></i>{% trans %}Remove this action{% endtrans %}
+      </button>
+    {%- endif -%}
+    {%- for field in form.hidden_fields() -%}
+      {{ field }}
+    {%- endfor -%}
+    <hr />
+  </fieldset>
+{% endmacro %}
+
+
 {% block content %}
   {% if object %}
     <h2>{% trans name=object %}Edit product {{ name }}{% endtrans %}</h2>
@@ -25,34 +64,20 @@
       </em>
     </p>
 
-    {{ form.action_formset.management_form }}
-    {%- for action_form in form.action_formset.forms -%}
-      <fieldset x-data="{action: '{{ action_form.task.initial }}'}">
-        {{ action_form.non_field_errors() }}
-        <div class="row gap-2x margin-bottom">
-          <div>
-            {{ action_form.task.errors }}
-            {{ action_form.task.label_tag() }}
-            {{ action_form.task|add_attr("x-model=action") }}
-          </div>
-          <div>{{ action_form.trigger_at.as_field_group() }}</div>
-        </div>
-        <div x-show="action==='counter.tasks.change_counters'" class="margin-bottom">
-          {{ action_form.counters.as_field_group() }}
-        </div>
-        {%- if action_form.DELETE -%}
-          <div class="row gap">
-            {{ action_form.DELETE.as_field_group() }}
-          </div>
-        {%- endif -%}
-        {%- for field in action_form.hidden_fields() -%}
-          {{ field }}
+    <div x-data="dynamicFormSet" class="margin-bottom">
+      {{ form.action_formset.management_form }}
+      <div x-ref="formContainer">
+        {%- for f in form.action_formset.forms -%}
+          {{ action_form(f) }}
         {%- endfor -%}
-      </fieldset>
-      {%- if not loop.last -%}
-        <hr class="margin-bottom">
-      {%- endif -%}
-    {%- endfor -%}
-    <p><input type="submit" value="{% trans %}Save{% endtrans %}" /></p>
+      </div>
+      <template x-ref="formTemplate">
+        {{ action_form(form.action_formset.empty_form) }}
+      </template>
+      <button @click.prevent="addForm()" class="btn btn-grey">
+        <i class="fa fa-plus"></i>{% trans %}Add action{% endtrans %}
+      </button>
+    </div>
+    <p><input class="btn btn-blue" type="submit" value="{% trans %}Save{% endtrans %}" /></p>
   </form>
 {% endblock %}
\ No newline at end of file
diff --git a/locale/fr/LC_MESSAGES/django.po b/locale/fr/LC_MESSAGES/django.po
index 8600040b..9275ce76 100644
--- a/locale/fr/LC_MESSAGES/django.po
+++ b/locale/fr/LC_MESSAGES/django.po
@@ -3757,6 +3757,10 @@ msgstr ""
 "votre cotisation. Si vous ne renouvelez pas votre cotisation, il n'y aura "
 "aucune conséquence autre que le retrait de l'argent de votre compte."
 
+#: counter/templates/counter/product_form.jinja
+msgid "Remove this action"
+msgstr "Retirer cette action"
+
 #: counter/templates/counter/product_form.jinja
 #, python-format
 msgid "Edit product %(name)s"
@@ -3784,6 +3788,10 @@ msgstr ""
 "Les actions automatiques vous permettent de planifier des modifications du "
 "produit à l'avance."
 
+#: counter/templates/counter/product_form.jinja
+msgid "Add action"
+msgstr "Ajouter une action"
+
 #: counter/templates/counter/product_list.jinja
 msgid "Product list"
 msgstr "Liste des produits"