WP Users list

- refactored and fixed listing issues (related to Segments)
- removed bulk actions from segments
- added synchronize methods for WP users
- Update action in segments only for WP Users list
- added "type" column to segments (default, wp_users, dynamic...)
- added "status" column to subscriber_segment table (useful soon)

assets/js/src/forms/list.jsx

@@ -105,6 +105,9 @@ const item_actions = [
         refresh();
       });
     }
+  },
+  {
+    name: 'trash'
   }
 ];
 

assets/js/src/listing/listing.jsx

@@ -79,33 +79,48 @@ define(
 
         if(custom_actions.length > 0) {
           item_actions = custom_actions.map(function(action, index) {
-            if(action.onFilter !== undefined) {
-              if(action.onFilter(this.props.item) === false) {
+            if(action.display !== undefined) {
+              if(action.display(this.props.item) === false) {
                 return;
               }
             }
 
-            if(action.refresh) {
+            if(action.name === 'trash') {
+              return (
+                <span key={ 'action-'+index } className="trash">
+                  {(index > 0) ? ' | ' : ''}
+                  <a
+                    href="javascript:;"
+                    onClick={ this.handleTrashItem.bind(
+                      null,
+                      this.props.item.id
+                    ) }>
+                    Trash
+                  </a>
+                </span>
+              );
+            } else if(action.refresh) {
               return (
                 <span
                   onClick={ this.props.onRefreshItems }
                   key={ 'action-'+index } className={ action.name }>
+                  {(index > 0) ? ' | ' : ''}
                   { action.link(this.props.item) }
-                  {(index < (custom_actions.length - 1)) ? ' | ' : ''}
                 </span>
               );
             } else if(action.link) {
               return (
                 <span
                   key={ 'action-'+index } className={ action.name }>
+                  {(index > 0) ? ' | ' : ''}
                   { action.link(this.props.item) }
-                  {(index < (custom_actions.length - 1)) ? ' | ' : ''}
                 </span>
               );
             } else {
               return (
                 <span
                   key={ 'action-'+index } className={ action.name }>
+                  {(index > 0) ? ' | ' : ''}
                   <a href="javascript:;" onClick={
                     (action.onClick !== undefined)
                     ? action.onClick.bind(null,
@@ -114,7 +129,6 @@ define(
                       )
                     : false
                   }>{ action.label }</a>
-                  {(index < (custom_actions.length - 1)) ? ' | ' : ''}
                 </span>
               );
             }
@@ -127,12 +141,6 @@ define(
           );
         }
 
-        var is_readonly = (
-          (this.props.onFilterItem !== undefined)
-          ? this.props.onFilterItem(this.props.item)
-          : false
-        );
-
         if(this.props.group === 'trash') {
            var actions = (
             <div>
@@ -170,19 +178,6 @@ define(
             <div>
               <div className="row-actions">
                 { item_actions }
-                { (is_readonly) ? '' : (
-                  <span className="trash">
-                    { ' | ' }
-                    <a
-                      href="javascript:;"
-                      onClick={ this.handleTrashItem.bind(
-                        null,
-                        this.props.item.id
-                      ) }>
-                      Trash
-                    </a>
-                  </span>
-                )}
               </div>
               <button
                 onClick={ this.handleToggleItem.bind(null, this.props.item.id) }
@@ -272,7 +267,6 @@ define(
                     columns={ this.props.columns }
                     onSelectItem={ this.props.onSelectItem }
                     onRenderItem={ this.props.onRenderItem }
-                    onFilterItem={ this.props.onFilterItem }
                     onDeleteItem={ this.props.onDeleteItem }
                     onRestoreItem={ this.props.onRestoreItem }
                     onTrashItem={ this.props.onTrashItem }
@@ -652,7 +646,7 @@ define(
         // bulk actions
         var bulk_actions = this.props.bulk_actions || [];
 
-        if(this.state.group === 'trash') {
+        if(this.state.group === 'trash' && bulk_actions.length > 0) {
           bulk_actions = [
             {
               name: 'restore',
@@ -736,7 +730,6 @@ define(
 
               <ListingItems
                 onRenderItem={ this.handleRenderItem }
-                onFilterItem={ this.props.onFilterItem }
                 onDeleteItem={ this.handleDeleteItem }
                 onRestoreItem={ this.handleRestoreItem }
                 onTrashItem={ this.handleTrashItem }

assets/js/src/newsletters/list.jsx

@@ -112,6 +112,9 @@ define(
             </a>
           );
         }
+      },
+      {
+        name: 'trash'
       }
     ];
 

assets/js/src/segments/list.jsx

@@ -122,19 +122,29 @@ const item_actions = [
         refresh();
       });
     },
-    onFilter: function(segment) {
-      return (segment.filters.length === 0);
+    display: function(segment) {
+      return (segment.type !== 'wp_users');
     }
   },
   {
-    name: 'sync_segment',
+    name: 'synchronize_segment',
     label: 'Update',
     className: 'update',
     onClick: function(item, refresh) {
-      console.log(item);
+      return MailPoet.Ajax.post({
+        endpoint: 'segments',
+        action: 'synchronize'
+      }).done(function(response) {
+        if(response === true) {
+          MailPoet.Notice.success(
+            ('List "%$1s" has been synchronized.').replace('%$1s', item.name)
+          );
+          refresh();
+        }
+      });
     },
-    onFilter: function(segment) {
-      return (segment.filters.length > 0);
+    display: function(segment) {
+      return (segment.type === 'wp_users');
     }
   },
   {
@@ -144,21 +154,19 @@ const item_actions = [
         <a href={ item.subscribers_url }>View subscribers</a>
       );
     }
+  },
+  {
+    name: 'trash',
+    display: function(segment) {
+      return (segment.type !== 'wp_users');
+    }
   }
 ];
 
 const bulk_actions = [
-  {
-    name: 'trash',
-    label: 'Trash',
-    onSuccess: messages.onTrash
-  }
 ];
 
 const SegmentList = React.createClass({
-  filterItem: function(segment) {
-    return !!(segment.filters.length > 0);
-  },
   renderItem: function(segment, actions) {
     var rowClasses = classNames(
       'manage-column',
@@ -206,7 +214,6 @@ const SegmentList = React.createClass({
           limit={ 1000 }
           endpoint="segments"
           onRenderItem={ this.renderItem }
-          onFilterItem={ this.filterItem }
           columns={ columns }
           bulk_actions={ bulk_actions }
           item_actions={ item_actions }

assets/js/src/subscribers/list.jsx

@@ -206,6 +206,21 @@ const bulk_actions = [
   }
 ];
 
+const item_actions = [
+  {
+    name: 'edit',
+    label: 'Edit',
+    link: function(item) {
+      return (
+        <Link to={ `/edit/${item.id}` }>Edit</Link>
+      );
+    }
+  },
+  {
+    name: 'trash'
+  }
+];
+
 const SubscriberList = React.createClass({
   renderItem: function(subscriber, actions) {
     let row_classes = classNames(
@@ -295,6 +310,7 @@ const SubscriberList = React.createClass({
           onRenderItem={ this.renderItem }
           columns={ columns }
           bulk_actions={ bulk_actions }
+          item_actions={ item_actions }
           messages={ messages }
           onGetItems={ this.onGetItems }
         />