fixed total count and filtering + basic tab implementation in React

assets/js/src/listing/listing.jsx

@@ -540,6 +540,7 @@ define(
 
         var data = params || {};
         data.listing = {
+          tab: (this.props.tab) ? this.props.tab : '',
           offset: 0,
           limit: 0,
           filter: this.state.filter,

assets/js/src/newsletters/list.jsx

@@ -250,13 +250,6 @@ define(
           return segment.name
         }).join(', ');
 
-        var statistics_column =
-          (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) ?
-            false :
-            <td className="column {statistics_class}" data-colname={ MailPoet.I18n.t('statistics') }>
-              { this.renderStatistics(newsletter) }
-            </td>;
-
         return (
           <div>
             <td className={ rowClasses }>
@@ -271,7 +264,9 @@ define(
             <td className="column" data-colname={ MailPoet.I18n.t('lists') }>
               { segments }
             </td>
-            { statistics_column }
+            <td className="column" data-colname={ MailPoet.I18n.t('statistics') }>
+              { this.renderStatistics(newsletter) }
+            </td>
             <td className="column-date" data-colname={ MailPoet.I18n.t('createdOn') }>
               <abbr>{ MailPoet.Date.format(newsletter.created_at) }</abbr>
             </td>
@@ -282,15 +277,24 @@ define(
         );
       },
       render: function() {
-        if (!mailpoet_settings.tracking || !mailpoet_settings.tracking.enabled) {
-          columns = _.without(columns, _.findWhere(columns, {name: 'statistics'}));
-        }
         return (
           <div>
             <h1 className="title">
               {MailPoet.I18n.t('pageTitle')} <Link className="page-title-action" to="/new">{MailPoet.I18n.t('new')}</Link>
             </h1>
 
+            <h2 className="nav-tab-wrapper">
+              <Link to="/standard" className="nav-tab nav-tab-active">
+                { MailPoet.I18n.t('tabStandardTitle') }
+              </Link>
+              <Link to="/welcome" className="nav-tab">
+                { MailPoet.I18n.t('tabWelcomeTitle') }
+              </Link>
+              <Link to="/notification" className="nav-tab">
+                { MailPoet.I18n.t('tabNotificationTitle') }
+              </Link>
+            </h2>
+
             <Listing
               limit={ mailpoet_listing_per_page }
               params={ this.props.params }

assets/js/src/newsletters/newsletters.jsx

@@ -25,13 +25,21 @@ if(container) {
     <Router history={ history }>
       <Route path="/" component={ App }>
         <IndexRoute component={ NewsletterList } />
+        {/* New newsletters */}
         <Route path="new" component={ NewsletterTypes } />
-        <Route name="standard" path="new/standard" component={ NewsletterStandard } />
+        <Route name="new/standard" path="new/standard" component={ NewsletterStandard } />
-        <Route name="welcome" path="new/welcome" component={ NewsletterWelcome } />
+        <Route name="new/welcome" path="new/welcome" component={ NewsletterWelcome } />
-        <Route name="notification" path="new/notification" component={ NewsletterNotification } />
+        <Route name="new/notification" path="new/notification" component={ NewsletterNotification } />
+        {/* Form: template selection */}
         <Route name="template" path="template/:id" component={ NewsletterTemplates } />
-        <Route path="send/:id" component={ NewsletterSend } />
+        {/* Listing: tabs */}
+        <Route name="listing/standard" path="standard" component={ NewsletterList } />
+        <Route name="listing/welcome" path="welcome" component={ NewsletterList } />
+        <Route name="listing/notification" path="notification" component={ NewsletterList } />
+        {/* Listing: filtering */}
         <Route path="filter[:filter]" component={ NewsletterList } />
+        {/* Form: sending options */}
+        <Route path="send/:id" component={ NewsletterSend } />
         <Route path="*" component={ NewsletterList } />
       </Route>
     </Router>

lib/Listing/Handler.php

@@ -66,10 +66,21 @@ class Handler {
   }
 
   function getSelection() {
-    if(!empty($this->data['selection'])) {
+    if(method_exists($this->model_class, 'listingQuery')) {
-      $this->model->whereIn($this->table_name.'.id', $this->data['selection']);
+      $custom_query = call_user_func_array(
+        array($this->model_class, 'listingQuery'),
+        array($this->data)
+      );
+      if(!empty($this->data['selection'])) {
+        $custom_query->whereIn($this->table_name.'.id', $this->data['selection']);
+      }
+      return $custom_query;
+    } else {
+      if(!empty($this->data['selection'])) {
+        $this->model->whereIn($this->table_name.'.id', $this->data['selection']);
+      }
+      return $this->model;
     }
-    return $this->model;
   }
 
   function getSelectionIds() {
@@ -101,6 +112,8 @@ class Handler {
         array($this->data)
       );
 
+      $count = $custom_query->count();
+
       $items = $custom_query
         ->offset($this->data['offset'])
         ->limit($this->data['limit'])
@@ -108,19 +121,19 @@ class Handler {
           $this->table_name.'.'.$this->data['sort_by']
         )
         ->findMany();
-      $count = $custom_query->count();
+
     } else {
       $this->setFilter();
       $this->setGroup();
       $this->setSearch();
       $this->setOrder();
 
+      $count = $this->model->count();
+
       $items = $this->model
         ->offset($this->data['offset'])
         ->limit($this->data['limit'])
         ->findMany();
-
-      $count = $this->model->count();
     }
 
 

lib/Models/Newsletter.php

@@ -162,13 +162,13 @@ class Newsletter extends Model {
     return $filters;
   }
 
-  static function filterBy($orm, $filters = null) {
+  static function filterBy($orm, $data = array()) {
-    if(!empty($filters)) {
+    if(!empty($data['filter'])) {
-      foreach($filters as $key => $value) {
+      foreach($data['filter'] as $key => $value) {
         if($key === 'segment') {
           $segment = Segment::findOne($value);
           if($segment !== false) {
-            $orm = $segment->newsletters();
+            $orm = $segment->newsletters()->where('type', $data['tab']);
           }
         }
       }
@@ -215,7 +215,7 @@ class Newsletter extends Model {
 
   static function listingQuery($data = array()) {
     return self::where('type', $data['tab'])
-      ->filter('filterBy', $data['filter'])
+      ->filter('filterBy', $data)
       ->filter('groupBy', $data['group'])
       ->filter('search', $data['search']);
   }

views/newsletters.html

@@ -20,6 +20,11 @@
 <% block translations %>
   <%= localize({
     'pageTitle': __('Newsletters'),
+
+    'tabStandardTitle': __('Newsletters'),
+    'tabWelcomeTitle': __('Welcome emails'),
+    'tabNotificationTitle': __('Post notifications'),
+
     'searchLabel': __('Search'),
     'loadingItems': __('Loading newsletters...'),
     'noItemsFound': __('No newsletters found.'),