further improves collections, fixes naming issues

The class that marks collection childs for removal was renamed to more descriptive 'remove-on-collection-add' (from 'no-data') and now applies to any child element (not justt direct children). Collection items' ID is now decided by trying all numbers before one "slot" is free. This should fix all issues with items overwriting one another (inspired by Bootstrap's collection code: https://github.com/braincrafted/bootstrap-bundle/blob/v2.1.2/Resources/js/bc-bootstrap-collection.js#L42-L50).
ThreeSixtyEu · May 29, 2015 · 5536402 · 5536402
1 parent 4f16d42
commit 5536402
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js b/src/Sylius/Bundle/WebBundle/Resources/public/js/form-collection.js
@@ -15,10 +15,18 @@
         $(document).on('click', 'a[data-collection-button="add"]', function(e) {
             e.preventDefault();
             var collectionContainer = $('#' + $(this).data('collection'));
-            collectionContainer.children('.no-data').remove();
-            var isArray = collectionContainer.data('is-php-array');
+            collectionContainer.find('.remove-on-collection-add').remove();
             var prototype = $('#' + $(this).data('prototype')).data('prototype');
-            var item = prototype.replace(/__name__/g, collectionContainer.children().length + (undefined == isArray ? 0 : 1));
+
+            // Check if an element with this ID already exists.
+            // If it does, increase the count by one and try again
+            var id = prototype.match(/input.*?id="(.*?)"/);
+            var count = 0;
+            while ($('#' + id[1].replace(/__name__/g, count)).length > 0) {
+                count++;
+            }
+
+            var item = prototype.replace(/__name__/g, count);
             collectionContainer.append(item);
         });
 

diff --git a/...lius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig b/...lius/Bundle/WebBundle/Resources/views/Backend/Product/Form/_volume_based_config.html.twig
@@ -30,7 +30,7 @@
         </tr>
         </thead>
         <tbody id="sylius-assortment-product-pricing-ranks" class="collection-container"
-               data-prototype="{{ _self.volume_based_prototype(form)|e }}" data-is-php-array="true">
+               data-prototype="{{ _self.volume_based_prototype(form)|e }}">
         {% for rank in form.masterVariant.pricingConfiguration.children %}
             <tr class="sylius-assortment-product-pricing-ranks-item">
                 <td>{{ form_widget(rank.children.min) }}</td>
@@ -39,7 +39,7 @@
                 <td>{{ _self.volume_based_delete() }}</td>
             </tr>
         {% else %}
-            <tr class="no-data">
+            <tr class="remove-on-collection-add">
                 <td colspan="4">{{ "sylius.pricing.volume_based.no_results"|trans }}</td>
             </tr>
         {% endfor %}

diff --git a/...ndle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig b/...ndle/WebBundle/Resources/views/Backend/ProductVariant/Form/_volume_based_config.html.twig
@@ -30,7 +30,7 @@
         </tr>
         </thead>
         <tbody id="sylius-assortment-product-pricing-ranks" class="collection-container"
-               data-prototype="{{ _self.volume_based_prototype(form)|e }}" data-is-php-array="true">
+               data-prototype="{{ _self.volume_based_prototype(form)|e }}">
         {% for rank in form.pricingConfiguration.children %}
             <tr class="sylius-assortment-product-pricing-ranks-item">
                 <td>{{ form_widget(rank.children.min) }}</td>
@@ -39,7 +39,7 @@
                 <td>{{ _self.volume_based_delete() }}</td>
             </tr>
         {% else %}
-            <tr class="no-data">
+            <tr class="remove-on-collection-add">
                 <td colspan="4">{{ "sylius.pricing.volume_based.no_results"|trans }}</td>
             </tr>
         {% endfor %}