Queue

- updated menu icon for our plugin
- added watchCss command to watch only CSS files
- added Status column in Newsletters listing
- added progress bar styles
- fixed issue with JS assets being loaded twice on non MP pages
- changed subscriber_ids to segment_ids in addQueue

RoboFile.php

@@ -47,6 +47,15 @@ class RoboFile extends \Robo\Tasks {
       ->run();
   }
 
+  function watchCss() {
+    $css_files = $this->rsearch('assets/css/src/', array('styl'));
+    $this->taskWatch()
+      ->monitor($css_files, function() {
+        $this->compileCss();
+      })
+      ->run();
+  }
+
   function watchJs() {
     $this->_exec('./node_modules/webpack/bin/webpack.js --watch');
   }

assets/css/src/admin.styl

@@ -14,3 +14,4 @@
 @require 'form'
 
 @require 'settings'
+@require 'progress_bar'

assets/css/src/common.styl

@@ -26,3 +26,25 @@ textarea.regular-text
 @media screen and (max-width: 782px)
   .select2-container
     width: 100% !important
+
+// progress bars
+progress-border-radius = 5px
+progress-background = #efefef
+progress-foreground = #69b1e9
+
+progress
+  background-color: progress-background;
+  height: 2em
+  border: 0
+  width: 100%
+
+progress::-webkit-progress-bar
+  background-color: progress-background;
+
+progress::-webkit-progress-value
+  background-color: progress-foreground
+  border-radius: progress-border-radius
+
+progress::-moz-progress-bar
+  background-color: progress-foreground
+  border-radius: progress-border-radius

assets/css/src/progress_bar.styl

