1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

Add more logic to pagination

This commit is contained in:
vrde 2015-05-22 17:11:17 +02:00
parent 4752ac83c4
commit 39404b92f1
4 changed files with 50 additions and 22 deletions

View File

@ -5,28 +5,26 @@ import PaginationButton from './pagination_button';
let Pagination = React.createClass({ let Pagination = React.createClass({
propTypes: { propTypes: {
goToPage: React.PropTypes.func.isRequired, goToPage: React.PropTypes.func.isRequired,
currentPage: React.PropTypes.oneOfType([ currentPage: React.PropTypes.number.isRequired,
React.PropTypes.string, totalPages: React.PropTypes.number.isRequired
React.PropTypes.number
]).isRequired
//itemListCount: React.PropTypes.number.isRequired //itemListCount: React.PropTypes.number.isRequired
}, },
render() { render() {
let currentPage = parseInt(this.props.currentPage, 10);
return( return(
<nav> <nav>
<ul className="pager"> <ul className="pager">
<PaginationButton <PaginationButton
direction='previous' direction='previous'
goToPage={this.props.goToPage} goToPage={this.props.goToPage}
currentPage={currentPage}> currentPage={this.props.currentPage}
totalPages={this.props.totalPages}>
</PaginationButton> </PaginationButton>
<PaginationButton <PaginationButton
direction='next' direction='next'
goToPage={this.props.goToPage} goToPage={this.props.goToPage}
currentPage={currentPage}> currentPage={this.props.currentPage}
totalPages={this.props.totalPages}>
</PaginationButton> </PaginationButton>
</ul> </ul>
</nav> </nav>

View File

@ -7,14 +7,19 @@ let PaginationButton = React.createClass({
propTypes: { propTypes: {
direction: React.PropTypes.oneOf(['previous', 'next']), direction: React.PropTypes.oneOf(['previous', 'next']),
goToPage: React.PropTypes.func.isRequired, goToPage: React.PropTypes.func.isRequired,
currentPage: React.PropTypes.number.isRequired currentPage: React.PropTypes.number.isRequired,
totalPages: React.PropTypes.number.isRequired
},
isInRange(page) {
return page > 0 && page <= this.props.totalPages;
}, },
render() { render() {
let page = parseInt(this.props.currentPage, 10);
let directionDisplay; let directionDisplay;
let page = this.props.currentPage;
let isDisabled = ''; let isDisabled = '';
let anchor;
if(this.props.direction === 'previous') { if(this.props.direction === 'previous') {
page -= 1; page -= 1;
@ -32,17 +37,26 @@ let PaginationButton = React.createClass({
); );
} }
if(page === 0) { if (this.isInRange(page)) {
isDisabled += ' disabled'; anchor = (
}
return (
<li className={this.props.direction + isDisabled }>
<Link to="pieces" <Link to="pieces"
query={{page}} query={{page}}
onClick={this.props.goToPage(page)}> onClick={this.props.goToPage(page)}>
{directionDisplay} {directionDisplay}
</Link> </Link>
);
} else {
isDisabled += ' disabled';
anchor = (
<a>
{directionDisplay}
</a>
);
}
return (
<li className={this.props.direction + isDisabled }>
{anchor}
</li> </li>
); );
} }

View File

@ -12,7 +12,6 @@ let Table = React.createClass({
changeOrder: React.PropTypes.func.isRequired changeOrder: React.PropTypes.func.isRequired
}, },
render() { render() {
if(this.props.itemList && this.props.itemList.length > 0) { if(this.props.itemList && this.props.itemList.length > 0) {
return ( return (
<div className="ascribe-table"> <div className="ascribe-table">

View File

@ -21,16 +21,28 @@ let PieceList = React.createClass({
componentDidMount() { componentDidMount() {
let page = this.props.query.page || this.state.page; let page = this.props.query.page || this.state.page;
PieceListStore.listen(this.onChange);
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc); this.state.orderBy, this.state.orderAsc);
}, },
componentWillUnmount() {
PieceListStore.unlisten(this.onChange);
},
onChange() {
this.setState(this.getInitialState());
},
paginationGoToPage(page) { paginationGoToPage(page) {
return () => PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); return (e) => PieceListActions.fetchPieceList(page, this.state.pageSize,
this.state.search, this.state.orderBy,
this.state.orderAsc);
}, },
tableChangeOrder(orderBy, orderAsc) { tableChangeOrder(orderBy, orderAsc) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, orderBy, orderAsc); PieceListActions.fetchPieceList(this.state.page, this.state.pageSize,
this.state.search, orderBy, orderAsc);
}, },
render() { render() {
@ -40,6 +52,9 @@ let PieceList = React.createClass({
new TableColumnModel('title', 'Title', TableItemText, 4, true) new TableColumnModel('title', 'Title', TableItemText, 4, true)
]; ];
let currentPage = parseInt(this.props.query.page, 10);
let totalPages = Math.ceil(this.state.pieceListCount / this.state.pageSize)
// Could wrap this altContainer potentially once again. // Could wrap this altContainer potentially once again.
return ( return (
<AltContainer <AltContainer
@ -57,7 +72,9 @@ let PieceList = React.createClass({
} }
}}> }}>
<Table columnList={columnList} changeOrder={this.tableChangeOrder} /> <Table columnList={columnList} changeOrder={this.tableChangeOrder} />
<Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} /> <Pagination currentPage={currentPage}
totalPages={totalPages}
goToPage={this.paginationGoToPage} />
</AltContainer> </AltContainer>
); );
} }