Add generic table

js/components/piece_list.js

@@ -15,9 +15,16 @@ let PieceList = React.createClass({
     },
 
     render() {
+
+        let columnMap = {
+            'thumbnail': 'Thumbnail',
+            'artist_name': 'Artist',
+            'title': 'Title'
+        };
+
         return (
             <AltContainer store={PieceListStore}>
-                <Table class="piecesTable" />
+                <Table class="piecesTable" columnMap={columnMap} />
             </AltContainer>
         );
     }

js/components/table.js

@@ -1,18 +1,32 @@
 import React from 'react';
 
 import TableItem from './table_item';
+import TableHeader from './table_header';
 
 let Table = React.createClass({
+    propTypes: {
+        columnMap: React.PropTypes.object.isRequired
+    },
     render() {
-        return (
-            <div className="row as-pieces-table">
-                {this.props.pieceList.map((piece, i) => {
-                    return (
-                        <TableItem piece={piece} key={i}/>
-                    );
-                })}
-            </div>
-        );
+
+        if(this.props.itemList && this.props.itemList.length > 0) {
+
+            return (
+                <div>
+                    <TableHeader className="ascribe-table-header" columnMap={this.props.columnMap}/>
+                    {this.props.itemList.map((item, i) => {
+                        return (
+                            <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
+                        );
+                    })}
+                </div>
+            );
+
+        } else {
+            return (
+                <p>Loading</p>
+            );
+        }
     }
 });
 

js/components/table_header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import TableColumnMixin from '../mixins/table_column_mixin';
+import GeneralUtils from '../utils/general_utils';
+
+let TableHeader = React.createClass({
+    mixins: [TableColumnMixin],
+    propTypes: {
+        columnMap: React.PropTypes.object.isRequired
+    },
+
+    render() {
+
+        let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
+        let columnClasses = this.calcColumnClasses(this.props.columnMap);
+
+        return (
+            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
+                <div className="row">
+                    {columnMapValuesList.map((val, i) => {
+                        return (
+                            <div className={columnClasses} key={i}>
+                                {val}
+                            </div>
+                        );
+                    })}
+                </div>
+            </div> 
+        );
+
+    }
+});
+
+export default TableHeader;

js/components/table_item.js

@@ -1,26 +1,29 @@
 import React from 'react';
 
+import TableColumnMixin from '../mixins/table_column_mixin';
+
 let TableItem = React.createClass({
+    mixins: [TableColumnMixin],
+    propTypes: {
+        columnMap: React.PropTypes.object.isRequired,
+        columnContent: React.PropTypes.object.isRequired
+    },
     render() {
         
-        let piece = this.props.piece;
-        let columnClasses = 'col-xs-3 col-sm-3 col-md-3 col-lg-3';
+        let columnContent = this.props.columnContent;
+        let columnClasses = this.calcColumnClasses(this.props.columnMap);
+        let columnMapKeysList = Object.keys(this.props.columnMap);
 
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                 <div className="row">
-                    <div className={columnClasses}>
-                        <img src={piece.thumbnail} height="50" />
-                    </div>
-                    <div className={columnClasses}>
-                        {piece.artist_name}
-                    </div>
-                    <div className={columnClasses}>
-                        {piece.title}
-                    </div>
-                    <div className={columnClasses}>
-                        {piece.availableActions}
-                    </div>
+                    {columnMapKeysList.map((key, i) => {
+                        return (
+                            <div className={columnClasses} key={i}>
+                                {columnContent[key]}
+                            </div>
+                        );
+                    })}
                 </div>
             </div> 
         );

js/mixins/table_column_mixin.js

@@ -0,0 +1,16 @@
+import GeneralUtils from '../utils/general_utils';
+
+let TableColumnMixin = {
+    /**
+     * Generates the bootstrap grid column declarations automatically using
+     * the columnMap.
+     */
+    calcColumnClasses(obj) {
+        let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
+        let numOfColumns = GeneralUtils.valuesOfObject(obj).length;
+
+        return bootstrapClasses.join( numOfColumns + ' ') + numOfColumns;
+    }
+};
+
+export default TableColumnMixin;

js/stores/piece_list_store.js

@@ -3,12 +3,12 @@ import PieceListActions from '../actions/piece_list_actions';
 
 class PieceListStore {
     constructor() {
-        this.pieceList = [];
+        this.itemList = []; // rename this to pieceList after figuring out AltContainer transform
         this.bindActions(PieceListActions);
     }
 
-    onUpdatePieceList(pieceList) {
-        this.pieceList = pieceList;
+    onUpdatePieceList(itemList) {
+        this.itemList = itemList;
     }
 };
 

js/utils/general_utils.js

@@ -16,6 +16,15 @@ let GeneralUtils = {
             });
 
         return obj;
+    },
+
+    /**
+     * Returns the values of an object.
+     */
+    valuesOfObject(obj) {
+        return Object
+                .keys(obj)
+                .map(key => obj[key]);
     }
 };