feat(eleicao): add city filter

nossas · Sep 19, 2023 · 26600d3 · 26600d3
1 parent ec50878
commit 26600d3
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/app/eleicao/cms_plugins.py b/app/eleicao/cms_plugins.py
@@ -61,9 +61,13 @@ def render(self, context, instance, placeholder):
         # Filtered List
         qs = Candidate.objects.filter(status=CandidateStatusChoices.published)
         filter_state = request.GET.get("uf", None)
+        filter_city = request.GET.get("city", None)
         if filter_state:
             ctx["filter_state"] = filter_state
             qs = qs.filter(place__state__iexact=filter_state)
+        if filter_city:
+            ctx["filter_city"] = filter_city
+            qs = qs.filter(place__city__iexact=filter_city)
 
         page_number = request.GET.get("page", 1)
         p = Paginator(qs, self.per_page)

diff --git a/app/eleicao/forms/filters.py b/app/eleicao/forms/filters.py
@@ -3,6 +3,8 @@
 from django.utils.safestring import mark_safe
 from django.utils.functional import lazy
 
+from django.urls import reverse_lazy
+
 # from django_select2 import forms as s2forms
 
 from ..csv.choices import get_states
@@ -14,8 +16,19 @@ class CandidateListFilter(forms.Form):
         choices=lazy(get_states, list)(),
         widget=forms.Select(
             attrs={
-                "class": "w-full max-w-xs select select-bordered rounded-lg bg-[#EFEFEF] border-[#E0E0E0]",
-                "onchange": "this.form.submit()"
+                # "class": "w-full max-w-xs select select-bordered rounded-lg bg-[#EFEFEF] border-[#E0E0E0]",
+                "data-cep-fields": "state",
+                "data-cep-url": reverse_lazy("eleicao:cep"),
+            }
+        )
+    )
+
+    city = forms.CharField(
+        label="Cidade",
+        widget=forms.Select(
+            attrs={
+                "data-cep-fields": "city",
+                "data-cep-url": reverse_lazy("eleicao:cep"),
             }
         )
     )

diff --git a/app/eleicao/static/js/widgets/cep-fields.js b/app/eleicao/static/js/widgets/cep-fields.js
@@ -7,9 +7,9 @@
     const $placeField = $('[data-cep-fields="place"]');
 
     if ($stateField.length) {
-      $stateField.select2({ placeholder: 'Selecione seu estado' });
-      $cityField.select2({ placeholder: 'Selecione sua cidade' });
-      $placeField.select2({ placeholder: 'Selecione o CT' });
+      $stateField.select2({ dropdownAutoWidth: true, width: 'auto', placeholder: 'Selecione seu estado' });
+      $cityField.select2({ dropdownAutoWidth: true, width: 'auto', placeholder: 'Selecione sua cidade' });
+      $placeField.select2({ dropdownAutoWidth: true, width: 'auto', placeholder: 'Selecione o CT' });
 
       var uf;
       $stateField.on("change", (evt) => {

diff --git a/app/eleicao/templates/eleicao/filters/candidate_list_filter.html b/app/eleicao/templates/eleicao/filters/candidate_list_filter.html
@@ -1,8 +1,15 @@
-<form class="flex flex-wrap gap-4 justify-between items-center pb-12 w-full filters">
-    <div class="max-w-xs form-control">
+<form class="flex flex-wrap gap-4 items-center pb-12 w-full filters">
+    <div class="form-control">
         <label class="label">
             <span class="font-bold label-text">{{ form.uf.label }}</span>
         </label>
         {{ form.uf }}
     </div>
+    <div class="form-control">
+        <label class="label">
+            <span class="font-bold label-text">{{ form.city.label }}</span>
+        </label>
+        {{ form.city }}
+    </div>
+    <input class="btn btn-primary" type="submit" value="Enviar" />
 </form>
diff --git a/app/eleicao/templates/eleicao/plugins/candidate_list.html b/app/eleicao/templates/eleicao/plugins/candidate_list.html
@@ -1,3 +1,9 @@
+{% load sekizai_tags static %}
+
+{% addtoblock "css" %}
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
+{% endaddtoblock %}
+
 <main class="container mx-auto candidate-list">
     <section class="list-header">
         <div class="px-5 py-20 text-center text-[#1842AC]">
@@ -43,4 +49,10 @@ <h1 class="mb-3 text-4xl md:text-6xl">Conheça as candidaturas</h1>
             <p class="py-6 text-center text-[#1842AC]">Não encontrou as candidaturas do seu bairro? <a href="#" class="font-bold">Seja voluntário(a)</a> e fortaleça a campanha no seu território.</p>
         </div>
     </section>
-</main>
+</main>
+
+{% addtoblock "js" %}
+    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
+    <script src="{% static 'js/widgets/cep-fields.js' %}"></script>
+{% endaddtoblock %}