Filter by tags in expenses list

This commit is contained in:
JKuijperM 2026-01-28 15:20:20 +01:00
parent 868fe23bbd
commit 36e0cfaa44
3 changed files with 43 additions and 7 deletions

View File

@ -18,4 +18,19 @@
.card-chart canvas { .card-chart canvas {
width: 100% !important; width: 100% !important;
height: 220px !important; height: 220px !important;
}
.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;
} }

View File

@ -1,7 +1,9 @@
{% load static %}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Gastos</title> <title>Gastos</title>
<link rel="stylesheet" href="{% static 'expenses/css/base.css' %}">
</head> </head>
<body> <body>
<h1>Mis gastos</h1> <h1>Mis gastos</h1>
@ -43,6 +45,18 @@
</select> </select>
</label> </label>
<label for="tag">Filtrar por tag:</label>
<select name="tag" id="tag" onchange="this.form.submit()">
<option value="">Todas</option>
{% for tag in tags %}
<option value="{{ tag.id }}"
{% if selected_tag == tag.id %}selected{% endif %}
>
{{ tag.name }}
</option>
{% endfor %}
</select>
<button type="submit">Filtrar</button> <button type="submit">Filtrar</button>
<a href="{% url 'expense_list' %}">Limpiar</a> <a href="{% url 'expense_list' %}">Limpiar</a>
</form> </form>
@ -77,7 +91,8 @@
<td>{{ expense.amount }}</td> <td>{{ expense.amount }}</td>
<td> <td>
{% for tag in expense.tags.all %} {% for tag in expense.tags.all %}
<span>{{ tag.name }}</span>{% if not forloop.last %}, {% endif %} <!-- <span>{{ tag.name }}</span>{% if not forloop.last %}, {% endif %} -->
<a href="?tag={{ tag.id }}" class="tag">{{ tag.name }}</a>
{% empty %} {% empty %}
- -
{% endfor %} {% endfor %}
@ -98,15 +113,15 @@
<div class="pagination"> <div class="pagination">
<span class="step-links"> <span class="step-links">
{% if page_obj.has_previous %} {% if page_obj.has_previous %}
<a href="?page=1{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">&laquo; Primero</a> <a href="?page=1{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">&laquo; Primero</a>
<a href="?page={{ page_obj.previous_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">Anterior</a> <a href="?page={{ page_obj.previous_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Anterior</a>
{% endif %} {% endif %}
<span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span> <span>Página {{ page_obj.number }} de {{ page_obj.paginator.num_pages }}</span>
{% if page_obj.has_next %} {% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">Siguiente</a> <a href="?page={{ page_obj.next_page_number }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Siguiente</a>
<a href="?page={{ page_obj.paginator.num_pages }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}">Último &raquo;</a> <a href="?page={{ page_obj.paginator.num_pages }}{% if selected_year %}&year={{ selected_year }}{% endif %}{% if selected_month %}&month={{ selected_month }}{% endif %}{% if selected_category %}&category={{ selected_category }}{% endif %}{% if selected_tag %}&tag={{ selected_tag }}{% endif %}">Último &raquo;</a>
{% endif %} {% endif %}
</span> </span>
</div> </div>

View File

@ -102,7 +102,7 @@ def expense_list(request):
expenses = Expense.objects.filter(owner=request.user) expenses = Expense.objects.filter(owner=request.user)
categories = Category.objects.filter(owner=request.user) categories = Category.objects.filter(owner=request.user)
year_list = ( year_list = (
Expense.objects.filter(owner=request.user) Expense.objects.filter(owner=request.user)
.dates('date', 'year') .dates('date', 'year')
@ -114,6 +114,7 @@ def expense_list(request):
year = _get_int(request.GET.get('year')) year = _get_int(request.GET.get('year'))
month = _get_int(request.GET.get('month')) month = _get_int(request.GET.get('month'))
category = _get_int(request.GET.get('category')) category = _get_int(request.GET.get('category'))
tag_id = _get_int(request.GET.get('tag'))
if year: if year:
expenses = expenses.filter(date__year=year) expenses = expenses.filter(date__year=year)
@ -124,6 +125,9 @@ def expense_list(request):
if category: if category:
expenses = expenses.filter(category_id=category) expenses = expenses.filter(category_id=category)
if tag_id:
expenses = expenses.filter(tags__id=tag_id)
expenses = expenses.order_by('-date') expenses = expenses.order_by('-date')
total_amount = expenses.aggregate( total_amount = expenses.aggregate(
@ -158,6 +162,8 @@ def expense_list(request):
'kpi_total': total_amount, 'kpi_total': total_amount,
'kpi_count': expense_count, 'kpi_count': expense_count,
'kpi_categories': category_count, 'kpi_categories': category_count,
'selected_tag': tag_id,
'tags': Tag.objects.filter(owner=request.user),
}, },
) )