Coloca filtros em um modal

sigi/apps/utils/filters.py

@@ -251,13 +251,32 @@ class DateRangeFilter(admin.FieldListFilter):
                 "query_string": changelist.get_query_string(
                     remove=self.lookup_kwargs
                 ),
-                "form": self.get_date_form(self.used_parameters),
+                "form": self.get_date_form(self.used_parameters, changelist),
             }
         ]
 
-    def get_date_form(self, context={}):
+    def get_date_form(self, context={}, changelist=None):
         date_fields = {
-            name: forms.DateField(required=False) for name in self.lookup_kwargs
+            name: forms.DateField(
+                required=False,
+                label=(_("De") if "__gte" in name else _("Até")),
+                widget=forms.DateInput(
+                    attrs={
+                        "class": "datepicker admin_filter",
+                        "placeholder": (
+                            _("De") if "__gte" in name else _("Até")
+                        ),
+                        "data-clear": changelist.get_query_string(
+                            remove=[
+                                name,
+                            ]
+                        )
+                        if changelist
+                        else "",
+                    }
+                ),
+            )
+            for name in self.lookup_kwargs
         }
         DateForm = type("DateForm", (forms.Form,), date_fields)
 

sigi/apps/utils/templates/admin/date_range_filter.html

@@ -1,13 +1,11 @@
 {% load i18n %}
 {% with choice=choices.0 %}
 <div class="col s12">
-  <form method="get" action="{{ choice.query_string|iriencode }}">
   <label>{% blocktrans with filter_title=title %} By {{ filter_title }} {% endblocktrans %}</label>
-    <button class="btn-floating btn-small right pulse waves-effect waves-light" type="submit"><i class="material-icons tiny">send</i></button>
+  <p></p><a href="{{ choice.query_string|iriencode }}">{% trans 'All' %}</a></p>
-    <a href="{{ choice.query_string|iriencode }}">{% trans 'All' %}</a>
   {% for field in choice.form %}
-      <input id="{{ field.id }}" name="{{ field.name }}" type="text" class="datepicker" value="{{ field.value|default_if_none:''|date:"SHORT_DATE_FORMAT" }}"/>
+    {{ field }}
+    <!-- input id="{{ field.id }}" name="{{ field.name }}" type="text" class="datepicker admin_filter" value="{{ field.value|default_if_none:''|date:'SHORT_DATE_FORMAT' }}" placeholder="{{ field.label }}" data-clear="{{ choice.query_string|iriencode }}"/ -->
   {% endfor %}
-  </form>
 </div>
 {% endwith %}

sigi/static/material/admin/js/filters.js

@@ -0,0 +1,26 @@
+$("#apply-filters").on("click", function () {
+    var query = [];
+    var retorno = decodeURIComponent(window.location.search).replace("?", "").split("&");
+    var remove = [];
+    var filters = $(".admin_filter");
+    for (i = 0; i < filters.length; i++) {
+        var element = $(filters[i]);
+        var filter;
+        if (element.attr("type") == "text") {
+            var cleaner = decodeURIComponent(element.attr("data-clear")).replace("?", "").split("&");
+            if (element.val() == "") {
+                filter = []
+            } else {
+                filter = [element.attr("name") + '=' + decodeURIComponent(element.val())];
+            }
+            filter = filter.concat(cleaner);
+        } else {
+            filter = decodeURIComponent(element.val()).replace("?", "").split("&");
+        }
+        remove = remove.concat(retorno.filter(x => !filter.includes(x)));
+        query = query.concat(filter.filter(x => !retorno.includes(x)));
+    }
+    query = query.concat(retorno.filter(x => !remove.includes(x)));
+    query = query.filter(x => x != "");
+    window.location.href = "?" + (query.join("&"));
+});

sigi/templates/admin/change_list.html

@@ -30,7 +30,7 @@
       <ul>
         {% block object-tools-items %}
         <li>
-          <a href="#" data-target="float-filter" class="btn-floating tooltipped waves-effect waves-light sidenav-trigger" data-position="left" data-tooltip="{% trans 'Filter' %}">
+          <a href="#float-filter" class="btn-floating tooltipped waves-effect waves-light modal-trigger" data-position="left" data-tooltip="{% trans 'Filter' %}">
             <i class="material-icons" aria-hidden="true">filter_list</i>
           </a>
         </li>
@@ -67,13 +67,25 @@
       {% block pagination %}{% pagination cl %}{% endblock %}
     </div>
     {% block side_wrapper %}
-    <div id="float-filter" class="float-filter hide">
+    <div id="float-filter" class="modal">
-      <div id="side-wrapper" class="side-wrapper">
+      <div id="side-wrapper" class="modal-content">
-        <div class="card">
         {% block filters %}
-            {{ block.super }}
+          {% if cl.has_filters %}
+            <h4>{% trans 'Filter' %}</h4>
+            <div class="row">
+              <div class="col s12">
+                <a href="?">{% trans "Clear all filters" %}</a>
+              </div>
+            </div>
+            <div class="row">
+              {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
+            </div>
+          {% endif %}
         {% endblock %}
       </div>
+      <div class="modal-footer">
+        <a href="#!" class="modal-close waves-effect waves-green btn-flat">{% trans "Close" %}</a>
+        <a id="apply-filters" href="#" class="waves-effect waves-green btn-flat">{% trans 'Filtrar' %}</a>
       </div>
     </div>
     {% endblock %}
@@ -88,14 +100,14 @@
     $(document).ready(function(){
       $('.fixed-action-btn').floatingActionButton();
       M.Tooltip.init($('.tooltipped'), {});
-      $('.float-filter').each(function() {
+      document.addEventListener('DOMContentLoaded', function() {
-        var id=this.id;
+      M.Modal.init($(".modal"), {});
-        $(`[data-target="${id}"]`).on("click", function(e) {
-          e.preventDefault();
-          console.log('Rodou aqui também');
-          var targetid = $(this).attr('data-target');
-          $(`#${targetid}`).toggleClass('hide');
   });
+
+  // Or with jQuery
+
+  $(document).ready(function(){
+    $('.modal').modal();
   });
     });
   </script>