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...' } ];