Listing fixes

- fixed bulk actions
- fixed paging behavior
- fixed filtering issues

assets/js/src/form/fields/selection.jsx

@@ -14,11 +14,29 @@ function(
       }
     },
     componentWillMount: function() {
-      this.loadCachedItems();
+
     },
     componentDidMount: function() {
-      jQuery('#'+this.props.field.id).select2()
+      this.loadCachedItems();
-        .on('change', this.handleChange);
+    },
+    setupSelect2: function() {
+      if(this.props.field.select2 && Object.keys(this.props.item).length > 0) {
+        console.log('do it!');
+        jQuery('#'+this.props.field.id).select2({
+          width: this.props.field.width
+        }).select2(
+          'val',
+          this.props.item[this.props.field.name]
+        ).on('change', this.handleChange);
+
+        // set values
+        /*jQuery('#'+this.props.field.id).select2(
+          'val',
+          this.props.item[this.props.field.name]
+        );*/
+
+        console.log(this.props.item[this.props.field.name]);
+      }
     },
     loadCachedItems: function() {
       if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
@@ -29,35 +47,49 @@ function(
       }
     },
     handleChange: function() {
-      return this.props.onValueChange({
+      if(this.props.onValueChange !== undefined) {
-        target: {
+        this.props.onValueChange({
-          value: jQuery('#'+this.props.field.id).select2('val'),
+         target: {
-          name: this.props.field.name
+            value: jQuery('#'+this.props.field.id).select2('val'),
-        }
+            name: this.props.field.name
-      });
+          }
+        });
+      }
+      return true;
     },
     render: function() {
-      var options = this.state.items.map(function(item, index) {
+      if(this.state.items.length === 0) {
-        return (
+        return false;
-          <option
+      } else {
-            key={ item.id }
+        var options = this.state.items.map(function(item, index) {
-            value={ item.id }
+          return (
-          >
+            <option
-            { item.name }
+              key={ item.id }
-          </option>
+              value={ item.id }
-        );
+            >
-      });
+              { item.name }
+            </option>
+          );
+        });
 
-      return (
+        var default_value = (
-        <select
+          (this.props.item !== undefined && this.props.field.name !== undefined)
-          ref="selection"
+          ? this.props.item[this.props.field.name]
-          id={ this.props.field.id }
+          : null
-          placeholder={ this.props.field.placeholder }
+        );
-          multiple={ this.props.field.multiple }
+
-          onChange={ this.handleChange }
+        this.setupSelect2();
-          defaultValue={ this.props.item[this.props.field.name] }
+
-        >{ options }</select>
+        return (
-      );
+          <select
+            id={ this.props.field.id }
+            placeholder={ this.props.field.placeholder }
+            multiple={ this.props.field.multiple }
+            onChange={ this.handleChange }
+            defaultValue={ default_value }
+          >{ options }</select>
+        );
+      }
     }
   });
 

assets/js/src/form/form.jsx

@@ -37,7 +37,7 @@ define(
             loading: false,
             item: {}
           });
-          this.refs.form.getDOMNode().reset();
+          this.refs.form.reset();
         } else {
           this.loadItem(props.params.id);
         }

assets/js/src/listing/bulk_actions.jsx

