Inject elements-to-transclude in the table

css/main.css

@@ -51,3 +51,8 @@
     display:table-cell;
     vertical-align: middle;
 }
+
+.btn-ascribe, .btn-ascribe:hover, .btn-ascribe:active, .btn-ascribe:focus {
+    background-color: rgba(2, 182, 163, 0.5);
+    border-color: rgba(2, 182, 163, 0.5);
+}

js/actions/edition_list_actions.js

@@ -9,11 +9,11 @@ class EditionListActions {
         );
     }
 
-    fetchList() {
+    fetchList(pieceId) {
         EditionListFetcher
-            .fetch()
+            .fetch(pieceId)
             .then((res) => {
-                this.actions.updateEditionList(res.pieces);
+                this.actions.updateEditionList(res.editions);
             })
             .catch((err) => {
                 console.log(err);

js/components/ascribe_table/table.js

@@ -1,32 +1,39 @@
 import React from 'react';
+import ReactAddons from 'react/addons';
 
 import TableHeader from './table_header';
-import TableColumnModel from '../../models/table_column_model';
+import TableColumnContentModel from '../../models/table_column_content_model';
 
 
 let Table = React.createClass({
     
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
-        changeOrder: React.PropTypes.func.isRequired,
-        tableItem: React.PropTypes.any.isRequired // Optimally, this should check if tableItem is an instance of React.Component or something like that
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        changeOrder: React.PropTypes.func.isRequired
+    },
+
+    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
+                });
+            });           
+        });
     },
 
     render() {
-        let TableItem = this.props.tableItem;
-
+        
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className="ascribe-table">
                     <TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} changeOrder={this.props.changeOrder} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
-                    {this.props.itemList.map((item, i) => {
-                        return (
-                            <TableItem columnList={this.props.columnList} columnContent={item} key={i} />
-                        );
-                    })}
+                    {this.renderChildren()}
                 </div>
             );
