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 { Button, ButtonGroup, Code, HTMLTable, Intent, NonIdealState, Spinner } from "@blueprintjs/core";
import { push } from "connected-react-router"; import { push } from "connected-react-router";
import { range } from "lodash"; import { range, sortBy, sortedUniq, zip } from "lodash";
import * as numeral from "numeral"; import * as numeral from "numeral";
import React from "react"; import React from "react";
import { connect } from "react-redux"; import { connect } from "react-redux";
@ -45,7 +45,8 @@ class InstanceTable extends React.PureComponent<IInstanceTableProps> {
return <NonIdealState icon={<Spinner />} />; 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 ( return (
<> <>
@ -76,22 +77,34 @@ class InstanceTable extends React.PureComponent<IInstanceTableProps> {
<PaginationContainer> <PaginationContainer>
<p> <p>
Showing {(pageNumber - 1) * pageSize + 1}-{Math.min(pageNumber * pageSize, totalEntries)} of {totalEntries}{" "} Showing {(currentPage - 1) * pageSize + 1}-{Math.min(currentPage * pageSize, totalEntries)} of{" "}
known instances {totalEntries} known instances
</p> </p>
<ButtonGroup> <ButtonGroup>
{range(totalPages).map(n => { {zip(pagesToDisplay, pagesToDisplay.slice(1)).map(([page, nextPage], idx) => {
const isCurrentPage = pageNumber === n + 1; if (page === undefined) {
return;
}
const isCurrentPage = currentPage === page;
const isEndOfSection = nextPage !== undefined && page + 1 !== nextPage && page !== totalPages;
return ( return (
<Button <>
key={n} <Button
onClick={this.loadPageFactory(n + 1)} key={page}
disabled={isCurrentPage} onClick={this.loadPageFactory(page)}
intent={isCurrentPage ? Intent.PRIMARY : undefined} disabled={isCurrentPage}
> intent={isCurrentPage ? Intent.PRIMARY : undefined}
{n + 1} >
</Button> {page}
</Button>
{isEndOfSection && (
<Button disabled={true} key={"..."}>
{"..."}
</Button>
)}
</>
); );
})} })}
</ButtonGroup> </ButtonGroup>
@ -107,6 +120,20 @@ class InstanceTable extends React.PureComponent<IInstanceTableProps> {
private goToInstanceFactory = (domain: string) => () => { private goToInstanceFactory = (domain: string) => () => {
this.props.navigate(`/instance/${domain}`); 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) => { const mapStateToProps = (state: IAppState) => {