Continue with list

project/main/templates/main/filter_list.html

@@ -3,5 +3,66 @@
 
 
 {% block content %}
-    {{ js_alert_work_in_progress() }}
+    <div class="card mb-2">
+        <div class="card-body">
+            <form id="filter-form"
+                class="row g-2 align-items-center"
+            >
+                <div class="col-auto">
+                    <label class="form-label mb-0">ZIP:</label>
+                </div>
+                <div class="col-auto">
+                    <input
+                        type="number"
+                        name="zip"
+                        class="form-control"
+                        hx-get="{{ url("filter-list-filter") }}"
+                        hx-trigger="keyup"
+                        hx-target="#filter-list-container"
+                        hx-include="[name='area'],[name='county']"
+                    />
+                </div>
+                <div class="col-auto">
+                    <label class="form-label mb-0">Area:</label>
+                </div>
+                <div class="col-auto">
+                    <input
+                        type="text"
+                        name="area"
+                        class="form-control"
+                        hx-get="{{ url("filter-list-filter") }}"
+                        hx-trigger="keyup"
+                        hx-target="#filter-list-container"
+                        hx-include="[name='zip'],[name='county']"
+                    />
+                </div>
+                <div class="col-auto">
+                    <label class="form-label mb-0">County:</label>
+                </div>
+                <div class="col-auto">
+                    <select
+                        name="county"
+                        class="form-select"
+                        hx-get="{{ url("filter-list-filter") }}"
+                        hx-trigger="change"
+                        hx-target="#filter-list-container"
+                        hx-include="[name='zip'],[name='area']"
+                    >
+                        <option value="">
+                            - All -
+                        </option>
+                        {% for county in counties %}
+                            <option value="{{ county.id }}">
+                                {{ county.name }}
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <div id="filter-list-container">
+        {% include "main/filter_list_content.html" %}
+    </div>
 {% endblock %}

project/main/templates/main/filter_list_content.html

@@ -0,0 +1,53 @@
+<table class="table">
+    <thead>
+    <tr>
+        <th>Zip Code</th>
+        <th>Post Office</th>
+        <th>Area</th>
+        <th>County</th>
+    </tr>
+    </thead>
+    <tbody>
+    {% for area in areas %}
+        <tr>
+            <td>{{ area.post_office.zip }}</td>
+            <td>{{ area.post_office.name }}</td>
+            <td>{{ area.name }}</td>
+            <td>{{ area.county.name }}</td>
+        </tr>
+    {% endfor %}
+    </tbody>
+</table>
+
+
+{% if pagination.page_count > 1 %}
+    <nav aria-label="Page navigation example">
+        <ul class="pagination">
+            {% if pagination.prev_page != None %}
+                <li class="page-item">
+                    <a class="page-link" href="#">Previous</a>
+                </li>
+            {% else %}
+                <li class="page-item disabled">
+                    <a class="page-link" href="#">Previous</a>
+                </li>
+            {% endif %}
+        
+            {% for p in range(1, pagination.page_count) %}
+                <li class="page-item {% if pagination.page == p %}active{% endif %}">
+                    <a class="page-link" href="#">{{ p }}</a>
+                </li>
+            {% endfor %}
+
+            {% if pagination.prev_page != None %}
+                <li class="page-item">
+                    <a class="page-link" href="#">Next</a>
+                </li>
+            {% else %}
+                <li class="page-item disabled">
+                    <a class="page-link" href="#">Next</a>
+                </li>
+            {% endif %}
+        </ul>
+    </nav>
+{% endif %}

project/main/views/__init__.py

@@ -4,7 +4,7 @@ from .complex_form.views import (
     RouteModuleHandleView,
     WarehouseManagementHandleView,
 )
-from .filter_list import FilterListView
+from .filter_list import FilterListFilterView, FilterListView
 from .form_validation import FormValidationView
 from .home import HomeView
 from .swap import SwapView

project/main/views/filter_list.py

@@ -1,7 +1,96 @@
+from dataclasses import dataclass
+from typing import Any, Tuple
+
+from django.db.models import Model, Q, QuerySet
+
+from project.main.models import Area, County
 from project.main.views.demo_view_base import DemoViewBase
 
+PAGE_SIZE = 20
 
-class FilterListView(DemoViewBase):
+
+def get_all_counties() -> QuerySet[County]:
+    return County.objects.all()
+
+
+@dataclass
+class Pagination:
+    page: int
+    page_size: int
+    page_count: int
+    prev_page: int
+    next_page: int
+
+
+class FilterListViewBase(DemoViewBase):
+    def paginate(self, qs: QuerySet[Area]) -> Tuple[QuerySet[Area], Pagination]:
+        page = int(self.request.GET.get("page", 1))
+        page_size = int(self.request.GET.get("page_size", PAGE_SIZE))
+
+        start_offs = (page - 1) * page_size
+        end_offs = start_offs + page_size
+
+        page_count = int(qs.count() / page_size)
+
+        pagination = Pagination(
+            page=page,
+            page_size=page_size,
+            page_count=page_count,
+            prev_page=page - 1 if page > 1 else None,
+            next_page=page + 1 if page < page_count else None,
+        )
+
+        return qs[start_offs:end_offs], pagination
+
+
+class FilterListView(FilterListViewBase):
     template_name = "main/filter_list.html"
     active_section = "filter-list"
     title = "Filter List"
+
+    def get_context_data(self, **kwargs) -> dict[str, Any]:
+        context_data = super().get_context_data(**kwargs)
+
+        qs, pagination = self.paginate(
+            qs=Area.objects.select_related("county", "post_office").all(),
+        )
+        context_data.update(
+            {
+                "areas": qs,
+                "counties": get_all_counties(),
+                "pagination": pagination,
+            }
+        )
+        return context_data
+
+
+class FilterListFilterView(FilterListViewBase):
+    template_name = "main/filter_list_content.html"
+
+    def get_context_data(self, **kwargs) -> dict[str, Any]:
+        context_data = super().get_context_data(**kwargs)
+
+        q = Q()
+        zip = self.request.GET.get("zip", None)
+        area = self.request.GET.get("area", None)
+        county = self.request.GET.get("county", None)
+
+        if zip:
+            q &= Q(post_office__zip=zip)
+        if area:
+            q &= Q(name__icontains=area)
+        if county:
+            q &= Q(county_id=county)
+
+        qs, pagination = self.paginate(
+            qs=Area.objects.select_related("county", "post_office").filter(q),
+        )
+
+        context_data.update(
+            {
+                "areas": qs,
+                "counties": get_all_counties(),
+                "pagination": pagination,
+            }
+        )
+        return context_data

project/urls.py

@@ -10,6 +10,9 @@ urlpatterns = [
     path("", views.HomeView.as_view(), name="home"),
     path("swap", views.SwapView.as_view(), name="swap"),
     path("filter-list", views.FilterListView.as_view(), name="filter-list"),
+    path(
+        "filter-list/filter", views.FilterListFilterView.as_view(), name="filter-list-filter"
+    ),
     path("form-validation", views.FormValidationView.as_view(), name="form-validation"),
     path("complex-form", views.ComplexFormView.as_view(), name="complex-form"),
     path(