Refactor to proper TableColumnModel including model validation

js/components/ascribe_table/table.js

@@ -3,19 +3,21 @@ import React from 'react';
 import TableItem from './table_item';
 import TableHeader from './table_header';
 
+import TableColumnModel from '../../models/table_column_model';
+
 
 let Table = React.createClass({
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel))
     },
     render() {
         if(this.props.itemList && this.props.itemList.length > 0) {
             return (
                 <div className="ascribe-table">
-                    <TableHeader columnMap={this.props.columnMap} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
+                    <TableHeader columnList={this.props.columnList} itemList={this.props.itemList} fetchList={this.props.fetchList} orderAsc={this.props.orderAsc} orderBy={this.props.orderBy} />
                     {this.props.itemList.map((item, i) => {
                         return (
-                            <TableItem columnMap={this.props.columnMap} columnContent={item} key={i} />
+                            <TableItem columnList={this.props.columnList} columnContent={item} key={i} />
                         );
                     })}
                 </div>

js/components/ascribe_table/table_header.js

@@ -4,11 +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';
+
 
 let TableHeader = React.createClass({
     mixins: [TableColumnMixin],
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired,
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
         itemList: React.PropTypes.array.isRequired,
         fetchList: React.PropTypes.func.isRequired,
         orderAsc: React.PropTypes.bool.isRequired,
@@ -16,17 +18,14 @@ let TableHeader = React.createClass({
     },
 
     render() {
-
-        let columnMapValuesList = GeneralUtils.valuesOfObject(this.props.columnMap);
-
         return (
             <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-header-row">
                 <div className="row">
-                    {columnMapValuesList.map((val, i) => {
+                    {this.props.columnList.map((val, i) => {
 
-                        let columnClasses = this.calcColumnClasses(this.props.columnMap, i);
+                        let columnClasses = this.calcColumnClasses(this.props.columnList, i);
-                        let columnName = Object.keys(this.props.columnMap)[i];
+                        let columnName = this.props.columnList[i].columnName;
-                        let canBeOrdered = columnMapValuesList[i].canBeOrdered;
+                        let canBeOrdered = this.props.columnList[i].canBeOrdered;
 
                         return (
                             <TableHeaderItem

js/components/ascribe_table/table_item.js

@@ -4,41 +4,31 @@ 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';
+
 
 let TableItem = React.createClass({
     mixins: [TableColumnMixin],
 
-    // ToDo: Specify that every columnMap should look like this:
-    // {
-    //      'name-of-the-data-point': {
-    //          'displayName': String,
-    //          'displayType': ReactComponent,
-    //          'rowWidth': number
-    //      }
-    // 
-    // }
     propTypes: {
-        columnMap: React.PropTypes.object.isRequired,
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnModel)),
         columnContent: React.PropTypes.object.isRequired
     },
+
     render() {
-        
-        let columnContent = this.props.columnContent;
-        let columnMapKeysList = Object.keys(this.props.columnMap);
-
         /**
          * An element in the Table can have a certain display_type.
          * A display_type is just 
          */
         let calcColumnElementContent = () => {
-            return columnMapKeysList.map((key, i) => {
+            return this.props.columnList.map((column, i) => {
 
-                let TypeElement = this.props.columnMap[key].displayType;
+                let TypeElement = column.displayType;
-                let columnClass = this.calcColumnClasses(this.props.columnMap, i);
+                let columnClass = this.calcColumnClasses(this.props.columnList, i);
 
                 return (
                     <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                        <TypeElement content={this.props.columnContent[key]} width="50" />
+                        <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
                     </div>
                 );
 

js/components/piece_list.js

@@ -9,6 +9,8 @@ import Table from './ascribe_table/table';
 import TableItemImg from './ascribe_table/table_item_img';
 import TableItemText from './ascribe_table/table_item_text';
 
+import TableColumnModel from '../models/table_column_model';
+
 let Link = Router.Link;
 
 
@@ -24,32 +26,15 @@ let PieceList = React.createClass({
 
     render() {
 
-        // TODO:
+        let columnList = [
-        // Specifiy how a TableItemX should look like
+            new TableColumnModel('thumbnail', '', TableItemImg, 2, false),
-        let columnMap = {
+            new TableColumnModel('artist_name', 'Artist', TableItemText, 4, true),
-            'thumbnail': {
+            new TableColumnModel('title', 'Title', TableItemText, 4, true)
-                'displayName': '',
+        ];
-                'displayType': TableItemImg,
-                'rowWidth': 2,
-                'canBeOrdered': false
-            },
-            'artist_name': {
-                'displayName': 'Artist',
-                'displayType': TableItemText,
-                'rowWidth': 4,
-                'canBeOrdered': true
-            },
-            'title': {
-                'displayName': 'Title',
-                'displayType': TableItemText,
-                'rowWidth': 4,
-                'canBeOrdered': true
-            }
-        };
 
         return (
             <AltContainer store={PieceListStore} actions={PieceListActions}>
-                <Table columnMap={columnMap} />
+                <Table columnList={columnList} />
             </AltContainer>
         );
     }

js/mixins/table_column_mixin.js

@@ -1,16 +1,16 @@
-import GeneralUtils from '../utils/general_utils';
+import React from 'react';
 
+import GeneralUtils from '../utils/general_utils';
 
 let TableColumnMixin = {
     /**
      * Generates the bootstrap grid column declarations automatically using
      * the columnMap.
      */
-    calcColumnClasses(obj, i) {
+    calcColumnClasses(list, i) {
         let bootstrapClasses = ['col-xs-', 'col-sm-', 'col-md-', 'col-lg-'];
         
-        let rowData = GeneralUtils.valuesOfObject(obj);
+        let listOfRowValues = list.map((column) => column.rowWidth );
-        let listOfRowValues = rowData.map((val) => val.rowWidth );
         let numOfColumns = GeneralUtils.sumNumList(listOfRowValues);
 
         if(numOfColumns > 12) {

js/models/table_column_model.js

@@ -0,0 +1,12 @@
+class TableColumnItem {
+    constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
+        this.columnName = columnName;
+        this.displayName = displayName;
+        this.displayType = displayType;
+        this.rowWidth = rowWidth;
+        this.canBeOrdered = canBeOrdered;
+    }
+
+}
+
+export default TableColumnItem;