Listings: bulk actions

- renamed actions -> bulk_actions
- introduced item_actions for per item actions
- remove checkboxes (selectAll + item's) when there is no bulk actions

assets/js/src/listing/bulk_actions.jsx

@@ -20,7 +20,7 @@ define(['react'], function(React) {
     getSelectedAction: function() {
       var selected_action = jQuery(this.refs.action.getDOMNode()).val();
       if(selected_action.length > 0) {
-        var action = this.props.actions.filter(function(action) {
+        var action = this.props.bulk_actions.filter(function(action) {
           return (action.name === selected_action);
         });
 
@@ -31,7 +31,7 @@ define(['react'], function(React) {
       return null;
     },
     render: function() {
-      if(this.props.actions.length === 0) {
+      if(this.props.bulk_actions.length === 0) {
         return null;
       }
 
@@ -45,7 +45,7 @@ define(['react'], function(React) {
 
           <select ref="action" onChange={this.handleChangeAction}>
             <option value="">Bulk Actions</option>
-            {this.props.actions.map(function(action, index) {
+            {this.props.bulk_actions.map(function(action, index) {
               return (
                 <option
                   value={action.name}

assets/js/src/listing/header.jsx

@@ -18,8 +18,10 @@ define(['react', 'classnames'], function(React, classNames) {
         );
       }.bind(this));
 
-      return (
+      var checkbox = false;
-        <tr>
+
+      if(this.props.is_selectable === true) {
+        checkbox = (
           <td className="manage-column column-cb mailpoet_check_column">
             <label className="screen-reader-text">
               { 'Select All' }
@@ -30,6 +32,12 @@ define(['react', 'classnames'], function(React, classNames) {
               checked={ this.props.selection }
               onChange={ this.handleSelectItems } />
           </td>
+        );
+      }
+
+      return (
+        <tr>
+          {checkbox}
           {columns}
         </tr>
       );

assets/js/src/listing/listing.jsx

@@ -35,8 +35,11 @@ define(
         return !e.target.checked;
       },
       render: function() {
-        return (
+
-          <tr>
+        var checkbox = false;
+
+        if(this.props.is_selectable === true) {
+          checkbox = (
             <th className="mailpoet_check_column" scope="row">
               <label className="screen-reader-text">
                 { 'Select ' + this.props.item.email }</label>
@@ -49,6 +52,12 @@ define(
                 onChange={ this.handleSelectItem }
                 disabled={ this.props.selection === 'all' } />
             </th>
+          );
+        }
+
+        return (
+          <tr>
+            { checkbox }
             { this.props.onRenderItem(this.props.item) }
           </tr>
         );
@@ -110,6 +119,7 @@ define(
                     onSelectItem={ this.props.onSelectItem }
                     onRenderItem={ this.props.onRenderItem }
                     selection={ this.props.selection }
+                    is_selectable={ this.props.is_selectable }
                     key={ 'item-' + item.id }
                     item={ item } />
                 );
@@ -244,6 +254,9 @@ define(
           return column;
         });
 
+        // bulk actions
+        var bulk_actions = this.props.bulk_actions || [];
+
         var tableClasses = classNames(
           'wp-list-table',
           'widefat',
@@ -262,7 +275,7 @@ define(
               search={ this.state.search } />
             <div className="tablenav top clearfix">
               <ListingBulkActions
-                actions={ this.props.actions } />
+                bulk_actions={ bulk_actions } />
               <ListingFilters filters={ this.state.filters } />
               <ListingPages
                 count={ this.state.count }
@@ -278,12 +291,14 @@ define(
                   selection={ this.state.selection }
                   sort_by={ this.state.sort_by }
                   sort_order={ this.state.sort_order }
-                  columns={ this.props.columns } />
+                  columns={ this.props.columns }
+                  is_selectable={ bulk_actions.length > 0 } />
               </thead>
 
               <ListingItems
                 onRenderItem={ this.handleRenderItem }
                 columns={ this.props.columns }
+                is_selectable={ bulk_actions.length > 0 }
                 onSelectItem={ this.handleSelectItem }
                 onSelectAll={ this.handleSelectAll }
                 selected_ids={ this.state.selected_ids }
@@ -300,13 +315,14 @@ define(
                   selection={ this.state.selection }
                   sort_by={ this.state.sort_by }
                   sort_order={ this.state.sort_order }
-                  columns={ this.props.columns } />
+                  columns={ this.props.columns }
+                  is_selectable={ bulk_actions.length > 0 } />
               </tfoot>
 
             </table>
             <div className="tablenav bottom">
               <ListingBulkActions
-                actions={ this.props.actions } />
+                bulk_actions={ bulk_actions } />
               <ListingPages
                 count={ this.state.count }
                 page={ this.state.page }

assets/js/src/newsletters/list.jsx

@@ -32,9 +32,6 @@ define(
       }
     ];
 
-    var actions = [
-    ];
-
     var List = React.createClass({
       getItems: function(listing) {
         MailPoet.Ajax.post({
@@ -89,8 +86,7 @@ define(
           <Listing
             onRenderItem={this.renderItem}
             items={this.getItems}
-            columns={columns}
+            columns={columns} />
-            actions={actions} />
         );
       }
     });

assets/js/src/segments/list.jsx

@@ -32,9 +32,6 @@ define(
       }
     ];
 
-    var actions = [
-    ];
-
     var List = React.createClass({
       getItems: function(listing) {
         MailPoet.Ajax.post({
@@ -89,8 +86,7 @@ define(
           <Listing
             onRenderItem={this.renderItem}
             items={this.getItems}
-            columns={columns}
+            columns={columns} />
-            actions={actions} />
         );
       }
     });

assets/js/src/subscribers/list.jsx

@@ -47,7 +47,17 @@ define(
       },
     ];
 
-    var actions = [
+    var item_actions = [
+      {
+        name: 'view',
+        label: 'View',
+        onClick: function() {
+          this.transitionTo('/');
+        }
+      }
+    ];
+
+    var bulk_actions = [
       {
         name: 'move',
         label: 'Move to list...',
@@ -148,10 +158,11 @@ define(
       render: function() {
         return (
           <Listing
-            onRenderItem={this.renderItem}
+            onRenderItem={ this.renderItem }
-            items={this.getItems}
+            items={ this.getItems }
-            columns={columns}
+            columns={ columns }
-            actions={actions} />
+            bulk_actions={ bulk_actions }
+            item_actions={ item_actions } />
         );
       }
     });