adding a collection type for chill

Resources/public/js/collection/collections.js

@@ -0,0 +1,81 @@
+/**
+ * Exemple d'utilisation
+ * 
+ * ```html
+ *  <ul id="form_profile_formations">
+ *      {% for formation in form.formations %}
+ *          <li>
+ *              <div data-removable data-label-remove-button="{{ 'Supprimer'|trans|e }}" >
+ *                  {{ form_row(formation) }}
+ *              </div>
+ *          </li>
+ *      {% endfor %}
+ *  </ul>
+ *
+ *  <button data-add-target="form_profile_formations" data-form-prototype="{{ ('<div data-removable data-label-remove-button="' ~ 'Supprimer'|trans ~'">' ~ form_widget(form.formations.vars.prototype) ~ '</div>')|e }}" >{{ 'Ajouter une formation'|trans }}</button>
+ * ```
+ * 
+ * Le javascript est initialisé dans `forms.js`
+ * 
+ */
+var handleAdd = function(button) {
+    var
+        form_name = button.dataset.collectionAddTarget,
+        prototype = button.dataset.formPrototype,
+        collection = document.querySelector('ul[data-collection-name="'+form_name+'"]'),
+        entry = document.createElement('li'),
+        counter = collection.childNodes.length,
+        content
+        ;
+    content = prototype.replace(new RegExp('__name__', 'g'), counter);
+    entry.innerHTML = content;
+    initializeRemove(collection, entry);
+    collection.appendChild(entry);
+};
+
+var initializeRemove = function(collection, entry) {
+    var
+        button = document.createElement('button'),
+        content = collection.dataset.collectionButtonRemoveLabel,
+        allowDelete = collection.dataset.collectionAllowDelete
+        ;
+        
+    if (allowDelete == '0') {
+        return;
+    }
+    
+    button.textContent = content;
+    
+    button.addEventListener('click', function(e) {
+        e.preventDefault();
+        entry.remove();
+        console.log('click remove');
+    });
+    
+    entry.appendChild(button);
+};
+
+window.addEventListener('load', function() {
+    var 
+        addButtons = document.querySelectorAll("button[data-collection-add-target]"),
+        collections = document.querySelectorAll("ul[data-collection-name]")
+        ;
+    
+    for (let i = 0; i < addButtons.length; i ++) {
+        let addButton = addButtons[i];
+        addButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            console.log('click');
+            handleAdd(e.target);
+        });
+    }
+    
+    for (let i = 0; i < collections.length; i ++) {
+        let entries = collections[i].querySelectorAll('li'), entry;
+        
+        for (let j = 0; j < entries.length; j ++) {
+            initializeRemove(collections[i], entries[j]);
+        }
+    }
+});
+

Resources/views/Form/fields.html.twig

@@ -158,3 +158,19 @@
     {{ form_row(form.order) }}
     
 {% endblock %}
+
+{% block chill_collection_widget %}
+    <ul data-collection-name="{{ form.vars.name|escape('html_attr') }}" data-collection-button-remove-label="{{ form.vars.button_remove_label|trans|e }}" data-collection-allow-add="{{ form.vars.allow_add|escape('html_attr') }}" data-collection-allow-delete="{{ form.vars.allow_delete|escape('html_attr') }}">
+        <li>
+            <div>
+                {% for entry in form %}
+                    {{ form_widget(entry) }}
+                {% endfor %}
+            </div>
+        </li>
+    </ul>
+    
+    {% if form.vars.allow_add == 1 %}
+    <button data-collection-add-target="{{ form.vars.name|escape('html_attr') }}" data-form-prototype="{{ ('<div>' ~ form_widget(form.vars.prototype) ~ '</div>')|escape('html_attr') }}" >{{ form.vars.button_add_label|trans }}</button>
+    {% endif %}
+{% endblock %}