-
         } else {
             return (
                 <p>Loading</p>

js/components/ascribe_table/table_header.js

@@ -4,13 +4,13 @@ import TableColumnMixin from '../../mixins/table_column_mixin';
 import GeneralUtils from '../../utils/general_utils';
 import TableHeaderItem from './table_header_item';
 
-import TableColumnModel from '../../models/table_column_model';
+import TableColumnContentModel from '../../models/table_column_content_model';
 
 
 let TableHeader = React.createClass({
     mixins: [TableColumnMixin],
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
         itemList: React.PropTypes.array.isRequired,
         changeOrder: React.PropTypes.func.isRequired,
         orderAsc: React.PropTypes.bool.isRequired,

js/components/ascribe_table/table_item.js

@@ -1,26 +1,19 @@
 import React from 'react';
 
 import TableColumnMixin from '../../mixins/table_column_mixin';
-import TableItemImg from './table_item_img';
-import TableItemText from './table_item_text';
 
-import TableColumnModel from '../../models/table_column_model';
+import TableColumnContentModel from '../../models/table_column_content_model';
 
 
 let TableItem = React.createClass({
     mixins: [TableColumnMixin],
 
     propTypes: {
-        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
-        columnContent: React.PropTypes.object.isRequired
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object
     },
 
     render() {
-        
-        /**
-         * An element in the Table can have a certain display_type.
-         * A display_type is just 
-         */
         let calcColumnElementContent = () => {
             return this.props.columnList.map((column, i) => {
 

js/components/ascribe_table/table_item_subtable.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+// ToDo: Create Table-specific Utils to not lock it to projects utilities
+import GeneralUtils from '../../utils/general_utils';
+
+import TableItemSubtableButton from './table_item_subtable_button';
+
+
+let TableItemSubtable = React.createClass({
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object
+    },
+
+    calcColumnClasses(list, i) {
+        let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
+        
+        let listOfRowValues = list.map((column) => column.rowWidth );
+        let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
+
+        if(numOfColumns > 10) {
+            throw new Error('Bootstrap has only 12 columns to assign. You defined ' + numOfColumns + '. Change this in the columnMap you\'re passing to the table.')
+        } else {
+            return bootstrapClasses.join( listOfRowValues[i] + ' ') + listOfRowValues[i];
+        }
+    },
+
+    render() {
+
+        let calcColumnElementContent = () => {
+            return this.props.columnList.map((column, i) => {
+
+                let TypeElement = column.displayType;
+                let columnClass = this.calcColumnClasses(this.props.columnList, i);
+
+                return (
+                    <div className={columnClass + ' ascribe-table-item-column'} key={i}>
+                        <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
+                    </div>
+                );
+
+            });
+        };
+
+        return (
+            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
+                <div className="row">
+                    {calcColumnElementContent()}
+                    <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2 ascribe-table-item-column">
+                        <TableItemSubtableButton content="Editions">
+                        </TableItemSubtableButton>
+                    </div>
+                </div>
+            </div> 
+        );
+    }
+});
+
+export default TableItemSubtable;

js/components/ascribe_table/table_item_subtable_button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+let TableItemSubtableButton = React.createClass({
+    
+    propTypes: {
+        content: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        return (
+            <span>
+                <button type="button" className="btn btn-ascribe btn-primary btn-sm">
+                    {this.props.content}
+                </button>
+            </span>
+        );
+    }
+});
+
+export default TableItemSubtableButton;

js/components/edition_list.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import AltContainer from 'alt/AltContainer';
-
-import EditionListStore from '../stores/edition_list_store';
-import EditionListActions from '../actions/edition_list_actions';
-
-import Table from './ascribe_table/table';
-import TableItemText from './ascribe_table/table_item_text';
-
-import TableColumnModel from '../models/table_column_model';
-
-let EditionList = React.createClass({
-
-    getInitialState() {
-        return EditionListStore.getState();
-    },
-
-    componentDidMount() {
-        EditionListActions.fetchList();
-    },
-
-    render() {
-        return (
-            <AltContainer store={EditionListStore} actions={EditionListActions}>
-                <Table></Table>
-            </AltContainer>
-        );
-    }
-
-});
-
-export default EditionList;

js/components/piece_list.js

@@ -4,12 +4,17 @@ 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';
 import TableItemText from './ascribe_table/table_item_text';
+import TableItemSubtable from './ascribe_table/table_item_subtable';
+import TableItemSubtableButton from './ascribe_table/table_item_subtable_button';
 
-import TableColumnModel from '../models/table_column_model';
+import TableColumnContentModel from '../models/table_column_content_model';
 
 import Pagination from './pagination'
 
@@ -22,8 +27,7 @@ let PieceList = React.createClass({
 
     componentDidMount() {
         let page = this.props.query.page || this.state.page;
-        PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
-                                   this.state.orderBy, this.state.orderAsc);
+        PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
     },
 
     paginationGoToPage(page) {
@@ -36,16 +40,15 @@ let PieceList = React.createClass({
 
     render() {
         let columnList = [
-            new TableColumnModel('thumbnail', '', TableItemImg, 2, false),
-            new TableColumnModel('artist_name', 'Artist', TableItemText, 4, true),
-            new TableColumnModel('title', 'Title', TableItemText, 4, true)
+            new TableColumnContentModel('thumbnail', '', TableItemImg, 2, false),
+            new TableColumnContentModel('artist_name', 'Artist', TableItemText, 4, true),
+            new TableColumnContentModel('title', 'Title', TableItemText, 4, true)
         ];
 
         // Could wrap this altContainer potentially once again.
         return (
             <AltContainer
-                store={PieceListStore} 
-                actions={PieceListActions}
+                store={PieceListStore}
                 transform={(props) => {
                     return {
                         'itemList': props.pieceList,
@@ -54,10 +57,11 @@ let PieceList = React.createClass({
                         'orderAsc': props.orderAsc,
                         'search': props.search,
                         'page': props.page,
-                        'pageSize': props.pageSize
+                        'pageSize': props.pageSize,
                     }
                 }}>
-                <Table columnList={columnList} changeOrder={this.tableChangeOrder} tableItem={TableItem}>
+                <Table columnList={columnList} changeOrder={this.tableChangeOrder}>
+                    <TableItemSubtable></TableItemSubtable>
                 </Table>
                 <Pagination currentPage={this.props.query.page} goToPage={this.paginationGoToPage} />
             </AltContainer>

js/fetchers/edition_list_fetcher.js

@@ -7,9 +7,9 @@ let EditionListFetcher = {
     /**
      * Fetches a list of editions from the API.
      */
-    fetch() {
+    fetch(pieceId) {
 
-        return fetch(AppConstants.baseUrl + 'pieces/', {
+        return fetch(AppConstants.baseUrl + 'pieces/' + pieceId + '/editions/', {
             headers: {
                 'Authorization': 'Basic ' + AppConstants.debugCredentialBase64
             }

js/models/table_column_content_model.js

@@ -1,4 +1,5 @@
-class TableColumnItem {
+class TableColumnContentModel {
+    // ToDo: Add validation for all passed-in parameters
     constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
         this.columnName = columnName;
         this.displayName = displayName;
@@ -8,4 +9,4 @@ class TableColumnItem {
     }
 }
 
-export default TableColumnItem;
+export default TableColumnContentModel;

js/stores/edition_list_store.js

@@ -3,12 +3,12 @@ import EditionsListActions from '../actions/edition_list_actions';
 
 class EditionListStore {
     constructor() {
-        this.itemList = [];
+        this.editionList = [];
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList(itemList) {
-        this.itemList = itemList;
+    onUpdateEditionList(editionList) {
+        this.editionList = editionList;
     }
 };