Collection: amélioration + lancement d'événements

Form/Type/ChillCollectionType.php

@@ -23,6 +23,12 @@ use Symfony\Component\OptionsResolver\OptionsResolver;
 use Symfony\Component\Form\FormInterface;
 
 /**
+ * Available options :
+ * 
+ * - `button_add_label`
+ * - `button_remove_label`
+ * - `identifier`: an identifier to identify the kind of collecton. Useful if some
+ *  javascript should be launched associated to `add_entry`, `remove_entry` events.
  * 
  *
  * @author Julien Fastré <julien.fastre@champs-libres.coop>
@@ -34,7 +40,8 @@ class ChillCollectionType extends AbstractType
         $resolver
             ->setDefaults([
                 'button_add_label' => 'Add an entry',
-                'button_remove_label' => 'Remove entry'
+                'button_remove_label' => 'Remove entry',
+                'identifier' => ''
             ]);
     }
     
@@ -44,6 +51,7 @@ class ChillCollectionType extends AbstractType
         $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'];
+        $view->vars['identifier'] = $options['identifier'];
     }
     
     public function getParent()

Resources/public/js/collection/collection.scss

@@ -0,0 +1,23 @@
+div.chill-collection {
+    ul.chill-collection__list {
+        list-style: none;
+        padding: 0;
+        margin-bottom: 1.5rem;
+        
+        li.chill-collection__list__entry:nth-child(2n) {
+            background-color: var(--chill-light-gray);
+            padding: 0.5rem 0;
+        }
+        
+        // all entries, except the last one
+        li.chill-collection__list__entry:nth-last-child(1n+2) {
+            margin-bottom: 1rem;
+        }
+    }
+    
+    button.chill-collection__button--add {
+        
+        
+    }
+}
+

Resources/public/js/collection/collections.js

@@ -1,22 +1,46 @@
 /**
- * Exemple d'utilisation
+ * Javascript file which handle ChillCollectionType
+ * 
+ * Two events are emitted by this module, both on window and on collection / ul. 
+ * 
+ * Collection (an UL element) and entry (a li element) are associated with those
+ * events.
  * 
- * ```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>
  * ```
+ * window.addEventListener('collection-add-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
  * 
- * Le javascript est initialisé dans `forms.js`
+ * window.addEventListener('collection-remove-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
  * 
+ * collection.addEventListener('collection-add-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
+ * 
+ * collection.addEventListener('collection-remove-entry', function(e) {
+ *   console.log(e.detail.collection);
+ *   console.log(e.detail.entry);
+ * });
+ * ```
+ */
+require('./collection.scss');
+
+class CollectionEvent {
+    constructor(collection, entry) {
+        this.collection = collection;
+        this.entry = entry;
+    }
+}
+
+/**
+ * 
+ * @param {type} button
+ * @returns {handleAdd}
  */
 var handleAdd = function(button) {
     var
@@ -24,32 +48,41 @@ var handleAdd = function(button) {
         prototype = button.dataset.formPrototype,
         collection = document.querySelector('ul[data-collection-name="'+form_name+'"]'),
         entry = document.createElement('li'),
+        event = new CustomEvent('collection-add-entry', { detail: { collection: collection, entry: entry } }),
         counter = collection.childNodes.length,
         content
         ;
     content = prototype.replace(new RegExp('__name__', 'g'), counter);
     entry.innerHTML = content;
+    entry.classList.add('chill-collection__list__entry');
     initializeRemove(collection, entry);
     collection.appendChild(entry);
+    
+    collection.dispatchEvent(event);
+    window.dispatchEvent(event);
 };
 
 var initializeRemove = function(collection, entry) {
     var
         button = document.createElement('button'),
+        isPersisted = entry.dataset.collectionIsPersisted,
         content = collection.dataset.collectionButtonRemoveLabel,
-        allowDelete = collection.dataset.collectionAllowDelete
+        allowDelete = collection.dataset.collectionAllowDelete,
+        event = new CustomEvent('collection-remove-entry', { detail: { collection: collection, entry: entry } })
         ;
         
-    if (allowDelete == '0') {
+    if (allowDelete === '0' && isPersisted === '1') {
         return;
     }
     
+    button.classList.add('sc-button', 'bt-delete');
     button.textContent = content;
     
     button.addEventListener('click', function(e) {
         e.preventDefault();
         entry.remove();
-        console.log('click remove');
+        collection.dispatchEvent(event);
+        window.dispatchEvent(event);
     });
     
     entry.appendChild(button);
@@ -65,13 +98,12 @@ window.addEventListener('load', function() {
         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;
+        let entries = collections[i].querySelectorAll('li');
         
         for (let j = 0; j < entries.length; j ++) {
             initializeRemove(collections[i], entries[j]);
@@ -79,3 +111,5 @@ window.addEventListener('load', function() {
     }
 });
 
+
+

Resources/public/sass/custom/config/_colors.scss

@@ -6,8 +6,8 @@ $chill-yellow: #eec84a;
 $chill-orange: #e2793d;
 $chill-red: #df4949;
 $chill-gray: #ececec;
-$chill-beige :#cabb9f;
-$chill-pink :#dd506d;
+$chill-beige: #cabb9f;
+$chill-pink: #dd506d;
 $chill-dark-gray: #333333;
 $chill-light-gray: #b2b2b2;
 $chill-llight-gray: $chill-light-gray;
@@ -32,3 +32,34 @@ $yellow: $chill-yellow;
 $black: #111111;
 $white: #ffffff;
 $light-grey: $chill-light-gray;
+
+/* 
+  due to a bug in sass, we must re-declare the variable in css
+  (use of a sass variable after -- does not work)
+*/
+:root {
+    --chill-blue: #334d5c;
+    --chill-green: #43b29d;
+    --chill-green-dark: #328474;
+    --chill-yellow:  #eec84a;
+    --chill-orange: #e2793d;
+    --chill-red: #df4949;
+    --chill-gray: #ececec;
+    --chill-beige: #cabb9f;
+    --chill-pink: #dd506d;
+    --chill-dark-gray: #333333;
+    --chill-light-gray: #b2b2b2;
+    --chill-llight-gray: #b2b2b2;
+
+    --dark-grey: #333333;
+
+    --orange: #e2793d;
+    --red: #df4949;
+    --green: #43b29d;
+    --blue: #334d5c;
+    --yellow: #eec84a;
+
+    --black: #111111;
+    --white: #ffffff;
+    --light-grey: #b2b2b2;
+}

Resources/views/Form/fields.html.twig

@@ -160,17 +160,19 @@
 {% 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>
+    <div class="chill-collection">
+        <ul class="chill-collection__list" data-collection-name="{{ form.vars.name|escape('html_attr') }}" data-collection-identifier="{{ form.vars.identifier|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') }}" >
+            {% for entry in form %}
+                <li class="chill-collection__list__entry" data-collection-is-persisted="1">
+                    <div>
+                        {{ form_widget(entry) }}
+                    </div>
+                </li>
+            {% endfor %}
+        </ul>
+
+        {% if form.vars.allow_add == 1 %}
+        <button class="chill-collection__button--add sc-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>
+    </div>
     {% endif %}
 {% endblock %}