add support for mosaic mode in the modal list

Controller/CRUDController.php

@@ -176,9 +176,11 @@ class CRUDController extends Controller
         $parameters['admin']         = isset($parameters['admin']) ?
             $parameters['admin'] :
             $this->admin;
+
         $parameters['base_template'] = isset($parameters['base_template']) ?
             $parameters['base_template'] :
             $this->getBaseTemplate();
+
         $parameters['admin_pool']    = $this->get('sonata.admin.pool');
 
         return parent::render($view, $parameters, $response);

Resources/public/Admin.js

@@ -34,7 +34,7 @@ var Admin = {
      * @param subject
      */
     shared_setup: function(subject) {
-        Admin.log("[Admin] apply shared_setup");
+        Admin.log("[core|shared_setup] Register services on", subject);
         Admin.setup_collection_buttons(subject);
         Admin.set_object_field_value(subject);
         Admin.setup_select2(subject);
@@ -49,6 +49,7 @@ var Admin = {
 //        Admin.setup_list_modal(subject);
     },
     setup_list_modal: function(modal) {
+        Admin.log('[core|setup_list_modal] configure modal on', modal);
         // this will force relation modal to open list of entity in a wider modal
         // to improve readability
         jQuery('div.modal-dialog', modal).css({
@@ -70,6 +71,7 @@ var Admin = {
     },
     setup_select2: function(subject) {
         if (window.SONATA_CONFIG && window.SONATA_CONFIG.USE_SELECT2 && window.Select2) {
+            Admin.log('[core|setup_select2] configure Select2 on', subject);
 
             jQuery('select:not([data-sonata-select2="false"])', subject).each(function() {
 
@@ -129,6 +131,8 @@ var Admin = {
     },
     setup_icheck: function(subject) {
         if (window.SONATA_CONFIG && window.SONATA_CONFIG.USE_ICHECK) {
+            Admin.log('[core|setup_icheck] configure iCheck on', subject);
+
             jQuery("input[type='checkbox']:not('label.btn>input'), input[type='radio']:not('label.btn>input')", subject).iCheck({
                 checkboxClass: 'icheckbox_minimal',
                 radioClass: 'iradio_minimal'
@@ -137,6 +141,7 @@ var Admin = {
     },
 
     setup_xeditable: function(subject) {
+        Admin.log('[core|setup_xeditable] configure xeditable on', subject);
         jQuery('.x-editable', subject).editable({
             emptyclass: 'editable-empty btn btn-sm',
             emptytext: '<i class="glyphicon glyphicon-edit"></i>',
@@ -176,6 +181,7 @@ var Admin = {
      * @param subject
      */
     add_pretty_errors: function(subject) {
+        Admin.log('[core|add_pretty_errors] configure pretty errors on', subject);
         jQuery('div.sonata-ba-field-error', subject).each(function(index, element) {
             var input = jQuery(':input', element);
 
@@ -232,9 +238,43 @@ var Admin = {
     },
 
     add_filters: function(subject) {
-        jQuery('div.filter_container .sonata-filter-option', subject).hide();
-        jQuery('h4.filter_legend', subject).click(function(event) {
-            jQuery('div.filter_container .sonata-filter-option').toggle();
+        Admin.log('[core|add_filters] configure filters on', subject);
+        jQuery('a.sonata-toggle-filter', subject).on('click', function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (jQuery(e.target).attr('sonata-filter') == 'false') {
+                return;
+            }
+
+            Admin.log('[core|add_filters] handle filter container: ', jQuery(e.target).attr('filter-container'))
+
+            var filters_container = jQuery('#' + jQuery(e.target).attr('filter-container'));
+
+            if (jQuery('div.form-group:visible', filters_container).length == 0) {
+                jQuery(filters_container).slideDown();
+            }
+
+            var target = jQuery('div[id="' + jQuery(e.target).attr('filter-target') + '"]', filters_container);
+            
+            if (jQuery(target).is(":visible")) {
+                jQuery('i', this).removeClass('fa-check-square-o');
+                jQuery('i', this).addClass('fa-square-o');
+
+                target.hide();
+
+            } else {
+                jQuery('i', this).removeClass('fa-square-o');
+                jQuery('i', this).addClass('fa-check-square-o');
+
+                target.show();
+            }
+
+            if (jQuery('div.form-group:visible', filters_container).length > 0) {
+                jQuery(filters_container).slideDown();
+            } else {
+                jQuery(filters_container).slideUp();
+            }
         });
     },
 
@@ -243,6 +283,7 @@ var Admin = {
      * @param subject
      */
     set_object_field_value: function(subject) {
+        Admin.log('[core|set_object_field_value] set value field on', subject);
 
         this.log(jQuery('a.sonata-ba-edit-inline', subject));
         jQuery('a.sonata-ba-edit-inline', subject).click(function(event) {
@@ -269,6 +310,7 @@ var Admin = {
     },
 
     setup_collection_buttons: function(subject) {
+        Admin.log('[core|setup_collection_buttons] setup collection buttons', subject);
 
         jQuery(subject).on('click', '.sonata-collection-add', function(event) {
             Admin.stopEvent(event);
@@ -302,6 +344,8 @@ var Admin = {
     },
 
     setup_per_page_switcher: function(subject) {
+        Admin.log('[core|setup_per_page_switcher] setup page switcher', subject);
+
         jQuery('select.per-page').change(function(event) {
             jQuery('input[type=submit]').hide();
 
@@ -310,6 +354,8 @@ var Admin = {
     },
 
     setup_form_tabs_for_errors: function(subject) {
+        Admin.log('[core|setup_form_tabs_for_errors] setup form tab\'s errors', subject);
+
         // Switch to first tab with server side validation errors on page load
         jQuery('form', subject).each(function() {
             Admin.show_form_first_tab_with_errors(jQuery(this), '.sonata-ba-field-error');
@@ -329,8 +375,9 @@ var Admin = {
     },
 
     show_form_first_tab_with_errors: function(form, errorSelector) {
-        var tabs = form.find('.nav-tabs a'),
-            firstTabWithErrors;
+        Admin.log('[core|show_form_first_tab_with_errors] show first tab with errors', form);
+
+        var tabs = form.find('.nav-tabs a'), firstTabWithErrors;
 
         tabs.each(function() {
             var id = jQuery(this).attr('href'),
@@ -352,6 +399,8 @@ var Admin = {
     },
 
     setup_inline_form_errors: function(subject) {
+        Admin.log('[core|setup_inline_form_errors] show first tab with errors', subject);
+
         var deleteCheckboxSelector = '.sonata-ba-field-inline-table [id$="_delete"][type="checkbox"]';
 
         jQuery(deleteCheckboxSelector, subject).each(function() {
@@ -366,12 +415,14 @@ var Admin = {
     /**
      * Disable inline form errors when the row is marked for deletion
      */
-    switch_inline_form_errors: function(deleteCheckbox) {
-        var row = deleteCheckbox.closest('.sonata-ba-field-inline-table'),
+    switch_inline_form_errors: function(subject) {
+        Admin.log('[core|switch_inline_form_errors] switch_inline_form_errors', subject);
+
+        var row = subject.closest('.sonata-ba-field-inline-table'),
             errors = row.find('.sonata-ba-field-error-messages')
         ;
 
-        if (deleteCheckbox.is(':checked')) {
+        if (subject.is(':checked')) {
             row
                 .find('[required]')
                 .removeAttr('required')
@@ -390,6 +441,8 @@ var Admin = {
     },
 
     setup_tree_view: function(subject) {
+        Admin.log('[core|setup_tree_view] setup tree view', subject);
+
         jQuery('ul.js-treeview', subject).treeView();
     }
 };

Resources/views/CRUD/base_list.html.twig

@@ -191,12 +191,12 @@ file that was distributed with this source code.
     <ul class="nav navbar-nav navbar-right">
 
         <li class="dropdown sonata-actions">
-            <a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ 'link_filters'|trans({}, 'SonataAdminBundle') }} <b class="caret"></b></a>
+            <a href="#" class="dropdown-toggle sonata-ba-action" data-toggle="dropdown">{{ 'link_filters'|trans({}, 'SonataAdminBundle') }} <b class="caret"></b></a>
 
             <ul class="dropdown-menu" role="menu">
                 {% for filter in admin.datagrid.filters if filter.options['show_filter']%}
                     <li>
-                        <a href="#" class="sonata-toggle-filter" filter-target="filter-{{ admin.uniqid }}-{{ filter.name }}">
+                        <a href="#" class="sonata-toggle-filter sonata-ba-action" filter-target="filter-{{ admin.uniqid }}-{{ filter.name }}" filter-container="filter-container-{{ admin.uniqid() }}">
                             <i class="fa {{ filter.isActive() ? 'fa-check-square-o' : 'fa-square-o' }}"></i>{{ admin.trans(filter.label, {}, filter.translationDomain) }}
                         </a>
                     </li>
@@ -204,53 +204,13 @@ file that was distributed with this source code.
             </ul>
         </li>
     </ul>
-
-    <script>
-        jQuery(document).ready(function() {
-            jQuery('a.sonata-toggle-filter').on('click', function(e) {
-                e.preventDefault();
-                e.stopPropagation();
-
-                if (jQuery(e.target).attr('sonata-filter') == 'false') {
-                    return;
-                }
-
-                if (jQuery('div.form-group:visible').length == 0) {
-                    jQuery('div.sonata-filters-box').slideDown();
-                }
-
-                var target = jQuery('div[id="' + jQuery(e.target).attr('filter-target') + '"]');
-
-                if (jQuery(target).is(":visible")) {
-                    jQuery('i', this).removeClass('fa-check-square-o');
-                    jQuery('i', this).addClass('fa-square-o');
-
-                    target.hide();
-
-                } else {
-                    jQuery('i', this).removeClass('fa-square-o');
-                    jQuery('i', this).addClass('fa-check-square-o');
-
-                    target.show();
-                }
-
-                if (jQuery('div.form-group:visible').length > 0) {
-                    jQuery('div.sonata-filters-box').slideDown();
-                } else {
-                    jQuery('div.sonata-filters-box').slideUp();
-                }
-            });
-        });
-    </script>
-
-
 {% endblock %}
 
 {% block list_filters %}
     {% if admin.datagrid.filters %}
         {% form_theme form admin.getTemplate('filter') %}
 
-        <div class="col-xs-12 col-md-12 sonata-filters-box" style="display: {{ admin.datagrid.hasActiveFilters ? 'block' : 'none' }}">
+        <div class="col-xs-12 col-md-12 sonata-filters-box" style="display: {{ admin.datagrid.hasActiveFilters ? 'block' : 'none' }}" id="filter-container-{{ admin.uniqid() }}">
             <div class="box box-primary" >
                 <div class="box-body">
                     <form class="sonata-filter-form form-horizontal {{ admin.isChild and 1 == admin.datagrid.filters|length ? 'hide' : '' }}" action="{{ admin.generateUrl('list') }}" method="GET" role="form">

Resources/views/ajax_layout.html.twig

@@ -10,25 +10,44 @@ file that was distributed with this source code.
 #}
 
 {% block content %}
-    {% set _list_table   = block('list_table')|trim %}
-    {% set _list_filters = block('list_filters')|trim %}
+    {% set _list_table           = block('list_table')|trim %}
+    {% set _list_filters         = block('list_filters')|trim %}
+    {% set _list_filters_actions = block('list_filters_actions') %}
 
     {% block preview %}{% endblock %}
     {% block form %}{% endblock %}
     {% block list %}{% endblock %}
     {% block show %}{% endblock %}
 
-    {% if _list_table|length > 0 or _list_filters|length > 0 %}
+
+
+    {% if _list_table is not empty or _list_filters is not empty %}
         <div class="row">
-            <div class="sonata-ba-list {% if _list_filters %}col-md-10{% else %}col-md-12{% endif %}">
-                {{ _list_table|raw }}
+
+                    {% if admin is defined and action is defined and action == 'list' and admin.listModes|length > 1 %}
+                        <div class="nav navbar-right btn-group">
+                            {% for mode, settings in admin.listModes %}
+                                <a href="{{ admin.generateUrl('list', app.request.query.all|merge({_list_mode: mode})) }}" class="btn btn-default navbar-btn btn-sm{% if admin.getListMode() == mode %} active{% endif %}"><i class="{{ settings.class }}"></i></a>
+                            {% endfor %}
+                        </div>
+                    {% endif %}
+
+                    {% if _list_filters_actions is not empty %}
+                        {{ _list_filters_actions|raw }}
+                    {% endif %}
+
             </div>
-            {% if _list_filters %}
-                <div class="sonata-ba-filter col-md-2">
-                    {{ _list_filters|raw }}
-                </div>
-            {% endif %}
+
+        {% if _list_filters|trim %}
+             <div class="row">
+                 {{ _list_filters|raw }}
+             </div>
+        {% endif %}
+
+        <div class="row">
+            {{ _list_table|raw }}
         </div>
-    {% endif %}
+
+     {% endif %}
 
 {% endblock %}