Merge pull request #208 from mailpoet/listing_tests

Listings

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

@@ -20,7 +20,17 @@ function(
       this.loadCachedItems();
       this.setupSelect2();
     },
-    componentDidUpdate: function() {
+    componentDidUpdate: function(prevProps, prevState) {
+      if(
+        (this.props.item !== undefined && prevProps.item !== undefined)
+        && (this.props.item.id !== prevProps.item.id)
+      ) {
+        jQuery('#'+this.refs.select.id).select2(
+          'val',
+          this.props.item[this.props.field.name]
+        );
+      }
+
       this.setupSelect2();
     },
     setupSelect2: function() {
@@ -54,6 +64,11 @@ function(
     loadCachedItems: function() {
       if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
         var items = window['mailpoet_'+this.props.field.endpoint];
+
+        if(this.props.field['filter'] !== undefined) {
+          items = items.filter(this.props.field.filter);
+        }
+
         this.setState({
           items: items
         });
@@ -76,37 +91,33 @@ function(
       return true;
     },
     render: function() {
-      if(this.state.items.length === 0) {
-        return false;
-      } else {
-        var options = this.state.items.map(function(item, index) {
-          return (
-            <option
-              key={ item.id }
-              value={ item.id }
-            >
-              { item.name }
-            </option>
-          );
-        });
-
-        var default_value = (
-          (this.props.item !== undefined && this.props.field.name !== undefined)
-          ? this.props.item[this.props.field.name]
-          : null
-        );
-
+      var options = this.state.items.map(function(item, index) {
         return (
-          <select
-            id={ this.props.field.id || this.props.field.name }
-            ref="select"
-            placeholder={ this.props.field.placeholder }
-            multiple={ this.props.field.multiple }
-            onChange={ this.handleChange }
-            defaultValue={ default_value }
-          >{ options }</select>
+          <option
+            key={ item.id }
+            value={ item.id }
+          >
+            { item.name }
+          </option>
         );
-      }
+      });
+
+      var default_value = (
+        (this.props.item !== undefined && this.props.field.name !== undefined)
+        ? this.props.item[this.props.field.name]
+        : null
+      );
+
+      return (
+        <select
+          id={ this.props.field.id || this.props.field.name }
+          ref="select"
+          placeholder={ this.props.field.placeholder }
+          multiple={ this.props.field.multiple }
+          onChange={ this.handleChange }
+          defaultValue={ default_value }
+        >{ options }</select>
+      );
     }
   });
 

assets/js/src/form/form.jsx

@@ -88,7 +88,7 @@ define(
         }).done(function(response) {
           this.setState({ loading: false });
 
-          if(response === true) {
+          if(response.result === true) {
             if(this.props.onSuccess !== undefined) {
               this.props.onSuccess()
             } else {
@@ -101,10 +101,10 @@ define(
               this.props.messages['created']();
             }
           } else {
-            if(response === false) {
-              // unknown error occurred
-            } else {
-              this.setState({ errors: response });
+            if(response.result === false) {
+              if(response.errors.length > 0) {
+                this.setState({ errors: response.errors });
+              }
             }
           }
         }.bind(this));
@@ -121,13 +121,15 @@ define(
         return true;
       },
       render: function() {
-        var errors = this.state.errors.map(function(error, index) {
-          return (
-            <p key={ 'error-'+index } className="mailpoet_error">
-              { error }
-            </p>
-          );
-        });
+        if(this.state.errors !== undefined) {
+          var errors = this.state.errors.map(function(error, index) {
+            return (
+              <p key={ 'error-'+index } className="mailpoet_error">
+                { error }
+              </p>
+            );
+          });
+        }
 
         var formClasses = classNames(
           'mailpoet_form',

assets/js/src/listing/bulk_actions.jsx

@@ -15,16 +15,16 @@ function(
       this.setState({
         action: e.target.value,
         extra: false
-      });
+      }, function() {
+        var action = this.getSelectedAction();
 
-      var action = this.getSelectedAction();
-
-      // action on select callback
-      if(action !== null && action['onSelect'] !== undefined) {
-        this.setState({
-          extra: action.onSelect(e)
-        });
-      }
+        // action on select callback
+        if(action !== null && action['onSelect'] !== undefined) {
+          this.setState({
+            extra: action.onSelect(e)
+          });
+        }
+      }.bind(this));
     },
     handleApplyAction: function(e) {
       e.preventDefault();

assets/js/src/newsletters/send.jsx

@@ -34,7 +34,10 @@ define(
         placeholder: "Select a list",
         id: "mailpoet_segments",
         endpoint: "segments",
-        multiple: true
+        multiple: true,
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        }
       },
       {
         name: 'sender',

assets/js/src/subscribers/form.jsx

@@ -37,6 +37,17 @@ define(
           'subscribed': 'Subscribed',
           'unsubscribed': 'Unsubscribed'
         }
+      },
+      {
+        name: 'segments',
+        label: 'Lists',
+        type: 'selection',
+        placeholder: "Select a list",
+        endpoint: "segments",
+        multiple: true,
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        }
       }
     ];
 

assets/js/src/subscribers/list.jsx

@@ -101,7 +101,10 @@ const bulk_actions = [
     onSelect: function() {
       let field = {
         id: 'move_to_segment',
-        endpoint: 'segments'
+        endpoint: 'segments',
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        }
       };
 
       return (
@@ -127,7 +130,10 @@ const bulk_actions = [
     onSelect: function() {
       let field = {
         id: 'add_to_segment',
-        endpoint: 'segments'
+        endpoint: 'segments',
+        filter: function(segment) {
+          return !!(!segment.deleted_at);
+        }
       };
 
       return (