From f653564b5120ba995940ae8651a40ad64b5a7e3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Mon, 1 Jun 2015 13:18:24 +0200 Subject: [PATCH] implement toggle functionality --- .../accordion_list_item_table.js | 19 +++++++++++----- .../accordion_list_item_table_editions.js | 13 ++++++----- js/components/ascribe_table/table.js | 2 +- .../ascribe_table/table_item_acl_filtered.js | 22 +++++++++++++++++++ js/components/piece_list.js | 5 +++-- sass/main.scss | 1 - 6 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 js/components/ascribe_table/table_item_acl_filtered.js 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 7d545bd2..bb5353e6 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table.js @@ -17,7 +17,8 @@ let AccordionListItemTable = React.createClass({ parentId: React.PropTypes.number, fetchData: React.PropTypes.func, itemList: React.PropTypes.array, - columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)) + columnList: React.PropTypes.arrayOf(React.PropTypes.instanceOf(TableColumnContentModel)), + numOfTableItems: React.PropTypes.number }, toggleTable() { @@ -45,7 +46,9 @@ let AccordionListItemTable = React.createClass({ + onClick={this.toggleTable} + show={this.state.show} + numOfTableItems={this.props.numOfTableItems} /> ); } else { @@ -53,7 +56,9 @@ let AccordionListItemTable = React.createClass({
+ onClick={this.toggleTable} + show={this.state.show} + numOfTableItems={this.props.numOfTableItems} />
); } @@ -63,14 +68,18 @@ let AccordionListItemTable = React.createClass({ let AccordionListItemTableToggle = React.createClass({ propTypes: { className: React.PropTypes.string, - onClick: React.PropTypes.func + onClick: React.PropTypes.func, + show: React.PropTypes.bool, + numOfTableItems: React.PropTypes.number }, render() { return ( Show all X Editions + onClick={this.props.onClick}> + {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'} + ); } }); 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 c68fa739..e2d98457 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,13 +9,14 @@ 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 TableItemAcl from '../ascribe_table/table_item_acl'; +import TableItemAclFiltered from '../ascribe_table/table_item_acl_filtered'; let AccordionListItemTableEditions = React.createClass({ propTypes: { className: React.PropTypes.string, - parentId: React.PropTypes.number + parentId: React.PropTypes.number, + numOfEditions: React.PropTypes.number }, getInitialState() { @@ -42,8 +43,8 @@ let AccordionListItemTableEditions = React.createClass({ let columnList = [ new TableColumnContentModel('edition_number', 'Nr', TableItemText, 1, false), - new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 4, false), - new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, false) + new TableColumnContentModel('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false), + new TableColumnContentModel('acl', 'Actions', TableItemAclFiltered, 6, false) ]; return ( @@ -52,8 +53,8 @@ let AccordionListItemTableEditions = React.createClass({ parentId={this.props.parentId} fetchData={this.getEditionList} itemList={this.state.editionList[this.props.parentId]} - columnList={columnList}> - + columnList={columnList} + numOfTableItems={this.props.numOfEditions} /> ); } }); diff --git a/js/components/ascribe_table/table.js b/js/components/ascribe_table/table.js index 50f5f8d9..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() { diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js new file mode 100644 index 00000000..dada05ab --- /dev/null +++ b/js/components/ascribe_table/table_item_acl_filtered.js @@ -0,0 +1,22 @@ +import React from 'react'; + + +let TableItemAclFiltered = React.createClass({ + propTypes: { + content: React.PropTypes.array.isRequired + }, + + render() { + let filteredAcls = this.props.content.filter((v) => { + return v === 'consign' || v === 'loan' || v === 'transfer' || v === 'view'; + }); + + return ( + + {filteredAcls.join('/')} + + ); + } +}); + +export default TableItemAclFiltered; diff --git a/js/components/piece_list.js b/js/components/piece_list.js index 96c1acc6..3f36cfe2 100644 --- a/js/components/piece_list.js +++ b/js/components/piece_list.js @@ -54,13 +54,13 @@ let PieceList = React.createClass({ className="ascribe-accordion-list" changeOrder={this.accordionChangeOrder} itemList={this.state.pieceList} - itemListCount={this.state.pieceListCount} orderBy={this.state.orderBy} orderAsc={this.state.orderAsc} search={this.state.search} page={this.state.page} pageSize={this.state.pageSize}> {this.state.pieceList.map((item, i) => { + return ( + parentId={item.id} + numOfEditions={item.num_editions}/> ); })} diff --git a/sass/main.scss b/sass/main.scss index 6cc6af95..419da031 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -44,7 +44,6 @@ font-family: 'Source Sans Pro'; font-weight: 600; color: #424242; - font-size: 1.2em; } .ascribe-table-header-column > span > .glyphicon {