diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js index bb5353e6..9ddb3308 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/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 ( - - + ); })} diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index e2d98457..2432e019 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/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('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false), - new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false) + new TableColumnContentModel((item) => { return { 'editionId': item.id, 'pieceId': this.props.parentId, 'selectItem': this.selectItem, 'selected': item.selected }}, '', '', TableItemCheckbox, 1, false), + new TableColumnContentModel((item) => { return { 'content': item.edition_number }}, 'num_editions', 'Nr', TableItemText, 1, 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 ( diff --git a/js/components/ascribe_table/table_item_checkbox.js b/js/components/ascribe_table/table_item_checkbox.js new file mode 100644 index 00000000..02357fa3 --- /dev/null +++ b/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 ( + + ); + } +}); + +export default TableItemCheckbox; diff --git a/js/components/ascribe_table/table_item_selectable.js b/js/components/ascribe_table/table_item_selectable.js index 98532acd..711e42b6 100644 --- a/js/components/ascribe_table/table_item_selectable.js +++ b/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 ( - - - ); - } else { - return ( - - - ); - } + return ( + + + ); } }); diff --git a/js/components/ascribe_table/table_item_wrapper.js b/js/components/ascribe_table/table_item_wrapper.js index 2f9f4c7e..c6251c4b 100644 --- a/js/components/ascribe_table/table_item_wrapper.js +++ b/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 (
- +
); diff --git a/js/models/table_column_content_model.js b/js/models/table_column_content_model.js index 4084fb4a..5e93cce4 100644 --- a/js/models/table_column_content_model.js +++ b/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; diff --git a/js/stores/edition_list_store.js b/js/stores/edition_list_store.js index feb0ba2a..13660356 100644 --- a/js/stores/edition_list_store.js +++ b/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 { } } }); - } };