diff --git a/components/dashboard/src/Pagination/getPagination.spec.ts b/components/dashboard/src/Pagination/getPagination.spec.ts index cf63c6506c9eeb..d28dcffc60b4b8 100644 --- a/components/dashboard/src/Pagination/getPagination.spec.ts +++ b/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]); }); diff --git a/components/dashboard/src/Pagination/getPagination.ts b/components/dashboard/src/Pagination/getPagination.ts index 6834c00cc02a36..0f5eeb2b532936 100644 --- a/components/dashboard/src/Pagination/getPagination.ts +++ b/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]; }