form commande, avec un peu de js on a un form imbriqué fonctionnel

src/PotageBundle/Form/Membre/CommandeType.php

@@ -18,6 +18,8 @@ class CommandeType extends AbstractType
             ->add('commandeLegumes', CollectionType::class, array(
                 'entry_type' => CommandeLegumesType::class,
                 'entry_options' => array('label' => false),
+                'by_reference' => false,
+                'allow_add' => true
             ))
             ->add('sauver', SubmitType::class, array(
                 'label' => 'Enregistrer',

src/PotageBundle/Resources/views/Membre/detailCommande.html.twig

@@ -42,13 +42,16 @@
 {% endfor %}
 
 {{ form_start(formCommande) }}
-    {% for legume in formCommande.commandeLegumes %}
-        {{ form_row(legume.prixUnitaire) }}
-        {{ form_row(legume.unite) }}
-        {{ form_row(legume.quantite) }}
-        {{ form_row(legume.prix) }}
-    {% endfor %}
-
+    <ul class="commandeLegumes" data-prototype="{{ form_widget(formCommande.commandeLegumes.vars.prototype)|e }}">
+        {% for legume in formCommande.commandeLegumes %}
+            <li>
+                {{ form_row(legume.prixUnitaire) }}
+                {{ form_row(legume.unite) }}
+                {{ form_row(legume.quantite) }}
+                {{ form_row(legume.prix) }}
+            </li>
+        {% endfor %}
+    </ul>
     {{ form_row(formCommande.prixTotal) }}
 {{ form_end(formCommande) }}
 

src/PotageBundle/Resources/views/Membre/today.js

@@ -12,3 +12,54 @@ $("#offre div.item")
         $(this).transition({ scale: 1 }, 200, 'linear');
         $(this).find('.overlay').transition({ opacity: 0 }, 200, 'linear');
     });
+
+/*
+*   Formulaire imbriqués, ajouter/enlever des légumes à la commande
+*   https://symfony.com/doc/3.4/form/form_collections.html
+*/
+let holder;
+let addLink = $('<a href="#" class="add-legume">+</a>');
+let newLi = $('<li></li>').append(addLink);
+
+jQuery(document).ready(function() {
+
+    holder = $('ul.commandeLegumes');
+    holder.append(newLi);
+
+    holder.data('index', holder.find(':input').length);
+    addLink.on('click', function(e)
+    {
+        addForm(holder, newLi);
+    });
+});
+
+function addForm(holder, newLi)
+{
+    let prototype = holder.data('prototype');
+    let index = holder.data('index');
+
+    let newForm = prototype;
+    // You need this only if you didn't set 'label' => false in your tags field in TaskType
+    // Replace '__name__label__' in the prototype's HTML to
+    // instead be a number based on how many items we have
+    // newForm = newForm.replace(/__name__label__/g, index);
+
+    // Replace '__name__' in the prototype's HTML to
+    // instead be a number based on how many items we have
+    newForm = newForm.replace(/__name__/g, index);
+
+    holder.data('index', index + 1);
+
+    let newFormLi = $('<li></li>').append(newForm);
+
+    newFormLi.append('<a href="#" class="remove-legume">x</a>');
+
+    newLi.before(newFormLi);
+
+    $('.remove-legume').click(function(e)
+    {
+        e.preventDefault();
+        $(this).parent().remove();
+        return false;
+    });
+}
\ No newline at end of file