From 415e51f06283ea4c57f041dbbf0fae773d0c05a5 Mon Sep 17 00:00:00 2001
From: JKuijperM <jkmontero17@gmail.com>
Date: Tue, 17 Feb 2026 11:14:29 +0100
Subject: [PATCH] Modified the expenses_list filters

---
 .../expenses/static/expenses/css/base.css     |  57 +++++---
 .../templates/expenses/expense_list.html      | 122 ++++++++++--------
 expenses_manager/expenses/views.py            |   5 +
 3 files changed, 117 insertions(+), 67 deletions(-)

diff --git a/expenses_manager/expenses/static/expenses/css/base.css b/expenses_manager/expenses/static/expenses/css/base.css
index a1ee0ca..a99bbb3 100644
--- a/expenses_manager/expenses/static/expenses/css/base.css
+++ b/expenses_manager/expenses/static/expenses/css/base.css
@@ -105,21 +105,6 @@ a.danger {
     margin-bottom: 2rem;
 }
 
-.tag{
-    display: inline-block;
-    padding: 2px 6px;
-    margin-right: 4px;
-    background: #eef2f7;
-    border-radius: 4px;
-    font-size: 0.85rem;
-    text-decoration: none;
-    color: #333;
-}
-
-.tag:hover {
-    background: #dbe3ee;
-}
-
 .kpi-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -283,4 +268,46 @@ tbody tr:hover {
 .preset.active {
     background: #2563eb;
     color: white;
+}
+
+.filters {
+    margin-bottom: 1.5rem;
+}
+
+.filters-main {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    align-items: center;
+}
+
+.filters-advanced {
+    margin-top: 0.5rem;
+}
+
+.active-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    margin-top: 0.3rem;
+}
+
+.tag{
+    /* display: inline-block; */
+    padding: 0.2rem 0.5rem;
+    border-radius: 4px;
+    background: #eee;
+    text-decoration: none;
+    margin-right: 4px;
+    font-size: 0.85rem;
+    color: #333;
+}
+
+.tag.active {
+    background: #333;
+    color: white;
+}
+
+.tag:hover {
+    background: #dbe3ee;
 }
\ No newline at end of file
diff --git a/expenses_manager/expenses/templates/expenses/expense_list.html b/expenses_manager/expenses/templates/expenses/expense_list.html
index 9ff88b1..293d0c1 100644
--- a/expenses_manager/expenses/templates/expenses/expense_list.html
+++ b/expenses_manager/expenses/templates/expenses/expense_list.html
@@ -8,72 +8,90 @@
 {% block content %}
     <h1>Mis gastos</h1>
 
-    <form method="get">
-        <select name="year">
-            <option value="">Año</option>
-            {% for y in year_list %}
-                <option value="{{ y }}" 
+    <form method="get" class="filters">
+        <div class="filters-main">
+
+            <select name="year">
+                <option value="">Año</option>
+                    {% for y in year_list %}
+                    <option value="{{ y }}" 
                     {% if selected_year == y %}selected{% endif %}
-                >
+                    >
                     {{ y }}
                 </option>
-            {% endfor %}
-        </select>
-
-        <select name="month">
-            <option value="">Mes</option>
-            {% for m in months %}
-                <option value="{{ m }}" 
-                    {% if selected_month == m %}selected{% endif %}
-                >
-                    {{ m }}
-                </option>
-            {% endfor %}
-        </select>
-
-        <label>
-            Categoría:
-            <select name="category">
-                <option value="">Todas</option>
-                {% for cat in categories %}
-                    <option value="{{ cat.id }}"
-                        {% if selected_category == cat.id %}selected{% endif%}
-                    >
-                        {{ cat.name }}
-                    </option>
                 {% endfor %}
             </select>
-        </label>
+            
+            <select name="month">
+                <option value="">Mes</option>
+                    {% for m in months %}
+                    <option value="{{ m }}" 
+                    {% if selected_month == m %}selected{% endif %}
+                    >
+                    {{ m }}
+                </option>
+                {% endfor %}
+            </select>
+            
+            <select name="account">
+                <option value="">Cuenta</option>
+                {% for acc in accounts %}
+                    <option value="{{ acc.id }}"
+                        {% if selected_account == acc.id %}selected{% endif %}
+                    >
+                        {{ acc.name }}    
+                </option>
+                {% endfor %}
+            </select>
 
-        <select name="account">
-            <option value="">Cuenta</option>
-            {% for acc in accounts %}
-                <option value="{{ acc.id }}"
-                    {% if selected_account == acc.id %}selected{% endif %}
-                >
-                    {{ acc.name }}    
-            </option>
-            {% endfor %}
-        </select>
+            <button type="submit">Filtrar</button>
+            <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
+        </div>
 
-        <label for="tag">Filtrar por tags:</label>
-        <div class="active-tags">
-            {% for tag in tags_with_state %}
-                <a href="?{{ tag.query }}"
-                    class="tag {% if tag.active %}active{% endif %}">
-                    {{ tag.name }} {% if tag.active %} ✕{% endif %}
-                </a>
-            {% endfor %}
-        </div>>
+        <br>
 
-        <button type="submit">Filtrar</button>
-        <a href="{% url 'expense_list' %}">Limpiar</a>
+        <details class="filters-advanced"
+            {% if advanced_filters_open %}
+                open
+            {% endif %}
+        >
+            <summary>Filtros avanzados</summary>
+
+            <div class="advanced-content">
+                <label>
+                    Categoría:
+                    <select name="category" onchange="this.form.submit()">
+                        <option value="">Todas</option>
+                        {% for cat in categories %}
+                            <option value="{{ cat.id }}"
+                                {% if selected_category == cat.id %}selected{% endif%}
+                            >
+                                {{ cat.name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </label>
+        
+                <div class="tags-filters">
+                    <span>Tags:</span>
+                    <div class="active-tags">
+                        {% for tag in tags_with_state %}
+                        <a href="?{{ tag.query }}"
+                            class="tag {% if tag.active %}active{% endif %}">
+                            {{ tag.name }} {% if tag.active %} ✕{% endif %}
+                        </a>
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+        </details>
     </form>
 
     <br>
 
     <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>
 
+    <br>
     <br>
 
     <section>
diff --git a/expenses_manager/expenses/views.py b/expenses_manager/expenses/views.py
index e6b9f64..511e389 100644
--- a/expenses_manager/expenses/views.py
+++ b/expenses_manager/expenses/views.py
@@ -178,6 +178,10 @@ def expense_list(request):
             'query': query,
         })
 
+    advanced_filters_open = bool(
+        category or selected_tags
+    )
+
     return render (
         request,
         'expenses/expense_list.html',
@@ -199,6 +203,7 @@ def expense_list(request):
             'tags_with_state': tags_with_state,
             'accounts': Account.objects.filter(owner=request.user),
             'selected_account': account_id,
+            'advanced_filters_open' : advanced_filters_open
         },
     )