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

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!'