Merge 9f8b3bc into 5be3b84

tienvx · Oct 11, 2021 · 7eff15c · 7eff15c
2 parents 5be3b84 + 9f8b3bc
commit 7eff15c
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 64 deletions.
diff --git a/README.md b/README.md
@@ -49,6 +49,14 @@ class PostType extends AbstractType
 }
 ```
 
+Then you need to set the form theme:
+```yaml
+# config/packages/twig.yaml
+twig:
+  # For bootstrap for example
+  form_themes: ['@CollectionJs/bootstrap_5_layout.html.twig']
+```
+
 ### Easyadmin
 
 TBD

diff --git a/src/DependencyInjection/CollectionJsExtension.php b/src/DependencyInjection/CollectionJsExtension.php
@@ -19,7 +19,7 @@ public function prepend(ContainerBuilder $container)
             return;
         }
 
-        $container->prependExtensionConfig('twig', ['form_themes' => ['@CollectionJs/bootstrap_5_layout.html.twig']]);
+        $container->prependExtensionConfig('twig', ['form_themes' => ['@CollectionJs/form_div_layout.html.twig']]);
     }
 
     public function load(array $configs, ContainerBuilder $container)

diff --git a/src/Resources/views/bootstrap_3_layout.html.twig b/src/Resources/views/bootstrap_3_layout.html.twig
@@ -0,0 +1,27 @@
+{% use "bootstrap_base_layout.html.twig" %}
+
+{% block collection_js_accordion %}
+    <div class="panel-group collection-js-root" data-prototype="{{ form_widget(prototype) | e }}" role="tablist" aria-multiselectable="true">
+        {% for child in form|filter(child => not child.rendered) %}
+            {{- form_widget(child) -}}
+        {% endfor %}
+    </div>
+{% endblock collection_js_accordion %}
+
+{% block collection_js_accordion_item %}
+    <div class="panel panel-default">
+        <div class="panel-heading" role="tab">
+            <h4 class="panel-title">
+                <a class="{{ form.vars.valid ? 'collapsed' }}" role="button" data-toggle="collapse" href="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
+                    {{ value|collection_js_as_string }}
+                </a>
+                {{ block('collection_js_actions') }}
+            </h4>
+        </div>
+        <div id="{{ id }}-contents" class="panel-collapse collapse {{ not form.vars.valid ? 'in' }}" role="tabpanel">
+            <div class="panel-body">
+                {{ form_widget(form) }}
+            </div>
+        </div>
+    </div>
+{% endblock collection_js_accordion_item %}
diff --git a/src/Resources/views/bootstrap_4_layout.html.twig b/src/Resources/views/bootstrap_4_layout.html.twig
@@ -0,0 +1,27 @@
+{% use "bootstrap_base_layout.html.twig" %}
+
+{% block collection_js_accordion %}
+    <div class="collection-js-root" data-prototype="{{ form_widget(prototype) | e }}">
+        {% for child in form|filter(child => not child.rendered) %}
+            {{- form_widget(child) -}}
+        {% endfor %}
+    </div>
+{% endblock collection_js_accordion %}
+
+{% block collection_js_accordion_item %}
+    <div class="card">
+        <div class="card-header">
+            <h5 class="mb-0">
+                <button class="btn btn-link {{ form.vars.valid ? 'collapsed' }}" data-toggle="collapse" data-target="#{{ id }}-contents" aria-expanded="{{ form.vars.valid ? 'false' : 'true' }}">
+                    {{ value|collection_js_as_string }}
+                </button>
+                {{ block('collection_js_actions') }}
+            </h5>
+        </div>
+        <div id="{{ id }}-contents" class="collapse {{ not form.vars.valid ? 'show' }}">
+            <div class="card-body">
+                {{ form_widget(form) }}
+            </div>
+        </div>
+    </div>
+{% endblock collection_js_accordion_item %}
diff --git a/src/Resources/views/bootstrap_5_layout.html.twig b/src/Resources/views/bootstrap_5_layout.html.twig
@@ -1,82 +1,26 @@
-{% block collection_js_row %}
-    {%- set controllerName = 'tienvx--ux-collection-js--collection' -%}
-    {%- set dataController = (attr['data-controller']|default('') ~ ' ' ~ controllerName)|trim -%}
-    {% set row_attr = row_attr|merge({
-        'class': attr.class|default('') ~ ' collection-js',
-        'data-controller': dataController,
-        ('data-'~ controllerName ~ '-allow-add-value'): allow_add ? 'true' : 'false',
-        ('data-'~ controllerName ~ '-allow-delete-value'): allow_delete ? 'true' : 'false',
-        ('data-'~ controllerName ~ '-allow-move-up-value'): allow_move_up ? 'true' : 'false',
-        ('data-'~ controllerName ~ '-allow-move-down-value'): allow_move_down ? 'true' : 'false',
-        ('data-'~ controllerName ~ '-prototype-name-value'): prototype_name|default('__name__'),
-        ('data-'~ controllerName ~ '-call-post-add-on-init-value'): call_post_add_on_init ? 'true' : 'false',
-    }) %}
-    {% if ea is defined %}
-        {% set row_attr = row_attr|merge({class: (row_attr.class ~ ' field-collection')|trim}) %}
-    {% endif %}
+{% use "bootstrap_base_layout.html.twig" %}
 
-    {{ block('form_row') }}
-{% endblock collection_js_row %}
-
-{% block collection_js_widget %}
+{% block collection_js_accordion %}
     <div class="accordion collection-js-root" data-prototype="{{ form_widget(prototype) | e }}">
         {% for child in form|filter(child => not child.rendered) %}
             {{- form_widget(child) -}}
         {% endfor %}
     </div>
+{% endblock collection_js_accordion %}
 
-    {% if allow_add|default(false) %}
-        <button type="button" class="btn btn-link collection-js-add-btn">
-            <i class="fa fa-plus pr-1"></i>
-            {{ 'action.add_new_item'|trans }}
-        </button>
-    {% endif %}
-{% endblock collection_js_widget %}
-
-{% block collection_js_entry_widget %}
+{% block collection_js_accordion_item %}
     <div class="accordion-item">
         <h2 class="accordion-header">
             <button class="accordion-button {{ form.vars.valid ? '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>
                 {{ value|collection_js_as_string }}
             </button>
-            <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 collection-js-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 collection-js-elem-up"
-                                title="{{ 'action.move_item_up'|trans }}">
-                            <i class="fa fa-sort-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>
-                        </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>
-                        </button>
-                    {% endif %}
-                {% endapply %}
-            </div>
+            {{ block('collection_js_actions') }}
         </h2>
         <div id="{{ id }}-contents" class="accordion-collapse collapse {{ not form.vars.valid ? '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 %}
+{% endblock collection_js_accordion_item %}
diff --git a/src/Resources/views/bootstrap_base_layout.html.twig b/src/Resources/views/bootstrap_base_layout.html.twig
@@ -0,0 +1,39 @@
+{% use "form_div_layout.html.twig" %}
+
+{% block collection_js_add_button %}
+    <button type="button" class="btn btn-link collection-js-add-btn">
+        <i class="fa fa-plus pr-1"></i>
+        {{ 'action.add_new_item'|trans }}
+    </button>
+{% endblock collection_js_add_button %}
+
+{% block collection_js_actions %}
+    <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 collection-js-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 collection-js-elem-up"
+                        title="{{ 'action.move_item_up'|trans }}">
+                    <i class="fa fa-sort-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>
+                </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>
+                </button>
+            {% endif %}
+        {% endapply %}
+    </div>
+{% endblock collection_js_actions %}
diff --git a/src/Resources/views/form_div_layout.html.twig b/src/Resources/views/form_div_layout.html.twig
@@ -0,0 +1,86 @@
+{% block collection_js_row %}
+    {%- set controllerName = 'tienvx--ux-collection-js--collection' -%}
+    {%- set dataController = (attr['data-controller']|default('') ~ ' ' ~ controllerName)|trim -%}
+    {% set row_attr = row_attr|merge({
+        'class': attr.class|default('') ~ ' collection-js',
+        'data-controller': dataController,
+        ('data-'~ controllerName ~ '-allow-add-value'): allow_add ? 'true' : 'false',
+        ('data-'~ controllerName ~ '-allow-delete-value'): allow_delete ? 'true' : 'false',
+        ('data-'~ controllerName ~ '-allow-move-up-value'): allow_move_up ? 'true' : 'false',
+        ('data-'~ controllerName ~ '-allow-move-down-value'): allow_move_down ? 'true' : 'false',
+        ('data-'~ controllerName ~ '-prototype-name-value'): prototype_name|default('__name__'),
+        ('data-'~ controllerName ~ '-call-post-add-on-init-value'): call_post_add_on_init ? 'true' : 'false',
+    }) %}
+    {% if ea is defined %}
+        {% set row_attr = row_attr|merge({class: (row_attr.class ~ ' field-collection')|trim}) %}
+    {% endif %}
+
+    {{ block('form_row') }}
+{% endblock collection_js_row %}
+
+{% block collection_js_widget %}
+    {{ block('collection_js_accordion') }}
+
+    {% if allow_add|default(false) %}
+        {{ block('collection_js_add_button') }}
+    {% endif %}
+{% endblock collection_js_widget %}
+
+{% block collection_js_add_button %}
+    <button type="button" class="collection-js-add-btn">
+        {{ 'action.add_new_item'|trans }}
+    </button>
+{% endblock collection_js_add_button %}
+
+{% block collection_js_accordion %}
+    <div class="collection-js-root" data-prototype="{{ form_widget(prototype) | e }}">
+        {% for child in form|filter(child => not child.rendered) %}
+            {{- form_widget(child) -}}
+        {% endfor %}
+    </div>
+{% endblock collection_js_accordion %}
+
+{% block collection_js_entry_widget %}
+    {{ block('collection_js_accordion_item') }}
+{% endblock collection_js_entry_widget %}
+
+{% block collection_js_accordion_item %}
+    <div>
+        <div>{{ value|collection_js_as_string }}</div>
+        {{ block('collection_js_actions') }}
+        <div>
+            {{ form_widget(form) }}
+        </div>
+    </div>
+{% endblock collection_js_accordion_item %}
+
+{% block collection_js_actions %}
+    <div>
+        {% apply spaceless %}
+            {% if form_parent(form).vars.allow_add %}
+                <button type="button" class="collection-js-elem-add">
+                    {{ 'action.add_new_item'|trans }}
+                </button>
+            {% endif %}
+            {% if form_parent(form).vars.allow_move_up %}
+                <button type="button" class="collection-js-elem-up">
+                    {{ 'action.move_item_up'|trans }}
+                </button>
+            {% endif %}
+            {% if form_parent(form).vars.allow_move_down %}
+                <button type="button" class="collection-js-elem-down">
+                    {{ 'action.move_item_down'|trans }}
+                </button>
+            {% endif %}
+            {% if form_parent(form).vars.allow_delete %}
+                <button type="button" class="collection-js-elem-remove">
+                    {{ 'action.remove_item'|trans }}
+                </button>
+            {% endif %}
+        {% endapply %}
+    </div>
+{% endblock collection_js_actions %}
+
+{% block collection_entry_widget %}
+    {{ form_widget(form) }}
+{% endblock collection_entry_widget %}
diff --git a/tests/CollectionJsBundleTest.php b/tests/CollectionJsBundleTest.php
@@ -32,7 +32,7 @@ public function testFormThemeMerging()
         $kernel->boot();
         $this->assertEquals([
             'form_div_layout.html.twig',
-            '@CollectionJs/bootstrap_5_layout.html.twig',
+            '@CollectionJs/form_div_layout.html.twig',
             'form_theme.html.twig',
         ], $kernel->getContainer()->getParameter('twig.form.resources'));
     }