Move the filter on the top

Resources/public/base.js

@@ -1,10 +1,9 @@
 jQuery(document).ready(function() {
-
     Admin.add_pretty_errors(document);
     Admin.add_collapsed_toggle();
+    Admin.add_filters(document);
 });
 
-
 var Admin = {
 
     /**
@@ -15,8 +14,7 @@ var Admin = {
         var msg = '[Sonata.Admin] ' + Array.prototype.join.call(arguments,', ');
         if (window.console && window.console.log) {
             window.console.log(msg);
-        }
-        else if (window.opera && window.opera.postError) {
+        } else if (window.opera && window.opera.postError) {
             window.opera.postError(msg);
         }
     },
@@ -39,9 +37,9 @@ var Admin = {
             if (message.length == 0) {
                 return;
             }
-            
+
             var target;
-            
+
             /* Hack to handle qTip on select */
             if(jQuery(input).is("select")) {
               jQuery(element).prepend("<span></span>");
@@ -51,7 +49,7 @@ var Admin = {
             else {
               target = input;
             }
-            
+
             target.qtip({
                 content: message,
                 show: 'focusin',
@@ -107,5 +105,12 @@ var Admin = {
         }
 
         return targetElement;
+    },
+
+    add_filters: function(subject) {
+        jQuery('div.filter_container', subject).hide();
+        jQuery('fieldset.filter_legend', subject).click(function(event) {
+           jQuery('div.filter_container', jQuery(event.target).parent()).toggle();
+        });
     }
 }

Resources/public/css/layout.css

@@ -11,6 +11,24 @@ div.sonata-ba-field-inline-table textarea.title {
     height: 50px;
 }
 
+
+fieldset.filter_legend {
+    font-weight: bold;
+    border: 1px solid #E4E4E4;
+    margin: 0;
+    border-width: 1px 0 0;
+    padding: 0;
+}
+
+fieldset.filter_legend table {
+    margin: 0;
+}
+
+legend.filter_legend {
+    background: url(../famfamfam/bullet_arrow_down.png) no-repeat center left;
+    padding-left: 16px;
+}
+
 table.sonata-ba-list td {
     width: 75px;
 }

Resources/views/CRUD/base_list.html.twig

@@ -135,15 +135,42 @@ file that was distributed with this source code.
 {% block list_filters %}
     {% if admin.datagrid.filters %}
         <form class="sonata-filter-form" action="{{ admin.generateUrl('list') }}" method="GET">
-            {% for filter in admin.datagrid.filters %}
-                {{ form_row(form.getChild(filter.name)) }}
-            {% endfor %}
+            <fieldset class="filter_legend">
+                <legend class="filter_legend">{% trans from 'SonataAdminBundle' %}label_filters{% endtrans %}</legend>
 
-            {{ form_rest(form) }}
+                <div class="filter_container">
+                    <table>
+                        <tr>
+                            <td>
+                                <table>
+                                    {% for filter in admin.datagrid.filters %}
+                                        <tr id="filter_{{ filter.name }}_row">
+                                            <td class="filter-title">{{ admin.trans(filter.name) }}</td>
+                                            <td class="filter-type">{{ form_widget(form.getChild(filter.name).getChild('type')) }}</td>
+                                            <td class="filter-value">{{ form_widget(form.getChild(filter.name).getChild('value')) }}</td>
+                                        </tr>
+                                    {% endfor %}
+                                </table>
+                            </td>
+                            {#<td>#}
+                                {#<label for="add_filter_select">{% trans from 'SonataAdminBundle' %}add_filter{% endtrans %}</label>#}
+                                {#<select id="add_filter_select">#}
+                                    {#{% for filter in admin.datagrid.filters %}#}
+                                        {#<option value="{{ filter.name }}">{{ admin.trans(filter.name) }}</option>#}
+                                    {#{% endfor %}#}
+                                {#</select>#}
+                            {#</td>#}
+                        </tr>
+                    </table>
+                    {{ form_rest(form) }}
 
-            <input type="submit" value="{% trans from 'SonataAdminBundle' %}btn_filter{% endtrans %}" />
+                    <input type="submit" value="{% trans from 'SonataAdminBundle' %}btn_filter{% endtrans %}" />
+
+                    <a href="{{ admin.generateUrl('list') }}">{% trans from 'SonataAdminBundle' %}link_reset_filter{% endtrans %}</a>
+
+                </div>
+            </fieldset>
 
-            <a href="{{ admin.generateUrl('list') }}">{% trans from 'SonataAdminBundle' %}link_reset_filter{% endtrans %}</a>
         </form>
     {% endif %}
 {% endblock %}

Resources/views/CRUD/edit_orm_many_association_script.html.twig

@@ -32,9 +32,11 @@ This code manage the many-to-[one|many] association field popup
         event.preventDefault();
         event.stopPropagation();
 
+        Admin.log('[{{ id }}|field_dialog_form_list_link] handle link click in a list');
+
         var element = jQuery(this).parents('#field_dialog_{{ id }} td.sonata-ba-list-field');
 
-        // the user does does click on a row column
+        // the user does click on a row column
         if (element.length == 0) {
             // make a recursive call (ie: reset the filter)
             jQuery.ajax({
@@ -63,6 +65,8 @@ This code manage the many-to-[one|many] association field popup
         event.preventDefault();
         event.stopPropagation();
 
+        Admin.log('[{{ id }}|field_dialog_form_list] open the list modal');
+
         var a = jQuery(this);
 
         field_dialog_{{ id }}.html('');
@@ -72,9 +76,13 @@ This code manage the many-to-[one|many] association field popup
             url: a.attr('href'),
             success: function(html) {
 
+                Admin.log('[{{ id }}|field_dialog_form_list] retrieving the list content');
+
                 // populate the popup container
                 field_dialog_{{ id }}.html(html);
 
+                Admin.add_filters(field_dialog_{{ id }});
+
                 // capture the submit event to make an ajax call, ie : POST data to the
                 // related create admin
                 jQuery('a', field_dialog_{{ id }}).live('click', field_dialog_form_list_link_{{ id }});
@@ -122,6 +130,7 @@ This code manage the many-to-[one|many] association field popup
         field_dialog_{{ id }}.html('');
 
         Admin.log('[{{ id }}|field_dialog_form_add] add link action');
+
         // retrieve the form element from the related admin generator
         jQuery.ajax({
             url: a.attr('href'),
@@ -162,6 +171,7 @@ This code manage the many-to-[one|many] association field popup
         event.stopPropagation();
 
         Admin.log('[{{ id }}|field_dialog_form_action] action catch', this);
+
         initialize_popup_{{ id }}();
 
         var element = jQuery(this);
@@ -198,6 +208,7 @@ This code manage the many-to-[one|many] association field popup
             success: function(data) {
 
                 Admin.log('[{{ id }}|field_dialog_form_action] ajax success');
+
                 if (typeof data == 'string') {
                     field_dialog_{{ id }}.html(data);
                     return;
@@ -336,7 +347,7 @@ This code manage the many-to-[one|many] association field popup
             if (jQuery('#{{ id }} option').get(0)) {
                 jQuery('#{{ id }}').attr('selectedIndex', '-1').children("option:selected").attr("selected", false);
             }
-            
+
             jQuery('#{{ id }}').val('');
             jQuery('#{{ id }}').trigger('change');
 
@@ -346,8 +357,11 @@ This code manage the many-to-[one|many] association field popup
           attach onchange event on the input
         #}
 
-        // update the
+        // update the label
         jQuery('#{{ id }}').live('change', function(event) {
+
+            Admin.log('[{{ id }}] update the label');
+
             jQuery('#field_widget_{{ id }}').html("<span><img src=\"{{ asset('bundles/sonataadmin/ajax-loader.gif') }}\" style=\"vertical-align: middle; margin-right: 10px\"/>{{ 'loading_information ...'|trans([], 'SonataAdminBundle') }}</span>");
             jQuery.ajax({
                 type: 'GET',

Resources/views/ajax_layout.html.twig

@@ -15,11 +15,11 @@ file that was distributed with this source code.
     {% block list %}{% endblock %}
 
     <div class="sonata-ba-list">
-        <div class="span-18">
-            {% block list_table %}{% endblock %}
-        </div>
-        <div class="span-6 last">
+        <div class="span-24 last">
             {% block list_filters %}{% endblock %}
         </div>
+        <div class="span-24 last">
+            {% block list_table %}{% endblock %}
+        </div>
     </div>
 {% endblock %}

Resources/views/standard_layout.html.twig

@@ -135,21 +135,21 @@ file that was distributed with this source code.
                     {% if _list_table is not empty or _list_filters is not empty %}
                         {% if _side_menu is not empty %}
                             <div class="sonata-ba-list">
-                                <div class="span-13">
-                                    {{ _list_table|raw }}
-                                </div>
-                                <div class="span-5 last">
+                                <div class="span-18 last">
                                     {{ _list_filters|raw }}
                                 </div>
+                                <div class="span-18 last">
+                                    {{ _list_table|raw }}
+                                </div>
                             </div>
                         {% else %}
                             <div class="sonata-ba-list">
-                                <div class="span-19">
-                                    {{ _list_table|raw }}
-                                </div>
-                                <div class="span-5 last">
+                                <div class="span-24 last">
                                     {{ _list_filters|raw }}
                                 </div>
+                                <div class="span-24 last">
+                                    {{ _list_table|raw }}
+                                </div>
                             </div>
                         {% endif %}
                     {% endif %}