Merge pull request #11 from tienvx/implement-collection-entry-widget-…

…block Implement collection entry widget block
tienvx · Oct 6, 2021 · 371f78e · 371f78e
2 parents d4a1d93 + 25272a7
commit 371f78e
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 28 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -22,7 +22,7 @@ jobs:
       uses: actions/checkout@v2
 
     - name: Install
-      run: composer install --prefer-source
+      run: composer install
 
     - name: Run PHP CS Fixer
       run: php-cs-fixer fix --diff --dry-run

diff --git a/src/Form/CollectionJsType.php b/src/Form/CollectionJsType.php
@@ -36,6 +36,13 @@ public function configureOptions(OptionsResolver $resolver): void
             'allow_move_up' => false,
             'allow_move_down' => false,
             'render_expanded' => false,
+            'entry_options' => function (OptionsResolver $entryOptionsResolver) {
+                $entryOptionsResolver
+                    ->setDefaults([
+                        'label' => false,
+                        'block_prefix' => 'collection_js_entry',
+                    ]);
+            },
         ]);
     }
 

diff --git a/src/Resources/views/bootstrap_5_layout.html.twig b/src/Resources/views/bootstrap_5_layout.html.twig
@@ -14,8 +14,10 @@
 {% endblock collection_js_row %}
 
 {% block collection_js_widget %}
-    <div class="accordion collection-js-root" data-prototype="{{ form_row(prototype) | e }}">
-        {{ block('form_widget') }}
+    <div class="accordion collection-js-root" data-prototype="{{ form_widget(prototype) | e }}">
+        {% for child in form|filter(child => not child.rendered) %}
+            {{- form_row(child) -}}
+        {% endfor %}
     </div>
 
     {% if allow_add|default(false) %}
@@ -28,42 +30,46 @@
 
 {% block collection_js_entry_widget %}
     <div class="accordion-item">
-        <h2 class="accordion-header">
+        <div class="accordion-header d-flex align-items-center justify-content-between">
             <h5 class="m-0">{{ value }}</h5>
-            <div>
-                <button class="accordion-button {{ render_expanded ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id }}-contents">
-                    <i class="fas fw fa-chevron-right form-collection-item-collapse-marker"></i>
-                </button>
-                {% if allow_add %}
-                    <button type="button" class="btn btn-sm btn-outline-primary ml-2 collection-js-elem-add"
+            <div class="btn-group" role="group" aria-label="Accordion header buttons group">
+                {% if form_parent(form).vars.allow_add %}
+                    <button type="button" class="btn btn-outline-primary ml-2 collection-js-elem-add"
                             title="{{ 'action.add_new_item'|trans }}">
-                        <i class="far fa-plus"></i>
+                        <i class="fa fa-plus"></i>
                     </button>
                 {% endif %}
-                {% if allow_move_up %}
-                    <button type="button" class="btn btn-sm btn-outline-secondary ml-2 collection-js-elem-up"
+                {% if form_parent(form).vars.allow_move_up %}
+                    <button type="button" class="btn btn-outline-secondary ml-2 collection-js-elem-up"
                             title="{{ 'action.move_item_up'|trans }}">
-                        <i class="far fa-sort-up"></i>
+                        <i class="fa fa-sort-up"></i>
                     </button>
                 {% endif %}
-                {% if allow_move_down %}
-                    <button type="button" class="btn btn-sm btn-outline-secondary ml-2 collection-js-elem-down"
+                {% if form_parent(form).vars.allow_move_down %}
+                    <button type="button" class="btn btn-outline-secondary ml-2 collection-js-elem-down"
                             title="{{ 'action.move_item_down'|trans }}">
-                        <i class="far fa-sort-down"></i>
+                        <i class="fa fa-sort-down"></i>
                     </button>
                 {% endif %}
-                {% if allow_delete %}
-                    <button type="button" class="btn btn-sm btn-outline-danger ml-2 collection-js-elem-remove"
+                {% if form_parent(form).vars.allow_delete %}
+                    <button type="button" class="btn btn-outline-danger ml-2 collection-js-elem-remove"
                             title="{{ 'action.remove_item'|trans }}">
-                        <i class="far fa-trash-alt"></i>
+                        <i class="fa fa-trash-alt"></i>
                     </button>
                 {% endif %}
             </div>
-        </h2>
-        <div id="{{ id }}-contents" class="accordion-collapse collapse {{ render_expanded ? 'show' }}">
+            <a class="accordion-button {{ form_parent(form).vars.render_expanded ? '' : 'collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#{{ id }}-contents">
+                <i class="fas fw fa-chevron-right form-collection-item-collapse-marker"></i>
+            </a>
+        </div>
+        <div id="{{ id }}-contents" class="accordion-collapse collapse {{ form_parent(form).vars.render_expanded ? 'show' }}">
             <div class="accordion-body">
                 {{ form_widget(form) }}
             </div>
         </div>
     </div>
 {% endblock collection_js_entry_widget %}
+
+{% block collection_entry_widget %}
+    {{ form_widget(form) }}
+{% endblock collection_entry_widget %}
diff --git a/tests/Form/CollectionJsTypeTest.php b/tests/Form/CollectionJsTypeTest.php
@@ -2,22 +2,30 @@
 
 namespace Tienvx\UX\CollectionJs\Tests\Form;
 
-use Symfony\Component\Form\Tests\Extension\Core\Type\CollectionTypeTest;
-use Symfony\Component\Form\Tests\Extension\Core\Type\FileTypeTest;
-use Symfony\Component\Form\Tests\Extension\Core\Type\TextTypeTest;
+use Symfony\Component\Form\Extension\Core\Type\FileType;
+use Symfony\Component\Form\Extension\Core\Type\TextType;
+use Symfony\Component\Form\Test\TypeTestCase;
 use Tienvx\UX\CollectionJs\Form\CollectionJsType;
 
-class CollectionJsTypeTest extends CollectionTypeTest
+class CollectionJsTypeTest extends TypeTestCase
 {
     public const TESTED_TYPE = CollectionJsType::class;
 
     public function testDefaultOptions()
     {
+        $entryOptions = [
+            'label' => true,
+            'block_prefix' => 'custom_collection_js_entry',
+        ];
         $form = $this->factory
             ->create(static::TESTED_TYPE, null, [
-                'entry_type' => FileTypeTest::TESTED_TYPE,
+                'entry_type' => FileType::class,
+                'entry_options' => $entryOptions,
             ])
         ;
+        $this->assertSame($entryOptions + [
+            'block_name' => 'entry',
+        ], $form->getConfig()->getOption('entry_options'));
 
         $view = $form->createView();
         $this->assertFalse($view->vars['allow_move_up']);
@@ -29,12 +37,17 @@ public function testCustomOptions()
     {
         $form = $this->factory
             ->create(static::TESTED_TYPE, null, [
-                'entry_type' => TextTypeTest::TESTED_TYPE,
+                'entry_type' => TextType::class,
                 'allow_move_up' => true,
                 'allow_move_down' => true,
                 'render_expanded' => true,
             ])
         ;
+        $this->assertSame([
+            'label' => false,
+            'block_prefix' => 'collection_js_entry',
+            'block_name' => 'entry',
+        ], $form->getConfig()->getOption('entry_options'));
 
         $view = $form->createView();
         $this->assertTrue($view->vars['allow_move_up']);