feat: add active and finished tabs to installment plan management

app/apps/transactions/urls.py

@@ -82,6 +82,16 @@ urlpatterns = [
         views.installment_plans_list,
         name="installment_plans_list",
     ),
+    path(
+        "installment-plans/list/active/",
+        views.active_installment_plans_list,
+        name="active_installment_plans_list",
+    ),
+    path(
+        "installment-plans/list/finished/",
+        views.finished_installment_plans_list,
+        name="finished_installment_plans_list",
+    ),
     path(
         "installment-plans/add/",
         views.installment_plan_add,

app/apps/transactions/views/installment_plans.py

@@ -25,12 +25,41 @@ def installment_plans_index(request):
 @login_required
 @require_http_methods(["GET"])
 def installment_plans_list(request):
-    installment_plans = InstallmentPlan.objects.all().order_by("-end_date")
-
     return render(
         request,
         "installment_plans/fragments/list.html",
-        {"installment_plans": installment_plans},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def active_installment_plans_list(request):
+    today = timezone.localdate(timezone.now())
+    installment_plans = InstallmentPlan.objects.filter(end_date__gte=today).order_by(
+        "-end_date"
+    )
+
+    return render(
+        request,
+        "installment_plans/fragments/table.html",
+        {"installment_plans": installment_plans, "active": True},
+    )
+
+
+@only_htmx
+@login_required
+@require_http_methods(["GET"])
+def finished_installment_plans_list(request):
+    today = timezone.localdate(timezone.now())
+    installment_plans = InstallmentPlan.objects.filter(end_date__lt=today).order_by(
+        "-end_date"
+    )
+
+    return render(
+        request,
+        "installment_plans/fragments/table.html",
+        {"installment_plans": installment_plans, "active": False},
     )
 
 

app/templates/installment_plans/fragments/list.html

@@ -8,70 +8,25 @@
                 data-bs-toggle="tooltip"
                 data-bs-title="{% translate "Add" %}"
                 hx-get="{% url 'installment_plan_add' %}"
-                hx-target="#generic-offcanvas"
+                hx-target="#generic-offcanvas">
-                _="">
             <i class="fa-solid fa-circle-plus fa-fw"></i></a>
     </span></div>
     {% endspaceless %}
   </div>
 
-  <div class="border p-3 rounded-3 table-responsive">
+  <div class="card">
-    <table class="table table-hover">
+    <div class="card-header">
-    <thead>
+      <ul class="nav nav-pills card-header-pills" id="myTab" role="tablist">
-      <tr>
+        <li class="nav-item" role="presentation">
-        <th scope="col" class="col-auto"></th>
+          <button class="nav-link active" data-bs-toggle="tab" type="button" role="tab" aria-selected="true" hx-get="{% url 'active_installment_plans_list' %}" hx-trigger="load, click" hx-target="#installment-plans-table">{% translate 'All' %}</button>
-        <th scope="col" class="col">{% translate 'Name' %}</th>
+        </li>
-      </tr>
+        <li class="nav-item" role="presentation">
-    </thead>
+          <button class="nav-link" hx-get="{% url 'finished_installment_plans_list' %}" hx-target="#installment-plans-table" data-bs-toggle="tab" type="button" role="tab" aria-selected="false">{% translate 'Finished' %}</button>
-    <tbody>
+        </li>
-      {% for installment_plan in installment_plans %}
+      </ul>
-      <tr class="installment-plan">
+    </div>
-        <td class="col-auto text-center">
+
-          <div class="btn-group" role="group" aria-label="{% translate 'Actions' %}">
+    <div id="installment-plans-table"></div>
-            <a class="btn btn-secondary btn-sm"
+
-                  role="button"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Edit" %}"
-                  hx-get="{% url 'installment_plan_edit' installment_plan_id=installment_plan.id %}"
-                  hx-target="#generic-offcanvas">
-              <i class="fa-solid fa-pencil fa-fw"></i></a>
-            <a class="btn btn-secondary btn-sm"
-                  role="button"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Installments" %}"
-                  hx-get="{% url 'installment_plan_transactions' installment_plan_id=installment_plan.id %}"
-                  hx-target="#persistent-generic-offcanvas-left">
-              <i class="fa-solid fa-eye fa-fw"></i></a>
-            <a class="btn btn-secondary btn-sm text-info"
-                  role="button"
-                  data-bs-toggle="tooltip"
-                  data-bs-title="{% translate "Refresh" %}"
-                  hx-get="{% url 'installment_plan_refresh' installment_plan_id=installment_plan.id %}"
-                  hx-target="#generic-offcanvas"
-                  hx-trigger='confirmed'
-                  data-bypass-on-ctrl="true"
-                  data-title="{% translate "Are you sure?" %}"
-                  data-text="{% translate "This will update all transactions associated with this plan and recreate missing ones" %}"
-                  data-confirm-text="{% translate "Yes, refresh it!" %}"
-                  _="install prompt_swal">
-              <i class="fa-solid fa-arrows-rotate 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 'installment_plan_delete' installment_plan_id=installment_plan.id %}"
-                    hx-trigger='confirmed'
-                    data-bypass-on-ctrl="true"
-                    data-title="{% translate "Are you sure?" %}"
-                    data-text="{% translate "This will delete the plan and all transactions associated with it" %}"
-                    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">{{ installment_plan.description }}</td>
-      </tr>
-      {% endfor %}
-    </tbody>
-  </table>
   </div>
 </div>

app/templates/installment_plans/fragments/table.html

@@ -0,0 +1,69 @@
+{% load currency_display %}
+{% load i18n %}
+{% if active %}
+<div class="card-body show-loading" hx-get="{% url 'active_installment_plans_list' %}" hx-trigger="updated from:window" hx-swap="outerHTML">
+{% else %}
+<div class="card-body show-loading" hx-get="{% url 'finished_installment_plans_list' %}" hx-trigger="updated from:window" hx-swap="outerHTML">
+{% endif %}
+  <div class="table-responsive">
+    <table class="table table-hover">
+      <thead>
+        <tr>
+          <th scope="col" class="col-auto"></th>
+          <th scope="col" class="col">{% translate 'Name' %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for installment_plan in installment_plans %}
+        <tr class="installment-plan">
+          <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 'installment_plan_edit' installment_plan_id=installment_plan.id %}"
+                    hx-swap="innerHTML"
+                    hx-target="#generic-offcanvas">
+                <i class="fa-solid fa-pencil fa-fw"></i></a>
+              <a class="btn btn-secondary btn-sm"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Installments" %}"
+                    hx-get="{% url 'installment_plan_transactions' installment_plan_id=installment_plan.id %}"
+                    hx-swap="innerHTML"
+                    hx-target="#persistent-generic-offcanvas-left">
+                <i class="fa-solid fa-eye fa-fw"></i></a>
+              <a class="btn btn-secondary btn-sm text-info"
+                    role="button"
+                    data-bs-toggle="tooltip"
+                    data-bs-title="{% translate "Refresh" %}"
+                    hx-get="{% url 'installment_plan_refresh' installment_plan_id=installment_plan.id %}"
+                    hx-target="#generic-offcanvas"
+                    hx-trigger='confirmed'
+                    data-bypass-on-ctrl="true"
+                    data-title="{% translate "Are you sure?" %}"
+                    data-text="{% translate "This will update all transactions associated with this plan and recreate missing ones" %}"
+                    data-confirm-text="{% translate "Yes, refresh it!" %}"
+                    _="install prompt_swal">
+                <i class="fa-solid fa-arrows-rotate 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 'installment_plan_delete' installment_plan_id=installment_plan.id %}"
+                      hx-trigger='confirmed'
+                      data-bypass-on-ctrl="true"
+                      data-title="{% translate "Are you sure?" %}"
+                      data-text="{% translate "This will delete the plan and all transactions associated with it" %}"
+                      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">{{ installment_plan.description }}</td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>

app/templates/installment_plans/pages/index.html

@@ -4,5 +4,5 @@
 {% block title %}{% translate 'Installment Plans' %}{% endblock %}
 
 {% block content %}
-<div hx-get="{% url 'installment_plans_list' %}" hx-trigger="load, updated from:window" class="show-loading"></div>
+<div hx-get="{% url 'installment_plans_list' %}" hx-trigger="load" class="show-loading"></div>
 {% endblock %}