From 53a01115f2957fcfc85d65cd0dd4da00e5c9a564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 2 Jun 2015 15:33:48 +0200 Subject: [PATCH] put show state of item list in store to fix bug --- js/actions/piece_list_actions.js | 3 +- .../accordion_list_item_table.js | 50 ++----------------- .../accordion_list_item_table_editions.js | 38 +++++++++----- .../accordion_list_item_table_toggle.js | 22 ++++++++ js/components/piece_list.js | 3 +- js/stores/piece_list_store.js | 13 +++++ 6 files changed, 70 insertions(+), 59 deletions(-) create mode 100644 js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js diff --git a/js/actions/piece_list_actions.js b/js/actions/piece_list_actions.js index 8830b2b6..4ba91870 100644 --- a/js/actions/piece_list_actions.js +++ b/js/actions/piece_list_actions.js @@ -6,7 +6,8 @@ import PieceListFetcher from '../fetchers/piece_list_fetcher'; class PieceListActions { constructor() { this.generateActions( - 'updatePieceList' + 'updatePieceList', + 'showEditionList' ); } diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js index 9ddb3308..2cbb54d7 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js @@ -6,30 +6,17 @@ import TableItem from '../ascribe_table/table_item'; import TableColumnContentModel from '../../models/table_column_content_model'; let AccordionListItemTable = React.createClass({ - getInitialState() { - return { - 'show': false - }; - }, - propTypes: { className: React.PropTypes.string, parentId: React.PropTypes.number, - fetchData: React.PropTypes.func, itemList: React.PropTypes.array, columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), - numOfTableItems: React.PropTypes.number - }, - - toggleTable() { - this.props.fetchData(); - this.setState({ - 'show': !this.state.show - }); + numOfTableItems: React.PropTypes.number, + show: React.PropTypes.bool }, render() { - if(this.props.itemList && this.state.show) { + if(this.props.show && this.props.itemList) { return (
- + {this.props.children} ); } else { return (
- + {this.props.children}
); } } }); -let AccordionListItemTableToggle = React.createClass({ - propTypes: { - className: React.PropTypes.string, - onClick: React.PropTypes.func, - show: React.PropTypes.bool, - numOfTableItems: React.PropTypes.number - }, - - render() { - return ( - - {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} - - ); - } -}); - export default AccordionListItemTable; \ No newline at end of file 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 2b3bd5c0..e5789528 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 @@ -2,8 +2,11 @@ import React from 'react'; import EditionListStore from '../../stores/edition_list_store'; import EditionListActions from '../../actions/edition_list_actions'; +import PieceListStore from '../../stores/piece_list_store'; +import PieceListActions from '../../actions/piece_list_actions'; import AccordionListItemTable from './accordion_list_item_table'; +import AccordionListItemTableToggle from './accordion_list_item_table_toggle'; import TableColumnContentModel from '../../models/table_column_content_model'; @@ -17,7 +20,8 @@ let AccordionListItemTableEditions = React.createClass({ propTypes: { className: React.PropTypes.string, parentId: React.PropTypes.number, - numOfEditions: React.PropTypes.number + numOfEditions: React.PropTypes.number, + show: React.PropTypes.bool }, getInitialState() { @@ -36,14 +40,15 @@ let AccordionListItemTableEditions = React.createClass({ EditionListStore.unlisten(this.onChange); }, - getEditionList() { - EditionListActions.fetchEditionList(this.props.parentId); - }, - selectItem(pieceId, editionId) { EditionListActions.selectEdition({pieceId, editionId}); }, + toggleTable() { + PieceListActions.showEditionList(this.props.parentId); + EditionListActions.fetchEditionList(this.props.parentId); + }, + render() { let columnList = [ new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false), @@ -53,13 +58,22 @@ let AccordionListItemTableEditions = React.createClass({ ]; return ( - +
+ + + + +
); } }); 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 new file mode 100644 index 00000000..a3431b04 --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_toggle.js @@ -0,0 +1,22 @@ +import React from 'react'; + +let AccordionListItemTableToggle = React.createClass({ + propTypes: { + className: React.PropTypes.string, + onClick: React.PropTypes.func, + show: React.PropTypes.bool, + numOfTableItems: React.PropTypes.number + }, + + render() { + return ( + + {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} + + ); + } +}); + +export default AccordionListItemTableToggle; \ No newline at end of file diff --git a/js/components/piece_list.js b/js/components/piece_list.js index ea1ef790..e6735a27 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -70,7 +70,8 @@ let PieceList = React.createClass({ key={i}> ); diff --git a/js/stores/piece_list_store.js b/js/stores/piece_list_store.js index 97e3f4a4..7ca96c87 100644 --- a/js/stores/piece_list_store.js +++ b/js/stores/piece_list_store.js @@ -24,6 +24,19 @@ class PieceListStore { this.bindActions(PieceListActions); } + onShowEditionList(pieceId) { + this.pieceList + .forEach((piece) => { + if(piece.id === pieceId) { + if(piece.show) { + piece.show = false; + } else { + piece.show = true; + } + } + }); + } + onUpdatePieceList({ page, pageSize, search, pieceList, orderBy, orderAsc, pieceListCount }) { this.page = page; this.pageSize = pageSize;