various improvements on 3party

src/Bundle/ChillMainBundle/Resources/public/lib/collection/index.js

@@ -1,27 +1,27 @@
 /**
  * Javascript file which handle ChillCollectionType
- * 
- * Two events are emitted by this module, both on window and on collection / ul. 
- * 
+ *
+ * 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.
- * 
+ *
  * ```
  * window.addEventListener('collection-add-entry', function(e) {
  *   console.log(e.detail.collection);
  *   console.log(e.detail.entry);
  * });
- * 
+ *
  * 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);
@@ -38,7 +38,7 @@ class CollectionEvent {
 }
 
 /**
- * 
+ *
  * @param {type} button
  * @returns {handleAdd}
  */
@@ -47,6 +47,7 @@ var handleAdd = function(button) {
         form_name = button.dataset.collectionAddTarget,
         prototype = button.dataset.formPrototype,
         collection = document.querySelector('ul[data-collection-name="'+form_name+'"]'),
+        empty_explain = collection.querySelector('li[data-collection-empty-explain]'),
         entry = document.createElement('li'),
         event = new CustomEvent('collection-add-entry', { detail: { collection: collection, entry: entry } }),
         counter = collection.childNodes.length,
@@ -56,8 +57,11 @@ var handleAdd = function(button) {
     entry.innerHTML = content;
     entry.classList.add('entry');
     initializeRemove(collection, entry);
+    if (empty_explain !== null) {
+        empty_explain.remove();
+    }
     collection.appendChild(entry);
-    
+
     collection.dispatchEvent(event);
     window.dispatchEvent(event);
 };
@@ -70,30 +74,30 @@ var initializeRemove = function(collection, entry) {
         allowDelete = collection.dataset.collectionAllowDelete,
         event = new CustomEvent('collection-remove-entry', { detail: { collection: collection, entry: entry } })
         ;
-        
+
     if (allowDelete === '0' && isPersisted === '1') {
         return;
     }
-    
+
     button.classList.add('btn', 'btn-delete', 'remove-entry');
     button.textContent = content;
-    
+
     button.addEventListener('click', function(e) {
         e.preventDefault();
         entry.remove();
         collection.dispatchEvent(event);
         window.dispatchEvent(event);
     });
-    
+
     entry.appendChild(button);
 };
 
 window.addEventListener('load', function() {
-    var 
+    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) {
@@ -101,11 +105,15 @@ window.addEventListener('load', function() {
             handleAdd(e.target);
         });
     }
-    
+
     for (let i = 0; i < collections.length; i ++) {
         let entries = collections[i].querySelectorAll(':scope > li');
-        
+
         for (let j = 0; j < entries.length; j ++) {
+            console.log(entries[j].dataset);
+            if (entries[j].dataset.collectionEmptyExplain === "1") {
+                continue;
+            }
             initializeRemove(collections[i], entries[j]);
         }
     }

src/Bundle/ChillMainBundle/Resources/views/Form/fields.html.twig

@@ -168,6 +168,10 @@
                         {{ form_widget(entry) }}
                     </div>
                 </li>
+            {% else %}
+                <li data-collection-empty-explain="1">
+                    <span class="chill-no-data-statement">{{ form.vars.empty_collection_explain|default('No item')|trans }}</span>
+                </li>
             {% endfor %}
         </ul>