Pagination

project/main/migrations/0002_auto_20240410_1942.py

@@ -3,7 +3,7 @@
 from django.db import migrations
 
 counties = [
-    'KoprivničkO-križevačka',
+    'Koprivničko-križevačka',
     'Međimurska',
     'Dubrovačko-neretvanska',
     'Zagrebačka',

project/main/templates/main/components/pagination.html

@@ -0,0 +1,53 @@
+{% macro pagination(page) %}
+    {% macro render_link(title, page_number) %}
+        <a
+            class="page-link"
+            href="#"
+            hx-get="{{ url("filter-list-filter") }}"
+            hx-trigger="click"
+            hx-target="#filter-list-container"
+            hx-include="[name='zip'],[name='area'],[name='county']"
+            hx-vals='{"page": "{{ page_number }}"}'
+        >
+            {{ title }}
+        </a>
+    {% endmacro %}
+
+    {% if page.has_other_pages() %}
+        <nav aria-label="Page navigation example">
+            <ul class="pagination">
+                {% if page.has_previous() %}
+                    <li class="page-item">
+                        {{ render_link(title="Previous", page_number=page.number - 1) }}
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#">Previous</a>
+                    </li>
+                {% endif %}
+
+                {% for p in page.paginator.get_elided_page_range(page.number, on_each_side=2, on_ends=3) %}
+                    {% if p != page.paginator.ELLIPSIS %}
+                        <li class="page-item {% if page.number == p %}active{% endif %}">
+                            {{ render_link(title=p, page_number=p) }}
+                        </li>
+                    {% else %}
+                        <li class="page-item">
+                            <span class="page-link border-top-0 border-bottom-0">{{ page.paginator.ELLIPSIS }}</span>
+                        </li>
+                    {% endif %}
+                {% endfor %}
+
+                {% if page.has_next() %}
+                    <li class="page-item">
+                        {{ render_link(title="Next", page_number=page.number + 1) }}
+                    </li>
+                {% else %}
+                    <li class="page-item disabled">
+                        <a class="page-link" href="#">Next</a>
+                    </li>
+                {% endif %}
+            </ul>
+        </nav>
+    {% endif %}
+{% endmacro %}

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,25 @@
+{% from "main/components/pagination.html" import pagination %}
+
+<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 page.object_list %}
+        <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>
+
+
+{{ pagination(page) }}

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,76 @@
+from typing import Any
+
+from django.core.paginator import Page, Paginator
+from django.db.models import 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()
+
+
+class FilterListViewBase(DemoViewBase):
+    def paginate(self, qs: QuerySet[Area]) -> Page:
+        page = int(self.request.GET.get("page", 1))
+        page_size = int(self.request.GET.get("page_size", PAGE_SIZE))
+
+        paginator = Paginator(
+            object_list=qs,
+            per_page=page_size,
+        )
+        return paginator.get_page(page)
+
+
+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)
+
+        page = self.paginate(
+            qs=Area.objects.select_related("county", "post_office").all(),
+        )
+        context_data.update(
+            {
+                "page": page,
+                "counties": get_all_counties(),
+            }
+        )
+        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)
+
+        page = self.paginate(
+            qs=Area.objects.select_related("county", "post_office").filter(q),
+        )
+
+        context_data.update(
+            {
+                "page": page,
+                "counties": get_all_counties(),
+            }
+        )
+        return context_data

project/urls.py

@@ -1,3 +1,7 @@
+import shutil
+from pathlib import Path
+
+from django.conf import settings
 from django.urls import path
 
 from project.main import views
@@ -6,10 +10,35 @@ 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("complex-form/handle/route-module", views.RouteModuleHandleView.as_view(), name="complex-form-handle-route-module"),
-    path("complex-form/handle/reports", views.ReportsHandleView.as_view(), name="complex-form-handle-reports"),
-    path("complex-form/handle/warehouse-management", views.WarehouseManagementHandleView.as_view(), name="complex-form-handle-warehouse-management"),
-    path("table-inline-edit", views.TableInlineEditView.as_view(), name="table-inline-edit"),
+    path(
+        "complex-form/handle/route-module",
+        views.RouteModuleHandleView.as_view(),
+        name="complex-form-handle-route-module",
+    ),
+    path(
+        "complex-form/handle/reports",
+        views.ReportsHandleView.as_view(),
+        name="complex-form-handle-reports",
+    ),
+    path(
+        "complex-form/handle/warehouse-management",
+        views.WarehouseManagementHandleView.as_view(),
+        name="complex-form-handle-warehouse-management",
+    ),
+    path(
+        "table-inline-edit",
+        views.TableInlineEditView.as_view(),
+        name="table-inline-edit",
+    ),
 ]
+
+# check if db exists, and copy from template if not
+if not Path.exists(settings.DATABASES["default"]["NAME"]):
+    template_filename = settings.BASE_DIR / "db.template.sqlite3"
+    shutil.copyfile(template_filename, settings.DATABASES["default"]["NAME"])
+    print("Database copied from template.")