diff --git a/index.html b/index.html index 4c875443..8b61e4b0 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ -
+
diff --git a/js/actions/edition_list_actions.js b/js/actions/edition_list_actions.js index 48e02d2d..78cc0eeb 100644 --- a/js/actions/edition_list_actions.js +++ b/js/actions/edition_list_actions.js @@ -6,7 +6,8 @@ class EditionListActions { constructor() { this.generateActions( 'updateEditionList', - 'selectEdition' + 'selectEdition', + 'clearAllEditionSelections' ); } diff --git a/js/components/ascribe_accordion_list/accordion_list.js b/js/components/ascribe_accordion_list/accordion_list.js new file mode 100644 index 00000000..9eb484b7 --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list.js @@ -0,0 +1,26 @@ +import React from 'react'; +import ReactAddons from 'react/addons'; + + +let AccordionList = React.createClass({ + propTypes: { + className: React.PropTypes.string, + children: React.PropTypes.arrayOf(React.PropTypes.element).isRequired + }, + + render() { + if(this.props.itemList && this.props.itemList.length > 0) { + return ( +
+ {this.props.children} +
+ ); + } else { + return ( +

Loading

+ ); + } + } +}); + +export default AccordionList; \ No newline at end of file diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js new file mode 100644 index 00000000..f932b12b --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -0,0 +1,33 @@ +import React from 'react'; + +import AccordionListItemTable from './accordion_list_item_table'; + + +let AccordionListItem = React.createClass({ + propTypes: { + className: React.PropTypes.string, + content: React.PropTypes.object + }, + + render() { + return ( +
+
+
+
+ +
+
+

{this.props.content.title}

+

by {this.props.content.artist_name}

+
+ +
+
+ {this.props.children} +
+ ); + } +}); + +export default AccordionListItem; diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table.js b/js/components/ascribe_accordion_list/accordion_list_item_table.js new file mode 100644 index 00000000..9ddb3308 --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js @@ -0,0 +1,87 @@ +import React from 'react'; + +import Table from '../ascribe_table/table'; +import TableItem from '../ascribe_table/table_item'; + +import TableColumnContentModel from '../../models/table_column_content_model'; + +let AccordionListItemTable = React.createClass({ + getInitialState() { + return { + 'show': false + }; + }, + + propTypes: { + className: React.PropTypes.string, + parentId: React.PropTypes.number, + fetchData: React.PropTypes.func, + itemList: React.PropTypes.array, + columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), + numOfTableItems: React.PropTypes.number + }, + + toggleTable() { + this.props.fetchData(); + this.setState({ + 'show': !this.state.show + }); + }, + + render() { + if(this.props.itemList && this.state.show) { + return ( +
+ + {this.props.itemList.map((item, i) => { + return ( + + + ); + })} +
+ +
+ ); + } else { + return ( +
+ +
+ ); + } + } +}); + +let AccordionListItemTableToggle = React.createClass({ + propTypes: { + className: React.PropTypes.string, + onClick: React.PropTypes.func, + show: React.PropTypes.bool, + numOfTableItems: React.PropTypes.number + }, + + render() { + return ( + + {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} + + ); + } +}); + +export default AccordionListItemTable; \ No newline at end of file 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 new file mode 100644 index 00000000..2b3bd5c0 --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -0,0 +1,67 @@ +import React from 'react'; + +import EditionListStore from '../../stores/edition_list_store'; +import EditionListActions from '../../actions/edition_list_actions'; + +import AccordionListItemTable from './accordion_list_item_table'; + +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({ + + propTypes: { + className: React.PropTypes.string, + parentId: React.PropTypes.number, + numOfEditions: React.PropTypes.number + }, + + getInitialState() { + return EditionListStore.getState(); + }, + + onChange(state) { + this.setState(state); + }, + + componentDidMount() { + EditionListStore.listen(this.onChange); + }, + + componentDidUnmount() { + EditionListStore.unlisten(this.onChange); + }, + + getEditionList() { + EditionListActions.fetchEditionList(this.props.parentId); + }, + + selectItem(pieceId, editionId) { + EditionListActions.selectEdition({pieceId, editionId}); + }, + + render() { + let columnList = [ + 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, 4, false) + ]; + + return ( + + ); + } +}); + +export default AccordionListItemTableEditions; \ No newline at end of file diff --git a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js index 4840b27a..f7b04cc6 100644 --- a/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js +++ b/js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js @@ -1,11 +1,16 @@ import React from 'react'; import EditionListStore from '../../stores/edition_list_store'; +import EditionListActions from '../../actions/edition_list_actions'; import AclButton from '../acl_button'; import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget'; let PieceListToolbar = React.createClass({ + propTypes: { + className: React.PropTypes.string + }, + getInitialState() { return EditionListStore.getState(); }, @@ -66,25 +71,46 @@ let PieceListToolbar = React.createClass({ return availableAcls; }, + clearAllSelections() { + EditionListActions.clearAllEditionSelections(); + }, + render() { let availableAcls = this.getAvailableAcls(); - return ( -
-
-
- -
-
- - - - + if(availableAcls.length > 0) { + return ( +
+
+
+

+
+
+ +           + clear all +
+
+

+
+
+ + + + +
+
+
-
- ); + ); + } else { + return null; + } + } }); diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index 06af7b89..74f19058 100644 --- a/js/components/ascribe_table/table.js +++ b/js/components/ascribe_table/table.js @@ -9,7 +9,7 @@ let Table = React.createClass({ propTypes: { columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), - changeOrder: React.PropTypes.func // turn isRequired on again after editions order implemented + changeOrder: React.PropTypes.func }, renderChildren() { @@ -24,24 +24,20 @@ let Table = React.createClass({ }, render() { - if(this.props.itemList && this.props.itemList.length > 0) { - return ( -
- + return ( +
+ +
{this.renderChildren()}
- ); - } else { - return ( -

Loading

- ); - } +
+ ); } }); diff --git a/js/components/ascribe_table/table_item.js b/js/components/ascribe_table/table_item.js index 1827253f..dffb7fa9 100644 --- a/js/components/ascribe_table/table_item.js +++ b/js/components/ascribe_table/table_item.js @@ -11,13 +11,12 @@ let TableItem = React.createClass({ columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), columnContent: React.PropTypes.object, onClick: React.PropTypes.func, // See: https://facebook.github.io/react/tips/expose-component-functions.html - classNames: React.PropTypes.string + className: React.PropTypes.string }, render() { return ( -
{ + return v === 'consign' || v === 'loan' || v === 'transfer' || v === 'view'; + }); + + return ( + + {filteredAcls.join('/')} + + ); + } +}); + +export default TableItemAclFiltered; 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 d62f8d04..711e42b6 100644 --- a/js/components/ascribe_table/table_item_selectable.js +++ b/js/components/ascribe_table/table_item_selectable.js @@ -26,12 +26,13 @@ let TableItemSelectable = React.createClass({ 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/components/header.js b/js/components/header.js index f191c04c..20855b1b 100644 --- a/js/components/header.js +++ b/js/components/header.js @@ -24,7 +24,7 @@ let Header = React.createClass({ render() { return ( -