From 037014d0241a93c4e695a1e532575114220900bc Mon Sep 17 00:00:00 2001
From: Herculino Trotta <netotrotta@gmail.com>
Date: Sun, 5 Jan 2025 01:22:14 -0300
Subject: [PATCH] feat(categories): add tab to show archived categories

---
 app/apps/transactions/urls.py                 | 10 ++++
 app/apps/transactions/views/categories.py     | 26 +++++++-
 app/templates/categories/fragments/list.html  | 59 ++++---------------
 app/templates/categories/fragments/table.html | 59 +++++++++++++++++++
 app/templates/categories/pages/index.html     |  2 +-
 5 files changed, 106 insertions(+), 50 deletions(-)
 create mode 100644 app/templates/categories/fragments/table.html

diff --git a/app/apps/transactions/urls.py b/app/apps/transactions/urls.py
index f0402ea..09ec2a5 100644
--- a/app/apps/transactions/urls.py
+++ b/app/apps/transactions/urls.py
@@ -79,6 +79,16 @@ urlpatterns = [
     ),
     path("categories/", views.categories_index, name="categories_index"),
     path("categories/list/", views.categories_list, name="categories_list"),
+    path(
+        "categories/table/active/",
+        views.categories_table_active,
+        name="categories_table_active",
+    ),
+    path(
+        "categories/table/archived/",
+        views.categories_table_archived,
+        name="categories_table_archived",
+    ),
     path("categories/add/", views.category_add, name="category_add"),
     path(
         "categories/<int:category_id>/edit/",
diff --git a/app/apps/transactions/views/categories.py b/app/apps/transactions/views/categories.py
index 4c6975a..1f6fea5 100644
--- a/app/apps/transactions/views/categories.py
+++ b/app/apps/transactions/views/categories.py
@@ -25,11 +25,33 @@ def categories_index(request):
 @login_required
 @require_http_methods(["GET"])
 def categories_list(request):
-    categories = TransactionCategory.objects.all().order_by("id")
     return render(
         request,
         "categories/fragments/list.html",
-        {"categories": categories},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def categories_table_active(request):
+    categories = TransactionCategory.objects.filter(active=True).order_by("id")
+    return render(
+        request,
+        "categories/fragments/table.html",
+        {"categories": categories, "active": True},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def categories_table_archived(request):
+    categories = TransactionCategory.objects.filter(active=False).order_by("id")
+    return render(
+        request,
+        "categories/fragments/table.html",
+        {"categories": categories, "active": False},
     )
 
 
diff --git a/app/templates/categories/fragments/list.html b/app/templates/categories/fragments/list.html
index f14ba09..fe950d3 100644
--- a/app/templates/categories/fragments/list.html
+++ b/app/templates/categories/fragments/list.html
@@ -15,53 +15,18 @@
   </div>
 
   <div class="card">
-    <div class="card-body table-responsive">
-      {% if categories %}
-      <c-config.search></c-config.search>
-      <table class="table table-hover">
-        <thead>
-          <tr>
-            <th scope="col" class="col-auto"></th>
-            <th scope="col" class="col">{% translate 'Name' %}</th>
-            <th scope="col" class="col">{% translate 'Muted' %}</th>
-          </tr>
-        </thead>
-        <tbody>
-          {% for category in categories %}
-          <tr class="category">
-            <td class="col-auto text-center">
-              <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
-                <a class="btn btn-secondary btn-sm"
-                      role="button"
-                      data-bs-toggle="tooltip"
-                      data-bs-title="{% translate "Edit" %}"
-                      hx-get="{% url 'category_edit' category_id=category.id %}"
-                      hx-target="#generic-offcanvas">
-                  <i class="fa-solid fa-pencil fa-fw"></i></a>
-                <a class="btn btn-secondary btn-sm text-danger"
-                        role="button"
-                        data-bs-toggle="tooltip"
-                        data-bs-title="{% translate "Delete" %}"
-                        hx-delete="{% url 'category_delete' category_id=category.id %}"
-                        hx-trigger='confirmed'
-                        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 it!" %}"
-                        _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
-              </div>
-            </td>
-            <td class="col">{{ category.name }}</td>
-            <td class="col">
-              {% if category.mute %}<i class="fa-solid fa-check text-success"></i>{% endif %}
-            </td>
-          </tr>
-          {% endfor %}
-        </tbody>
-      </table>
-      {% else %}
-      <c-msg.empty title="{% translate "No categories" %}" remove-padding></c-msg.empty>
-      {% endif %}
+    <div class="card-header">
+      <ul class="nav nav-pills card-header-pills" id="myTab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" data-bs-toggle="tab" type="button" role="tab" aria-selected="true" hx-get="{% url 'categories_table_active' %}" hx-trigger="load, click" hx-target="#categories-table">{% translate 'Active' %}</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" hx-get="{% url 'categories_table_archived' %}" hx-target="#categories-table" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">{% translate 'Archieved' %}</button>
+        </li>
+      </ul>
+    </div>
+    <div class="card-body">
+      <div id="categories-table"></div>
     </div>
   </div>
 </div>
diff --git a/app/templates/categories/fragments/table.html b/app/templates/categories/fragments/table.html
new file mode 100644
index 0000000..b1bdcc4
--- /dev/null
+++ b/app/templates/categories/fragments/table.html
@@ -0,0 +1,59 @@
+{% load i18n %}
+{% if active %}
+  <div class="show-loading" hx-get="{% url 'categories_table_active' %}" hx-trigger="updated from:window"
+       hx-swap="outerHTML">
+{% else %}
+  <div class="show-loading" hx-get="{% url 'categories_table_archived' %}" hx-trigger="updated from:window"
+       hx-swap="outerHTML">
+{% endif %}
+<div class="table-responsive">
+  {% if categories %}
+    <c-config.search></c-config.search>
+    <table class="table table-hover">
+      <thead>
+      <tr>
+        <th scope="col" class="col-auto"></th>
+        <th scope="col" class="col">{% translate 'Name' %}</th>
+        <th scope="col" class="col">{% translate 'Muted' %}</th>
+      </tr>
+      </thead>
+      <tbody>
+      {% for category in categories %}
+        <tr class="category">
+          <td class="col-auto text-center">
+            <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+              <a class="btn btn-secondary btn-sm"
+                 role="button"
+                 data-bs-toggle="tooltip"
+                 hx-swap="innerHTML"
+                 data-bs-title="{% translate "Edit" %}"
+                 hx-get="{% url 'category_edit' category_id=category.id %}"
+                 hx-target="#generic-offcanvas">
+                <i class="fa-solid fa-pencil fa-fw"></i></a>
+              <a class="btn btn-secondary btn-sm text-danger"
+                 role="button"
+                 data-bs-toggle="tooltip"
+                 data-bs-title="{% translate "Delete" %}"
+                 hx-delete="{% url 'category_delete' category_id=category.id %}"
+                 hx-trigger='confirmed'
+                 hx-swap="innerHTML"
+                 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 it!" %}"
+                 _="install prompt_swal"><i class="fa-solid fa-trash fa-fw"></i></a>
+            </div>
+          </td>
+          <td class="col">{{ category.name }}</td>
+          <td class="col">
+            {% if category.mute %}<i class="fa-solid fa-check text-success"></i>{% endif %}
+          </td>
+        </tr>
+      {% endfor %}
+      </tbody>
+    </table>
+  {% else %}
+    <c-msg.empty title="{% translate "No categories" %}" remove-padding></c-msg.empty>
+  {% endif %}
+</div>
+</div>
diff --git a/app/templates/categories/pages/index.html b/app/templates/categories/pages/index.html
index 4714017..218b7bc 100644
--- a/app/templates/categories/pages/index.html
+++ b/app/templates/categories/pages/index.html
@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Categories' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'categories_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
+<div hx-get="{% url 'categories_list' %}" hx-trigger="load" class="show-loading"></div>
 {% endblock %}