implement toggle functionality

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({
                     </Table>
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable} />
+                        onClick={this.toggleTable}
+                        show={this.state.show}
+                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         } else {
@@ -53,7 +56,9 @@ let AccordionListItemTable = React.createClass({
                 <div className={this.props.className}>
                     <AccordionListItemTableToggle
                         className="ascribe-accordion-list-table-toggle" 
-                        onClick={this.toggleTable} />
+                        onClick={this.toggleTable} 
+                        show={this.state.show}
+                        numOfTableItems={this.props.numOfTableItems} />
                 </div>
             );
         }
@@ -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 (
             <span 
                 className={this.props.className}
-                onClick={this.props.onClick}>Show all X Editions</span>
+                onClick={this.props.onClick}>
+                {this.props.show ? 'Hide all ' + this.props.numOfTableItems + ' Editions' : 'Show all ' + this.props.numOfTableItems + ' Editions'}
+            </span>
         );
     }
 });

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('bitcoin_id', 'Bitcoin Address', TableItemText, 5, false),
-            new TableColumnContentModel('acl', 'Actions', TableItemAcl, 6, 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}
-            </AccordionListItemTable>
+                numOfTableItems={this.props.numOfEditions} />
         );
     }
 });

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() {

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 (
+            <span>
+                {filteredAcls.join('/')}
+            </span>
+        );
+    }
+});
+
+export default TableItemAclFiltered;

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 (
                             <AccordionListItem 
                                 className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
@@ -68,7 +68,8 @@ let PieceList = React.createClass({
                                 key={i}>
                                 <AccordionListItemTableEditions 
                                     className="ascribe-accordion-list-item-table col-xs-6 col-sm-6 col-md-6 col-lg-6 col-xs-offset-3 col-sm-offset-3 col-md-offset-3 col-lg-offset-3"
-                                    parentId={item.id} />
+                                    parentId={item.id} 
+                                    numOfEditions={item.num_editions}/>
                             </AccordionListItem>
                         );
                     })}

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 {