1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00

Merge branch 'selectable-table-items'

This commit is contained in:
Tim Daubenschütz 2015-05-29 10:56:44 +02:00
commit c177d382e4
5 changed files with 43 additions and 16 deletions

View File

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

View File

@ -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>
);

View File

@ -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="consign" />
<AclButton availableAcls={availableAcls} action="share" />
<AclButton availableAcls={availableAcls} action="loan" />
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
</div>
</div>
</div>

View File

@ -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;

View File

@ -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)
];