From 5f492ff13bf4ad6b77ba7d80f400289eefe4c340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 26 May 2015 13:14:35 +0200 Subject: [PATCH] add foldable editions table --- css/main.css | 4 +- js/actions/edition_list_actions.js | 5 +- js/components/ascribe_table/table.js | 14 ++-- .../ascribe_table/table_item_subtable.js | 52 ++++++++++++-- .../table_item_subtable_button.js | 5 +- .../ascribe_table/table_item_text.js | 5 +- js/components/piece_list.js | 67 +++++++++++-------- js/stores/edition_list_store.js | 6 +- 8 files changed, 108 insertions(+), 50 deletions(-) diff --git a/css/main.css b/css/main.css index 5e19671b..cac29beb 100644 --- a/css/main.css +++ b/css/main.css @@ -36,9 +36,9 @@ background-color: #F5F5F5; } -.ascribe-table-item:hover { +/*.ascribe-table-item:hover { background-color: #EEEEEE; -} +}*/ .ascribe-table-item-column { display: table; diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js index e8381b53..055ef2a5 100644 --- a/js/actions/edition_list_actions.js +++ b/js/actions/edition_list_actions.js @@ -13,7 +13,10 @@ class EditionListActions { EditionListFetcher .fetch(pieceId) .then((res) => { - this.actions.updateEditionList(res.editions); + this.actions.updateEditionList({ + 'editionList': res.editions, + pieceId + }); }) .catch((err) => { console.log(err); diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index 7de508bb..90067be6 100644 --- a/js/components/ascribe_table/table.js +++ b/js/components/ascribe_table/table.js @@ -14,14 +14,12 @@ let Table = React.createClass({ renderChildren() { var that = this; - return ReactAddons.Children.map(this.props.children, (child) => { - return that.props.itemList.map((item, i) => { - return ReactAddons.addons.cloneWithProps(child, { - columnList: this.props.columnList, - columnContent: item, - key: i - }); - }); + return ReactAddons.Children.map(this.props.children, (child, i) => { + return ReactAddons.addons.cloneWithProps(child, { + columnList: this.props.columnList, + columnContent: this.props.itemList[i], + key: i + }); }); }, diff --git a/js/components/ascribe_table/table_item_subtable.js b/js/components/ascribe_table/table_item_subtable.js index b2ca4349..0b0fd2ac 100644 --- a/js/components/ascribe_table/table_item_subtable.js +++ b/js/components/ascribe_table/table_item_subtable.js @@ -2,9 +2,15 @@ import React from 'react'; import TableColumnContentModel from '../../models/table_column_content_model'; +import EditionListStore from '../../stores/edition_list_store'; +import EditionListActions from '../../actions/edition_list_actions'; + // ToDo: Create Table-specific Utils to not lock it to projects utilities import GeneralUtils from '../../utils/general_utils'; +import Table from './table'; +import TableItem from './table_item'; +import TableItemText from './table_item_text'; import TableItemSubtableButton from './table_item_subtable_button'; @@ -25,12 +31,21 @@ let TableItemSubtable = React.createClass({ }, componentDidMount() { - this.props.store.listen(this.onChange); + EditionListStore.listen(this.onChange); }, loadEditionList() { - console.log(this.props); - //this.props.actions.actions.fetchEditionList(); + if(this.state.open) { + this.setState({ + 'open': false + }); + } else { + EditionListActions.fetchEditionList(this.props.columnContent.id); + this.setState({ + 'open': true, + 'editionList': EditionListStore.getState() + }); + } }, calcColumnClasses(list, i) { @@ -63,6 +78,34 @@ let TableItemSubtable = React.createClass({ }); }; + + let renderEditionListTable = () => { + + let columnList = [ + new TableColumnContentModel('edition_number', 'Edition Number', TableItemText, 2, false), + new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true), + new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, true) + ]; + + if(this.state.open && this.state.editionList[this.props.columnContent.id] && this.state.editionList[this.props.columnContent.id].length) { + return ( +
+
+ + {this.state.editionList[this.props.columnContent.id].map((edition, i) => { + return ( + + + ); + })} +
+
+
+ ); + } + }; + return (
@@ -72,9 +115,10 @@ let TableItemSubtable = React.createClass({
+ {renderEditionListTable()} ); } }); -export default TableItemSubtable; +export default TableItemSubtable; \ No newline at end of file diff --git a/js/components/ascribe_table/table_item_subtable_button.js b/js/components/ascribe_table/table_item_subtable_button.js index c2579ea8..7638dc13 100644 --- a/js/components/ascribe_table/table_item_subtable_button.js +++ b/js/components/ascribe_table/table_item_subtable_button.js @@ -3,13 +3,14 @@ import React from 'react'; let TableItemSubtableButton = React.createClass({ propTypes: { - content: React.PropTypes.string.isRequired + content: React.PropTypes.string.isRequired, + onClick: React.PropTypes.func.isRequired }, render() { return ( - diff --git a/js/components/ascribe_table/table_item_text.js b/js/components/ascribe_table/table_item_text.js index 1badbefd..0e90a2d5 100644 --- a/js/components/ascribe_table/table_item_text.js +++ b/js/components/ascribe_table/table_item_text.js @@ -3,7 +3,10 @@ import React from 'react'; let TableItemText = React.createClass({ propTypes: { - content: React.PropTypes.string.isRequired + content: React.PropTypes.oneOfType([ + React.PropTypes.string, + React.PropTypes.number + ]) }, render() { diff --git a/js/components/piece_list.js b/js/components/piece_list.js index f1e2b558..64612a27 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -4,9 +4,6 @@ import AltContainer from 'alt/AltContainer'; import PieceListStore from '../stores/piece_list_store'; import PieceListActions from '../actions/piece_list_actions'; -import EditionListStore from '../stores/edition_list_store'; -import EditionListActions from '../actions/edition_list_actions'; - import Table from './ascribe_table/table'; import TableItem from './ascribe_table/table_item'; import TableItemImg from './ascribe_table/table_item_img'; @@ -26,6 +23,8 @@ let PieceList = React.createClass({ }, componentDidMount() { + PieceListStore.listen(this.onChange); + let page = this.props.query.page || this.state.page; PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc); }, @@ -34,8 +33,8 @@ let PieceList = React.createClass({ PieceListStore.unlisten(this.onChange); }, - onChange() { - this.setState(this.getInitialState()); + onChange(state) { + this.setState(state); }, paginationGoToPage(page) { @@ -58,30 +57,40 @@ let PieceList = React.createClass({ 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 ( - { - return { - 'itemList': props.pieceList, - 'itemListCount': props.pieceListCount, - 'orderBy': props.orderBy, - 'orderAsc': props.orderAsc, - 'search': props.search, - 'page': props.page, - 'pageSize': props.pageSize, - } - }}> - - -
- - - ); + + if(this.state.pieceList && this.state.pieceList.length > 0) { + return ( +
+ + {this.state.pieceList.map((item, i) => { + return ( + + + ); + })} +
+ + +
+ ); + } else { + return ( +

Loading

+ ); + } + } }); diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js index 0412122b..4158e74c 100644 --- a/js/stores/edition_list_store.js +++ b/js/stores/edition_list_store.js @@ -3,12 +3,12 @@ import EditionsListActions from '../actions/edition_list_actions'; class EditionListStore { constructor() { - this.editionList = []; + this.editionList = {}; this.bindActions(EditionsListActions); } - onUpdateEditionList(editionList) { - this.editionList = editionList; + onUpdateEditionList({pieceId, editionList}) { + this.editionList[pieceId] = editionList; } };