feat: add ordering selector to monthly_overview and all_transactions

app/apps/monthly_overview/views/main.py

@@ -17,6 +17,7 @@ from apps.common.decorators.htmx import only_htmx
 from apps.common.functions.dates import remaining_days_in_month
 from apps.transactions.filters import TransactionsFilter
 from apps.transactions.models import Transaction
+from apps.transactions.utils.default_ordering import default_order
 
 
 @login_required
@@ -61,13 +62,8 @@ def monthly_overview(request, month: int, year: int):
 @login_required
 @require_http_methods(["GET"])
 def transactions_list(request, month: int, year: int):
-    today = timezone.localdate(timezone.now())
+    order = request.GET.get("order")
-    yesterday = today - timezone.timedelta(days=1)
-    tomorrow = today + timezone.timedelta(days=1)
-    last_7_days = today - timezone.timedelta(days=7)
-    next_7_days = today + timezone.timedelta(days=7)
 
-    # TO-DO Improve date-order
     f = TransactionsFilter(request.GET)
     transactions_filtered = (
         f.qs.filter()
@@ -75,18 +71,6 @@ def transactions_list(request, month: int, year: int):
             reference_date__year=year,
             reference_date__month=month,
         )
-        .annotate(
-            date_order=Case(
-                When(date__lte=next_7_days, date__gte=tomorrow, then=Value(0)),
-                When(date=tomorrow, then=Value(1)),
-                When(date=today, then=Value(2)),
-                When(date=yesterday, then=Value(3)),
-                When(date__gte=last_7_days, date__lte=today, then=Value(4)),
-                default=Value(5),
-                output_field=IntegerField(),
-            )
-        )
-        .order_by("date_order", "date", "id")
         .prefetch_related(
             "account",
             "account__group",
@@ -97,6 +81,18 @@ def transactions_list(request, month: int, year: int):
             "installment_plan",
         )
     )
