Merge pull request #1551 from nationalarchives/FCL-242/fix-pagination

FCL-242 | fix pagination

Author: jlhdxw

.github/workflows/ci.yml

@@ -65,10 +65,10 @@ jobs:
           target: ".env"
 
       - name: Build the Stack
-        run: docker-compose build django postgres
+        run: docker compose build django postgres
 
       - name: Run mypy
-        run: docker-compose run django mypy ds_caselaw_editor_ui judgments
+        run: docker compose run django mypy ds_caselaw_editor_ui judgments
 
   # With no caching at all the entire ci process takes 4m 30s to complete!
   pytest:

ds_caselaw_editor_ui/sass/includes/_pagination.scss

@@ -25,6 +25,12 @@
       }
     }
 
+    &-divider {
+      display: inline-block;
+      color: $color-white;
+      width: 2rem;
+    }
+
     &-item {
       display: inline-block;
       min-height: 3.125rem;

ds_caselaw_editor_ui/templates/includes/pagination.html

@@ -15,23 +15,44 @@ <h3>Unpublished documents pagination</h3>
     </li>
     <li class="pagination__list-pages">
       <ol>
-        <li class="pagination__list-item">
-          <a class="pagination__page-link-current"
-             href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page={{ paginator.current_page }}"
-             aria-label="Current page, Page {{ paginator.current_page }}"
-             aria-current="true">
-            <span>Current page</span>{{ paginator.current_page }}
-          </a>
-        </li>
-        {% for page in paginator.next_pages %}
+        {% if paginator.show_first_page %}
           <li class="pagination__list-item">
             <a class="pagination__page-link"
-               href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page={{ page }}"
-               aria-label="Go to page {{ page }}">
-              <span>Page</span>{{ page }}
+               href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page=1"
+               aria-label="Go to page 1">
+              <span>Page</span>1
             </a>
           </li>
+        {% endif %}
+        {% if paginator.show_first_page_divider %}<li class="pagination__list-divider">⋯</li>{% endif %}
+        {% for page in paginator.page_range %}
+          <li class="pagination__list-item">
+            {% if page == paginator.current_page %}
+              <a class="pagination__page-link-current"
+                 href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page={{ page }}"
+                 aria-label="Current page, Page {{ page }}"
+                 aria-current="true">
+                <span>Current page</span>{{ page }}
+              </a>
+            {% else %}
+              <a class="pagination__page-link"
+                 href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page={{ page }}"
+                 aria-label="Go to page {{ page }}">
+                <span>Page</span>{{ page }}
+              </a>
+            {% endif %}
+          </li>
         {% endfor %}
+        {% if paginator.show_last_page_divider %}<li class="pagination__list-divider">⋯</li>{% endif %}
+        {% if paginator.show_last_page %}
+          <li class="pagination__list-item">
+            <a class="pagination__page-link"
+               href="{{ request.path }}?{% if query_string %}{{ query_string }}&{% endif %}page={{ paginator.number_of_pages }}"
+               aria-label="Go to page {{ paginator.number_of_pages }}">
+              <span>Page</span>{{ paginator.number_of_pages }}
+            </a>
+          </li>
+        {% endif %}
       </ol>
     </li>
     <li class="pagination__list-item">

judgments/tests/utils/test_utils.py

@@ -50,37 +50,49 @@ def test_invalidation(self, mockboto):
 class TestPaginator:
     def test_paginator_2500(self):
         expected_result = {
+            "show_first_page": True,
+            "show_first_page_divider": True,
+            "show_last_page": True,
+            "show_last_page_divider": True,
             "current_page": 10,
             "has_next_page": True,
             "has_prev_page": True,
             "next_page": 11,
             "prev_page": 9,
-            "next_pages": [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
+            "page_range": [8, 9, 10, 11, 12],
             "number_of_pages": 250,
         }
         assert paginator(10, 2500) == expected_result
 
     def test_paginator_25(self):
         # 25 items has 5 items on page 3.
         expected_result = {
+            "show_first_page": False,
+            "show_first_page_divider": False,
+            "show_last_page": False,
+            "show_last_page_divider": False,
             "current_page": 1,
             "has_next_page": True,
             "has_prev_page": False,
             "next_page": 2,
             "prev_page": 0,
-            "next_pages": [2, 3],
+            "page_range": [1, 2, 3],
             "number_of_pages": 3,
         }
         assert paginator(1, 25) == expected_result
 
     def test_paginator_5(self):
         expected_result = {
+            "show_first_page": False,
+            "show_first_page_divider": False,
+            "show_last_page": False,
+            "show_last_page_divider": False,
             "current_page": 1,
             "has_next_page": False,
             "has_prev_page": False,
             "next_page": 2,  # Note: remember to check has_next_page
             "prev_page": 0,
-            "next_pages": [],
+            "page_range": [1],
             "number_of_pages": 1,
         }
         assert paginator(1, 5) == expected_result

judgments/utils/paginator.py

@@ -4,18 +4,36 @@
 
 
 def paginator(current_page, total):
+    number_of_pagination_links = 5
     size_per_page = RESULTS_PER_PAGE
     number_of_pages = math.ceil(int(total) / size_per_page)
-    next_pages = list(
-        range(current_page + 1, min(current_page + 10, number_of_pages) + 1),
-    )
+
+    half_range = number_of_pagination_links // 2
+
+    if number_of_pages <= number_of_pagination_links:
+        page_range = list(range(1, number_of_pages + 1))
+    elif current_page - half_range < 1:
+        page_range = list(range(1, number_of_pagination_links + 1))
+    elif current_page + half_range > number_of_pages:
+        page_range = list(range(number_of_pages - number_of_pagination_links + 1, number_of_pages + 1))
+    else:
+        page_range = list(range(current_page - half_range, current_page + half_range + 1))
+
+    show_first_page = 1 not in page_range
+    show_first_page_divider = number_of_pages > number_of_pagination_links and 2 not in page_range
+    show_last_page = number_of_pages not in page_range
+    show_last_page_divider = number_of_pages > number_of_pagination_links and number_of_pages - 1 not in page_range
 
     return {
+        "show_first_page": show_first_page,
+        "show_first_page_divider": show_first_page_divider,
+        "show_last_page": show_last_page,
+        "show_last_page_divider": show_last_page_divider,
         "current_page": current_page,
         "has_next_page": current_page < number_of_pages,
         "next_page": current_page + 1,
         "has_prev_page": current_page > 1,
         "prev_page": current_page - 1,
-        "next_pages": next_pages,
         "number_of_pages": number_of_pages,
+        "page_range": page_range,
     }