From 50e80907029cb44d9323cbbbdff52aa9dbe9b563 Mon Sep 17 00:00:00 2001
From: tienvx <tien.xuan.vo@gmail.com>
Date: Fri, 5 Nov 2021 00:18:17 +0700
Subject: [PATCH] Update unique collection id

---
 src/Form/CollectionJsType.php                 |  2 +-
 src/Resources/assets/dist/controller.js       | 10 +++---
 src/Resources/assets/src/controller.js        | 10 +++---
 src/Resources/assets/test/controller.test.js  | 34 +++++++++----------
 .../views/bootstrap_base_layout.html.twig     | 10 +++---
 src/Resources/views/form_div_layout.html.twig | 10 +++---
 6 files changed, 38 insertions(+), 38 deletions(-)

diff --git a/src/Form/CollectionJsType.php b/src/Form/CollectionJsType.php
index 9eceabe..abfb742 100644
--- a/src/Form/CollectionJsType.php
+++ b/src/Form/CollectionJsType.php
@@ -48,7 +48,7 @@ public function buildView(FormView $view, FormInterface $form, array $options):
             'allow_move_down' => $options['allow_move_down'],
             'prototype_name' => $options['prototype_name'],
             'call_post_add_on_init' => $options['call_post_add_on_init'],
-            'collection_id' => uniqid('collection-id-'),
+            'collection_id' => uniqid(),
         ]);
     }
 
