adding a collection type for chill

Form/Type/ChillCollectionType.php

@@ -0,0 +1,53 @@
+<?php
+/*
+ * Copyright (C) 2018 Julien Fastré <julien.fastre@champs-libres.coop>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+namespace Chill\MainBundle\Form\Type;
+
+use Symfony\Component\Form\AbstractType;
+use Symfony\Component\Form\FormView;
+use Symfony\Component\OptionsResolver\OptionsResolver;
+use Symfony\Component\Form\FormInterface;
+
+/**
+ * 
+ *
+ * @author Julien Fastré <julien.fastre@champs-libres.coop>
+ */
+class ChillCollectionType extends AbstractType
+{
+    public function configureOptions(OptionsResolver $resolver)
+    {
+        $resolver
+            ->setDefaults([
+                'button_add_label' => 'Add an entry',
+                'button_remove_label' => 'Remove entry'
+            ]);
+    }
+    
+    public function buildView(FormView $view, FormInterface $form, array $options)
+    {
+        $view->vars['button_add_label'] = $options['button_add_label'];
+        $view->vars['button_remove_label'] = $options['button_remove_label'];
+        $view->vars['allow_delete'] = (int) $options['allow_delete'];
+        $view->vars['allow_add'] = (int) $options['allow_add'];
+    }
+    
+    public function getParent()
+    {
+        return \Symfony\Component\Form\Extension\Core\Type\CollectionType::class;
+    }
+}

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 %}

chill.webpack.config.js

@@ -21,6 +21,7 @@ global.chill = chill;
 require('./Resources/public/sass/scratch.scss');
 require('./Resources/public/css/chillmain.css');
 require('./Resources/public/css/pikaday.css');
+require('./Resources/public/js/collection/collections.js');
 //require('./Resources/public/css/scratch.css');
 //require('./Resources/public/css/select2/select2.css');
 require('select2/dist/css/select2.css');