Symfony Form Collection & Twig / Macros

database_structure.txt

Facture
- id
- user_id
- client_id
- date
- total

FactureItems
- id
- facture_id
- name
- quantity
- unit_price
- amount

how_to_use_it.txt

============== FORM ==============

- Create FactureType & FactureItemType
- FactureType wil have factureItems (check in Facture entity) of type CollectionType. Update Facture entity attribute factureItems : cascade={"persist"}
- FactureItemType will be generated from entity FactureItems

============== CONTROLLER ==============

- $facture = new Facture();
- $form = $this->createForm(FactureType::class, $facture);
- return [ 'form' => $form->createView(),]


============== TWIG ==============

- 'macros/prototype.html.twig'

- {% macro factureItemsMacros(theForm) %}
- form_widget(theForm.name)
- .....
- {% endmacro factureItemsMacros) %}

- 'any_twig_path/any_twig_file.html.twig'

- import 'macros/prototype.html.twig' as prototype
- <div id = "form-wrapper" 
-      data-index = "{{ form.factureItems|lenght }}"
- ---> EITHER
-      data-prototype="{{ prototype.factureItems(form.factureItems.vars.prototype)|e('html_attr') }}
- ---> OR
-      data-prototype="{{ form_widget(form.factureItems.vars.prototype)|e('html_attr') }}
- ---> EOF
- > some html stuffs here.... </div>

- Displaying in loop

- {% for items in form.factureItems %}
-   {{ form_widget(items.name) }}
-   {{ form_widget(items.quantity) }}
-   {{ form_widget(items.unitPrice) }}
- {% endfor %}

javascript_logic.txt

This will be called by a JS Event (on click,...) 

============== Add the form ==============

- var collection    = $("#form-wrapper");
- var prototype     = collection.data('prototype');
- var idx           = collection.data('index');

- var form = prototype.replace(/__name__/g, idx); 

- collection.data('index', idx + 1);
- collection.append(form);

============== Remove the form ==============

$(document).on('click', '.remove-facture-collection', function (e) {
    e.preventDefault();
    $(this).closest('tr').remove();
});