diff --git a/src/Resources/assets/dist/controller.js b/src/Resources/assets/dist/controller.js
index f803085..8e6b31d 100644
--- a/src/Resources/assets/dist/controller.js
+++ b/src/Resources/assets/dist/controller.js
@@ -108,21 +108,21 @@ var _default = /*#__PURE__*/function (_Controller) {
 
       if (this.allowAddValue) {
         options = _objectSpread(_objectSpread({}, options), {}, {
-          other_btn_add: this.element.querySelector(".".concat(this.collectionIdValue, ".collection-js-add-btn")),
-          btn_add_selector: ".".concat(this.collectionIdValue, ".collection-js-elem-add")
+          other_btn_add: this.element.querySelector(".collection-js-".concat(this.collectionIdValue, "-add-btn")),
+          btn_add_selector: ".collection-js-".concat(this.collectionIdValue, "-elem-add")
         });
       }
 
       if (this.allowDeleteValue) {
-        options.btn_delete_selector = ".".concat(this.collectionIdValue, ".collection-js-elem-remove");
+        options.btn_delete_selector = ".collection-js-".concat(this.collectionIdValue, "-elem-remove");
       }
 
       if (this.allowMoveUpValue) {
-        options.btn_up_selector = ".".concat(this.collectionIdValue, ".collection-js-elem-up");
+        options.btn_up_selector = ".collection-js-".concat(this.collectionIdValue, "-elem-up");
       }
 
       if (this.allowMoveDownValue) {
-        options.btn_down_selector = ".".concat(this.collectionIdValue, ".collection-js-elem-down");
+        options.btn_down_selector = ".collection-js-".concat(this.collectionIdValue, "-elem-down");
       }
 
       (0, _symfonyCollectionJs["default"])(this.element.querySelector('.collection-js-root'), options);
diff --git a/src/Resources/assets/src/controller.js b/src/Resources/assets/src/controller.js
index d7f80ca..bf10cb7 100644
--- a/src/Resources/assets/src/controller.js
+++ b/src/Resources/assets/src/controller.js
@@ -35,18 +35,18 @@ export default class extends Controller {
         if (this.allowAddValue) {
             options = {
                 ...options,
-                other_btn_add: this.element.querySelector(`.${this.collectionIdValue}.collection-js-add-btn`),
-                btn_add_selector: `.${this.collectionIdValue}.collection-js-elem-add`,
+                other_btn_add: this.element.querySelector(`.collection-js-${this.collectionIdValue}-add-btn`),
+                btn_add_selector: `.collection-js-${this.collectionIdValue}-elem-add`,
             };
         }
         if (this.allowDeleteValue) {
-            options.btn_delete_selector = `.${this.collectionIdValue}.collection-js-elem-remove`;
+            options.btn_delete_selector = `.collection-js-${this.collectionIdValue}-elem-remove`;
         }
         if (this.allowMoveUpValue) {
-            options.btn_up_selector = `.${this.collectionIdValue}.collection-js-elem-up`;
+            options.btn_up_selector = `.collection-js-${this.collectionIdValue}-elem-up`;
         }
         if (this.allowMoveDownValue) {
-            options.btn_down_selector = `.${this.collectionIdValue}.collection-js-elem-down`;
+            options.btn_down_selector = `.collection-js-${this.collectionIdValue}-elem-down`;
         }
 
         formCollection(this.element.querySelector('.collection-js-root'), options);
diff --git a/src/Resources/assets/test/controller.test.js b/src/Resources/assets/test/controller.test.js
index 7fe6136..8477ae3 100644
--- a/src/Resources/assets/test/controller.test.js
+++ b/src/Resources/assets/test/controller.test.js
@@ -26,7 +26,7 @@ describe('CollectionJsController', () => {
                 data-collection-js-allow-move-up-value="true"
                 data-collection-js-allow-move-down-value="true"
                 data-collection-js-call-post-add-on-init-value="true"
-                data-collection-js-collection-id-value="collection-id-618407d4bfa41"
+                data-collection-js-collection-id-value="618407d4bfa41"
             >
                 <div
                     class="accordion collection-js-root"
@@ -36,10 +36,10 @@ describe('CollectionJsController', () => {
                         <i class=&quot;fas fw fa-chevron-right form-collection-item-collapse-marker&quot;></i>
                         </button>
                         <div class=&quot;btn-group collection-js-actions&quot; role=&quot;group&quot; aria-label=&quot;Actions&quot;>
-                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-primary collection-id-618407d4bfa41 collection-js-elem-add&quot; title=&quot;Add a new item&quot;><i class=&quot;fa fa-plus&quot;></i></button>
-                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-secondary collection-id-618407d4bfa41 collection-js-elem-up&quot; title=&quot;Move item up&quot;><i class=&quot;fa fa-sort-up&quot;></i></button>
-                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-secondary collection-id-618407d4bfa41 collection-js-elem-down&quot; title=&quot;Move item down&quot;><i class=&quot;fa fa-sort-down&quot;></i></button>
-                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-danger collection-id-618407d4bfa41 collection-js-elem-remove&quot; title=&quot;Remove the item&quot;><i class=&quot;fa fa-trash-alt&quot;></i></button>
+                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-primary collection-js-618407d4bfa41-elem-add&quot; title=&quot;Add a new item&quot;><i class=&quot;fa fa-plus&quot;></i></button>
+                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-secondary collection-js-618407d4bfa41-elem-up&quot; title=&quot;Move item up&quot;><i class=&quot;fa fa-sort-up&quot;></i></button>
+                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-secondary collection-js-618407d4bfa41-elem-down&quot; title=&quot;Move item down&quot;><i class=&quot;fa fa-sort-down&quot;></i></button>
+                        <button type=&quot;button&quot; class=&quot;btn btn-link btn-link-danger collection-js-618407d4bfa41-elem-remove&quot; title=&quot;Remove the item&quot;><i class=&quot;fa fa-trash-alt&quot;></i></button>
                         </div>
                         </h2>
                         <div class=&quot;accordion-collapse collapse show&quot; style=&quot;&quot; id=&quot;tags___name__-contents&quot;>
@@ -55,10 +55,10 @@ describe('CollectionJsController', () => {
                             <i class="fas fw fa-chevron-right form-collection-item-collapse-marker"></i>
                             </button>
                             <div class="btn-group collection-js-actions" role="group" aria-label="Actions">
-                                <button type="button" class="btn btn-link btn-link-primary collection-id-618407d4bfa41 collection-js-elem-add" title="Add a new item"><i class="fa fa-plus"></i></button>
-                                <button type="button" class="btn btn-link btn-link-secondary collection-id-618407d4bfa41 collection-js-elem-up" title="Move item up"><i class="fa fa-sort-up"></i></button>
-                                <button type="button" class="btn btn-link btn-link-secondary collection-id-618407d4bfa41 collection-js-elem-down" title="Move item down"><i class="fa fa-sort-down"></i></button>
-                                <button type="button" class="btn btn-link btn-link-danger collection-id-618407d4bfa41 collection-js-elem-remove" title="Remove the item"><i class="fa fa-trash-alt"></i></button>
+                                <button type="button" class="btn btn-link btn-link-primary collection-js-618407d4bfa41-elem-add" title="Add a new item"><i class="fa fa-plus"></i></button>
+                                <button type="button" class="btn btn-link btn-link-secondary collection-js-618407d4bfa41-elem-up" title="Move item up"><i class="fa fa-sort-up"></i></button>
+                                <button type="button" class="btn btn-link btn-link-secondary collection-js-618407d4bfa41-elem-down" title="Move item down"><i class="fa fa-sort-down"></i></button>
+                                <button type="button" class="btn btn-link btn-link-danger collection-js-618407d4bfa41-elem-remove" title="Remove the item"><i class="fa fa-trash-alt"></i></button>
                             </div>
                         </h2>
                         <div class="accordion-collapse collapse show" style="" id="tags_0-contents">
@@ -68,7 +68,7 @@ describe('CollectionJsController', () => {
                         </div>
                     </div>
                 </div>
-                <button type="button" class="btn btn-link collection-id-618407d4bfa41 collection-js-add-btn">
+                <button type="button" class="btn btn-link collection-js-618407d4bfa41-add-btn">
                     <i class="fa fa-plus pr-1"></i>
                     Add a new item
                 </button>
@@ -107,7 +107,7 @@ describe('CollectionJsController', () => {
         await startStimulus();
 
         // Click the add button
-        container.querySelector('.collection-js-add-btn').click();
+        container.querySelector('.collection-js-618407d4bfa41-add-btn').click();
 
         await waitFor(() => expect(container.querySelectorAll('.accordion-item').length).toBe(2));
 
@@ -128,7 +128,7 @@ describe('CollectionJsController', () => {
         await startStimulus();
 
         // Click the element add button
-        container.querySelector('.collection-js-elem-add').click();
+        container.querySelector('.collection-js-618407d4bfa41-elem-add').click();
 
         await waitFor(() => expect(container.querySelectorAll('.accordion-item').length).toBe(2));
 
@@ -149,7 +149,7 @@ describe('CollectionJsController', () => {
         await startStimulus();
 
         // Click the element remove button
-        container.querySelector('.collection-js-elem-remove').click();
+        container.querySelector('.collection-js-618407d4bfa41-elem-remove').click();
 
         await waitFor(() => expect(container.querySelectorAll('.accordion-item').length).toBe(0));
 
@@ -171,8 +171,8 @@ describe('CollectionJsController', () => {
         await startStimulus();
 
         // Click the add button, then element up button
-        container.querySelector('.collection-js-add-btn').click();
-        container.querySelectorAll('.collection-js-elem-up')[1].click();
+        container.querySelector('.collection-js-618407d4bfa41-add-btn').click();
+        container.querySelectorAll('.collection-js-618407d4bfa41-elem-up')[1].click();
 
         await waitFor(() => expect(container.querySelectorAll('.accordion-item').length).toBe(2));
 
@@ -193,8 +193,8 @@ describe('CollectionJsController', () => {
         await startStimulus();
 
         // Click the add button, then element down button
-        container.querySelector('.collection-js-add-btn').click();
-        container.querySelectorAll('.collection-js-elem-down')[0].click();
+        container.querySelector('.collection-js-618407d4bfa41-add-btn').click();
+        container.querySelectorAll('.collection-js-618407d4bfa41-elem-down')[0].click();
 
         await waitFor(() => expect(container.querySelectorAll('.accordion-item').length).toBe(2));
 
diff --git a/src/Resources/views/bootstrap_base_layout.html.twig b/src/Resources/views/bootstrap_base_layout.html.twig
index d6c50e7..779e3ba 100644
--- a/src/Resources/views/bootstrap_base_layout.html.twig
+++ b/src/Resources/views/bootstrap_base_layout.html.twig
@@ -1,7 +1,7 @@
 {% use "@CollectionJs/form_div_layout.html.twig" %}
 
 {% block collection_js_add_button %}
-    <button type="button" class="btn btn-link {{ form_parent(form).vars.collection_id }} collection-js-add-btn">
+    <button type="button" class="btn btn-link collection-js-{{ collection_id }}-add-btn">
         <i class="fa fa-plus pr-1"></i>
         {{ 'action.add_new_item'|trans }}
     </button>
@@ -11,25 +11,25 @@
     <div class="btn-group collection-js-actions" role="group" aria-label="Actions">
         {% apply spaceless %}
             {% if form_parent(form).vars.allow_add %}
-                <button type="button" class="btn btn-link btn-link-primary {{ form_parent(form).vars.collection_id }} collection-js-elem-add"
+                <button type="button" class="btn btn-link btn-link-primary collection-js-{{ form_parent(form).vars.collection_id }}-elem-add"
                         title="{{ 'action.add_new_item'|trans }}">
                     <i class="fa fa-plus"></i>
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_move_up %}
-                <button type="button" class="btn btn-link btn-link-secondary {{ form_parent(form).vars.collection_id }} collection-js-elem-up"
+                <button type="button" class="btn btn-link btn-link-secondary collection-js-{{ form_parent(form).vars.collection_id }}-elem-up"
                         title="{{ 'action.move_item_up'|trans }}">
                     <i class="fa fa-arrow-up"></i>
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_move_down %}
-                <button type="button" class="btn btn-link btn-link-secondary {{ form_parent(form).vars.collection_id }} collection-js-elem-down"
+                <button type="button" class="btn btn-link btn-link-secondary collection-js-{{ form_parent(form).vars.collection_id }}-elem-down"
                         title="{{ 'action.move_item_down'|trans }}">
                     <i class="fa fa-arrow-down"></i>
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_delete %}
-                <button type="button" class="btn btn-link btn-link-danger {{ form_parent(form).vars.collection_id }} collection-js-elem-remove"
+                <button type="button" class="btn btn-link btn-link-danger collection-js-{{ form_parent(form).vars.collection_id }}-elem-remove"
                         title="{{ 'action.remove_item'|trans }}">
                     <i class="far fa-trash-alt"></i>
                 </button>
diff --git a/src/Resources/views/form_div_layout.html.twig b/src/Resources/views/form_div_layout.html.twig
index 9eced31..082d436 100644
--- a/src/Resources/views/form_div_layout.html.twig
+++ b/src/Resources/views/form_div_layout.html.twig
@@ -28,7 +28,7 @@
 {% endblock collection_js_widget %}
 
 {% block collection_js_add_button %}
-    <button type="button" class="{{ form_parent(form).vars.collection_id }} collection-js-add-btn">
+    <button type="button" class="collection-js-{{ collection_id }}-add-btn">
         {{ 'action.add_new_item'|trans }}
     </button>
 {% endblock collection_js_add_button %}
@@ -59,22 +59,22 @@
     <div>
         {% apply spaceless %}
             {% if form_parent(form).vars.allow_add %}
-                <button type="button" class="{{ form_parent(form).vars.collection_id }} collection-js-elem-add">
+                <button type="button" class="collection-js-{{ form_parent(form).vars.collection_id }}-elem-add">
                     {{ 'action.add_new_item'|trans }}
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_move_up %}
-                <button type="button" class="{{ form_parent(form).vars.collection_id }} collection-js-elem-up">
+                <button type="button" class="collection-js-{{ form_parent(form).vars.collection_id }}-elem-up">
                     {{ 'action.move_item_up'|trans }}
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_move_down %}
-                <button type="button" class="{{ form_parent(form).vars.collection_id }} collection-js-elem-down">
+                <button type="button" class="collection-js-{{ form_parent(form).vars.collection_id }}-elem-down">
                     {{ 'action.move_item_down'|trans }}
                 </button>
             {% endif %}
             {% if form_parent(form).vars.allow_delete %}
-                <button type="button" class="{{ form_parent(form).vars.collection_id }} collection-js-elem-remove">
+                <button type="button" class="collection-js-{{ form_parent(form).vars.collection_id }}-elem-remove">
                     {{ 'action.remove_item'|trans }}
                 </button>
             {% endif %}