add editions-selected-count to toolbar

css/main.css

@@ -2,6 +2,10 @@
     padding-top: 70px;
 }
 
+.hidden {
+    display: none;
+}
+
 /* Taken from http://stackoverflow.com/a/20548578 */
 .vcenter {
     display: inline-block;

js/components/acl_button.js

@@ -5,24 +5,21 @@ import AppConstants from '../constants/application_constants';
 let AclButton = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
-        availableAcls: React.PropTypes.array.isRequired
+        availableAcls: React.PropTypes.array.isRequired,
+        actionFunction: React.PropTypes.func.isRequired
+    },
+
+    actionFunction() {
+        this.props.actionFunction(this.props.action);
     },
 
     render() {
         let shouldDisplay = this.props.availableAcls.indexOf(this.props.action) > -1;
-        let styles = {};
-
-        if(shouldDisplay) {
-            styles.display = 'inline-block';
-        } else {
-            styles.display = 'none';
-        }
-
         return (
             <button 
-                style={styles}
                 type="button" 
-                className="btn btn-default btn-sm">
+                className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}
+                onClick={this.actionFunction}>
                 {this.props.action.toUpperCase()}
             </button>
         );

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -3,6 +3,7 @@ import React from 'react';
 import EditionListStore from '../../stores/edition_list_store';
 
 import AclButton from '../acl_button';
+import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
 
 let PieceListToolbar = React.createClass({
     getInitialState() {
@@ -42,6 +43,10 @@ let PieceListToolbar = React.createClass({
         return a.filter((val) => b.indexOf(val) > -1);
     },
 
+    bulk(action) {
+        console.log(action);
+    },
+
     getAvailableAcls() {
         let availableAcls = [];
         let selectedEditionList = this.fetchSelectedEditionList();
@@ -67,11 +72,15 @@ let PieceListToolbar = React.createClass({
         return (
             <div className="row no-margin">
                 <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12 piece-list-toolbar">
+                    <div className="pull-left">
+                        <PieceListToolbarSelectedEditionsWidget
+                            numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
+                    </div>
                     <div className="pull-right">
-                        <AclButton availableAcls={availableAcls} action="transfer" />
+                        <AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="consign" />
+                        <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="share" />
+                        <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
-                        <AclButton availableAcls={availableAcls} action="loan" />
+                        <AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
                     </div>
                 </div>
             </div>

js/components/ascribe_piece_list_toolbar/piece_list_toolbar_selected_editions_widget.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+let PieceListToolbarSelectedEditionsWidget = React.createClass({
+    propTypes: {
+        numberOfSelectedEditions: React.PropTypes.number.isRequired
+    },
+
+    render() {
+        return (
+            <span className={this.props.numberOfSelectedEditions < 1 ? 'hidden' : ''}>
+                {this.props.numberOfSelectedEditions} Editions selected
+            </span>
+        );
+    }
+});
+
+export default PieceListToolbarSelectedEditionsWidget;

js/components/ascribe_table/table_item_subtable.js

@@ -61,7 +61,7 @@ let TableItemSubtable = React.createClass({
         let renderEditionListTable = () => {
 
             let columnList = [
-                new TableColumnContentModel('edition_number', 'Edition Number', TableItemText, 2, false),
+                new TableColumnContentModel('edition_number', 'Number', TableItemText, 2, false),
                 new TableColumnContentModel('user_registered', 'User', TableItemText, 4, true),
                 new TableColumnContentModel('acl', 'Actions', TableItemAcl, 4, true)
             ];