+
+    if order == "default":
+        transactions_filtered = default_order(
+            transactions_filtered, extra_ordering=["date", "id"]
+        )
+    elif order == "newer":
+        transactions_filtered = transactions_filtered.order_by("-date", "id")
+    elif order == "older":
+        transactions_filtered = transactions_filtered.order_by("date", "id")
+    else:
+        transactions_filtered = transactions_filtered.order_by("date", "id")
+
     return render(
         request,
         "monthly_overview/fragments/list.html",

app/apps/transactions/views/transactions.py

@@ -14,6 +14,7 @@ from apps.common.decorators.htmx import only_htmx
 from apps.transactions.forms import TransactionForm, TransferForm
 from apps.transactions.models import Transaction
 from apps.transactions.filters import TransactionsFilter
+from apps.transactions.utils.default_ordering import default_order
 
 
 @only_htmx
@@ -164,19 +165,26 @@ def transaction_all_index(request):
 @login_required
 @require_http_methods(["GET"])
 def transaction_all_list(request):
-    transactions = (
+    order = request.GET.get("order")
-        Transaction.objects.prefetch_related(
+
-            "account",
+    transactions = Transaction.objects.prefetch_related(
-            "account__group",
+        "account",
-            "category",
+        "account__group",
-            "tags",
+        "category",
-            "account__exchange_currency",
+        "tags",
-            "account__currency",
+        "account__exchange_currency",
-            "installment_plan",
+        "account__currency",
-        )
+        "installment_plan",
-        .all()
+    ).all()
-        .order_by("date")
+
-    )
+    if order == "default":
+        transactions = default_order(transactions, extra_ordering=["date", "id"])
+    elif order == "newer":
+        transactions = transactions.order_by("-date", "id")
+    elif order == "older":
+        transactions = transactions.order_by("date", "id")
+    else:
+        transactions = transactions.order_by("date", "id")
 
     f = TransactionsFilter(request.GET, queryset=transactions)
 

app/templates/monthly_overview/pages/overview.html

@@ -103,25 +103,35 @@
     <div class="col-12 col-xl-8 order-2 order-xl-1">
 {#      Filter transactions#}
       <div class="row mb-1">
-          <div class="col-12">
+          <div class="col-sm-6 col-12">
             <div class="dropdown">
               <button type="button" class="btn btn-sm btn-outline-primary dropdown-toggle" data-bs-toggle="dropdown"
                       aria-expanded="false" data-bs-auto-close="false">
                 <i class="fa-solid fa-filter fa-fw me-2"></i>{% translate 'Filter transactions' %}
               </button>
-              <form hx-get="{% url 'monthly_transactions_list' month=month year=year %}" hx-trigger="change, submit, search"
+              <form _="on change or submit or search trigger updated on window end
-                    hx-target="#transactions" id="filter" hx-indicator="#transactions"
+                       install init_tom_select"
-                    class="dropdown-menu p-4 tw-w-full lg:tw-w-3/4"
+                    id="filter"
-                    _="install init_tom_select">
+                    class="dropdown-menu p-4 tw-min-w-full sm:tw-min-w-[30em] md:tw-min-w-[40em]">
                 {% crispy filter.form %}
               </form>
             </div>
           </div>
+          <div class="col-sm-6 col-12 tw-content-center my-3 my-sm-0">
+            <div class="text-sm-end" _="on change trigger updated on window">
+              <label for="order">{% translate "Order by" %}</label>
+              <select class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded" name="order" id="order">
+                <option value="default">Default</option>
+                <option value="older">Oldest first</option>
+                <option value="newer">Newest first</option>
+              </select>
+            </div>
+          </div>
         </div>
       <div id="transactions"
            class="show-loading"
            hx-get="{% url 'monthly_transactions_list' month=month year=year %}"
-           hx-trigger="load, updated from:window" hx-include="#filter"></div>
+           hx-trigger="load, updated from:window" hx-include="#filter, #order"></div>
     </div>
   </div>
 </div>

app/templates/transactions/fragments/list_all.html

@@ -1,4 +1,8 @@
+{% load natural %}
 {% load i18n %}
+
+{% regroup page_obj by date|customnaturaldate as transactions_by_date %}
+
 <div id="transactions-list"
      _="on change or click
           if no <input[type='checkbox']:checked/> in me
@@ -7,30 +11,50 @@
             remove .tw-hidden from #actions-bar
           end
         end">
-  {% for transaction in page_obj %}
+  {% for x in transactions_by_date %}
-    <c-transaction.item :transaction="transaction"></c-transaction.item>
+    <div>
-  {% empty %}
+      <div class="mt-3 mb-1 w-100 tw-text-base border-bottom bg-body">
-  <div class="row p-5">
+        <a class="text-decoration-none d-inline-block w-100"
-    <div class="col p-5">
+           role="button"
-      <div class="text-center">
+           data-bs-toggle="collapse"
-        <i class="fa-solid fa-circle-xmark tw-text-6xl"></i>
+           data-bs-target="#{{ x.grouper|slugify }}"
-        <p class="lead mt-4 mb-0">{% translate "No transactions found" %}</p>
+           id="#{{ x.grouper|slugify }}-collapsible"
-        <p class="tw-text-gray-500">{% translate "Try adding one" %}</p>
+           aria-expanded="true"
+           aria-controls="collapseExample">
+        {{ x.grouper }}
+        </a>
+      </div>
+      <div class="collapse show" id="{{ x.grouper|slugify }}">
+        <div class="d-flex flex-column">
+        {% for transaction in x.list %}
+          <c-transaction.item :transaction="transaction"></c-transaction.item>
+        {% endfor %}
+        </div>
       </div>
     </div>
-  </div>
+  {% empty %}
-  {% endfor %}
+    <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">
+    <nav aria-label="{% translate 'Page navigation' %}">
     <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-include="#filter, #order"
            hx-target="#transactions-list"
            aria-label="Primeira página"
            hx-swap="show:top">
@@ -57,7 +81,7 @@
                           <a class="page-link tw-cursor-pointer"
                              hx-get="{% url 'transactions_all_list' %}"
                              hx-vals='{"page": {{ page_number }}}'
-                             hx-include="#filter"
+                             hx-include="#filter, #order"
                              hx-target="#transactions-list"
                              hx-swap="show:top">
                               {{ page_number }}
@@ -77,7 +101,7 @@
           <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-include="#filter, #order"
              hx-swap="show:top"
              aria-label="Última página">
             <span aria-hidden="true">{{ page_obj.paginator.num_pages }}</span>
@@ -88,7 +112,7 @@
         <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-include="#filter, #order"
            hx-swap="show:top"
            hx-target="#transactions-list"
            aria-label="Next">

app/templates/transactions/pages/transactions.html

@@ -28,10 +28,20 @@
         </div>
     </div>
     <div class="col-12 col-xl-8">
+      <div class="text-end tw-justify-end tw-flex tw-text-sm mb-3">
+        <div class="tw-content-center" _="on change trigger updated on window">
+          <label for="order">{% translate "Order by" %}</label>
+          <select class="tw-border-0 focus-visible:tw-outline-0 w-full pe-2 tw-leading-normal text-bg-tertiary tw-font-medium rounded" name="order" id="order">
+            <option value="default">Default</option>
+            <option value="older">Oldest first</option>
+            <option value="newer">Newest first</option>
+          </select>
+        </div>
+  </div>
       <div id="transactions"
            class="show-loading"
            hx-get="{% url 'transactions_all_list' %}"
-           hx-trigger="load, updated from:window" hx-include="#filter, #page">
+           hx-trigger="load, updated from:window" hx-include="#filter, #page, #order">
       </div>
     </div>
   </div>