added bulk actions

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 (
+        <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;
+});

assets/js/src/listing/column.jsx

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

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 = (
+          <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(

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 (
-          <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...',
+        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...',
+        name: 'add',
-        endpoint: 'subscribers',
+        label: 'Add to list...'
-        action: 'add',
-
       },
       {
-        label: 'Remove from list...',
+        name: 'remove',
-        endpoint: 'subscribers',
+        label: 'Remove from list...'
-        action: 'remove',
-
       }
     ];