Merge c17156d into 4c46097

README.md

@@ -64,7 +64,47 @@ Available themes:
 
 ### Easyadmin
 
-TBD
+Create webpack entry:
+
+```javascript
+// webpack.config.js
+.addEntry('stimulus', './assets/stimulus.js')
+```
+
+Then create that javascript file:
+
+```javascript
+// assets/stimulus.js
+
+// start the Stimulus application
+import './bootstrap';
+```
+
+Use the new collection type in the easyadmin controller:
+
+```php
+namespace App\Controller\EasyAdmin;
+
+use Tienvx\UX\CollectionJs\Form\CollectionJsType;
+
+class FormFieldReferenceController extends AbstractCrudController
+{
+    public function configureCrud(Crud $crud): Crud
+    {
+        return $crud
+            // ...
+            ->setFormThemes(['@EasyAdmin/crud/form_theme.html.twig', '@CollectionJs/bootstrap_5_layout.html.twig']);
+    }
+
+    public function configureFields(string $pageName): iterable
+    {
+        yield CollectionField::new('collectionSimple', 'Collection Field (simple)')
+                ->setFormType(CollectionJsType::class)
+                ->setFormTypeOption('entry_type', CollectionSimpleType::class)
+                ->addWebpackEncoreEntries('stimulus');
+    }
+}
+```
 
 ## Contributing
 Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

src/Resources/views/bootstrap_3_layout.html.twig

@@ -19,7 +19,7 @@
         </div>
         <div id="{{ id }}-contents" class="panel-collapse collapse {{ not form.vars.valid ? 'in' }}" role="tabpanel">
             <div class="panel-body">
-                {{ form_widget(form) }}
+                {{ block('collection_js_accordion_item_body') }}
             </div>
         </div>
     </div>

src/Resources/views/bootstrap_4_layout.html.twig

@@ -19,7 +19,7 @@
         </div>
         <div id="{{ id }}-contents" class="collapse {{ not form.vars.valid ? 'show' }}">
             <div class="card-body">
-                {{ form_widget(form) }}
+                {{ block('collection_js_accordion_item_body') }}
             </div>
         </div>
     </div>

src/Resources/views/bootstrap_5_layout.html.twig

@@ -19,7 +19,7 @@
         </h2>
         <div id="{{ id }}-contents" class="accordion-collapse collapse {{ not form.vars.valid ? 'show' }}">
             <div class="accordion-body">
-                {{ form_widget(form) }}
+                {{ block('collection_js_accordion_item_body') }}
             </div>
         </div>
     </div>

src/Resources/views/bootstrap_base_layout.html.twig

@@ -19,19 +19,19 @@
             {% if form_parent(form).vars.allow_move_up %}
                 <button type="button" class="btn btn-link btn-link-secondary collection-js-elem-up"
                         title="{{ 'action.move_item_up'|trans }}">
-                    <i class="fa fa-sort-up"></i>
+                    <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 collection-js-elem-down"
                         title="{{ 'action.move_item_down'|trans }}">
-                    <i class="fa fa-sort-down"></i>
+                    <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 collection-js-elem-remove"
                         title="{{ 'action.remove_item'|trans }}">
-                    <i class="fa fa-trash-alt"></i>
+                    <i class="far fa-trash-alt"></i>
                 </button>
             {% endif %}
         {% endapply %}

src/Resources/views/form_div_layout.html.twig

@@ -81,6 +81,8 @@
     </div>
 {% endblock collection_js_actions %}
 
-{% block collection_entry_widget %}
-    {{ form_widget(form) }}
-{% endblock collection_entry_widget %}
+{% block collection_js_accordion_item_body %}
+    {% for child in form|filter(child => not child.rendered) %}
+        {{- form_row(child) -}}
+    {% endfor %}
+{% endblock collection_js_accordion_item_body %}