add foldable editions table

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;

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);

js/components/ascribe_table/table.js

@@ -14,15 +14,13 @@ let Table = React.createClass({
 
     renderChildren() {
         var that = this;
-        return ReactAddons.Children.map(this.props.children, (child) => {
+        return ReactAddons.Children.map(this.props.children, (child, i) => {
-            return that.props.itemList.map((item, i) => {
             return ReactAddons.addons.cloneWithProps(child, {
                 columnList: this.props.columnList,
-                    columnContent: item,
+                columnContent: this.props.itemList[i],
                 key: i
             });       
         });
-        });
     },
     
     render() {

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);
+        if(this.state.open) {
-        //this.props.actions.actions.fetchEditionList();
+            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 (
+                    <div className="row">
+                      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                        <Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
+                            {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
+                                return (
+                                    <TableItem
+                                        key={i}>
+                                    </TableItem>
+                                );
+                            })} 
+                        </Table>
+                      </div>  
+                    </div>
+                );
+            }
+        };
+
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
                 <div className="row">
@@ -72,6 +115,7 @@ let TableItemSubtable = React.createClass({
                         </TableItemSubtableButton>
                     </div>
                 </div>
+                {renderEditionListTable()}
             </div> 
         );
     }

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 (
             <span>
-                <button type="button" className="btn btn-ascribe btn-primary btn-sm">
+                <button type="button" className="btn btn-ascribe btn-primary btn-sm" onClick={this.props.onClick}>
                     {this.props.content}
                 </button>
             </span>

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() {

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() {
+    onChange(state) {
-        this.setState(this.getInitialState());
+        this.setState(state);
     },
 
     paginationGoToPage(page) {
@@ -59,29 +58,39 @@ 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.
+        if(this.state.pieceList && this.state.pieceList.length > 0) {
             return (
-            <AltContainer
+                <div>
-                store={PieceListStore}
+                    <Table 
-                transform={(props) => {
+                        columnList={columnList} 
-                    return {
+                        changeOrder={this.tableChangeOrder}
-                        'itemList': props.pieceList,
+                        itemList={this.state.pieceList}
-                        'itemListCount': props.pieceListCount,
+                        itemListCount={this.state.pieceListCount}
-                        'orderBy': props.orderBy,
+                        orderBy={this.state.orderBy}
-                        'orderAsc': props.orderAsc,
+                        orderAsc={this.state.orderAsc}
-                        'search': props.search,
+                        search={this.state.search}
-                        'page': props.page,
+                        page={this.state.page}
-                        'pageSize': props.pageSize,
+                        pageSize={this.state.pageSize}>
-                    }
+                            {this.state.pieceList.map((item, i) => {
-                }}>
+                                return (
-                <Table columnList={columnList} changeOrder={this.tableChangeOrder}>
+                                    <TableItemSubtable
-                    <TableItemSubtable store={EditionListStore} actions={EditionListActions}></TableItemSubtable>
+                                        key={i}>
+                                    </TableItemSubtable>
+                                );
+                            })}
                     </Table>
                     <Pagination currentPage={currentPage}
                                 totalPages={totalPages}
-                            goToPage={this.paginationGoToPage} />
+                                goToPage={this.paginationGoToPage}>
-            </AltContainer>
+                    </Pagination>
+                </div>
             );
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
+        
     }
 });
 

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) {
+    onUpdateEditionList({pieceId, editionList}) {
-        this.editionList = editionList;
+        this.editionList[pieceId] = editionList;
     }
 };