inex/index.community
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix pagination for long lists in instance table

Browse source
This commit is contained in:
Tao Bror Bojlén 2019-08-29 19:03:27 +01:00
parent 3b28803bfa
commit 1c1ef37df9
No known key found for this signature in database
GPG key ID: C6EC7AAB905F9E6F
1 changed files with 41 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
frontend/src/components/organisms/InstanceTable.tsx
View file

@ -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<IInstanceTableProps> {
return <NonIdealState icon={<Spinner />} />;
}
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<IInstanceTableProps> {
<PaginationContainer>
<p>
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
</p>
<ButtonGroup>
{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 (
<Button
key={n}
onClick={this.loadPageFactory(n + 1)}
disabled={isCurrentPage}
intent={isCurrentPage ? Intent.PRIMARY : undefined}
>
{n + 1}
</Button>
<>
<Button
key={page}
onClick={this.loadPageFactory(page)}
disabled={isCurrentPage}
intent={isCurrentPage ? Intent.PRIMARY : undefined}
>
{page}
</Button>
{isEndOfSection && (
<Button disabled={true} key={"..."}>
{"..."}
</Button>
)}
</>
);
})}
</ButtonGroup>
@ -107,6 +120,20 @@ class InstanceTable extends React.PureComponent<IInstanceTableProps> {
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) => {