Merge pull request #27 from uktrade/feature/ORPD-47-pagination

ORPD-47 - Pagination
uktrade · Oct 16, 2024 · 8675fb7 · 8675fb7
2 parents 7c4eed0 + b46343d
commit 8675fb7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 27 deletions.
diff --git a/orp/core/forms.py b/orp/core/forms.py
@@ -25,15 +25,15 @@ class RegulationSearchForm(forms.Form):
     for regulations by name or description.
     """
 
-    query = forms.CharField(
+    search = forms.CharField(
         required=False,
         label="Search",
         help_text="",
         widget=forms.TextInput(
             attrs={
                 "class": "govuk-input",
-                "id": "query",
-                "name": "query",
+                "id": "search",
+                "name": "search",
                 "type": "search",
                 "placeholder": "",
             }

diff --git a/orp/core/templatetags/url_replace_tags.py b/orp/core/templatetags/url_replace_tags.py
@@ -0,0 +1,10 @@
+from django import template
+
+register = template.Library()
+
+
+@register.simple_tag(takes_context=False)
+def url_replace(request, field, value):
+    dict_ = request.GET.copy()
+    dict_[field] = value
+    return dict_.urlencode()
diff --git a/orp/orp_search/templates/document.html b/orp/orp_search/templates/document.html
@@ -70,18 +70,21 @@ <h2 class="govuk-heading-m">Document details</h2>
             </dd>
           </div>
         </dl>
-        <h2 class="govuk-heading-m">Related content on legislation.gov.uk</h2>
-        <!--
-         The design shows these links as document titles which we don't have.
-         We'd need to look up each one using the legislation.gov.uk API
-        -->
-        <div class="govuk-!-margin-bottom-6">
-          {% for legislation in result.related_legislation %}
-          <p class="govuk-body govuk-!-margin-bottom-2">
-            <a class="govuk-link" href="{{legislation}}">{{ legislation }}</a>
-          </p>
-          {% endfor %}
-        </div>
+
+        {% if 'nan' not in result.related_legislation %}
+          <h2 class="govuk-heading-m">Related content on legislation.gov.uk</h2>
+          <!--
+          The design shows these links as document titles which we don't have.
+          We'd need to look up each one using the legislation.gov.uk API
+          -->
+          <div class="govuk-!-margin-bottom-6">
+            {% for legislation in result.related_legislation %}
+            <p class="govuk-body govuk-!-margin-bottom-2">
+              <a class="govuk-link" href="{{legislation}}">{{ legislation }}</a>
+            </p>
+            {% endfor %}
+          </div>
+        {% endif %}
 
         <h2 class="govuk-heading-m">Regulatory topics</h2>
         <ul class="govuk-list orp-topics-list">

diff --git a/orp/orp_search/templates/orp.html b/orp/orp_search/templates/orp.html
@@ -1,5 +1,6 @@
 {% extends "base.html" %}
 {% load service_problem_tags %}
+{% load url_replace_tags %}
 {% block head_title %}{{service_name}}{% endblock %}
 {% block service_name %}{{service_name}}{% endblock %}
 {% block body_content %}
@@ -39,12 +40,12 @@ <h1 class="govuk-heading-xl govuk-!-margin-bottom-4">Find laws and regulations f
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-one-third">
       <form method="get" class="search-form">
-        <div class="govuk-form-group {% if form.query.errors %}govuk-form-group--error{% endif %} search-group">
-          <label class="govuk-label" for="{{ form.query.id_for_label }}">
-            {{ form.query.label }}
+        <div class="govuk-form-group {% if form.search.errors %}govuk-form-group--error{% endif %} search-group">
+          <label class="govuk-label" for="{{ form.search.id_for_label }}">
+            {{ form.search.label }}
           </label>
           <div class="search-input-button">
-            {{ form.query }}
+            {{ form.search }}
             <button type="submit" class="search__button"></button>
           </div>
         </div>
@@ -94,8 +95,8 @@ <h2 class="govuk-fieldset__heading">
             <!-- <div id="status-hint" class="govuk-hint govuk-!-font-size-14">
                 1 selected
               </div> -->
-            <!-- <div class="govuk-form-group {% if form.query.errors %}govuk-form-group--error{% endif %} search-group"> -->
-            <!-- <label class="govuk-label govuk-visually-hidden" for="{{ form.query.id_for_label }}">
+            <!-- <div class="govuk-form-group {% if form.search.errors %}govuk-form-group--error{% endif %} search-group"> -->
+            <!-- <label class="govuk-label govuk-visually-hidden" for="{{ form.search.id_for_label }}">
                 Search by publisher
               </label> -->
             <!-- The below will be added as a JavaScript enhancement -->
@@ -203,15 +204,15 @@ <h2 class="govuk-fieldset__heading">
       <div class="orp-flex orp-flex--space-between">
         <p class="govuk-body govuk-!-font-weight-bold govuk-!-margin-bottom-0">
           {% if results %}
-          {{ results_total_count }} documents
+            {{ results_total_count }} documents
           {% else %}
-          {% if form.is_bound %}
-          No documents found
-          {% endif %}
+            {% if form.is_bound %}
+              No documents found
+            {% endif %}
           {% endif %}
         </p>
         <p class="govuk-body govuk-!-margin-bottom-0">
-          <a href="#" class="govuk-link govuk-link--no-visited-state
+          <a href="/?search=" class="govuk-link govuk-link--no-visited-state
               ">Clear all filters</a>
         </p>
       </div>
@@ -278,6 +279,47 @@ <h2 class="govuk-heading-m">
             <hr class="govuk-section-break govuk-section-break--m govuk-section-break--visible">
             {% endfor %}
           </div>
+          {% if is_paginated %}
+          <nav class="govuk-pagination" role="navigation" aria-label="Pagination">
+            {% if results.has_previous %}
+            <div class="govuk-pagination__prev">
+              <a class="govuk-link govuk-pagination__link govuk-link--no-visited-state" href="?{% url_replace request 'page' results.previous_page_number %}">
+                <svg class="govuk-pagination__icon govuk-pagination__icon--prev" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+                  <path d="m6.5938-0.0078125-6.7266 6.7266 6.7441 6.4062 1.377-1.449-4.1856-3.9768h12.896v-2h-12.984l4.2931-4.293-1.414-1.414z"></path>
+                </svg>
+                <span class="govuk-pagination__link-title">Previous<span class="govuk-visually-hidden"> page</span></span>
+              </a>
+            </div>
+            {% endif %}
+            <ul class="govuk-pagination__list">
+              {% for page_number in results.paginator.page_range %}
+                {% if page_number == results.number %}
+                  <li class="govuk-pagination__item govuk-pagination__item--current">
+                    <a class="govuk-link govuk-pagination__link govuk-link--no-visited-state" href="?{% url_replace request 'page' page_number %}" aria-current="page">
+                      {{ page_number }}
+                    </a>
+                  </li>
+                {% elif page_number == 1 or page_number == results.paginator.num_pages or page_number == results.number|add:"-1" or page_number == results.number|add:"1" %}
+                  <li class="govuk-pagination__item">
+                    <a class="govuk-link govuk-pagination__link govuk-link--no-visited-state" href="?{% url_replace request 'page' page_number %}">{{ page_number }}</a>
+                  </li>
+                {% elif page_number == results.number|add:"-2" or page_number == results.number|add:"2" %}
+                  <li class="govuk-pagination__item govuk-pagination__item--ellipses">&hellip;</li>
+                {% endif %}
+              {% endfor %}
+            </ul>
+            {% if results.has_next %}
+              <div class="govuk-pagination__next">
+                <a class="govuk-link govuk-pagination__link govuk-link--no-visited-state" href="?{% url_replace request 'page' results.next_page_number %}">
+                  <span class="govuk-pagination__link-title">Next<span class="govuk-visually-hidden"> page</span></span>
+                  <svg class="govuk-pagination__icon govuk-pagination__icon--next" xmlns="http://www.w3.org/2000/svg" height="13" width="15" aria-hidden="true" focusable="false" viewBox="0 0 15 13">
+                      <path d="m8.107-0.0078125-1.4136 1.414 4.2926 4.293h-12.986v2h12.896l-4.1855 3.9766 1.377 1.4492 6.7441-6.4062-6.7246-6.7266z"></path>
+                  </svg>
+                </a>
+              </div>
+            {% endif %}
+          </nav>
+          {% endif %}
           {% else %}
           {% if form.is_bound %}
           <p class="govuk-body-l govuk-!-font-weight-bold">

diff --git a/orp/orp_search/views.py b/orp/orp_search/views.py
@@ -125,7 +125,7 @@ def search(request: HttpRequest) -> HttpResponse:
     context["form"] = form
 
     # Get the search query and document types from the form
-    search_query = form.cleaned_data.get("query")
+    search_query = form.cleaned_data.get("search")
     document_types = form.cleaned_data.get("document_type")
 
     page = request.GET.get("page", "1")