Bulk actions + Extra data

- fixed issue on bulk action being run even without any items selected
- added WP like feature regarding item selection, if all items are checked, it also checks the header/footer checkboxes
- fixed issue where the selection state was not properly reset
- added List column to subscribers
- added json_encode/json_decode to Twig

assets/js/src/listing/bulk_actions.jsx

@@ -32,9 +32,15 @@ function(
       e.preventDefault();
 
       var action = this.getSelectedAction();
+
+      if(action === null) {
+        return;
+      }
+
       var selected_ids = (this.props.selection !== 'all')
         ? this.props.selected_ids
         : [];
+
       var data = (action['getData'] !== undefined)
         ? action.getData()
         : {};
@@ -78,17 +84,17 @@ function(
 
           <select ref="action" value={ this.state.action } onChange={this.handleChangeAction}>
             <option value="">Bulk Actions</option>
-            {this.props.bulk_actions.map(function(action, index) {
+            { this.props.bulk_actions.map(function(action, index) {
               return (
                 <option
                   value={ action.name }
                   key={ 'action-' + index }
                 >{ action.label }</option>
               );
-            }.bind(this))}
+            }.bind(this)) }
           </select>
           <input
-            onClick={this.handleApplyAction}
+            onClick={ this.handleApplyAction }
             type="submit"
             defaultValue="Apply"
             className="button action" />

assets/js/src/listing/listing.jsx

@@ -237,6 +237,10 @@ define(
         }.bind(this));
       },
       handleBulkAction: function(selected_ids, params) {
+        if(this.state.selection === false) {
+          return;
+        }
+
         this.setState({ loading: true });
 
         var data = params || {};
@@ -275,21 +279,29 @@ define(
         }.bind(this));
       },
       handleSelectItem: function(id, is_checked) {
-        var selected_ids = this.state.selected_ids;
+        var selected_ids = this.state.selected_ids,
+            selection = false;
 
         if(is_checked) {
           selected_ids = jQuery.merge(selected_ids, [ id ]);
+          // check whether all items on the page are selected
+          if(
+            jQuery('tbody .check-column :checkbox:not(:checked)').length === 0
+          ) {
+            selection = 'page';
+          }
         } else {
           selected_ids.splice(selected_ids.indexOf(id), 1);
         }
 
         this.setState({
-          selection: false,
+          selection: selection,
           selected_ids: selected_ids
         });
       },
       handleSelectItems: function(is_checked) {
         if(is_checked === false) {
+          this.clearSelection();
         } else {
           var selected_ids = this.state.items.map(function(item) {
             return ~~item.id;

assets/js/src/subscribers/list.jsx

@@ -1,6 +1,7 @@
 define(
   [
     'react',
+    'react-router',
     'listing/listing.jsx',
     'classnames',
     'mailpoet',
@@ -9,11 +10,14 @@ define(
   ],
   function(
     React,
+    Router,
     Listing,
     classNames,
     MailPoet,
     jQuery
   ) {
+    var Link = Router.Link;
+
     var columns = [
       {
         name: 'email',
@@ -35,6 +39,12 @@ define(
         label: 'Status',
         sortable: true
       },
+      {
+        name: 'lists',
+        label: 'Lists',
+        sortable: false
+      },
+
       {
         name: 'created_at',
         label: 'Subscribed on',
@@ -57,7 +67,16 @@ define(
         }
       },
       componentDidMount: function() {
-        this.loadItems();
+        // this.loadItems();
+        this.loadCachedItems();
+      },
+      loadCachedItems: function() {
+        if(typeof(window['mailpoet_'+this.props.endpoint]) !== 'undefined') {
+          var items = window['mailpoet_'+this.props.endpoint];
+          this.setState({
+            items: items
+          });
+        }
       },
       loadItems: function() {
         this.setState({ loading: true });
@@ -222,11 +241,19 @@ define(
           break;
         }
 
+        var segments = mailpoet_segments.filter(function(segment) {
+          return (jQuery.inArray(segment.id, subscriber.segments) !== -1);
+        }).map(function(segment) {
+          return segment.name;
+        }).join(', ');
+
         return (
           <div>
             <td className={ row_classes }>
               <strong>
-                <a>{ subscriber.email }</a>
+                <Link to="edit" params={{ id: subscriber.id }}>
+                  { subscriber.email }
+                </Link>
               </strong>
               { actions }
             </td>
@@ -239,6 +266,9 @@ define(
             <td className="column" data-colname="Status">
               { status }
             </td>
+            <td className="column" data-colname="Status">
+              { segments }
+            </td>
             <td className="column-date" data-colname="Subscribed on">
               <abbr>{ subscriber.created_at }</abbr>
             </td>