feat: add all transactions page

app/apps/transactions/urls.py

@@ -2,6 +2,10 @@ from django.urls import path
 import apps.transactions.views as views
 
 urlpatterns = [
+    path("transactions/", views.transaction_all_index, name="transactions_all_index"),
+    path(
+        "transactions/list/", views.transaction_all_list, name="transactions_all_list"
+    ),
     path(
         "transactions/actions/pay",
         views.bulk_pay_transactions,

app/apps/transactions/views/transactions.py

@@ -2,17 +2,18 @@ import datetime
 
 from django.contrib import messages
 from django.contrib.auth.decorators import login_required
+from django.core.paginator import Paginator
 from django.http import HttpResponse
 from django.shortcuts import render, get_object_or_404
 from django.utils import timezone
 from django.utils.translation import gettext_lazy as _
-from django.views import View
 from django.views.decorators.csrf import csrf_exempt
 from django.views.decorators.http import require_http_methods
 
 from apps.common.decorators.htmx import only_htmx
-from apps.transactions.forms import TransactionForm, TransferForm, InstallmentPlanForm
+from apps.transactions.forms import TransactionForm, TransferForm
 from apps.transactions.models import Transaction
+from apps.transactions.filters import TransactionsFilter
 
 
 @only_htmx
@@ -150,3 +151,48 @@ def transaction_pay(request, transaction_id):
         f'{"paid" if new_is_paid else "unpaid"}, monthly_summary_update'
     )
     return response
+
+
+@login_required
+@require_http_methods(["GET"])
+def transaction_all_index(request):
+    f = TransactionsFilter(request.GET)
+    return render(request, "transactions/pages/transactions.html", {"filter": f})
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def transaction_all_list(request):
+    transactions = (
+        Transaction.objects.prefetch_related(
+            "account",
+            "account__group",
+            "category",
+            "tags",
+            "account__exchange_currency",
+            "account__currency",
+            "installment_plan",
+        )
+        .all()
+        .order_by("date")
+    )
+
+    f = TransactionsFilter(request.GET, queryset=transactions)
+
+    page_number = request.GET.get("page", 1)
+    paginator = Paginator(f.qs, 100)
+    page_obj = paginator.get_page(page_number)
+
+    return render(
+        request,
+        "transactions/fragments/list_all.html",
+        {
+            "page_obj": page_obj,
+            "paginator": paginator,
+        },
+    )
+
+    # response.headers["HX-Push-Url"] = (
+    #     f"{reverse('transactions_all_index')}?{request.GET.urlencode()}"
+    # )

app/templates/includes/navbar.html

@@ -34,13 +34,15 @@
           </a>
         </li>
         <li class="nav-item dropdown">
-          <a class="nav-link dropdown-toggle {% active_link views='installment_plans_index||recurring_trasanctions_index' %}"
+          <a class="nav-link dropdown-toggle {% active_link views='installment_plans_index||recurring_trasanctions_index||transactions_all_index' %}"
              href="#" role="button"
              data-bs-toggle="dropdown"
              aria-expanded="false">
             {% translate 'Transactions' %}
           </a>
           <ul class="dropdown-menu">
+            <li><a class="dropdown-item {% active_link views='transactions_all_index' %}"
+                   href="{% url 'transactions_all_index' %}">{% translate 'All' %}</a></li>
             <li>
               <hr class="dropdown-divider">
             </li>

app/templates/transactions/fragments/list_all.html

@@ -0,0 +1,156 @@
+{% load i18n %}
+<div id="transactions-list"
+     _="on change or click
+          if no <input[type='checkbox']:checked/> in me
+            add .tw-hidden to #actions-bar
+          else
+            remove .tw-hidden from #actions-bar
+          end
+        end">
+  {% for transaction in page_obj %}
+    <c-transaction.item :transaction="transaction"></c-transaction.item>
+  {% empty %}
+  <div class="row p-5">
+    <div class="col p-5">
+      <div class="text-center">
+        <i class="fa-solid fa-circle-xmark tw-text-6xl"></i>
+        <p class="lead mt-4 mb-0">{% translate "No transactions found" %}</p>
+        <p class="tw-text-gray-500">{% translate "Try adding one" %}</p>
+      </div>
+    </div>
+  </div>
+  {% endfor %}
+  {% if page_obj.has_other_pages %}
+  <div class="mt-auto">
+    <input value="{{ page_obj.number }}" name="page" type="hidden" id="page">
+
+    <nav aria-label="Navegação por páginas">
+    <ul class="pagination justify-content-center mt-5">
+      <li class="page-item">
+        <a class="page-link tw-cursor-pointer {% if not page_obj.has_previous %}disabled{% endif %}"
+           hx-get="{% if page_obj.has_previous %}{% url 'transactions_all_list' %}{% endif %}"
+           hx-vals='{"page": 1}'
+           hx-include="#filter"
+           hx-target="#transactions-list"
+           aria-label="Primeira página"
+           hx-swap="show:top">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
+      </li>
+      {% for page_number in page_obj.paginator.page_range %}
+              {% comment %}
+                  This conditional allows us to display up to 3 pages before and after the current page
+                  If you decide to remove this conditional, all the pages will be displayed
+
+                  You can change the 3 to any number you want e.g
+                  To display only 5 pagination items, change the 3 to 2 (2 before and 2 after the current page)
+              {% endcomment %}
+              {% if page_number <= page_obj.number|add:3 and page_number >= page_obj.number|add:-3 %}
+                  {% if page_obj.number == page_number %}
+                      <li class="page-item active">
+                          <a class="page-link tw-cursor-pointer">
+                              {{ page_number }}
+                          </a>
+                      </li>
+                  {% else %}
+                      <li class="page-item">
+                          <a class="page-link tw-cursor-pointer"
+                             hx-get="{% url 'transactions_all_list' %}"
+                             hx-vals='{"page": {{ page_number }}}'
+                             hx-include="#filter"
+                             hx-target="#transactions-list"
+                             hx-swap="show:top">
+                              {{ page_number }}
+                          </a>
+                      </li>
+                  {% endif %}
+              {% endif %}
+      {% endfor %}
+      {% if page_obj.number|add:3 < page_obj.paginator.num_pages %}
+        <li class="page-item">
+          <a class="page-link disabled"
+             aria-label="...">
+            <span aria-hidden="true">...</span>
+          </a>
+        </li>
+        <li class="page-item">
+          <a class="page-link tw-cursor-pointer"
+             hx-get="{% url 'transactions_all_list' %}" hx-target="#transactions-list"
+             hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
+             hx-include="#filter"
+             hx-swap="show:top"
+             aria-label="Última página">
+            <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
+          </a>
+        </li>
+      {% endif %}
+      <li class="page-item">
+        <a class="page-link {% if not page_obj.has_next %}disabled{% endif %} tw-cursor-pointer"
+           hx-get="{% if page_obj.has_next %}{% url 'transactions_all_list' %}{% endif %}"
+           hx-vals='{"page": {{ page_obj.paginator.num_pages }}}'
+           hx-include="#filter"
+           hx-swap="show:top"
+           hx-target="#transactions-list"
+           aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+  </div>
+  {% endif %}
+{#  Floating bar#}
+<div class="tw-sticky tw-bottom-4 tw-left-0 tw-right-0 tw-z-50 tw-hidden mx-auto tw-w-fit" id="actions-bar">
+  <div class="card slide-in-left">
+    <div class="card-body p-2">
+      {% spaceless %}
+      <div class="btn-group" role="group">
+        <button class="btn btn-secondary btn-sm"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate 'Select All' %}"
+                _="on click set <#transactions-list input[type='checkbox']/>'s checked to true then call me.blur()">
+          <i class="fa-solid fa-check-double"></i>
+        </button>
+        <button class="btn btn-secondary btn-sm"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate 'Unselect All' %}"
+                _="on click set <#transactions-list input[type='checkbox']/>'s checked to false then call me.blur()">
+          <i class="fa-solid fa-xmark tw-text-red-400"></i>
+        </button>
+      </div>
+      <div class="vr mx-3 tw-align-middle"></div>
+      <div class="btn-group me-3" role="group">
+        <button class="btn btn-secondary btn-sm"
+              hx-get="{% url 'transactions_bulk_pay' %}"
+              hx-include=".transaction"
+              data-bs-toggle="tooltip"
+              data-bs-title="{% translate 'Mark as paid' %}">
+        <i class="fa-regular fa-circle-check tw-text-green-400"></i>
+        </button>
+        <button class="btn btn-secondary btn-sm"
+                hx-get="{% url 'transactions_bulk_unpay' %}"
+                hx-include=".transaction"
+                data-bs-toggle="tooltip"
+                data-bs-title="{% translate 'Mark as unpaid' %}">
+          <i class="fa-regular fa-circle tw-text-red-400"></i>
+        </button>
+      </div>
+      <button class="btn btn-secondary btn-sm"
+              hx-get="{% url 'transactions_bulk_delete' %}"
+              hx-include=".transaction"
+              hx-trigger="confirmed"
+              data-bs-toggle="tooltip"
+              data-bs-title="{% translate 'Delete' %}"
+              data-bypass-on-ctrl="true"
+              data-title="{% translate "Are you sure?" %}"
+              data-text="{% translate "You won't be able to revert this!" %}"
+              data-confirm-text="{% translate "Yes, delete them!" %}"
+              _="install prompt_swal">
+        <i class="fa-solid fa-trash text-danger"></i>
+      </button>
+      {% endspaceless %}
+    </div>
+  </div>
+</div>
+
+</div>

