jkuijperm/expenses_manager
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Modified the expenses_list filters

Browse Source
This commit is contained in:
JKuijperM 2026-02-17 11:14:29 +01:00
parent 840bf75bb9
commit 415e51f062
3 changed files with 117 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
expenses_manager/expenses/static/expenses/css/base.css
View File

@ -105,21 +105,6 @@ a.danger {
margin-bottom: 2rem; 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 { .kpi-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@ -283,4 +268,46 @@ tbody tr:hover {
.preset.active { .preset.active {
background: #2563eb; background: #2563eb;
color: white; 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;
} }

122
expenses_manager/expenses/templates/expenses/expense_list.html
View File

@ -8,72 +8,90 @@
{% block content %} {% block content %}
<h1>Mis gastos</h1> <h1>Mis gastos</h1>
<form method="get"> <form method="get" class="filters">
<select name="year"> <div class="filters-main">
<option value="">Año</option>
{% for y in year_list %} <select name="year">
<option value="{{ y }}" <option value="">Año</option>
{% for y in year_list %}
<option value="{{ y }}"
{% if selected_year == y %}selected{% endif %} {% if selected_year == y %}selected{% endif %}
> >
{{ y }} {{ y }}
</option> </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 %} {% endfor %}
</select> </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"> <button type="submit">Filtrar</button>
<option value="">Cuenta</option> <a href="{% url 'expense_list' %}" class="btn-secondary">Limpiar</a>
{% for acc in accounts %} </div>
<option value="{{ acc.id }}"
{% if selected_account == acc.id %}selected{% endif %}
>
{{ acc.name }}
</option>
{% endfor %}
</select>
<label for="tag">Filtrar por tags:</label> <br>
<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>>
<button type="submit">Filtrar</button> <details class="filters-advanced"
<a href="{% url 'expense_list' %}">Limpiar</a> {% 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> </form>
<br> <br>
<a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a> <a class="btn" href="{% url 'expense_create' %}">➕ Nuevo gasto</a>
<br>
<br> <br>
<section> <section>

5
expenses_manager/expenses/views.py
View File

@ -178,6 +178,10 @@ def expense_list(request):
'query': query, 'query': query,
}) })
advanced_filters_open = bool(
category or selected_tags
)
return render ( return render (
request, request,
'expenses/expense_list.html', 'expenses/expense_list.html',
@ -199,6 +203,7 @@ def expense_list(request):
'tags_with_state': tags_with_state, 'tags_with_state': tags_with_state,
'accounts': Account.objects.filter(owner=request.user), 'accounts': Account.objects.filter(owner=request.user),
'selected_account': account_id, 'selected_account': account_id,
'advanced_filters_open' : advanced_filters_open
}, },
) )