fixed selectAll in listings

assets/css/src/listing.styl

@@ -1,2 +1,16 @@
 .mailpoet_listing_loading tbody tr
-  opacity: 0.2;
+  opacity: 0.2;
+
+.widefat tfoot td.mailpoet_check_column,
+.widefat thead td.mailpoet_check_column
+    padding-top: 10px;
+
+.widefat tbody th.mailpoet_check_column,
+.widefat tfoot td.mailpoet_check_column,
+.widefat thead td.mailpoet_check_column
+    padding: 11px 0 0 3px;
+
+.widefat .mailpoet_check_column
+    padding: 6px 0 25px;
+    vertical-align: top;
+    width: 2.2em;

assets/js/src/listing/bulk_actions.jsx

@@ -14,7 +14,7 @@ define('bulk_actions', ['react'], function(React) {
       var action = this.getSelectedAction();
 
       if(action !== null && action['onApply'] !== undefined) {
-        action.onApply(this.props.selected);
+        action.onApply();
       }
     },
     getSelectedAction: function() {

assets/js/src/listing/groups.jsx

@@ -1,7 +1,7 @@
 define('groups', ['react', 'classnames'], function(React, classNames) {
   var ListingGroups = React.createClass({
     handleSelect: function(group) {
-      return this.props.onSelect(group);
+      return this.props.onSelectGroup(group);
     },
     render: function() {
       var count = this.props.groups.length;

assets/js/src/listing/header.jsx

@@ -2,7 +2,7 @@ define('header', ['react', 'classnames'], function(React, classNames) {
   /*
     props:
       onSort: callback(sort_by, sort_order)
-      onSelectAll: callback(is_checked)
+      onSelectItems: callback(is_checked)
       sort_by: (string) field name
       columns -> (array)
         column -> {
@@ -13,9 +13,9 @@ define('header', ['react', 'classnames'], function(React, classNames) {
         }
   */
   var ListingHeader = React.createClass({
-    handleSelectAll: function() {
+    handleSelectItems: function() {
-      return this.props.onSelectAll(
+      return this.props.onSelectItems(
-        this.refs.select_all.getDOMNode().checked
+        this.refs.toggle.getDOMNode().checked
       );
     },
     render: function() {
@@ -32,14 +32,15 @@ define('header', ['react', 'classnames'], function(React, classNames) {
 
       return (
         <tr>
-          <td className="manage-column column-cb check-column" id="cb">
+          <td className="manage-column column-cb mailpoet_check_column">
             <label className="screen-reader-text">
               { 'Select All' }
             </label>
             <input
               type="checkbox"
-              ref="select_all"
+              ref="toggle"
-              onChange={this.handleSelectAll} />
+              checked={ this.props.selected }
+              onChange={ this.handleSelectItems } />
           </td>
           {columns}
         </tr>

assets/js/src/listing/listing.jsx

@@ -25,10 +25,10 @@ define(
     ListingFilters
   ) {
      var ListingItem = React.createClass({
-      handleSelect: function(e) {
+      handleSelectItem: function(e) {
         var is_checked = jQuery(e.target).is(':checked');
 
-        this.props.onSelect(
+        this.props.onSelectItem(
           parseInt(e.target.value, 10),
           is_checked
         );
@@ -38,14 +38,14 @@ define(
       render: function() {
         return (
           <tr>
-            <th className="check-column" scope="row">
+            <th className="mailpoet_check_column" scope="row">
               <label className="screen-reader-text">
                 { 'Select ' + this.props.item.email }</label>
               <input
                 type="checkbox"
                 defaultValue={ this.props.item.id }
-                defaultChecked={ this.props.item.selected }
+                checked={ this.props.item.selected }
-                onChange={ this.handleSelect } />
+                onChange={ this.handleSelectItem } />
             </th>
             { this.props.onRenderItem(this.props.item) }
           </tr>
@@ -76,11 +76,13 @@ define(
           return (
             <tbody>
               {this.props.items.map(function(item) {
-                item.selected = (this.props.selected.indexOf(item.id) !== -1);
+                item.id = parseInt(item.id, 10);
+                item.selected = (this.props.selected_ids.indexOf(item.id) !== -1);
+
                 return (
                   <ListingItem
                     columns={ this.props.columns }
-                    onSelect={ this.props.onSelect }
+                    onSelectItem={ this.props.onSelectItem }
                     onRenderItem={ this.props.onRenderItem }
                     key={ 'item-' + item.id }
                     item={ item } />
@@ -106,7 +108,8 @@ define(
           groups: [],
           group: 'all',
           filters: [],
-          selected: []
+          selected_ids: [],
+          selected: false
         };
       },
       componentDidMount: function() {
@@ -131,18 +134,37 @@ define(
           this.getItems();
         }.bind(this));
       },
-      handleSelect: function(id, is_checked) {
+      handleSelectItem: function(id, is_checked) {
-        var selected = this.state.selected;
+        var selected_ids = this.state.selected_ids;
 
         if(is_checked) {
-          selected = jQuery.merge(selected, [ id ]);
+          selected_ids = jQuery.merge(selected_ids, [ id ]);
         } else {
-          selected.splice(selected.indexOf(id), 1);
+          selected_ids.splice(selected_ids.indexOf(id), 1);
         }
+
         this.setState({
-          selected: selected
+          selected: false,
+          selected_ids: selected_ids
         });
       },
+      handleSelectItems: function(is_checked) {
+        if(is_checked === false) {
+          this.setState({
+            selected_ids: [],
+            selected: false
+          });
+        } else {
+          var selected_ids = this.state.items.map(function(item) {
+            return ~~item.id;
+          });
+
+          this.setState({
+            selected_ids: selected_ids,
+            selected: 'page'
+          });
+        }
+      },
       handleGroup: function(group) {
         // reset search
         jQuery('#search_input').val('');
@@ -150,26 +172,14 @@ define(
         this.setState({
           group: group,
           filters: [],
-          selected: [],
+          selected: false,
+          selected_ids: [],
           search: '',
           page: 1
         }, function() {
           this.getItems();
         }.bind(this));
       },
-      handleSelectAll: function(is_checked) {
-        if(is_checked === false) {
-          this.setState({ selected: [] });
-        } else {
-          var selected = this.state.items.map(function(item) {
-            return ~~item.id;
-          });
-
-          this.setState({
-            selected: selected
-          });
-        }
-      },
       handleSetPage: function(page) {
         this.setState({ page: page }, function() {
           this.getItems();
@@ -201,14 +211,13 @@ define(
             <ListingGroups
               groups={ this.state.groups }
               selected={ this.state.group }
-              onSelect={ this.handleGroup } />
+              onSelectGroup={ this.handleGroup } />
             <ListingSearch
               onSearch={ this.handleSearch }
               search={ this.state.search } />
             <div className="tablenav top clearfix">
               <ListingBulkActions
-                actions={ this.props.actions }
+                actions={ this.props.actions } />
-                selected={ this.state.selected } />
               <ListingFilters filters={ this.state.filters } />
               <ListingPages
                 count={ this.state.count }
@@ -220,7 +229,8 @@ define(
               <thead>
                 <ListingHeader
                   onSort={ this.handleSort }
-                  onSelectAll={ this.handleSelectAll }
+                  onSelectItems={ this.handleSelectItems }
+                  selected={ this.state.selected }
                   sort_by={ this.state.sort_by }
                   sort_order={ this.state.sort_order }
                   columns={ this.props.columns } />
@@ -229,15 +239,16 @@ define(
               <ListingItems
                 onRenderItem={ this.handleRenderItem }
                 columns={ this.props.columns }
-                selected={ this.state.selected }
+                onSelectItem={ this.handleSelectItem }
-                onSelect={ this.handleSelect }
+                selected_ids={ this.state.selected_ids }
                 loading= { this.state.loading }
                 items={ items } />
 
               <tfoot>
                 <ListingHeader
                   onSort={ this.handleSort }
-                  onSelectAll={ this.handleSelectAll }
+                  onSelectItems={ this.handleSelectItems }
+                  selected={ this.state.selected }
                   sort_by={ this.state.sort_by }
                   sort_order={ this.state.sort_order }
                   columns={ this.props.columns } />
@@ -246,8 +257,7 @@ define(
             </table>
             <div className="tablenav bottom">
               <ListingBulkActions
-                actions={ this.props.actions }
+                actions={ this.props.actions } />
-                selected={ this.state.selected } />
               <ListingPages
                 count={ this.state.count }
                 page={ this.state.page }