diff --git a/js/components/pagination.js b/js/components/ascribe_pagination/pagination.js
similarity index 69%
rename from js/components/pagination.js
rename to js/components/ascribe_pagination/pagination.js
index 90863c25..e99f8e4e 100644
--- a/js/components/pagination.js
+++ b/js/components/ascribe_pagination/pagination.js
@@ -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(
diff --git a/js/components/pagination_button.js b/js/components/ascribe_pagination/pagination_button.js
similarity index 68%
rename from js/components/pagination_button.js
rename to js/components/ascribe_pagination/pagination_button.js
index e2badc99..ee9c1374 100644
--- a/js/components/pagination_button.js
+++ b/js/components/ascribe_pagination/pagination_button.js
@@ -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 (
-
+ if (this.isInRange(page)) {
+ anchor = (
{directionDisplay}
+ );
+ } else {
+ isDisabled += ' disabled';
+ anchor = (
+
+ {directionDisplay}
+
+ );
+ }
+
+ return (
+
+ {anchor}
);
}
});
-export default PaginationButton;
\ No newline at end of file
+export default PaginationButton;
diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js
index c5ef0fbb..7de508bb 100644
--- a/js/components/ascribe_table/table.js
+++ b/js/components/ascribe_table/table.js
@@ -24,9 +24,8 @@ let Table = React.createClass({
});
});
},
-
+
render() {
-
if(this.props.itemList && this.props.itemList.length > 0) {
return (
diff --git a/js/components/piece_list.js b/js/components/piece_list.js
index 54b56382..f1e2b558 100644
--- a/js/components/piece_list.js
+++ b/js/components/piece_list.js
@@ -16,7 +16,7 @@ import TableItemSubtableButton from './ascribe_table/table_item_subtable_button'
import TableColumnContentModel from '../models/table_column_content_model';
-import Pagination from './pagination'
+import Pagination from './ascribe_pagination/pagination'
let PieceList = React.createClass({
@@ -30,12 +30,23 @@ let PieceList = React.createClass({
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() {
@@ -45,6 +56,9 @@ let PieceList = React.createClass({
new TableColumnContentModel('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 (
-
+
);
}