From e10b56cfc7ff722fc538feb622359bc65273e493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Fri, 3 Jul 2015 16:31:09 +0200 Subject: [PATCH] first cut pagination for editions --- js/actions/edition_list_actions.js | 12 +++++-- .../accordion_list_item_table_editions.js | 11 ++++++- .../accordion_list_item_table_toggle.js | 7 ++-- js/fetchers/edition_list_fetcher.js | 9 +++-- js/stores/edition_list_store.js | 33 +++++++++++++------ 5 files changed, 55 insertions(+), 17 deletions(-) diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js index c54bc6fd..a94001bf 100644 --- a/js/actions/edition_list_actions.js +++ b/js/actions/edition_list_actions.js @@ -15,19 +15,27 @@ class EditionListActions { ); } - fetchEditionList(pieceId, orderBy, orderAsc) { + fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc) { if(!orderBy && typeof orderAsc == 'undefined') { orderBy = 'edition_number'; orderAsc = true; } + // Taken from: http://stackoverflow.com/a/519157/1263876 + if(typeof page === 'undefined' && typeof pageSize === 'undefined') { + page = 1; + pageSize = 10; + } + return new Promise((resolve, reject) => { EditionListFetcher - .fetch(pieceId, orderBy, orderAsc) + .fetch(pieceId, page, pageSize, orderBy, orderAsc) .then((res) => { this.actions.updateEditionList({ 'editionListOfPiece': res.editions, pieceId, + page, + pageSize, orderBy, orderAsc }); diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 7e030f1c..af27d01f 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -67,6 +67,11 @@ let AccordionListItemTableEditions = React.createClass({ } }, + loadFurtherEditions() { + let editionList = this.state.editionList[this.props.parentId]; + EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize); + }, + changeEditionListOrder(orderBy, orderAsc) { EditionListActions.fetchEditionList(this.props.parentId, orderBy, orderAsc); }, @@ -166,10 +171,14 @@ let AccordionListItemTableEditions = React.createClass({ orderBy={orderBy} orderAsc={orderAsc} changeOrder={this.changeEditionListOrder}> + Show me more

: ''} /> + message={show ? 'Hide all editions' : 'Show all editions'} /> diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js b/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js index 542027cd..5140c285 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js @@ -6,7 +6,10 @@ let AccordionListItemTableToggle = React.createClass({ propTypes: { className: React.PropTypes.string, onClick: React.PropTypes.func, - show: React.PropTypes.bool + message: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.element + ]) }, render() { @@ -14,7 +17,7 @@ let AccordionListItemTableToggle = React.createClass({ - {this.props.show ? 'Hide all Editions' : 'Show all Editions'} + {this.props.message} ); } diff --git a/js/fetchers/edition_list_fetcher.js b/js/fetchers/edition_list_fetcher.js index 32dc445d..6365a4be 100644 --- a/js/fetchers/edition_list_fetcher.js +++ b/js/fetchers/edition_list_fetcher.js @@ -9,9 +9,14 @@ let EditionListFetcher = { /** * Fetches a list of editions from the API. */ - fetch(pieceId, orderBy, orderAsc) { + fetch(pieceId, page, pageSize, orderBy, orderAsc) { let ordering = generateOrderingQueryParams(orderBy, orderAsc); - return requests.get('editions_list', { 'piece_id': pieceId, ordering }); + return requests.get('editions_list', { + 'piece_id': pieceId, + page, + pageSize, + ordering + }); } }; diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js index 8dbf9104..93afbda6 100644 --- a/js/stores/edition_list_store.js +++ b/js/stores/edition_list_store.js @@ -12,18 +12,29 @@ class EditionListStore { this.bindActions(EditionsListActions); } - onUpdateEditionList({pieceId, editionListOfPiece, orderBy, orderAsc}) { + onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc}) { if(this.editionList[pieceId]) { - this.editionList[pieceId].forEach((edition, i) => { - // This uses the index of the new editionList for determining the edition. - // If the list of editions can be sorted in the future, this needs to be changed! - if (editionListOfPiece[i]) { - editionListOfPiece[i] = React.addons.update(edition, {$merge: editionListOfPiece[i]}); - } - }); - } - this.editionList[pieceId] = editionListOfPiece; + let pageOfCurrentEditionList = this.editionList[pieceId].slice((page - 1) * pageSize, pageSize); + + if(pageOfCurrentEditionList.length < 1) { + // just append newly received editions + console.log('asdasd'); + this.editionList[pieceId].push.apply(this.editionList[pieceId], editionListOfPiece); + } else { + // merge with existing page's editions + pageOfCurrentEditionList.forEach((edition, i) => { + + if(editionListOfPiece[i]) { + edition = React.addons.update(edition, {$merge: editionListOfPiece[i]}); + } + + this.editionList[pieceId].splice((page - 1) * pageSize + i, 0, edition); + }); + } + } else { + this.editionList[pieceId] = editionListOfPiece; + } /** * orderBy and orderAsc are specific to a single list of editions @@ -31,6 +42,8 @@ class EditionListStore { * * Default values for both are set in the editon_list-actions. */ + this.editionList[pieceId].page = page; + this.editionList[pieceId].pageSize = pageSize; this.editionList[pieceId].orderBy = orderBy; this.editionList[pieceId].orderAsc = orderAsc; }