implement intersection logic for acls

css/main.css

@@ -12,11 +12,13 @@
 .ascribe-table-header-row {
     border-bottom: 2px solid rgba(2, 182, 163, 0.5);
     border-top: 2px solid rgba(2, 182, 163, 0.5);
+    padding: 0;
 }
     
 .ascribe-table-header-column {
     display: table;
     height:3em;
+    padding: 0;
 }
 
 .ascribe-table-header-column > span {
@@ -59,3 +61,12 @@
 .ascribe-table-item-selectable {
     cursor: default;
 }
+
+.piece-list-toolbar {
+    height:3em;
+}
+
+.no-margin {
+    margin-right: 0;
+    margin-left: 0;
+}

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import EditionListStore from '../../stores/edition_list_store';
+
+let PieceListToolbar = React.createClass({
+    getInitialState() {
+        return EditionListStore.getState();
+    },
+
+    onChange(state) {
+        this.setState(state);
+    },
+
+    componentDidMount() {
+        EditionListStore.listen(this.onChange)
+    },
+
+    componentDidUnmount() {
+        EditionListStore.unlisten(this.onChange)
+    },
+
+    filterForSelected(edition) {
+        return edition.selected;
+    },
+
+    fetchSelectedEditionList() {
+        let selectedEditionList = [];
+
+        Object
+            .keys(this.state.editionList)
+            .forEach((key) => {
+                let filteredEditionsForPiece = this.state.editionList[key]
+                    .filter(this.filterForSelected);
+                selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
+            });
+
+        return selectedEditionList;
+    },
+
+    intersectAcls(a, b) {
+        //console.log(a, b);
+        return a.filter((val) => b.indexOf(val) > -1);
+    },
+
+    getAvailableAcls() {
+        let availableAcls = [];
+        let selectedEditionList = this.fetchSelectedEditionList();
+
+        // If no edition has been selected, availableActions is empty
+        // If only one edition has been selected, their actions are available
+        if(selectedEditionList.length >= 1) {
+            availableAcls = selectedEditionList[0].acl;
+        }
+        if(selectedEditionList.length >= 2) {
+            for(let i = 1; i < selectedEditionList.length; i++) {
+                availableAcls = this.intersectAcls(availableAcls, selectedEditionList[i].acl);
+            }
+        }
+        
+        return availableAcls;
+    },
+
+    render() {
+        this.getAvailableAcls();
+
+        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-right">
+                        <button type="button" className="btn btn-default btn-sm">Transfer</button>
+                        <button type="button" className="btn btn-default btn-sm">Consign</button>
+                        <button type="button" className="btn btn-default btn-sm">Share</button>
+                        <button type="button" className="btn btn-default btn-sm">Loan</button>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});
+
+export default PieceListToolbar;

js/components/piece_list.js

@@ -13,7 +13,9 @@ import TableItemSubtableButton from './ascribe_table/table_item_subtable_button'
 
 import TableColumnContentModel from '../models/table_column_content_model';
 
-import Pagination from './ascribe_pagination/pagination'
+import Pagination from './ascribe_pagination/pagination';
+
+import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
 
 
 let PieceList = React.createClass({
@@ -62,6 +64,7 @@ let PieceList = React.createClass({
         if(this.state.pieceList && this.state.pieceList.length > 0) {
             return (
                 <div>
+                    <PieceListToolbar />
                     <Table 
                         columnList={columnList} 
                         changeOrder={this.tableChangeOrder}