@@ -55,7 +55,7 @@ function(
       });
     },
     getSelectedAction: function() {
-      var selected_action = jQuery(this.refs.action.getDOMNode()).val();
+      var selected_action = this.refs.action.value;
       if(selected_action.length > 0) {
         var action = this.props.bulk_actions.filter(function(action) {
           return (action.name === selected_action);

assets/js/src/listing/filters.jsx

@@ -7,7 +7,7 @@ function(
   var ListingFilters = React.createClass({
     handleFilterAction: function() {
       var filters = this.props.filters.map(function(filter, index) {
-        var value = this.refs['filter-'+index].getDOMNode().value;
+        var value = this.refs['filter-'+index].value;
         if(value) {
           return {
             'name': filter.name,

assets/js/src/listing/header.jsx

@@ -3,7 +3,7 @@ define(['react', 'classnames'], function(React, classNames) {
   var ListingHeader = React.createClass({
     handleSelectItems: function() {
       return this.props.onSelectItems(
-        this.refs.toggle.getDOMNode().checked
+        this.refs.toggle.checked
       );
     },
     render: function() {

assets/js/src/listing/listing.jsx

@@ -161,7 +161,15 @@ define(
                     this.props.columns.length
                     + (this.props.is_selectable ? 1 : 0)
                   }>
-                  { MailPoetI18n.selectAllLabel } 
+                  {
+                    (this.props.selection !== 'all')
+                    ? MailPoetI18n.selectAllLabel
+                    : MailPoetI18n.selectedAllLabel.replace(
+                      '%d',
+                      this.props.count
+                    )
+                  }
+                   
                   <a
                     onClick={ this.props.onSelectAll }
                     href="javascript:;">{
@@ -202,7 +210,7 @@ define(
           search: '',
           page: 1,
           count: 0,
-          limit: 10,
+          limit: 5,
           sort_by: 'id',
           sort_order: 'desc',
           items: [],
@@ -247,7 +255,10 @@ define(
         }.bind(this));
       },
       handleDeleteItem: function(id) {
-        this.setState({ loading: true });
+        this.setState({
+          loading: true,
+          page: 1
+        });
 
         MailPoet.Ajax.post({
           endpoint: this.props.endpoint,
@@ -289,6 +300,7 @@ define(
       handleSearch: function(search) {
         this.setState({
           search: search,
+          page: 1,
           selection: false,
           selected_ids: []
         }, function() {
@@ -340,6 +352,7 @@ define(
       },
       handleSelectAll: function() {
         if(this.state.selection === 'all') {
+          this.clearSelection();
         } else {
           this.setState({
             selection: 'all',
@@ -375,6 +388,7 @@ define(
         }.bind(this));
       },
       handleSetPage: function(page) {
+        console.log('listing > handleSetPage('+page+')');
         this.setState({
           page: page,
           selection: false,

assets/js/src/listing/pages.jsx

@@ -1,25 +1,39 @@
 define(['react', 'classnames'], function(React, classNames) {
 
   var ListingPages = React.createClass({
+    getInitialState: function() {
+      return {
+        page: null
+      }
+    },
+    setPage: function(page) {
+      this.props.onSetPage(page);
+    },
     setFirstPage: function() {
-      this.props.onSetPage(1);
+      this.setPage(1);
     },
     setLastPage: function() {
-      this.props.onSetPage(this.getLastPage());
+      this.setPage(this.getLastPage());
     },
     setPreviousPage: function() {
-      this.props.onSetPage(this.constrainPage(this.props.page - 1));
+      this.setPage(this.constrainPage(this.props.page - 1));
     },
     setNextPage: function() {
-      this.props.onSetPage(this.constrainPage(this.props.page + 1));
+      this.setPage(this.constrainPage(this.props.page + 1));
     },
     constrainPage: function(page) {
       return Math.min(Math.max(1, Math.abs(~~page)), this.getLastPage());
     },
-    handleSetPage: function() {
+    handleSetManualPage: function(e) {
-      this.props.onSetPage(
+      if(e.which === 13) {
-        this.constrainPage(this.refs.page.getDOMNode().value)
+        this.setPage(this.state.page);
-      );
+        this.setState({ page: null });
+      }
+    },
+    handleChangeManualPage: function(e) {
+      this.setState({
+        page: this.constrainPage(e.target.value)
+      });
     },
     getLastPage: function() {
       return Math.ceil(this.props.count / this.props.limit);
@@ -46,7 +60,7 @@ define(['react', 'classnames'], function(React, classNames) {
           if(this.props.page > 1) {
             previousPage = (
               <a href="javascript:;"
-                onClick={this.setPreviousPage}
+                onClick={ this.setPreviousPage }
                 className="prev-page">
                 <span className="screen-reader-text">Previous page</span>
                 <span aria-hidden="true">‹</span>
@@ -57,7 +71,7 @@ define(['react', 'classnames'], function(React, classNames) {
           if(this.props.page > 2) {
             firstPage = (
               <a href="javascript:;"
-                onClick={this.setFirstPage}
+                onClick={ this.setFirstPage }
                 className="first-page">
                 <span className="screen-reader-text">First page</span>
                 <span aria-hidden="true">«</span>
@@ -68,7 +82,7 @@ define(['react', 'classnames'], function(React, classNames) {
           if(this.props.page < this.getLastPage()) {
             nextPage = (
               <a href="javascript:;"
-                onClick={this.setNextPage}
+                onClick={ this.setNextPage }
                 className="next-page">
                 <span className="screen-reader-text">Next page</span>
                 <span aria-hidden="true">›</span>
@@ -79,7 +93,7 @@ define(['react', 'classnames'], function(React, classNames) {
           if(this.props.page < this.getLastPage() - 1) {
             lastPage = (
               <a href="javascript:;"
-                onClick={this.setLastPage}
+                onClick={ this.setLastPage }
                 className="last-page">
                 <span className="screen-reader-text">Last page</span>
                 <span aria-hidden="true">»</span>
@@ -98,11 +112,12 @@ define(['react', 'classnames'], function(React, classNames) {
                   htmlFor="current-page-selector">Current Page</label>
                 <input
                   type="text"
-                  onChange={this.handleSetPage}
+                  onChange={ this.handleChangeManualPage }
+                  onKeyUp={ this.handleSetManualPage }
                   aria-describedby="table-paging"
                   size="1"
                   ref="page"
-                  value={this.props.page}
+                  value={ this.state.page || this.props.page }
                   name="paged"
                   id="current-page-selector"
                   className="current-page" />
@@ -124,7 +139,7 @@ define(['react', 'classnames'], function(React, classNames) {
         );
 
         return (
-          <div className={classes}>
+          <div className={ classes }>
             <span className="displaying-num">{ this.props.count } item(s)</span>
             { pagination }
           </div>

assets/js/src/listing/search.jsx

@@ -4,7 +4,7 @@ define(['react'], function(React) {
     handleSearch: function(e) {
       e.preventDefault();
       this.props.onSearch(
-        this.refs.search.getDOMNode().value
+        this.refs.search.value
       );
     },
     render: function() {

assets/js/src/newsletters/list.jsx

@@ -3,13 +3,15 @@ define(
     'react',
     'react-router',
     'listing/listing.jsx',
-    'classnames'
+    'classnames',
+    'jquery'
   ],
   function(
     React,
     Router,
     Listing,
-    classNames
+    classNames,
+    jQuery
   ) {
     var Link = Router.Link;
 
@@ -19,6 +21,10 @@ define(
         label: 'Subject',
         sortable: true
       },
+      {
+        name: 'segments',
+        label: 'Lists'
+      },
       {
         name: 'created_at',
         label: 'Created on',
@@ -60,6 +66,12 @@ define(
           'has-row-actions'
         );
 
+        var segments = mailpoet_segments.filter(function(segment) {
+          return (jQuery.inArray(segment.id, newsletter.segments) !== -1);
+        }).map(function(segment) {
+          return segment.name;
+        }).join(', ');
+
         return (
           <div>
             <td className={ rowClasses }>
@@ -68,6 +80,9 @@ define(
               </strong>
               { actions }
             </td>
+            <td className="column" data-colname="Lists">
+              { segments }
+            </td>
             <td className="column-date" data-colname="Subscribed on">
               <abbr>{ newsletter.created_at }</abbr>
             </td>

assets/js/src/newsletters/newsletters.jsx

@@ -15,7 +15,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('newsletters');
+let container = document.getElementById('newsletters_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/newsletters/send.jsx

@@ -34,7 +34,8 @@ define(
         placeholder: "Select a list",
         id: "mailpoet_segments",
         endpoint: "segments",
-        multiple: true
+        multiple: true,
+        select2: true
       },
       {
         name: 'sender',

assets/js/src/segments/segments.jsx

@@ -13,7 +13,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('segments');
+let container = document.getElementById('segments_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/subscribers/list.jsx

@@ -42,7 +42,7 @@ define(
         sortable: true
       },
       {
-        name: 'lists',
+        name: 'segments',
         label: 'Lists',
         sortable: false
       },
@@ -64,10 +64,13 @@ define(
         name: 'moveToList',
         label: 'Move to list...',
         onSelect: function() {
+          var field = {
+            id: 'move_to_segment',
+            endpoint: 'segments'
+          };
+
           return (
-            <Selection
+            <Selection field={ field }/>
-              endpoint="segments"
-              id="move_to_segment" />
           );
         },
         getData: function() {
@@ -80,10 +83,13 @@ define(
         name: 'addToList',
         label: 'Add to list...',
         onSelect: function() {
+          var field = {
+            id: 'add_to_segment',
+            endpoint: 'segments'
+          };
+
           return (
-            <Selection
+            <Selection field={ field }/>
-              endpoint="segments"
-              id="add_to_segment" />
           );
         },
         getData: function() {
@@ -96,10 +102,13 @@ define(
         name: 'removeFromList',
         label: 'Remove from list...',
         onSelect: function() {
+          var field = {
+            id: 'remove_from_segment',
+            endpoint: 'segments'
+          };
+
           return (
-            <Selection
+            <Selection field={ field }/>
-              endpoint="segments"
-              id="remove_from_segment" />
           );
         },
         getData: function() {

assets/js/src/subscribers/subscribers.jsx

@@ -13,7 +13,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('subscribers');
+let container = document.getElementById('subscribers_container');
 
 if(container) {
   ReactDOM.render((

lib/Listing/BulkAction.php

@@ -6,14 +6,14 @@ if(!defined('ABSPATH')) exit;
 class BulkAction {
   private $listing = null;
   private $data = null;
-  private $model = null;
+  private $model_class = null;
 
-  function __construct($model, $data) {
+  function __construct($model_class, $data) {
-    $this->model = $model;
+    $this->model_class = $model_class;
     $this->data = $data;
 
     $this->listing = new Handler(
-      \Model::factory($this->model),
+      $this->model_class,
       $this->data['listing']
     );
     return $this;
@@ -21,7 +21,7 @@ class BulkAction {
 
   function apply() {
     return call_user_func_array(
-      array($this->model, $this->data['action']),
+      array($this->model_class, $this->data['action']),
       array($this->listing, $this->data)
     );
   }

lib/Listing/Handler.php

@@ -8,8 +8,12 @@ class Handler {
   private $data = array();
   private $model = null;
 
-  function __construct($model, $data = array()) {
+  function __construct($model_class, $data = array()) {
-    $this->model = $model;
+    $class = new \ReflectionClass($model_class);
+    $this->table_name = $class->getStaticPropertyValue('_table');
+
+    $this->model = \Model::factory($model_class);
+
     $this->data = array(
       // pagination
       'offset' => (isset($data['offset']) ? (int)$data['offset'] : 0),
@@ -27,7 +31,7 @@ class Handler {
       'selection' => (isset($data['selection']) ? $data['selection'] : null)
     );
 
-    $this->setFilter();
+    $this->model = $this->setFilter();
     $this->setSearch();
     $this->setGroup();
     $this->setOrder();
@@ -42,10 +46,8 @@ class Handler {
 
   private function setOrder() {
     return $this->model
-      ->tableAlias('model')
       ->{'order_by_'.$this->data['sort_order']}(
-        'model.'.$this->data['sort_by']
+        $this->table_name.'.'.$this->data['sort_by']);
-      );
   }
 
   private function setGroup() {
@@ -57,20 +59,20 @@ class Handler {
 
   private function setFilter() {
     if($this->data['filter'] === null) {
-      return;
+      return $this->model;
     }
     return $this->model->filter('filterBy', $this->data['filter']);
   }
 
   function getSelection() {
     if(!empty($this->data['selection'])) {
-      $this->model->whereIn('model.id', $this->data['selection']);
+      $this->model->whereIn('id', $this->data['selection']);
     }
     return $this->model;
   }
 
   function getSelectionIds() {
-    $models = $this->getSelection()->select('model.id')->findMany();
+    $models = $this->getSelection()->select('id')->findMany();
     return array_map(function($model) {
       return (int)$model->id;
     }, $models);

lib/Models/Newsletter.php

@@ -62,11 +62,11 @@ class Newsletter extends Model {
         $segment = Segment::findOne($filter['value']);
         if($segment !== false) {
           $orm = $orm
-          ->select('model.*')
+          ->select(MP_NEWSLETTERS_TABLE.'.*')
           ->select('newsletter_segment.id', 'newsletter_segment_id')
           ->join(
             MP_NEWSLETTER_SEGMENT_TABLE,
-            'model.id = newsletter_segment.newsletter_id',
+            MP_NEWSLETTERS_TABLE.'.id = newsletter_segment.newsletter_id',
             'newsletter_segment'
           )
           ->where('newsletter_segment.segment_id', (int)$filter['value']);

lib/Models/Subscriber.php

@@ -72,15 +72,16 @@ class Subscriber extends Model {
 
         $segment = Segment::findOne($filter['value']);
         if($segment !== false) {
-          $orm = $orm
+          /*$orm = $orm
-          ->select('model.*')
+          ->select(MP_SUBSCRIBERS_TABLE.'.*')
           ->select('subscriber_segment.id', 'subscriber_segment_id')
           ->join(
             MP_SUBSCRIBER_SEGMENT_TABLE,
-            'model.id = subscriber_segment.subscriber_id',
+            MP_SUBSCRIBERS_TABLE.'.id = subscriber_segment.subscriber_id',
             'subscriber_segment'
           )
-          ->where('subscriber_segment.segment_id', (int)$filter['value']);
+          ->where('subscriber_segment.segment_id', (int)$filter['value']);*/
+          $orm = $segment->subscribers();
         }
       }
     }

lib/Router/Newsletters.php

@@ -134,10 +134,23 @@ class Newsletters {
 
   function listing($data = array()) {
     $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Newsletter'),
+      '\MailPoet\Models\Newsletter',
       $data
     );
-    wp_send_json($listing->get());
+
+    $listing_data = $listing->get();
+
+    // fetch segments relations for each returned item
+    foreach($listing_data['items'] as &$item) {
+      $segments = NewsletterSegment::select('segment_id')
+        ->where('newsletter_id', $item['id'])
+        ->findMany();
+      $item['segments'] = array_map(function($relation) {
+        return $relation->segment_id;
+      }, $segments);
+    }
+
+    wp_send_json($listing_data);
   }
 
   function bulk_action($data = array()) {

lib/Router/Segments.php

@@ -22,7 +22,7 @@ class Segments {
 
   function listing($data = array()) {
     $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Segment'),
+      '\MailPoet\Models\Segment',
       $data
     );
     wp_send_json($listing->get());

lib/Router/Subscribers.php

@@ -24,7 +24,7 @@ class Subscribers {
 
   function listing($data = array()) {
     $listing = new Listing\Handler(
-      \Model::factory('\MailPoet\Models\Subscriber'),
+      '\MailPoet\Models\Subscriber',
       $data
     );
 

views/newsletters.html

@@ -1,7 +1,7 @@
 <% extends 'layout.html' %>
 
 <% block content %>
-  <div id="newsletters"></div>
+  <div id="newsletters_container"></div>
 
   <%= localize({
     'pageTitle': __('Newsletters'),

views/segments.html

@@ -1,7 +1,7 @@
 <% extends 'layout.html' %>
 
 <% block content %>
-  <div id="segments"></div>
+  <div id="segments_container"></div>
 
   <%= localize({
     'pageTitle': __('Segments'),

views/subscribers.html

@@ -1,7 +1,7 @@
 <% extends 'layout.html' %>
 
 <% block content %>
-  <div id="subscribers"></div>
+  <div id="subscribers_container"></div>
 
   <%= localize({
     'pageTitle': __('Subscribers'),
@@ -9,6 +9,7 @@
     'loadingItems': __('Loading subscribers...'),
     'noItemsFound': __('No subscribers found.'),
     'selectAllLabel': __('All subscribers on this page are selected.'),
+    'selectedAllLabel': __('All %d subscribers are selected.'),
     'selectAllLink': __('Select all pages.'),
     'clearSelection': __('Clear selection.')
   }) %>