From 1c1ef37df965361c9b15d1fe4134a016e7b289e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tao=20Bror=20Bojl=C3=A9n?= Date: Thu, 29 Aug 2019 19:03:27 +0100 Subject: [PATCH] fix pagination for long lists in instance table --- .../components/organisms/InstanceTable.tsx | 55 ++++++++++++++----- 1 file changed, 41 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/organisms/InstanceTable.tsx b/frontend/src/components/organisms/InstanceTable.tsx index ae10699..d1bb502 100644 --- a/frontend/src/components/organisms/InstanceTable.tsx +++ b/frontend/src/components/organisms/InstanceTable.tsx @@ -1,6 +1,6 @@ import { Button, ButtonGroup, Code, HTMLTable, Intent, NonIdealState, Spinner } from "@blueprintjs/core"; import { push } from "connected-react-router"; -import { range } from "lodash"; +import { range, sortBy, sortedUniq, zip } from "lodash"; import * as numeral from "numeral"; import React from "react"; import { connect } from "react-redux"; @@ -45,7 +45,8 @@ class InstanceTable extends React.PureComponent { return } />; } - const { instances, pageNumber, totalPages, totalEntries, pageSize } = instancesResponse!; + const { instances, pageNumber: currentPage, totalPages, totalEntries, pageSize } = instancesResponse!; + const pagesToDisplay = this.getPagesToDisplay(totalPages, currentPage); return ( <> @@ -76,22 +77,34 @@ class InstanceTable extends React.PureComponent {

- Showing {(pageNumber - 1) * pageSize + 1}-{Math.min(pageNumber * pageSize, totalEntries)} of {totalEntries}{" "} - known instances + Showing {(currentPage - 1) * pageSize + 1}-{Math.min(currentPage * pageSize, totalEntries)} of{" "} + {totalEntries} known instances

- {range(totalPages).map(n => { - const isCurrentPage = pageNumber === n + 1; + {zip(pagesToDisplay, pagesToDisplay.slice(1)).map(([page, nextPage], idx) => { + if (page === undefined) { + return; + } + const isCurrentPage = currentPage === page; + const isEndOfSection = nextPage !== undefined && page + 1 !== nextPage && page !== totalPages; + return ( - + <> + + {isEndOfSection && ( + + )} + ); })} @@ -107,6 +120,20 @@ class InstanceTable extends React.PureComponent { private goToInstanceFactory = (domain: string) => () => { this.props.navigate(`/instance/${domain}`); }; + + private getPagesToDisplay = (totalPages: number, currentPage: number) => { + if (totalPages < 10) { + return range(1, totalPages + 1); + } + + const firstPages = range(1, 3); + const surroundingPages = range(Math.max(currentPage - 1, 1), Math.min(currentPage + 2, totalPages)); + const lastPages = range(totalPages - 1, totalPages + 1); + + const pagesToDisplay = firstPages.concat(surroundingPages).concat(lastPages); + + return sortedUniq(sortBy(pagesToDisplay, n => n)); + }; } const mapStateToProps = (state: IAppState) => {