ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Add more logic to pagination

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
js/components/ascribe_pagination/pagination.js
View File

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

34
js/components/ascribe_pagination/pagination_button.js
View File

@ -7,14 +7,19 @@ let PaginationButton = React.createClass({
propTypes: {
direction: React.PropTypes.oneOf(['previous', 'next']),
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() {
let page = parseInt(this.props.currentPage, 10);
let directionDisplay;
let page = this.props.currentPage;
let isDisabled = '';
let anchor;
if(this.props.direction === 'previous') {
page -= 1;
@ -32,20 +37,29 @@ let PaginationButton = React.createClass({
);
}
if(page === 0) {
isDisabled += ' disabled';
}
return (
<li className={this.props.direction + isDisabled }>
if (this.isInRange(page)) {
anchor = (
<Link to="pieces"
query={{page}}
onClick={this.props.goToPage(page)}>
{directionDisplay}
</Link>
);
} else {
isDisabled += ' disabled';
anchor = (
<a>
{directionDisplay}
</a>
);
}
return (
<li className={this.props.direction + isDisabled }>
{anchor}
</li>
);
}
});
export default PaginationButton;
export default PaginationButton;

1
js/components/ascribe_table/table.js
View File

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

23
js/components/piece_list.js
View File

@ -21,16 +21,28 @@ let PieceList = React.createClass({
componentDidMount() {
let page = this.props.query.page || this.state.page;
PieceListStore.listen(this.onChange);
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc);
},
componentWillUnmount() {
PieceListStore.unlisten(this.onChange);
},
onChange() {
this.setState(this.getInitialState());
},
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) {
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() {
@ -40,6 +52,9 @@ let PieceList = React.createClass({
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.
return (
<AltContainer
@ -57,7 +72,9 @@ let PieceList = React.createClass({
}
}}>
<Table columnList={columnList} changeOrder={this.tableChangeOrder} />
<Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
<Pagination currentPage={currentPage}
totalPages={totalPages}
goToPage={this.paginationGoToPage} />
</AltContainer>
);
}