From 0dd9bb02c51d368fa38229b42d76a2a8fcc9f8d8 Mon Sep 17 00:00:00 2001
From: Roger Souza <rogersec42@gmail.com>
Date: Wed, 17 Oct 2018 22:53:09 -0300
Subject: [PATCH] Add the filters form to a collapsible container

---
 core/templates/dataset-detail.html | 41 +++----------------------
 core/templates/filters-form.html   | 48 ++++++++++++++++++++++++++++++
 2 files changed, 52 insertions(+), 37 deletions(-)
 create mode 100644 core/templates/filters-form.html

diff --git a/core/templates/dataset-detail.html b/core/templates/dataset-detail.html
index cac0a428..b8dace4c 100644
--- a/core/templates/dataset-detail.html
+++ b/core/templates/dataset-detail.html
@@ -53,44 +53,10 @@ <h4>{{ dataset.name }}</h4>
       </ul>
     </div>
     <div id="data" class="col s12">
-      <div class="row">
-        <div class="col s12 m12">
-          <h5>Filtros</h5>
-
-          <form method="get">
-            <div class="row">
-
-              <div class="input-field col s6">
-                <label class="active" for="search">Busca</label>
-                <input type="text" id="search" name="search" value="{{ query_dict.search|default:'' }}">
-              </div>
-
-              {% for field in fields %}
-              {% if field.frontend_filter %}{% with value=query_dict|getplainattribute:field|default:'' %}
-              <div class="input-field col s6">
-                <label class="active" for="{{ field.name }}">{{ field.title }}</label>
-              {% if field.has_choices %}
-                <select name="{{ field.name }}">
-                  <option value="" {% if value == "" %} selected{% endif %}>Todos</option>
-                  {% for choice in field.choices.data %}
-                  <option value="{{ choice }}"{% if value == choice %} selected{% endif %}>{% if choice == 'None' %}(vazio){% else %}{{ choice }}{% endif %}</option>
-                  {% endfor %}
-                </select>
-                {% else %}
-                <input type="text" name="{{ field.name }}" value="{{ value }}">
-              {% endif %}
-              </div>
-            {% endwith %}{% endif %}
-            {% endfor %}
-
-            </div>
-            <div class="row">
-              <input class="btn" type="submit" value="Filtrar">
-            </div>
-
-          </form>
+        <div class="row">
+          {% include "filters-form.html" with fields=fields query_dict=query_dict %}
         </div>
-      </div>
+    </div>
 
       <div class="row">
         <p>
@@ -197,5 +163,6 @@ <h5>Filtros</h5>
         "bInfo":          false,
     });
   });
+
 </script>
 {% endblock %}
diff --git a/core/templates/filters-form.html b/core/templates/filters-form.html
new file mode 100644
index 00000000..f60c4a0a
--- /dev/null
+++ b/core/templates/filters-form.html
@@ -0,0 +1,48 @@
+{% load utils %}
+
+<ul class="collapsible">
+        <li {% if not query_dict %} class="active" {% endif %}>
+          <div class="collapsible-header" style="display:block">
+            <i class="material-icons">filter_list</i>
+            Filtros
+            <i class="material-icons right">keyboard_arrow_down</i>
+          </div>
+          <div class="collapsible-body">
+          
+            <form method="get">
+                <div class="row">
+                    <div class="input-field col s6">
+                        <label class="active" for="search">Busca</label>
+                        <input type="text" id="search" name="search" value="{{ query_dict.search|default:'' }}">
+                    </div>
+                    {% for field in fields %}
+                        {% if field.frontend_filter %}{% with value=query_dict|getplainattribute:field|default:'' %}
+                        <div class="input-field col s6">
+                            <label class="active" for="{{ field.name }}">{{ field.title }}</label>
+                            {% if field.has_choices %}
+                            <select name="{{ field.name }}">
+                                <option value="" {% if value == "" %} selected{% endif %}>Todos</option>
+                                {% for choice in field.choices.data %}
+                                <option value="{{ choice }}"{% if value == choice %} selected{% endif %}>{% if choice == 'None' %}(vazio){% else %}{{ choice }}{% endif %}</option>
+                                {% endfor %}
+                            </select>
+                            {% else %}
+                            <input type="text" name="{{ field.name }}" value="{{ value }}">
+                            {% endif %}
+                        </div>
+                    {% endwith %}{% endif %}
+                    {% endfor %}
+                </div>
+                <div class="row">
+                    <input class="btn" type="submit" value="Filtrar">
+                </div>
+            </form>
+          </div>
+        </li>
+      </ul>
+      
+<script>
+  $(document).ready(function(){
+    $('.collapsible').collapsible();
+  });
+</script>
\ No newline at end of file