Cavemanon/piratepoet
7
Fork 0
Code Pull Requests Actions Releases 16 Activity

added bulk actions

Browse Source
This commit is contained in:
Jonathan Labreuille
2015-08-26 21:01:48 +02:00
committed by marco
parent 0e2c04d97a
commit c6ec28dbc7
4 changed files with 128 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
assets/js/src/listing/bulk_actions.jsx Normal file
View File

@ -0,0 +1,64 @@
define('listing.bulk_actions', ['react'], function(React) {
var ListingBulkActions = React.createClass({
handleChangeAction: function(e) {
var action = this.getSelectedAction();
if(action !== null && action['onSelect'] !== undefined) {
action.onSelect(e);
}
},
handleApplyAction: function(e) {
e.preventDefault();
var action = this.getSelectedAction();
if(action !== null && action['onApply'] !== undefined) {
action.onApply(this.props.selected);
}
},
getSelectedAction: function() {
var selected_action = jQuery(this.refs.action.getDOMNode()).val();
if(selected_action.length > 0) {
var action = this.props.actions.filter(function(action) {
return (action.name === selected_action);
});
if(action.length > 0) {
return action[0];
}
}
return null;
},
render: function() {
return (
<div className="alignleft actions bulkactions">
<label
className="screen-reader-text"
htmlFor="bulk-action-selector-top">
Select bulk action
</label>
<select ref="action" onChange={this.handleChangeAction}>
<option value="">Bulk Actions</option>
{this.props.actions.map(function(action, index) {
return (
<option
value={action.name}
key={index}
>{ action.label }</option>
);
}.bind(this))}
</select>
<input
onClick={this.handleApplyAction}
type="submit"
defaultValue="Apply"
className="button action" />
</div>
);
}
});
return ListingBulkActions;
});

48
assets/js/src/listing/column.jsx
View File

@ -1,48 +0,0 @@
define('listing.column', ['react', 'classnames'], function(React, classNames) {
/*
props:
onSort -> callback(sort_by, sort_order)
column -> {
sorted: (string) asc | desc
sortable: (bool)
name: (string) field name
label: (string) displayed label
*/
var ListingColumn = React.createClass({
handleSort: function() {
var sort_by = this.props.column.name,
sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
this.props.onSort(sort_by, sort_order);
},
render: function() {
var classes = classNames(
'manage-column',
{ 'sortable': this.props.column.sortable },
this.props.column.sorted
);
var label;
if(this.props.column.sortable === true) {
label = (
<a onClick={this.handleSort}>
<span>{ this.props.column.label }</span>
<span className="sorting-indicator"></span>
</a>
);
} else {
label = this.props.column.label;
}
return (
<th
className={ classes }
id={this.props.column.name }
scope="col">
{label}
</th>
);
}
});
return ListingColumn;
});

37
assets/js/src/listing/header.jsx
View File

@ -12,7 +12,42 @@ define('listing.header', ['react', 'classnames'], function(React, classNames) {
label: (string) displayed label
}
*/
var ListingColumn = require('listing/column.jsx');
var ListingColumn = React.createClass({
handleSort: function() {
var sort_by = this.props.column.name,
sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
this.props.onSort(sort_by, sort_order);
},
render: function() {
var classes = classNames(
'manage-column',
{ 'sortable': this.props.column.sortable },
this.props.column.sorted
);
var label;
if(this.props.column.sortable === true) {
label = (
<a onClick={this.handleSort}>
<span>{ this.props.column.label }</span>
<span className="sorting-indicator"></span>
</a>
);
} else {
label = this.props.column.label;
}
return (
<th
className={ classes }
id={this.props.column.name }
scope="col">
{label}
</th>
);
}
});
var ListingHeader = React.createClass({
handleSelectAll: function() {
return this.props.onSelectAll(

84
assets/js/src/subscribers/listing.jsx
View File

@ -4,8 +4,8 @@ define('subscribers.listing',
var ListingSearch = require('listing/search.jsx');
var ListingPages = require('listing/pages.jsx');
var ListingColumn = require('listing/column.jsx');
var ListingHeader = require('listing/header.jsx');
var ListingBulkActions = require('listing/bulk_actions.jsx');
var ListingGroups = React.createClass({
render: function() {
@ -63,51 +63,6 @@ define('subscribers.listing',
}
});
var ListingBulkAction = React.createClass({
render: function() {
return (
<option value={this.props.action.action}>
{ this.props.action.label }
</option>
);
}
});
var ListingBulkActions = React.createClass({
handleAction: function() {
var action = jQuery(this.refs.action.getDOMNode()).val();
console.log(action, this.props.selected);
},
render: function() {
return (
<div className="alignleft actions bulkactions">
<label
className="screen-reader-text"
htmlFor="bulk-action-selector-top">
Select bulk action
</label>
<select ref="action">
<option>Bulk Actions</option>
{this.props.actions.map(function(action, index) {
return (
<ListingBulkAction
action={action}
key={index} />
);
}.bind(this))}
</select>
<input
onClick={this.handleAction}
type="submit"
defaultValue="Apply"
className="button action" />
</div>
);
}
});
var ListingItem = React.createClass({
handleSelect: function(e) {
var is_checked = jQuery(e.target).is(':checked');
@ -382,22 +337,39 @@ define('subscribers.listing',
var actions = [
{
name: 'move',
label: 'Move to list...',
endpoint: 'subscribers',
action: 'move',
onSelect: function(e) {
// display list selector
jQuery(e.target).after(
'<select id="bulk_action_list">'+
'<option value="">Select a list</option>'+
'<option value="1">List #1</option>'+
'<option value="2">List #2</option>'+
'<option value="3">List #3</option>'+
'</select>'
);
},
onApply: function(selected) {
var list = jQuery('#bulk_action_list').val();
MailPoet.Ajax.post({
endpoint: 'subscribers',
action: 'move',
data: {
selected: selected,
list: list
}
});
}
},
{
label: 'Add to list...',
endpoint: 'subscribers',
action: 'add',
name: 'add',
label: 'Add to list...'
},
{
label: 'Remove from list...',
endpoint: 'subscribers',
action: 'remove',
name: 'remove',
label: 'Remove from list...'
}
];