Add website search pagination

app/lib/__init__.py

@@ -1,3 +1,3 @@
 from .cache import cache
 from .cache_key_prefix import cache_key_prefix
-from .pagination_list import pagination_list
+from .pagination import pagination_list, pagination_object

app/lib/pagination_list.py → app/lib/pagination.py

@@ -1,4 +1,7 @@
-def pagination_list(current_page, total_pages, boundaries, around):
+import urllib.parse
+
+
+def pagination_list(current_page, total_pages, boundaries=1, around=1):
     assert current_page >= 0, "current_page is less than zero"
     assert total_pages >= 0, "total_pages is less than zero"
     assert boundaries >= 0, " boundaries is less than zero"
@@ -40,10 +43,48 @@ def pagination_list(current_page, total_pages, boundaries, around):
         else ""
     )
 
-    return (
+    pagination_items = (
         initial_chunk_numbers
         + [prev_linker]
         + middle_chunk_numbers
         + [next_linker]
         + final_chunk_numbers
     )
+
+    return [item for item in pagination_items if item]
+
+
+def generate_new_page_query_string(args, page):
+    return f"?{urllib.parse.urlencode(args | {'page': page}, doseq=True)}"
+
+
+def pagination_object(
+    current_page, total_pages, current_args, boundaries=1, around=1
+):
+    current_page = int(current_page)
+    pagination_object = {}
+    pagination_object["items"] = [
+        {"ellipsis": True}
+        if item == "..."
+        else {
+            "number": item,
+            "href": generate_new_page_query_string(current_args, item),
+            "current": item == current_page,
+        }
+        for item in pagination_list(
+            current_page, total_pages, boundaries, around
+        )
+    ]
+    if current_page > 1:
+        pagination_object["previous"] = {
+            "href": generate_new_page_query_string(
+                current_args, current_page - 1
+            )
+        }
+    if current_page < total_pages:
+        pagination_object["next"] = {
+            "href": generate_new_page_query_string(
+                current_args, current_page + 1
+            )
+        }
+    return pagination_object

app/search/routes.py

@@ -1,4 +1,6 @@
-from app.lib import cache, cache_key_prefix
+import urllib.parse
+
+from app.lib import cache, cache_key_prefix, pagination_object
 from app.lib.query import parse_args, remove_arg
 from app.lib.template_filters import slugify
 from app.search import bp
@@ -57,6 +59,7 @@ def catalogue_new():
 @cache.cached(key_prefix=cache_key_prefix)
 def website():
     query = request.args["q"] if "q" in request.args else ""
+    page = request.args["page"] if "page" in request.args else 1
     args = parse_args(request.args)
     article_filters_api = ArticleFiltersAPI()
     article_filters_api.params = (
@@ -95,7 +98,8 @@ def website():
         types = request.args.to_dict(flat=False)["type[]"]
         articles_api.add_parameter("type", ",".join(types))
     if "order" in request.args:
-        articles_api.add_parameter("order", request.args['order'])
+        articles_api.add_parameter("order", request.args["order"])
+    articles_api.add_parameter("page", page)
     results = articles_api.get_results()
 
     return render_template(
@@ -104,4 +108,7 @@ def website():
         search_path="/search/website/",
         results=results,
         filters=filters,
+        page=page,
+        pages=results["pages"],
+        pagination=pagination_object(page, results["pages"], request.args),
     )

app/templates/search/elements/sort-view.html

@@ -1,8 +1,13 @@
 {%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'components/select/macro.html' import tnaSelect -%}
 
+{% macro sortView(query, results_count, result_range_min, result_range_max, bucket_name) %}
 <div class="tna-column tna-column--flex-1 tna-column--full-small tna-column--full-tiny tna-!--margin-top-m">
-  <p>Showing 1-20 (of 10,000) results for &quot;{{ query or '' }}&quot; in &quot;Records at the National Archives&quot;</p>
+  {% if query %}
+  <p>Showing {{ result_range_min }}&ndash;{{ result_range_max }} of {{ results_count }} results for &quot;{{ query or '' }}&quot; in {{ bucket_name }}</p>
+  {% else %}
+  <p>Showing {{ result_range_min }}&ndash;{{ result_range_max }} of {{ results_count }} results in {{ bucket_name }}</p>
+  {% endif %}
 </div>
 <div class="tna-column tna-column--flex-1-small tna-column--full-tiny etna-search-sort-view tna-!--margin-top-m">
   {{ tnaSelect({
@@ -85,4 +90,5 @@
       }
     }) }}
   </div>
-</div>
+</div>
+{% endmacro %}

app/templates/search/website.html

@@ -3,16 +3,18 @@
 {%- from 'components/button/macro.html' import tnaButton -%}
 {%- from 'components/card/macro.html' import tnaCard -%}
 {%- from 'components/checkboxes/macro.html' import tnaCheckboxes -%}
+{%- from 'components/pagination/macro.html' import tnaPagination -%}
 {%- from 'components/select/macro.html' import tnaSelect -%}
 {%- from 'macros/feedback.html' import feedback -%}
+{%- from 'search/elements/sort-view.html' import sortView -%}
 
 {% block pageTitle %}Search our website - {{ super() }}{% endblock %}
 
 {% block content %}
 {% set show_tabs = True %}
 {% include 'search/elements/header.html' %}
 <section class="tna-container">
-  {% include 'search/elements/sort-view.html' %}
+  {{ sortView(query, results.count, results.result_range_min, results.result_range_max, 'our website') }}
 
   {% set selected_filters = [] %}
   <div class="tna-column tna-column--full">
@@ -138,6 +140,16 @@ <h1 class="tna-hgroup__title">
     {% endfor %}
   </div>
   {% endif %}
+
+
+  {% if pages > 1 %}
+  <div class="tna-column tna-column--full tna-section">
+    {{ tnaPagination(pagination) }}
+  </div>
+  <input type="hidden" value="{{ page }}" name="page" form="search-form">
+  {% endif %}
+
+
 </section>
 {{ feedback() }}
 {% endblock %}

app/wagtail/render.py

@@ -187,7 +187,7 @@ def article_index_page(page_data):
         children=children,
         featured_article=featured_article,
         featured_pages=featured_pages,
-        pagination_list=pagination_list(page, pages, 1, 1),
+        pagination_list=pagination_list(page, pages),
         page=page,
         pages=pages,
     )

src/scripts/search.js

@@ -15,9 +15,9 @@ if ($searchFiltersContent) {
   };
 
   let expandedFilters = false;
-  const filtersSelected = parseInt($searchFiltersContent.getAttribute(
-    "data-selectedfilters",
-  ) ?? "0");
+  const filtersSelected = parseInt(
+    $searchFiltersContent.getAttribute("data-selectedfilters") ?? "0",
+  );
   const $searchFiltersWrapper = document.createElement("div");
   $searchFiltersContent.parentNode.insertBefore(
     $searchFiltersWrapper,