app/templates/transactions/pages/transactions.html

@@ -0,0 +1,39 @@
+{% extends 'layouts/base.html' %}
+{% load crispy_forms_tags %}
+{% load i18n %}
+
+{% block title %}{% translate 'Transactions' %}{% endblock %}
+
+{% block content %}
+<div class="container px-md-3 py-3 column-gap-5">
+  <div class="row gx-xl-4 gy-3">
+    <div class="col-12 col-xl-4">
+      {#      Filter transactions#}
+      <div class="row mb-1">
+          <div class="col-12">
+            <div class="d-flex mb-3 align-self-center">
+              <div class="me-auto"><h4><i class="fa-solid fa-filter me-2"></i>{% translate 'Filter' %}</h4></div>
+              <div class="align-self-center">
+                <a href="{% url 'transactions_all_index' %}" type="button" class="btn btn-outline-danger btn-sm"
+                   hx-target="body" hx-boost="true">{% translate 'Clear' %}</a>
+              </div>
+            </div>
+            <hr>
+            <form hx-get="{% url 'transactions_all_list' %}" hx-trigger="change, submit, search"
+                    hx-target="#transactions" id="filter" hx-indicator="#transactions"
+                    _="install init_tom_select">
+                {% crispy filter.form %}
+            </form>
+          </div>
+        </div>
+    </div>
+    <div class="col-12 col-xl-8">
+      <div id="transactions"
+           class="show-loading"
+           hx-get="{% url 'transactions_all_list' %}"
+           hx-trigger="load, updated from:window" hx-include="#filter, #page">
+      </div>
+    </div>
+  </div>
+</div>
+{% endblock %}