Modified the filter by tags

expenses_manager/expenses/templates/expenses/expense_list.html

@@ -45,17 +45,15 @@
                 </select>
             </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>
+            <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 %}
-            </select>
+            </div>>
 
             <button type="submit">Filtrar</button>
             <a href="{% url 'expense_list' %}">Limpiar</a>
@@ -91,10 +89,11 @@
                         <td>{{ expense.amount }}</td>
                         <td>
                             {% for tag in expense.tags.all %}
-                                <!-- <span>{{ tag.name }}</span>{% if not forloop.last %}, {% endif %} -->
-                                <a href="?tag={{ tag.id }}" class="tag">{{ tag.name }}</a>
+                                <span class="tag">
+                                    {{ tag.name }}
+                                </span>
                             {% empty %}
-                                -
+                                <span>-</span>
                             {% endfor %}
                         </td>
                         <td>

expenses_manager/expenses/views.py

@@ -1,4 +1,5 @@
 from datetime import date
+from operator import truediv
 from .forms import ExpenseForm, TagForm
 from .models import Category, Expense, Tag
 # from dateutli.relativedelta import relativedelta
@@ -114,7 +115,9 @@ def expense_list(request):
     year = _get_int(request.GET.get('year'))
     month = _get_int(request.GET.get('month'))
     category = _get_int(request.GET.get('category'))
-    tag_id = _get_int(request.GET.get('tag'))
+    
+    tag_ids = request.GET.getlist('tag')
+    tag_ids = [int(t) for t in tag_ids]
     
     if year:
         expenses = expenses.filter(date__year=year)
@@ -125,8 +128,10 @@ def expense_list(request):
     if category:
         expenses = expenses.filter(category_id=category)
     
-    if tag_id:
-        expenses = expenses.filter(tags__id=tag_id)
+    if tag_ids:
+        expenses = expenses.filter(tags__id__in=tag_ids).distinct()
+    
+    selected_tags = tag_ids or []
     
     expenses = expenses.order_by('-date')
     
@@ -147,6 +152,26 @@ def expense_list(request):
     page_number = request.GET.get('page')
     page_obj = paginator.get_page(page_number)        
     
+    # tags with state
+    tags_with_state = []
+    
+    for tag in Tag.objects.filter(owner=request.user):
+        if tag.id in selected_tags:
+            new_tags = [t for t in selected_tags if t != tag.id]
+            active = True
+        else:
+            new_tags = selected_tags + [tag.id]
+            active = False
+        
+        query = '&'.join([f'tag={t}' for t in new_tags])
+        
+        tags_with_state.append({
+            'id': tag.id,
+            'name': tag.name,
+            'active': active,
+            'query': query,
+        })
+
     return render (
         request,
         'expenses/expense_list.html',
@@ -162,8 +187,9 @@ def expense_list(request):
             'kpi_total': total_amount,
             'kpi_count': expense_count,
             'kpi_categories': category_count,
-            'selected_tag': tag_id,
+            'selected_tags': selected_tags,
             'tags': Tag.objects.filter(owner=request.user),
+            'tags_with_state': tags_with_state,
         },
     )