select state is saved in the store

css/main.css

@@ -31,10 +31,10 @@
 .ascribe-table-header-column > span > .glyphicon {
     font-size: .5em;
 }
-
+/*
 .ascribe-table-item:nth-child(even) {
     background-color: #F5F5F5;
-}
+}*/
 
 /*.ascribe-table-item:hover {
     background-color: #EEEEEE; 
@@ -55,4 +55,8 @@
 .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);
+}
+
+.ascribe-table-item-selected {
+    background-color: rgba(2, 182, 163, 0.5);
 }

js/actions/edition_list_actions.js

@@ -5,7 +5,8 @@ import EditionListFetcher from '../fetchers/edition_list_fetcher.js';
 class EditionListActions {
     constructor() {
         this.generateActions(
-            'updateEditionList'
+            'updateEditionList',
+            'selectEdition'
         );
     }
 
@@ -14,7 +15,7 @@ class EditionListActions {
             .fetch(pieceId)
             .then((res) => {
                 this.actions.updateEditionList({
-                    'editionList': res.editions,
+                    'editionListOfPiece': res.editions,
                     pieceId
                 });
             })

js/components/ascribe_table/table_item.js

@@ -10,7 +10,9 @@ let TableItem = React.createClass({
 
     propTypes: {
         columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
-        columnContent: React.PropTypes.object
+        columnContent: React.PropTypes.object,
+        onClick: React.PropTypes.func, // See: https://facebook.github.io/react/tips/expose-component-functions.html
+        classNames: React.PropTypes.string
     },
 
     render() {
@@ -30,7 +32,9 @@ let TableItem = React.createClass({
         };
 
         return (
-            <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item">
+            <div 
+                className={this.props.classNames + ' col-xs-12 col-sm-12 col-md-12 col-lg-12 ascribe-table-item'}
+                onClick={this.props.onClick}>
                 <div className="row">
                     {calcColumnElementContent()}
                 </div>

js/components/ascribe_table/table_item_selectable.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import TableColumnContentModel from '../../models/table_column_content_model';
+
+import TableItem from './table_item';
+
+// This Component is implemented as recommended here: http://stackoverflow.com/a/25723635/1263876
+let TableItemSelectable = React.createClass({
+
+    propTypes: {
+        parentId: React.PropTypes.number
+    },
+
+    propTypes: {
+        columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)),
+        columnContent: React.PropTypes.object
+    },
+
+    render() {
+        let tableItemClasses = classNames({
+            'ascribe-table-item-selected': this.props.columnContent.selected
+        });
+        let boundSelectItem = this.props.selectItem.bind(this, this.props.parentId, this.props.columnContent.edition_number);
+
+        return (
+            <TableItem classNames={tableItemClasses}
+                columnList={this.props.columnList}
+                columnContent={this.props.columnContent}
+                onClick={boundSelectItem}>
+            </TableItem>
+        );
+    }
+});
+
+export default TableItemSelectable;

js/components/ascribe_table/table_item_subtable.js

@@ -10,7 +10,7 @@ import EditionListActions from '../../actions/edition_list_actions';
 import GeneralUtils from '../../utils/general_utils';
 
 import Table from './table';
-import TableItem from './table_item';
+import TableItemSelectable from './table_item_selectable';
 import TableItemText from './table_item_text';
 import TableItemSubtableButton from './table_item_subtable_button';
 
@@ -50,6 +50,13 @@ let TableItemSubtable = React.createClass({
         }
     },
 
+    selectItem(parentId, itemId) {
+        EditionListActions.selectEdition({
+            'pieceId': parentId,
+            'editionId': itemId
+        });
+    },
+
     render() {
 
         let calcColumnElementContent = () => {
@@ -83,9 +90,11 @@ let TableItemSubtable = React.createClass({
                         <Table itemList={this.state.editionList[this.props.columnContent.id]} columnList={columnList}>
                             {this.state.editionList[this.props.columnContent.id].map((edition, i) => {
                                 return (
-                                    <TableItem
+                                    <TableItemSelectable
+                                        selectItem={this.selectItem}
+                                        parentId={this.props.columnContent.id}
                                         key={i}>
-                                    </TableItem>
+                                    </TableItemSelectable>
                                 );
                             })} 
                         </Table>

js/stores/edition_list_store.js

@@ -7,8 +7,22 @@ class EditionListStore {
         this.bindActions(EditionsListActions);
     }
 
-    onUpdateEditionList({pieceId, editionList}) {
+    onUpdateEditionList({pieceId, editionListOfPiece}) {
-        this.editionList[pieceId] = editionList;
+        this.editionList[pieceId] = editionListOfPiece;
+    }
+
+    onSelectEdition({pieceId, editionId}) {
+
+        this.editionList[pieceId].forEach((edition) => {
+            if(edition.edition_number === editionId) {
+                if(edition.selected) {
+                    edition.selected = false;
+                } else {
+                    edition.selected = true;
+                }
+            }
+        });
+
     }
 };