Fix Admin job list filter display (#179)

Author: ARDINStephane

src/batch-symfony-framework/src/Resources/views/sonata/list.html.twig

@@ -148,21 +148,21 @@
 {% endblock %}
 
 {% block list_filters_actions %}
-    <ul class="nav navbar-nav navbar-right">
+    <ul class="nav navbar-nav navbar-right" id="filter-list-job-execution" {{ stimulus_controller('sonata-filter-list', {}, { 'active': 'active' }, { 'sonata-filter': '#filter-container-job-execution' }) }}>
         <li class="dropdown sonata-actions">
             <a href="#" class="dropdown-toggle sonata-ba-action" data-toggle="dropdown">
-                <i class="fa fa-filter" aria-hidden="true"></i>
+                <i class="fas fa-filter" aria-hidden="true"></i>
                 {{ 'link_filters'|trans({}, 'SonataAdminBundle') }}
-                <span class="badge sonata-filter-count"></span>
+                <span class="badge" {{ stimulus_target('sonata-filter-list', 'counter') }}></span>
                 <b class="caret"></b>
             </a>
-            <ul class="dropdown-menu" role="menu">
+
+            <ul class="dropdown-menu dropdown-menu-scrollable" role="menu">
                 {% for filter in form %}
-                    <li>
-                        <a href="#" class="sonata-toggle-filter sonata-ba-action"
-                           filter-target="filter-job-{{ filter.vars.name }}"
-                           filter-container="filter-container-job">
-                            <i class="fa {{ (filter.vars.name in filters) ? 'fa-check-square-o' : 'fa-square-o' }}"></i>
+                    {% set filterDisplayed = filter.vars.name in filters %}
+                    <li class="sonata-filter-option">
+                        <a href="#" class="sonata-toggle-filter sonata-ba-action{% if filterDisplayed %} active{% endif %}" data-filter="filter-job-execution-{{ filter.vars.name }}" {{ stimulus_target('sonata-filter-list', 'field') }} {{ stimulus_action('sonata-filter-list', 'toggle:prevent:stop', 'click') }}>
+                            <i class="far"></i>
                             {{ (filter.vars.label)|trans({}, filter.vars.translation_domain) }}
                         </a>
                     </li>
@@ -174,27 +174,34 @@
 
 {% block list_filters %}
     {% form_theme form filter_template %}
-    <div class="col-xs-12 col-md-12 sonata-filters-box" style="display: {{ (filters|length > 0) ? 'block' : 'none' }}" id="filter-container-job">
+    <div class="col-xs-12 col-md-12 sonata-filters-box"
+         id="filter-container-job-execution" {{ stimulus_controller('sonata-filter', {}, {}, { 'sonata-filter-list': '#filter-list-job-execution' }) }} {% if not filters|length %}hidden{% endif %}>
         <div class="box box-primary" >
             <div class="box-body">
-                <form class="sonata-filter-form form-horizontal" action="{{ path('yokai_batch.job_list') }}" method="GET" role="form">
+                <form
+                    class="sonata-filter-form form-horizontal"
+                    action="{{ path('yokai_batch.job_list') }}"
+                    method="GET"
+                    role="form"
+                    {{ stimulus_target('sonata-filter', 'form') }}
+                    {{ stimulus_action('sonata-filter', 'prepareSubmit', 'submit') }}>
                     {{ form_errors(form) }}
+
                     <div class="row">
                         <div class="col-sm-9">
                             {% for filter in form %}
-                                {% set filterVisible = true %}
-                                {% set filterActive = filter.vars.name in filters %}
-                                <div class="form-group" id="filter-job-{{ filter.vars.name }}" sonata-filter="{{ filterVisible ? 'true' : 'false' }}" style="display: {% if filterActive %}block{% else %}none{% endif %}">
+                                {% set filterDisplayed = filter.vars.name in filters %}
+                                <div class="form-group" id="filter-job-execution-{{ filter.vars.name }}" {{ stimulus_target('sonata-filter', 'group') }} {% if not filterDisplayed %}hidden{% endif %}>
                                     <label for="{{ filter.vars.id }}" class="col-sm-3 control-label">{{ filter.vars.label|trans({}, filter.vars.translation_domain) }}</label>
-                                    <div class="col-sm-4 advanced-filter">
+                                    <div class="col-sm-4 advanced-filter" hidden>
                                     </div>
                                     <div class="col-sm-4">
                                         {{ form_widget(filter) }}
                                     </div>
                                     <div class="col-sm-1">
                                         <label class="control-label">
-                                            <a href="#" class="sonata-toggle-filter sonata-ba-action" filter-target="filter-job-{{ filter.vars.name }}" filter-container="filter-container-job">
-                                                <i class="fa fa-minus-circle" aria-hidden="true"></i>
+                                            <a href="#" class="sonata-ba-action" {{ stimulus_action('sonata-filter', 'hideFilter', 'click', { 'id': 'filter-job-execution-' ~ filter.vars.name }) }}>
+                                                <i class="fas fa-minus-circle" aria-hidden="true"></i>
                                             </a>
                                         </label>
                                     </div>
@@ -205,9 +212,8 @@
                             {{ form_rest(form) }}
 
                             <div class="form-group">
-                                <button type="submit" class="btn btn-primary">
-                                    <i class="fa fa-filter" aria-hidden="true"></i>
-                                    {{ 'btn_filter'|trans({}, 'SonataAdminBundle') }}
+                                <button type="submit" class="btn btn-primary" {{ stimulus_target('sonata-filter', 'submitter') }}>
+                                    <i class="fas fa-filter" aria-hidden="true"></i> {{ 'btn_filter'|trans({}, 'SonataAdminBundle') }}
                                 </button>
 
                                 <a class="btn btn-default" href="{{ path('yokai_batch.job_list') }}">