@@ -0,0 +1,21 @@
+.mailpoet_progress
+  background-color: #efefef
+  height: 25px
+  padding: 0
+  width: 100%
+  margin: 0
+  border-radius: 5px
+
+.mailpoet_progress span
+  display: inline-block
+  height: 100%
+  border-radius: 3px
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset
+
+.blue span
+  background-color: #34c2e3
+  background-image: linear-gradient(top, #34c2e3, darken(#34c2e3, 20%))
+
+.orange span
+  background-color: #fecf23
+  background-image: linear-gradient(top, #fecf23, #fd9215)

assets/js/src/newsletters/list.jsx

@@ -21,6 +21,10 @@ define(
         label: 'Subject',
         sortable: true
       },
+      {
+        name: 'status',
+        label: 'Status'
+      },
       {
         name: 'segments',
         label: 'Lists'
@@ -119,8 +123,28 @@ define(
     ];
 
     var NewsletterList = React.createClass({
-      renderItem: function(newsletter, actions) {
+      renderStatus: function(item) {
+        if(item.queue === null) {
+          return (
+            <span>Not sent yet.</span>
+          );
+        } else {
+          // calculate percentage done
+          var percentage = Math.round(
+            (item.queue.count_processed * 100) / (item.queue.count_total)
+          );
 
+          return (
+            <div>
+              <div className="mailpoet_progress blue">
+                  <span style={ { width: percentage + "%"} }></span>
+              </div>
+              { item.queue.count_processed } / { item.queue.count_total }
+            </div>
+          );
+        }
+      },
+      renderItem: function(newsletter, actions) {
         var rowClasses = classNames(
           'manage-column',
           'column-primary',
@@ -141,6 +165,9 @@ define(
               </strong>
               { actions }
             </td>
+            <td className="column" data-colname="Lists">
+              { this.renderStatus(newsletter) }
+            </td>
             <td className="column" data-colname="Lists">
               { segments }
             </td>

assets/js/src/newsletters/send.jsx

@@ -94,16 +94,15 @@ define(
       ],
       handleSend: function() {
         MailPoet.Ajax.post({
-          endpoint: 'newsletters',
-          action: 'send',
+          endpoint: 'queue',
+          action: 'addQueue',
           data: {
-            id: this.props.params.id,
-            newsletter: jQuery('#mailpoet_newsletter').serializeObject(),
+            newsletter_id: this.props.params.id,
             segments: jQuery('#mailpoet_segments').val()
           }
         }).done(function(response) {
           if(response === true) {
-            this.history.pushState(null, '/');
+            //this.history.pushState(null, '/');
 
             MailPoet.Notice.success(
               'The newsletter has been sent!'

lib/Config/Widget.php

@@ -61,6 +61,11 @@ class Widget {
   }
 
   function setupAdminDependencies() {
+    if(
+      empty($_GET['page'])
+      or
+      isset($_GET['page']) && strpos($_GET['page'], 'mailpoet') === false
+    ) {
       wp_enqueue_script('mailpoet_vendor',
         Env::$assets_url.'/js/vendor.js',
         array(),
@@ -75,6 +80,7 @@ class Widget {
         true
       );
     }
+  }
 
   function setupActions() {
     // ajax requests

lib/Router/Newsletters.php

@@ -12,6 +12,7 @@ use MailPoet\Models\NewsletterSegment;
 use MailPoet\Models\NewsletterOptionField;
 use MailPoet\Models\NewsletterOption;
 use MailPoet\Newsletter\Renderer\Renderer;
+use MailPoet\Models\Queue as SendingQueue;
 
 if(!defined('ABSPATH')) exit;
 
@@ -219,14 +220,19 @@ class Newsletters {
 
     $listing_data = $listing->get();
 
-    // fetch segments relations for each returned item
     foreach($listing_data['items'] as &$item) {
+      // get segments
       $segments = NewsletterSegment::select('segment_id')
         ->where('newsletter_id', $item['id'])
         ->findMany();
       $item['segments'] = array_map(function($relation) {
         return $relation->segment_id;
       }, $segments);
+
+      // get queue
+      $queue = SendingQueue::where('newsletter_id', $item['id'])
+        ->findOne();
+      $item['queue'] = ($queue !== false) ? $queue->asArray() : null;
     }
 
     wp_send_json($listing_data);

lib/Router/Queue.php

@@ -3,6 +3,8 @@ namespace MailPoet\Router;
 
 use MailPoet\Queue\Daemon;
 use MailPoet\Queue\Supervisor;
+use MailPoet\Models\Queue as SendingQueue;
+use MailPoet\Models\Segment;
 use MailPoet\Util\Helpers;
 
 if(!defined('ABSPATH')) exit;
@@ -48,14 +50,27 @@ class Queue {
   }
 
   function addQueue($data) {
-    $queue = \MailPoet\Models\Queue::create();
+    $queue = SendingQueue::create();
+
     $queue->newsletter_id = $data['newsletter_id'];
+
+    $subscriber_ids = array();
+    $segments = Segment::whereIn('id', $data['segments'])->findMany();
+    foreach($segments as $segment) {
+      $subscriber_ids = array_merge($subscriber_ids, Helpers::arrayColumn(
+        $segment->subscribers()->findArray(),
+        'id'
+      ));
+    }
+
+    $subscriber_ids = array_unique($subscriber_ids);
     $queue->subscribers = json_encode(
       array(
-        'to_process' => $data['subscribers']
+        'to_process' => $subscriber_ids
       )
     );
-    $queue->count_total = $queue->count_to_process = count($data['subscribers']);
+
+    $queue->count_total = $queue->count_to_process = count($subscriber_ids);
     $queue->save();
     wp_send_json(
       !$queue->save() ?
@@ -72,7 +87,7 @@ class Queue {
 
   function addQueues($data) {
     $result = array_map(function ($queueData) {
-      $queue = \MailPoet\Models\Queue::create();
+      $queue = SendingQueue::create();
       $queue->newsletter_id = $queueData['newsletter_id'];
       $queue->subscribers = json_encode(
         array(
@@ -102,7 +117,7 @@ class Queue {
   }
 
   function deleteQueue($data) {
-    $queue = \MailPoet\Models\Queue::whereNull('deleted_at')
+    $queue = SendingQueue::whereNull('deleted_at')
       ->findOne($data['queue_id']);
     if(!$queue) {
       wp_send_json(
@@ -118,7 +133,7 @@ class Queue {
   }
 
   function deleteQueues($data) {
-    $queues = \MailPoet\Models\Queue::whereNull('deleted_at')
+    $queues = SendingQueue::whereNull('deleted_at')
       ->whereIn('id', $data['queue_ids'])
       ->findResultSet();
     if(!$queues->count()) {
@@ -137,7 +152,7 @@ class Queue {
   }
 
   function getQueueStatus($data) {
-    $queue = \MailPoet\Models\Queue::whereNull('deleted_at')
+    $queue = SendingQueue::whereNull('deleted_at')
       ->findOne($data['queue_id'])
       ->asArray();
     wp_send_json(
@@ -154,7 +169,7 @@ class Queue {
   }
 
   function getQueuesStatus($data) {
-    $queues = \MailPoet\Models\Queue::whereNull('deleted_at')
+    $queues = SendingQueue::whereNull('deleted_at')
       ->whereIn('id', $data['queue_ids'])
       ->findArray();
     wp_send_json(