Listing & form

- improved Listing in order to make it more DRY
- form builder with all field types
- added support for data array in ValidModel->set()
- updated models to comply with Listing & Form methods

assets/css/src/listing.styl

@@ -1,5 +1,5 @@
 .mailpoet_listing_loading tbody tr,
-.mailpoet_form_loading
+.mailpoet_form_loading tbody tr
   opacity: 0.2;
 
 .widefat tfoot td.mailpoet_check_column,

assets/js/src/form/form.jsx

@@ -3,17 +3,191 @@ define(
     'react',
     'mailpoet',
     'classnames',
-    'react-router'
+    'react-router',
+    'react-checkbox-group'
   ],
   function(
     React,
     MailPoet,
     classNames,
-    Router
+    Router,
+    CheckboxGroup
   ) {
 
+
+    var FormFieldSelect = React.createClass({
+      render: function() {
+        var options =
+          Object.keys(this.props.field.values).map(function(value, index) {
+            return (
+              <option
+                key={ 'option-' + index }
+                value={ value }>
+                { this.props.field.values[value] }
+              </option>
+            );
+          }.bind(this)
+        );
+
+        return (
+          <select
+            name={ this.props.field.name }
+            id={ 'field_'+this.props.field.name }
+            value={ this.props.item[this.props.field.name] }
+            onChange={ this.props.onValueChange } >
+            {options}
+          </select>
+        );
+      }
+    });
+
+    var FormFieldRadio = React.createClass({
+      render: function() {
+        var selected_value = this.props.item[this.props.field.name];
+        var count = Object.keys(this.props.field.values).length;
+
+        var options = Object.keys(this.props.field.values).map(
+          function(value, index) {
+            return (
+              <p key={ 'radio-' + index }>
+                <label>
+                  <input
+                    type="radio"
+                    checked={ selected_value === value }
+                    value={ value }
+                    onChange={ this.props.onValueChange }
+                    name={ this.props.field.name } />
+                  &nbsp;{ this.props.field.values[value] }
+                </label>
+              </p>
+            );
+          }.bind(this)
+        );
+
+        return (
+          <div>
+            { options }
+          </div>
+        );
+      }
+    });
+
+    var FormFieldCheckbox = React.createClass({
+      render: function() {
+        var selected_values = this.props.item[this.props.field.name] || '';
+        if(
+          selected_values !== undefined
+          && selected_values.constructor !== Array
+        ) {
+          selected_values = selected_values.split(';').map(function(value) {
+            return value.trim();
+          });
+        }
+        var count = Object.keys(this.props.field.values).length;
+
+        var options = Object.keys(this.props.field.values).map(
+          function(value, index) {
+            return (
+              <p key={ 'checkbox-' + index }>
+                <label>
+                  <input type="checkbox" value={ value } />
+                  &nbsp;{ this.props.field.values[value] }
+                </label>
+              </p>
+            );
+          }.bind(this)
+        );
+
+        return (
+          <CheckboxGroup
+            name={ this.props.field.name }
+            value={ selected_values }
+            ref={ this.props.field.name }
+            onChange={ this.handleValueChange }>
+            { options }
+          </CheckboxGroup>
+        );
+      },
+      handleValueChange: function() {
+        var field = this.props.field.name;
+        var group = this.refs[field];
+        var selected_values = [];
+
+        if(group !== undefined) {
+          selected_values = group.getCheckedValues();
+        }
+
+        return this.props.onValueChange({
+          target: {
+            name: field,
+            value: selected_values.join(';')
+          }
+        });
+      }
+    });
+
+    var FormFieldText = React.createClass({
+      render: function() {
+        return (
+          <input
+            type="text"
+            className="regular-text"
+            name={ this.props.field.name }
+            id={ 'field_'+this.props.field.name }
+            value={ this.props.item[this.props.field.name] }
+            onChange={ this.props.onValueChange } />
+        );
+      }
+    });
+
+    var FormFieldTextarea = React.createClass({
+      render: function() {
+        return (
+          <textarea
+            type="text"
+            className="regular-text"
+            name={ this.props.field.name }
+            id={ 'field_'+this.props.field.name }
+            value={ this.props.item[this.props.field.name] }
+            onChange={ this.props.onValueChange } />
+        );
+      }
+    });
+
     var FormField = React.createClass({
       render: function() {
+
+        var description = false;
+        if(this.props.field.description) {
+          description = (
+            <p className="description">{ this.props.field.description }</p>
+          );
+        }
+
+        var field = false;
+
+        switch(this.props.field.type) {
+          case 'text':
+            field = (<FormFieldText {...this.props} />);
+          break;
+
+          case 'textarea':
+            field = (<FormFieldTextarea {...this.props} />);
+          break;
+
+          case 'select':
+            field = (<FormFieldSelect {...this.props} />);
+          break;
+
+          case 'radio':
+            field = (<FormFieldRadio {...this.props} />);
+          break;
+
+          case 'checkbox':
+            field = (<FormFieldCheckbox {...this.props} />);
+          break;
+        }
+
         return (
           <tr>
             <th scope="row">
@@ -22,12 +196,8 @@ define(
               >{ this.props.field.label }</label>
             </th>
             <td>
-              <input
+              { field }
-                type="text"
+              { description }
-                name={ this.props.field.name }
-                id={ 'field_'+this.props.field.name }
-                value={ this.props.item[this.props.field.name] }
-                onChange={ this.props.onValueChange } />
             </td>
           </tr>
         );
@@ -66,7 +236,7 @@ define(
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
-          endpoint: 'subscribers',
+          endpoint: this.props.endpoint,
           action: 'get',
           data: { id: id }
         }).done(function(response) {
@@ -91,7 +261,7 @@ define(
         this.setState({ loading: true });
 
         MailPoet.Ajax.post({
-          endpoint: 'subscribers',
+          endpoint: this.props.endpoint,
           action: 'save',
           data: this.state.item
         }).done(function(response) {
@@ -100,19 +270,21 @@ define(
           if(response === true) {
             this.transitionTo('/');
             if(this.props.params.id !== undefined) {
-              MailPoet.Notice.success('Subscriber succesfully updated!');
+              this.props.messages['updated']();
             } else {
-              MailPoet.Notice.success('Subscriber succesfully added!');
+              this.props.messages['created']();
             }
-
           } else {
             this.setState({ errors: response });
           }
         }.bind(this));
       },
       handleValueChange: function(e) {
-        var item = this.state.item;
+        var item = this.state.item,
-        item[e.target.name] = e.target.value;
+          field = e.target.name;
+
+        item[field] = e.target.value;
+
         this.setState({
           item: item
         });
@@ -121,7 +293,9 @@ define(
       render: function() {
         var errors = this.state.errors.map(function(error, index) {
           return (
-            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
+            <p key={ 'error-'+index } className="mailpoet_error">
+              { error }
+            </p>
           );
         });
 

assets/js/src/listing/listing.jsx

@@ -159,7 +159,30 @@ define(
       },
       getItems: function() {
         this.setState({ loading: true });
-        this.props.items.bind(null, this)();
+
+        MailPoet.Ajax.post({
+          endpoint: this.props.endpoint,
+          action: 'listing',
+          data: {
+            offset: (this.state.page - 1) * this.state.limit,
+            limit: this.state.limit,
+            group: this.state.group,
+            search: this.state.search,
+            sort_by: this.state.sort_by,
+            sort_order: this.state.sort_order
+          },
+          onSuccess: function(response) {
+            if(this.isMounted()) {
+              this.setState({
+                items: response.items || [],
+                filters: response.filters || [],
+                groups: response.groups || [],
+                count: response.count || 0,
+                loading: false
+              });
+            }
+          }.bind(this)
+        });
       },
       handleSearch: function(search) {
         this.setState({

assets/js/src/newsletters/form.jsx

@@ -1,75 +1,50 @@
 define(
   [
     'react',
-    'react-router',
+    'mailpoet',
-    'jquery',
+    'form/form.jsx'
-    'mailpoet'
   ],
   function(
     React,
-    Router,
+    MailPoet,
-    jQuery,
+    Form
-    MailPoet
   ) {
 
-    var Form = React.createClass({
+    var fields = [
-      mixins: [
+      {
-        Router.Navigation
+        name: 'subject',
-      ],
+        label: 'Subject',
-      getInitialState: function() {
+        type: 'text'
-        return {
-          loading: false,
-          errors: []
-        };
       },
-      handleSubmit: function(e) {
+      {
-        e.preventDefault();
+        name: 'body',
+        label: 'Body',
+        type: 'textarea'
+      }
+    ];
 
-        this.setState({ loading: true });
+    var messages = {
-
+      updated: function() {
-        MailPoet.Ajax.post({
+        MailPoet.Notice.success('Newsletter succesfully updated!');
-          endpoint: 'newsletters',
-          action: 'save',
-          data: {
-            subject: React.findDOMNode(this.refs.subject).value,
-            body: React.findDOMNode(this.refs.body).value
-          }
-        }).done(function(response) {
-          this.setState({ loading: false });
-
-          if(response === true) {
-            this.transitionTo('/');
-          } else {
-            this.setState({ errors: response });
-          }
-        }.bind(this));
       },
+      created: function() {
+        MailPoet.Notice.success('Newsletter succesfully added!');
+      }
+    };
+
+    var NewsletterForm = React.createClass({
       render: function() {
-        var errors = this.state.errors.map(function(error, index) {
-          return (
-            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
-          );
-        });
 
         return (
-          <form onSubmit={ this.handleSubmit }>
+          <Form
-            { errors }
+            endpoint="newsletters"
-            <p>
+            fields={ fields }
-              <input type="text" placeholder="Subject" ref="subject" />
+            params={ this.props.params }
-            </p>
+            messages={ messages } />
-            <p>
-              <input type="text" placeholder="Body" ref="body" />
-            </p>
-            <input
-              className="button button-primary"
-              type="submit"
-              value="Save"
-              disabled={this.state.loading} />
-          </form>
         );
       }
     });
 
-    return Form;
+    return NewsletterForm;
   }
-);
+);

assets/js/src/newsletters/list.jsx

@@ -1,18 +1,17 @@
 define(
   [
     'react',
-    'jquery',
+    'react-router',
-    'mailpoet',
     'listing/listing.jsx',
-    'classnames'
+    'classnames',
   ],
   function(
     React,
-    jQuery,
+    Router,
-    MailPoet,
     Listing,
     classNames
   ) {
+    var Link = Router.Link;
 
     var columns = [
       {
@@ -32,32 +31,7 @@ define(
       }
     ];
 
-    var List = React.createClass({
+    var NewsletterList = React.createClass({
-      getItems: function(listing) {
-        MailPoet.Ajax.post({
-          endpoint: 'newsletters',
-          action: 'get',
-          data: {
-            offset: (listing.state.page - 1) * listing.state.limit,
-            limit: listing.state.limit,
-            group: listing.state.group,
-            search: listing.state.search,
-            sort_by: listing.state.sort_by,
-            sort_order: listing.state.sort_order
-          },
-          onSuccess: function(response) {
-            if(listing.isMounted()) {
-              listing.setState({
-                items: response.items || [],
-                filters: response.filters || [],
-                groups: response.groups || [],
-                count: response.count || 0,
-                loading: false
-              });
-            }
-          }.bind(listing)
-        });
-      },
       renderItem: function(newsletter) {
         var rowClasses = classNames(
           'manage-column',
@@ -71,6 +45,12 @@ define(
               <strong>
                 <a>{ newsletter.subject }</a>
               </strong>
+
+              <div className="row-actions">
+                <span className="edit">
+                  <Link to="edit" params={{ id: newsletter.id }}>Edit</Link>
+                </span>
+              </div>
             </td>
             <td className="column-date" data-colname="Subscribed on">
               <abbr>{ newsletter.created_at }</abbr>
@@ -84,6 +64,7 @@ define(
       render: function() {
         return (
           <Listing
+            endpoint="newsletters"
             onRenderItem={this.renderItem}
             items={this.getItems}
             columns={columns} />
@@ -91,6 +72,6 @@ define(
       }
     });
 
-    return List;
+    return NewsletterList;
   }
 );

assets/js/src/newsletters/newsletters.jsx

@@ -2,20 +2,20 @@ define(
   [
     'react',
     'react-router',
-    'newsletters/form.jsx',
+    'newsletters/list.jsx',
-    'newsletters/list.jsx'
+    'newsletters/form.jsx'
   ],
   function(
     React,
     Router,
-    Form,
+    List,
-    List
+    Form
   ) {
-
     var DefaultRoute = Router.DefaultRoute;
     var Link = Router.Link;
     var Route = Router.Route;
     var RouteHandler = Router.RouteHandler;
+    var NotFoundRoute = Router.NotFoundRoute;
 
     var App = React.createClass({
       render: function() {
@@ -24,7 +24,7 @@ define(
             <h1>
               { MailPoetI18n.pageTitle }
               &nbsp;
-              <Link className="add-new-h2" to="form">New</Link>
+              <Link className="add-new-h2" to="new">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -35,8 +35,9 @@ define(
 
     var routes = (
       <Route name="app" path="/" handler={App}>
-        <Route name="list" handler={List} />
+        <Route name="new" path="/new" handler={Form} />
-        <Route name="form" handler={Form} />
+        <Route name="edit" path="/edit/:id" handler={Form} />
+        <NotFoundRoute handler={List} />
         <DefaultRoute handler={List} />
       </Route>
     );

assets/js/src/segments/form.jsx

@@ -1,71 +1,45 @@
 define(
   [
     'react',
-    'react-router',
+    'mailpoet',
-    'jquery',
+    'form/form.jsx'
-    'mailpoet'
   ],
   function(
     React,
-    Router,
+    MailPoet,
-    jQuery,
+    Form
-    MailPoet
   ) {
 
-    var Form = React.createClass({
+    var fields = [
-      mixins: [
+      {
-        Router.Navigation
+        name: 'name',
-      ],
+        label: 'Name',
-      getInitialState: function() {
+        type: 'text'
-        return {
+      }
-          loading: false,
+    ];
-          errors: []
+
-        };
+    var messages = {
+      updated: function() {
+        MailPoet.Notice.success('Segment succesfully updated!');
       },
-      handleSubmit: function(e) {
+      created: function() {
-        e.preventDefault();
+        MailPoet.Notice.success('Segment succesfully added!');
+      }
+    };
 
-        this.setState({ loading: true });
+    var SegmentForm = React.createClass({
-
-        MailPoet.Ajax.post({
-          endpoint: 'segments',
-          action: 'save',
-          data: {
-            name: React.findDOMNode(this.refs.name).value
-          }
-        }).done(function(response) {
-          this.setState({ loading: false });
-
-          if(response === true) {
-            this.transitionTo('/');
-          } else {
-            this.setState({ errors: response });
-          }
-        }.bind(this));
-      },
       render: function() {
-        var errors = this.state.errors.map(function(error, index) {
-          return (
-            <p key={'error-'+index} className="mailpoet_error">{ error }</p>
-          );
-        });
 
         return (
-          <form onSubmit={ this.handleSubmit }>
+          <Form
-            { errors }
+            endpoint="segments"
-            <p>
+            fields={ fields }
-              <input type="text" placeholder="Name" ref="name" />
+            params={ this.props.params }
-            </p>
+            messages={ messages } />
-            <input
-              className="button button-primary"
-              type="submit"
-              value="Save"
-              disabled={this.state.loading} />
-          </form>
         );
       }
     });
 
-    return Form;
+    return SegmentForm;
   }
 );

assets/js/src/segments/list.jsx

@@ -1,18 +1,17 @@
 define(
   [
     'react',
-    'jquery',
+    'react-router',
-    'mailpoet',
     'listing/listing.jsx',
-    'classnames'
+    'classnames',
   ],
   function(
     React,
-    jQuery,
+    Router,
-    MailPoet,
     Listing,
     classNames
   ) {
+    var Link = Router.Link;
 
     var columns = [
       {
@@ -32,32 +31,7 @@ define(
       }
     ];
 
-    var List = React.createClass({
+    var SegmentList = React.createClass({
-      getItems: function(listing) {
-        MailPoet.Ajax.post({
-          endpoint: 'segments',
-          action: 'get',
-          data: {
-            offset: (listing.state.page - 1) * listing.state.limit,
-            limit: listing.state.limit,
-            group: listing.state.group,
-            search: listing.state.search,
-            sort_by: listing.state.sort_by,
-            sort_order: listing.state.sort_order
-          },
-          onSuccess: function(response) {
-            if(listing.isMounted()) {
-              listing.setState({
-                items: response.items || [],
-                filters: response.filters || [],
-                groups: response.groups || [],
-                count: response.count || 0,
-                loading: false
-              });
-            }
-          }.bind(listing)
-        });
-      },
       renderItem: function(segment) {
         var rowClasses = classNames(
           'manage-column',
@@ -71,6 +45,12 @@ define(
               <strong>
                 <a>{ segment.name }</a>
               </strong>
+
+              <div className="row-actions">
+                <span className="edit">
+                  <Link to="edit" params={{ id: segment.id }}>Edit</Link>
+                </span>
+              </div>
             </td>
             <td className="column-date" data-colname="Subscribed on">
               <abbr>{ segment.created_at }</abbr>
@@ -84,6 +64,7 @@ define(
       render: function() {
         return (
           <Listing
+            endpoint="segments"
             onRenderItem={this.renderItem}
             items={this.getItems}
             columns={columns} />
@@ -91,6 +72,6 @@ define(
       }
     });
 
-    return List;
+    return SegmentList;
   }
 );

assets/js/src/segments/segments.jsx

@@ -11,11 +11,11 @@ define(
     List,
     Form
   ) {
-
     var DefaultRoute = Router.DefaultRoute;
     var Link = Router.Link;
     var Route = Router.Route;
     var RouteHandler = Router.RouteHandler;
+    var NotFoundRoute = Router.NotFoundRoute;
 
     var App = React.createClass({
       render: function() {
@@ -24,7 +24,7 @@ define(
             <h1>
               { MailPoetI18n.pageTitle }
               &nbsp;
-              <Link className="add-new-h2" to="form">New</Link>
+              <Link className="add-new-h2" to="new">New</Link>
             </h1>
 
             <RouteHandler/>
@@ -35,8 +35,9 @@ define(
 
     var routes = (
       <Route name="app" path="/" handler={App}>
-        <Route name="list" handler={List} />
+        <Route name="new" path="/new" handler={Form} />
-        <Route name="form" handler={Form} />
+        <Route name="edit" path="/edit/:id" handler={Form} />
+        <NotFoundRoute handler={List} />
         <DefaultRoute handler={List} />
       </Route>
     );

assets/js/src/subscribers/form.jsx

@@ -1,41 +1,61 @@
 define(
   [
     'react',
-    'react-router',
-    'jquery',
     'mailpoet',
-    'classnames',
     'form/form.jsx'
   ],
   function(
     React,
-    Router,
-    jQuery,
     MailPoet,
-    classNames,
     Form
   ) {
 
     var fields = [
       {
         name: 'email',
-        label: 'E-mail'
+        label: 'E-mail',
+        type: 'text'
       },
       {
         name: 'first_name',
-        label: 'Firstname'
+        label: 'Firstname',
+        type: 'text'
       },
       {
         name: 'last_name',
-        label: 'Lastname'
+        label: 'Lastname',
+        type: 'text'
+      },
+      {
+        name: 'status',
+        label: 'Status',
+        type: 'select',
+        values: {
+          'subscribed': 'Subscribed',
+          'unconfirmed': 'Unconfirmed',
+          'unsubscribed': 'Unsubscribed'
+        }
       }
     ];
 
+    var messages = {
+      updated: function() {
+        MailPoet.Notice.success('Subscriber succesfully updated!');
+      },
+      created: function() {
+        MailPoet.Notice.success('Subscriber succesfully added!');
+      }
+    };
+
     var SubscriberForm = React.createClass({
       render: function() {
 
         return (
-          <Form fields={ fields } params={ this.props.params } />
+          <Form
+            endpoint="subscribers"
+            fields={ fields }
+            params={ this.props.params }
+            messages={ messages } />
         );
       }
     });

assets/js/src/subscribers/list.jsx

@@ -2,18 +2,15 @@ define(
   [
     'react',
     'react-router',
-    'mailpoet',
     'listing/listing.jsx',
     'classnames',
   ],
   function(
     React,
     Router,
-    MailPoet,
     Listing,
     classNames
   ) {
-
     var Link = Router.Link;
 
     var columns = [
@@ -65,31 +62,6 @@ define(
     ];
 
     var List = React.createClass({
-      getItems: function(listing) {
-        MailPoet.Ajax.post({
-          endpoint: 'subscribers',
-          action: 'listing',
-          data: {
-            offset: (listing.state.page - 1) * listing.state.limit,
-            limit: listing.state.limit,
-            group: listing.state.group,
-            search: listing.state.search,
-            sort_by: listing.state.sort_by,
-            sort_order: listing.state.sort_order
-          },
-          onSuccess: function(response) {
-            if(listing.isMounted()) {
-              listing.setState({
-                items: response.items || [],
-                filters: response.filters || [],
-                groups: response.groups || [],
-                count: response.count || 0,
-                loading: false
-              });
-            }
-          }.bind(listing)
-        });
-      },
       renderItem: function(subscriber) {
         var rowClasses = classNames(
           'manage-column',
@@ -151,6 +123,7 @@ define(
       render: function() {
         return (
           <Listing
+            endpoint="subscribers"
             onRenderItem={ this.renderItem }
             items={ this.getItems }
             columns={ columns }

assets/js/src/subscribers/subscribers.jsx

@@ -11,7 +11,6 @@ define(
     List,
     Form
   ) {
-
     var DefaultRoute = Router.DefaultRoute;
     var Link = Router.Link;
     var Route = Router.Route;

lib/Models/Newsletter.php

@@ -35,4 +35,28 @@ class Newsletter extends Model {
 
   static function group($orm, $group = null) {
   }
+
+  public static function createOrUpdate($data = array()) {
+    $newsletter = false;
+
+    if(isset($data['id']) && (int)$data['id'] > 0) {
+      $newsletter = self::findOne((int)$data['id']);
+    }
+
+    if($newsletter === false) {
+      $newsletter = self::create();
+      $newsletter->hydrate($data);
+    } else {
+      unset($data['id']);
+      $newsletter->set($data);
+    }
+
+    $saved = $newsletter->save();
+
+    if($saved === false) {
+      return $newsletter->getValidationErrors();
+    } else {
+      return true;
+    }
+  }
 }

lib/Models/Segment.php

@@ -15,20 +15,6 @@ class Segment extends Model {
     ));
   }
 
-  public static function createOrUpdate($model) {
-    $exists = self::where('name', $model['name'])
-      ->find_one();
-
-    if($exists === false) {
-      $new_model = self::create();
-      $new_model->name = $model['name'];
-      return $new_model->save();
-    }
-
-    $exists->name = $model['name_updated'];
-    return $exists->save();
-  }
-
   public function subscribers() {
     return $this->has_many_through(
       __NAMESPACE__.'\Subscriber',
@@ -54,4 +40,28 @@ class Segment extends Model {
 
   static function group($orm, $group = null) {
   }
+
+  public static function createOrUpdate($data = array()) {
+    $segment = false;
+
+    if(isset($data['id']) && (int)$data['id'] > 0) {
+      $segment = self::findOne((int)$data['id']);
+    }
+
+    if($segment === false) {
+      $segment = self::create();
+      $segment->hydrate($data);
+    } else {
+      unset($data['id']);
+      $segment->set($data);
+    }
+
+    $saved = $segment->save();
+
+    if($saved === false) {
+      return $segment->getValidationErrors();
+    } else {
+      return true;
+    }
+  }
 }

lib/Models/Subscriber.php

@@ -80,10 +80,18 @@ class Subscriber extends Model {
 
     if($subscriber === false) {
       $subscriber = self::create();
+      $subscriber->hydrate($data);
+    } else {
+      unset($data['id']);
+      $subscriber->set($data);
     }
 
-    $subscriber->hydrate($data);
+    $saved = $subscriber->save();
-    return $subscriber->save();
 
+    if($saved === false) {
+      return $subscriber->getValidationErrors();
+    } else {
+      return true;
+    }
   }
 }

lib/Router/Newsletters.php

@@ -12,6 +12,17 @@ class Newsletters {
   }
 
   function get($data = array()) {
+    $id = (isset($data['id']) ? (int)$data['id'] : 0);
+
+    $newsletter = Newsletter::findOne($id);
+    if($newsletter === false) {
+      wp_send_json(false);
+    } else {
+      wp_send_json($newsletter->asArray());
+    }
+  }
+
+  function listing($data = array()) {
     $listing = new Listing\Handler(
       \Model::factory('\MailPoet\Models\Newsletter'),
       $data
@@ -24,11 +35,14 @@ class Newsletters {
     wp_send_json($collection);
   }
 
-  function save($args) {
+  function save($data = array()) {
-    $model = Newsletter::create();
+    $result = Newsletter::createOrUpdate($data);
-    $model->hydrate($args);
+
-    $result = $model->save();
+    if($result !== true) {
-    wp_send_json($result);
+      wp_send_json($result);
+    } else {
+      wp_send_json(true);
+    }
   }
 
   function update($args) {

lib/Router/Segments.php

@@ -10,6 +10,17 @@ class Segments {
   }
 
   function get($data = array()) {
+    $id = (isset($data['id']) ? (int)$data['id'] : 0);
+
+    $segment = Segment::findOne($id);
+    if($segment === false) {
+      wp_send_json(false);
+    } else {
+      wp_send_json($segment->asArray());
+    }
+  }
+
+  function listing($data = array()) {
     $listing = new Listing\Handler(
       \Model::factory('\MailPoet\Models\Segment'),
       $data
@@ -22,11 +33,14 @@ class Segments {
     wp_send_json($collection);
   }
 
-  function save($args) {
+  function save($data = array()) {
-    $model = Segment::create();
+    $result = Segment::createOrUpdate($data);
-    $model->hydrate($args);
+
-    $result = $model->save();
+    if($result !== true) {
-    wp_send_json($result);
+      wp_send_json($result);
+    } else {
+      wp_send_json(true);
+    }
   }
 
   function update($args) {

lib/Util/Sudzy/ValidModel.php

@@ -10,7 +10,7 @@ abstract class ValidModel extends \Model
         'indexedErrors' => false,   // If True getValidationErrors will return an array with the index
                                     // being the field name and the value the error. If multiple errors
                                     // are triggered for a field only the first will be kept.
-        'throw' => self::ON_SAVE // One of self::ON_SET|ON_SAVE|NEVER. 
+        'throw' => self::ON_SAVE // One of self::ON_SET|ON_SAVE|NEVER.
                                   //  + ON_SET throws immediately when field is set()
                                   //  + ON_SAVE throws on save()
                                   //  + NEVER means an exception is never thrown; check for ->getValidaionErrors()
@@ -130,11 +130,17 @@ abstract class ValidModel extends \Model
 
     /**
     * Overload set; to call validateAndSet
-    * // TODO: handle multiple sets if $name is a field=>val array
     */
-    public function set($name, $value = null)
+    public function set($key, $value = null)
     {
-        $this->validateAndSet($name, $value);
+        if(is_array($key)) {
+            // multiple values
+            foreach($key as $field => $value) {
+                $this->validateAndSet($field, $value);
+            }
+        } else {
+            $this->validateAndSet($key, $value);
+        }
     }
 
 

package.json

@@ -23,10 +23,11 @@
     "napa": "^1.2.0",
     "papaparse": "4.1.1",
     "react": "^0.13.3",
+    "react-checkbox-group": "^0.2.0",
     "react-infinity": "^1.2.2",
     "react-prefixr": "^0.1.0",
-    "react-waypoint": "^1.0.2",
     "react-router": "^0.13.3",
+    "react-waypoint": "^1.0.2",
     "select2": "3.5.1",
     "spectrum-colorpicker": "^1.6.2",
     "tinymce": "4.1.10",