add checkbox select functionality

js/components/ascribe_accordion_list/accordion_list_item_table.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import Table from '../ascribe_table/table';
-import TableItemSelectable from '../ascribe_table/table_item_selectable';
+import TableItem from '../ascribe_table/table_item';
 
 import TableColumnContentModel from '../../models/table_column_content_model';
 
@@ -37,10 +37,10 @@ let AccordionListItemTable = React.createClass({
                       itemList={this.props.itemList}>
                         {this.props.itemList.map((item, i) => {
                             return (
-                                 <TableItemSelectable
+                                 <TableItem
                                     className="ascribe-table-item-selectable"
                                     key={i}>
-                                </TableItemSelectable>
+                                </TableItem>
                             );
                         })}
                     </Table>

js/components/ascribe_accordion_list/accordion_list_item_table_editions.js

@@ -9,6 +9,7 @@ import TableColumnContentModel from '../../models/table_column_content_model';
 
 import TableItemImg from '../ascribe_table/table_item_img';
 import TableItemText from '../ascribe_table/table_item_text';
+import TableItemCheckbox from '../ascribe_table/table_item_checkbox';
 import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered';
 
 let AccordionListItemTableEditions = React.createClass({
@@ -39,12 +40,16 @@ let AccordionListItemTableEditions = React.createClass({
         EditionListActions.fetchEditionList(this.props.parentId);
     },
 
-    render() {
+    selectItem(pieceId, editionId) {
+        EditionListActions.selectEdition({pieceId, editionId});
+    },
 
+    render() {
         let columnList = [
-            new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false),
+            new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false),
-            new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
+            new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, false),
-            new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false)
+            new TableColumnContentModel((item) => { return { 'content': item.bitcoin_id }}, 'bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
+            new TableColumnContentModel((item) => { return { 'content': item.acl }}, 'acl', 'Actions', TableItemAclFiltered, 5, false)
         ];
 
         return (

js/components/ascribe_table/table_item_checkbox.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+
+let TableItemCheckbox = React.createClass({
+    propTypes: {
+        editionId: React.PropTypes.number,
+        pieceId: React.PropTypes.number,
+        selectItem: React.PropTypes.func,
+        selected: React.PropTypes.bool
+    },
+
+    selectItem() {
+        this.props.selectItem(this.props.pieceId, this.props.editionId);
+    },
+
+    render() {
+        return (
+            <input type="checkbox" onChange={this.selectItem} checked={this.props.selected}/>
+        );
+    }
+});
+
+export default TableItemCheckbox;

js/components/ascribe_table/table_item_selectable.js

@@ -24,24 +24,14 @@ let TableItemSelectable = React.createClass({
             'ascribe-table-item-selected': this.props.columnContent.selected
         });
 
-        if(this.props.onClick) {
+        return (
-            return (
+            <TableItem 
-                <TableItem 
+                className={tableItemClasses + ' ' + this.props.className}
-                    className={tableItemClasses + ' ' + this.props.className}
+                columnList={this.props.columnList}
-                    columnList={this.props.columnList}
+                columnContent={this.props.columnContent}
-                    columnContent={this.props.columnContent}
+                onClick={this.selectItem}>
-                    onClick={this.selectItem}>
+            </TableItem>
-                </TableItem>
+        );
-            );
-        } else {
-            return (
-                <TableItem 
-                    className={tableItemClasses + ' ' + this.props.className}
-                    columnList={this.props.columnList}
-                    columnContent={this.props.columnContent}>
-                </TableItem>
-            );
-        }
         
     }
 });

js/components/ascribe_table/table_item_wrapper.js

@@ -17,11 +17,13 @@ let TableItemWrapper = React.createClass({
                 {this.props.columnList.map((column, i) => {
 
                     let TypeElement = column.displayType;
+                    let typeElementProps = column.transformFn(this.props.columnContent);
+
                     let columnClass = this.calcColumnClasses(this.props.columnList, i, this.props.columnWidth);
 
                     return (
                         <div className={columnClass + ' ascribe-table-item-column'} key={i}>
-                            <TypeElement content={this.props.columnContent[column.columnName]} width="50" />
+                            <TypeElement {...typeElementProps} />
                         </div>
                     );
 

js/models/table_column_content_model.js

@@ -1,6 +1,7 @@
 class TableColumnContentModel {
     // ToDo: Add validation for all passed-in parameters
-    constructor(columnName, displayName, displayType, rowWidth, canBeOrdered) {
+    constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered) {
+        this.transformFn = transformFn;
         this.columnName = columnName;
         this.displayName = displayName;
         this.displayType = displayType;

js/stores/edition_list_store.js

@@ -21,9 +21,8 @@ class EditionListStore {
     }
 
     onSelectEdition({pieceId, editionId}) {
-
         this.editionList[pieceId].forEach((edition) => {
-            if(edition.edition_number === editionId) {
+            if(edition.id === editionId) {
                 if(edition.selected) {
                     edition.selected = false;
                 } else {
@@ -31,7 +30,6 @@ class EditionListStore {
                 }
             }
         });
-
     }
 };