TP2000-959 measure list pagination fix (#1026)

* Fix pagination and refactor template

* Add comment

* Increase per page number

* Refactor context

measures/jinja2/measures/list.jinja

@@ -1,4 +1,119 @@
+{% extends "layouts/layout.jinja" %}
+
+{% from "components/button/macro.njk" import govukButton %}
+{% from "components/input/macro.njk" import govukInput %}
+{% from "components/table/macro.njk" import govukTable %}
+
 {% set form_url = "measure-ui-list" %}
 {% set list_include = "includes/measures/list.jinja" %}
 
-{%- include "layouts/list_vertical.jinja" -%}
+{% set page_title = "Find and edit " ~ object_list.model._meta.verbose_name_plural %}
+
+
+{% block content %}
+  <h1 class="govuk-heading-xl">{{ page_title }}</h1>
+
+  <div class="full-width-search">
+    <div class="govuk-!-margin-bottom-5">
+      <h2 class="govuk-heading-m govuk-!-margin-bottom-5">Search and filter</h2>
+      <p class="govuk-body">
+        Select one or more options to search
+      </p>
+      <form method="get" action="{{ url(form_url) }}">
+          {{ crispy(filter.form) }}
+      </form>
+    </div>
+
+
+    <div class="govuk-!-margin-top-3">
+      {% if results_count > 0 %}
+
+        {% set objects_count = '{0:,}'.format(results_count) %}
+        {% if results_limit_breached %}
+            {% set objects_count = objects_count ~ '+' %}
+        {% endif %}
+
+        <p class="govuk-body-l">
+            {{ objects_count }} results
+        </p>
+
+      {% endif %}
+      {% if object_list %}
+        {% include list_include %}
+      {% else %}
+        <p class="govuk-body">There are no results for your search, please:</p>
+        <ul class="govuk-list govuk-list--bullet">
+          <li>check the spelling of your keywords</li>
+          <li>use more general keywords</li>
+          <li>select or deselect different filters</li>
+          <li>get help via our <a class="govuk-link" href="#">support and feedback form</a></li>
+        </ul>
+      {% endif %}
+
+      {% if has_other_pages %}
+        {% set objects_count = '{0:,}'.format(results_count) %}
+        {% set page_count = '{0:,}'.format(page_count) %}
+        {% if results_limit_breached %}
+          {% set objects_count = 'more than ' ~ objects_count %}
+          {% set page_count = 'more than ' ~ page_count %}
+        {% endif %}
+
+        <nav class="pagination tamato-clearfix" role="navigation" aria-label="Pagination Navigation">
+            <div class="govuk-body">
+                Showing {{ list_items_count }} of {{ objects_count }} measures
+            </div>
+            <div class="govuk-body align-left">
+                Page {{page_number}} of {{ page_count }}
+            </div>
+            <ul class="govuk-list align-right">
+                {% if has_previous_page %}
+                <li>
+                    <a
+                    class="govuk-link govuk-!-margin-right-1"
+                    href="?{{ query_transform(request, page=prev_page_number)}}"
+                    rel="prev"
+                    aria-label="Goto Page {{ prev_page_number }}"
+                    >
+                    Prev
+                    </a>
+                </li>
+                {% endif %}
+                {% for page_link in page_links %}
+                {% set isCurrent = page_link == page_number%}
+                <li
+                    class="{{ 'govuk-!-margin-left-2 govuk-!-margin-right-2' if isCurrent else 'govuk-!-margin-right-1'}}"
+                    {% if isCurrent %}aria-current="true"{% endif %}
+                >
+                    {% if page_link == '...' or page_link == page_number|string %}
+                      {{ page_link }}
+                    {% else %}
+                      <a
+                          class="govuk-link"
+                          href="?{{ query_transform(request, page=page_link) }}"
+                          aria-label="Goto Page {{ page_link }}"
+                      >{{ '{0:,}'.format(page_link|int) }}</a>
+                    {% endif %}
+                </li>
+                {% endfor %}
+                {% if results_limit_breached %}
+                <li class="govuk-!-margin-right-1" >...</li>
+                {% endif %}
+                {% if has_next_page %}
+                <li>
+                    <a
+                    class="govuk-link"
+                    href="?{{ query_transform(request, page=next_page_number) }}"
+                    rel="next"
+                    aria-label="Goto Page {{ next_page_number }}"
+                    >
+                    Next
+                    </a>
+                </li>
+                {% endif %}
+            </ul>
+        </nav>
+        {% endif %}
+
+    </div>
+  </div>
+{% endblock %}

measures/views.py

@@ -27,6 +27,7 @@
 
 from common.forms import unprefix_formset_data
 from common.models import TrackedModel
+from common.pagination import build_pagination_list
 from common.serializers import AutoCompleteSerializer
 from common.util import TaricDateRange
 from common.validators import UpdateType
@@ -150,10 +151,39 @@ def get_form_kwargs(self):
     def paginator(self):
         filterset_class = self.get_filterset_class()
         self.filterset = self.get_filterset(filterset_class)
-        return MeasurePaginator(self.filterset.qs, per_page=20)
+        return MeasurePaginator(self.filterset.qs, per_page=40)
 
     def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
+        # References to page or pagination in the template were heavily increasing load time. By setting everything we need in the context,
+        # we can reduce load time
+        page = self.paginator.get_page(self.request.GET.get("page", 1))
+        context = {}
+        context.update(
+            {
+                "filter": kwargs["filter"],
+                "form": self.get_form(),
+                "view": self,
+                "is_paginated": True,
+                "results_count": self.paginator.count,
+                "results_limit_breached": self.paginator.limit_breached,
+                "page_count": self.paginator.num_pages,
+                "has_other_pages": page.has_other_pages(),
+                "has_previous_page": page.has_previous(),
+                "has_next_page": page.has_next(),
+                "page_number": page.number,
+                "list_items_count": self.paginator.per_page,
+                "object_list": page.object_list,
+                "page_links": build_pagination_list(
+                    page.number,
+                    page.paginator.num_pages,
+                ),
+            },
+        )
+        if context["has_previous_page"]:
+            context["prev_page_number"] = page.previous_page_number()
+        if context["has_next_page"]:
+            context["next_page_number"] = page.next_page_number()
+
         measure_selections = [
             SelectableObjectsForm.object_id_from_field_name(name)
             for name in self.measure_selections