Adminlte : système de tabs

Resources/assets/app/adminlte/common/common.scss

@@ -4,6 +4,7 @@
 @import 'scss/form/checkboxradio';
 @import 'scss/form/footer';
 @import 'scss/card';
+@import 'scss/tabs';
 @import 'scss/modal';
 @import 'scss/toastr';
 

Resources/assets/app/adminlte/common/scss/_tabs.scss

@@ -0,0 +1,10 @@
+
+.tab-content {
+  .tab-pane {
+    display: none ;
+
+    &.active {
+      display: block ;
+    }
+  }
+}

Resources/views/adminlte/crud/_form.html.twig

@@ -41,30 +41,22 @@
 
 
 {% block main %}
-
     <div class="col-8">
-    {% block form %}
-        {{ form(form) }}
-    {% endblock form %}
+        {% block form %}
+            {{ form(form) }}
+        {% endblock form %}
     </div>
 
     {% block form_footer %}
-        <div class="form-footer">
-            <div class="row">
-                <div class="col-sm-8">
-                    <div class="btn-list">
-                    {% block page_actions %}
-                        {% for action in entity.actions %}
-
-                            {{ include(action.templatePath, { action: action }, with_context = false) }}&nbsp;
-                        {% endfor %}
-                    {% endblock %}
-                    </div>
-                </div>
-            </div>
-        </div>
+        {% embed '@LcSov/adminlte/embed/form_footer.html.twig' %}
+            {% block width %}8{% endblock %}
+            {% block content %}
+                {% for action in entity.actions %}
+                    {{ include(action.templatePath, { action: action }, with_context = false) }}&nbsp;
+                {% endfor %}
+            {% endblock %}
+        {% endembed %}
     {% endblock form_footer %}
 
     {% block delete_form %}{% endblock delete_form %}
-
 {% endblock %}

Resources/views/adminlte/crud/_test.html.twig

@@ -1,5 +0,0 @@
-
-MON GARS c'est de la balle !!!
-NICHE
-{{form_row(form.title)}}
-{{form_row(form.description)}}

Resources/views/adminlte/crud/form_theme.html.twig

@@ -249,95 +249,36 @@
     {%- endif -%}
 {%- endblock checkbox_radio_label %}
 
