[dashboard] (pagination) make sure next page is selectable

components/dashboard/src/Pagination/getPagination.spec.ts

@@ -7,14 +7,30 @@
 import { getPaginationNumbers } from "./getPagination";
 
 test("getPagination", () => {
-    const totalNumberOfPages = 15;
-    const currentPage = 1;
+    expect(getPaginationNumbers(15, 1)).toStrictEqual([1, 2, 3, "...", 15]);
 
-    expect(getPaginationNumbers(totalNumberOfPages, currentPage)).toStrictEqual([1, 2, 3, "...", 15]);
-
-    expect(getPaginationNumbers(37, 4)).toStrictEqual([1, "...", 3, 4, 5, "...", 37]);
+    expect(getPaginationNumbers(37, 4)).toStrictEqual([1, 2, 3, 4, 5, "...", 37]);
 
+    // navigating 7 --> 4
+    // ensure there is a selectable page next to current
     expect(getPaginationNumbers(28, 7)).toStrictEqual([1, "...", 6, 7, 8, "...", 28]);
+    expect(getPaginationNumbers(28, 6)).toStrictEqual([1, "...", 5, 6, 7, "...", 28]);
+    expect(getPaginationNumbers(28, 5)).toStrictEqual([1, "...", 4, 5, 6, "...", 28]);
+    // ellipsis should not replace a single page number
+    expect(getPaginationNumbers(28, 4)).toStrictEqual([1, 2, 3, 4, 5, "...", 28]);
+
+    // ensure there is a selectable page next to current
+    expect(getPaginationNumbers(28, 24)).toStrictEqual([1, "...", 23, 24, 25, "...", 28]);
+    expect(getPaginationNumbers(28, 25)).toStrictEqual([1, "...", 24, 25, 26, 27, 28]);
 
     expect(getPaginationNumbers(5, 1)).toStrictEqual([1, 2, 3, 4, 5]);
+
+    expect(getPaginationNumbers(9, 2)).toStrictEqual([1, 2, 3, "...", 9]);
+    expect(getPaginationNumbers(9, 3)).toStrictEqual([1, 2, 3, 4, "...", 9]);
+    expect(getPaginationNumbers(6, 3)).toStrictEqual([1, 2, 3, 4, 5, 6]);
+    expect(getPaginationNumbers(7, 3)).toStrictEqual([1, 2, 3, 4, "...", 7]);
+    expect(getPaginationNumbers(7, 3)).toStrictEqual([1, 2, 3, 4, "...", 7]);
+
+    expect(getPaginationNumbers(10, 8)).toStrictEqual([1, "...", 7, 8, 9, 10]);
+    expect(getPaginationNumbers(10, 7)).toStrictEqual([1, "...", 6, 7, 8, 9, 10]);
 });

components/dashboard/src/Pagination/getPagination.ts

@@ -6,6 +6,7 @@
 
 export function getPaginationNumbers(totalNumberOfPages: number, currentPage: number) {
     const adjacentToCurrentPage = 1; // This is the number(s) we see next to the currentPage
+    const numberOfPagesToShowOnTheSide = 3;
     const totalNumbersShownInPagination = 6;
     let calculatedPagination: number[] = [];
 
@@ -24,16 +25,21 @@ export function getPaginationNumbers(totalNumberOfPages: number, currentPage: nu
     const toTheLeftOfCurrent = Math.max(currentPage - adjacentToCurrentPage, 1);
 
     const showRightEllipsis = toTheRightOfCurrent < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
-    const showLeftEllipsis = toTheLeftOfCurrent > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
+    const showLeftEllipsis =
+        currentPage > numberOfPagesToShowOnTheSide + adjacentToCurrentPage &&
+        toTheLeftOfCurrent > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
 
     if (showRightEllipsis && !showLeftEllipsis) {
-        let leftSideNumbers = 3;
+        let leftSideNumbers = Math.max(numberOfPagesToShowOnTheSide, currentPage + adjacentToCurrentPage);
         let leftPageNumbersAsArray = pageNumbersAsArray(1, leftSideNumbers);
         return [...leftPageNumbersAsArray, "...", totalNumberOfPages];
     }
 
     if (showLeftEllipsis && !showRightEllipsis) {
-        let rightSideNumbers = 3;
+        let rightSideNumbers = Math.max(
+            numberOfPagesToShowOnTheSide,
+            totalNumberOfPages - currentPage + adjacentToCurrentPage,
+        );
         let rightPageNumbersAsArray = pageNumbersAsArray(totalNumberOfPages - rightSideNumbers, totalNumberOfPages);
         return [1, "...", ...rightPageNumbersAsArray];
     }