From 4752ac83c4520fb0e95937b922e2ca07d7a5b8e2 Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 22 May 2015 15:03:29 +0200 Subject: [PATCH 1/2] Move pagination components in their own folder --- js/components/{ => ascribe_pagination}/pagination.js | 0 js/components/{ => ascribe_pagination}/pagination_button.js | 0 js/components/piece_list.js | 2 +- 3 files changed, 1 insertion(+), 1 deletion(-) rename js/components/{ => ascribe_pagination}/pagination.js (100%) rename js/components/{ => ascribe_pagination}/pagination_button.js (100%) diff --git a/js/components/pagination.js b/js/components/ascribe_pagination/pagination.js similarity index 100% rename from js/components/pagination.js rename to js/components/ascribe_pagination/pagination.js diff --git a/js/components/pagination_button.js b/js/components/ascribe_pagination/pagination_button.js similarity index 100% rename from js/components/pagination_button.js rename to js/components/ascribe_pagination/pagination_button.js diff --git a/js/components/piece_list.js b/js/components/piece_list.js index be3bfbe3..8aec6a46 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -10,7 +10,7 @@ import TableItemText from './ascribe_table/table_item_text'; import TableColumnModel from '../models/table_column_model'; -import Pagination from './pagination' +import Pagination from './ascribe_pagination/pagination' let PieceList = React.createClass({ From 39404b92f1fcd8f11499316d7a3567d70bd4e31e Mon Sep 17 00:00:00 2001 From: vrde Date: Fri, 22 May 2015 17:11:17 +0200 Subject: [PATCH 2/2] Add more logic to pagination --- .../ascribe_pagination/pagination.js | 14 ++++---- .../ascribe_pagination/pagination_button.js | 34 +++++++++++++------ js/components/ascribe_table/table.js | 1 - js/components/piece_list.js | 23 +++++++++++-- 4 files changed, 50 insertions(+), 22 deletions(-) diff --git a/js/components/ascribe_pagination/pagination.js b/js/components/ascribe_pagination/pagination.js index 90863c25..e99f8e4e 100644 --- a/js/components/ascribe_pagination/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/ascribe_pagination/pagination_button.js b/js/components/ascribe_pagination/pagination_button.js index e2badc99..ee9c1374 100644 --- a/js/components/ascribe_pagination/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 d95ea4c7..5aa1035d 100644 --- a/js/components/ascribe_table/table.js +++ b/js/components/ascribe_table/table.js @@ -12,7 +12,6 @@ let Table = React.createClass({ changeOrder: React.PropTypes.func.isRequired }, 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 8aec6a46..65714a77 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -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 ( - + ); }