-{% block form_start %}
-
-    {{ parent() }}
-
-    {% if ea_crud_form.form_panels is defined %}
-        <div class="card card-outline">
-            <div class="card-header p-0 border-bottom-0">
-                <ul id="nav-params" class="nav nav-pills" role="navigation">
-                    {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
-                        {% set panel_has_header = panel_config.label|default(false) or panel_config.icon|default(false) %}
-                        <li class="nav-item">
-                            <a href="#panel-{{ panel_name }} " class="nav-link {{ panel_name == 1 ? 'active' }}"
-                               data-toggle="tab" role="tab"
-                               aria-controls="panel-{{ panel_name }}">
-                                {{ panel_config.label|lc_trans_admin_panel(ea.getEntity().getFqcn()) }}
-                                <i class="fa fa-exclamation-circle invalid-form"></i>
-                            </a>
-                        </li>
-                    {% endfor %}
-                </ul>
-            </div>
-        </div>
-    {% endif %}
-{% endblock form_start %}
-
 {% block ea_crud_widget_panels %}
-    <div class="tab-content">
-        {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
-            {% set panel_has_header = panel_config.label|default(false) or panel_config.icon|default(false) %}
-
-            {% set collapsible = panel_config.collapsible %}
-            {% set collapsed = panel_config.collapsed %}
-
-            <div class="tab-pane {{ panel_name == 1 ? 'active' }}" id="panel-{{ panel_name }}"
-                 aria-labelledby="{{ panel_name }}-tab">
-                {% if panel_config.template is defined and panel_config.template is not null %}
-                    {% include panel_config.template %}
-                {% else %}
-
-                    <div class="card {{ panel_config.css_class ?? '' }}">
-                        <div class="card-status-top bg-primary"></div>
-                        {% if panel_has_header %}
-                            <div class="card-header ">
-                                {# <div class="content-panel-header {{ collapsible ? 'collapsible' }} {{ panel_config.help|default(false) is not empty ? 'with-help' }}"> #}
-                                {% if collapsible %}
-                                <a href="#content-{{ panel_name }}" data-toggle="collapse"
-                                   class="content-panel-collapse {{ collapsed ? 'collapsed' }}"
-                                   aria-expanded="{{ collapsed ? 'false' : 'true' }}"
-                                   aria-controls="content-{{ panel_name }}">
-                                    <i class="fas fw fa-chevron-right collapse-icon"></i>
-                                    {% endif %}
-
-                                    {% if panel_config.icon|default(false) %}
-                                        <i class="{{ panel_config.icon }}"></i>
-                                    {% endif %}
-
-                                    {{ panel_config.label|lc_trans_admin_panel(ea.getEntity().getFqcn()) }}
-
-                                    {% if collapsible %}
-                                </a>
-                                {% endif %}
-
-                                {% if panel_config.help|default(false) %}
-                                    <div class="content-panel-header-help">{{ panel_config.help|raw }}</div>
-                                {% endif %}
-                            </div>
-                        {% endif %}
-                        <div class="card-body  {{ collapsible ? 'collapse' }} {{ not collapsed ? 'show' }}">
-                            {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and field.vars.ea_crud_form.form_panel == panel_name) %}
-                                {% if not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name %}
-                                    {{ form_row(field) }}
-                                {% endif %}
-                            {% endfor %}
-                        </div>
-                    </div>
-                {% endif %}
-            </div>
-
-        {% else %}
-            <div class="card">
-                <div class="card-status-top bg-primary"></div>
-                <div class="card-body">
-
-                    {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and (not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name)) %}
-                        {{ form_row(field) }}
-                    {% endfor %}
-                </div>
-            </div>
-        {% endfor %}
-    </div>
-
+    {% embed '@LcSov/adminlte/embed/tabs/tabs.html.twig' %}
+        {# items menu #}
+        {% import '@LcSov/adminlte/macro/tabs.html.twig' as mtabs %}
+        {% block menu_items %}
+            {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
+                {{ mtabs.menu_item(panel_name, loop.first, panel_config.label|lc_trans_admin_panel(ea.getEntity().getFqcn())) }}
+            {% endfor %}
+        {% endblock %}
+
+        {# content #}
+        {% block content %}
+            {# panes #}
+            {% for panel_name, panel_config in ea_crud_form.form_panels|filter(panel_config => not panel_config.form_tab or panel_config.form_tab == tab_name) %}
+                {% embed '@LcSov/adminlte/embed/tabs/pane.html.twig' %}
+                    {% block class %}{{ loop.first ? 'active' }}{% endblock %}
+                    {% block id %}{{ panel_name }}{% endblock %}
+                    {% block content %}
+                        {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and field.vars.ea_crud_form.form_panel == panel_name) %}
+                            {% if not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name %}
+                                {{ form_row(field) }}
+                            {% endif %}
+                        {% endfor %}
+                    {% endblock %}
+                {% endembed %}
+            {% else %}
+                {% for field in form|filter(field => 'hidden' not in field.vars.block_prefixes and (not field.vars.ea_crud_form.form_tab or field.vars.ea_crud_form.form_tab == tab_name)) %}
+                    {{ form_row(field) }}
+                {% endfor %}
+            {% endfor %}
+        {% endblock %}
+    {% endembed %}
 {% endblock ea_crud_widget_panels %}

Resources/views/adminlte/embed/card.html.twig

@@ -1,6 +1,6 @@
 <div class="card {% block css %}{% endblock %}" id="{% block id %}{% endblock %}">
     {% block header_wrapper %}
-    <div class="card-header">
+    <div class="card-header {% block header_class %}{% endblock %}">
         {% block header %}
         {% endblock header %}
     </div>

Resources/views/adminlte/embed/form_footer.html.twig

@@ -0,0 +1,9 @@
+<div class="form-footer">
+    <div class="row">
+        <div class="col-sm-{% block width %}{% endblock %}">
+            <div class="btn-list">
+                {% block content %}{% endblock %}
+            </div>
+        </div>
+    </div>
+</div>

Resources/views/adminlte/embed/tabs/pane.html.twig

@@ -0,0 +1,3 @@
+<div class="tab-pane {% block class %}{% endblock %}" id="panel-{% block id %}{% endblock %}" role="tabpanel">
+    {% block content %}{% endblock %}
+</div>

Resources/views/adminlte/embed/tabs/tabs.html.twig

@@ -0,0 +1,13 @@
+
+<div class="card card-primary card-outline card-outline-tabs">
+    <div class="card-header p-0 border-bottom-0">
+        <ul id="nav-params" class="nav nav-tabs" role="tablist">
+            {% block menu_items %}{% endblock %}
+        </ul>
+    </div>
+    <div class="card-body">
+        <div class="tab-content">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+</div>

Resources/views/adminlte/macro/callout.html.twig

@@ -0,0 +1,10 @@
+
+{% macro callout_warning(message) %}
+    {{ _self.callout('warning', message) }}
+{% endmacro %}
+
+{% macro callout(type, message) %}
+    <div class="callout callout-{{ type }}">
+        {{ message }}
+    </div>
+{% endmacro %}

Resources/views/adminlte/macro/tabs.html.twig

@@ -0,0 +1,10 @@
+{% macro menu_item(id, active, label) %}
+    <li class="nav-item">
+        <a href="#panel-{{ id }} " class="nav-link {{ active ? 'active' }}"
+           data-toggle="tab" role="tab"
+           aria-controls="panel-{{ id }}">
+            {{ label }}
+            <i class="fa fa-exclamation-circle invalid-form"></i>
+        </a>
+    </li>
+{% endmacro %}