diff --git a/assets/js/src/listing/bulk_actions.jsx b/assets/js/src/listing/bulk_actions.jsx
new file mode 100644
index 0000000000..f908433038
--- /dev/null
+++ b/assets/js/src/listing/bulk_actions.jsx
@@ -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 (
+
+
+
+
+
+
+ );
+ }
+ });
+
+ return ListingBulkActions;
+});
\ No newline at end of file
diff --git a/assets/js/src/listing/column.jsx b/assets/js/src/listing/column.jsx
deleted file mode 100644
index a8601f9008..0000000000
--- a/assets/js/src/listing/column.jsx
+++ /dev/null
@@ -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 = (
-
- { this.props.column.label }
-
-
- );
- } else {
- label = this.props.column.label;
- }
- return (
-
- {label}
- |
- );
- }
- });
-
- return ListingColumn;
-});
\ No newline at end of file
diff --git a/assets/js/src/listing/header.jsx b/assets/js/src/listing/header.jsx
index 95a376dd6f..7467c7ee3f 100644
--- a/assets/js/src/listing/header.jsx
+++ b/assets/js/src/listing/header.jsx
@@ -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 = (
+
+ { this.props.column.label }
+
+
+ );
+ } else {
+ label = this.props.column.label;
+ }
+ return (
+
+ {label}
+ |
+ );
+ }
+ });
+
var ListingHeader = React.createClass({
handleSelectAll: function() {
return this.props.onSelectAll(
diff --git a/assets/js/src/subscribers/listing.jsx b/assets/js/src/subscribers/listing.jsx
index 3f225d1746..1066a49044 100644
--- a/assets/js/src/subscribers/listing.jsx
+++ b/assets/js/src/subscribers/listing.jsx
@@ -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 (
-
- );
- }
- });
-
- var ListingBulkActions = React.createClass({
- handleAction: function() {
- var action = jQuery(this.refs.action.getDOMNode()).val();
- console.log(action, this.props.selected);
-
- },
- render: function() {
- return (
-
-
-
-
-
-
- );
- }
- });
-
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(
+ ''
+ );
+ },
+ 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...'
}
];