Subscriber Edit page

assets/css/src/listing.styl

@@ -1,4 +1,5 @@
-.mailpoet_listing_loading tbody tr
+.mailpoet_listing_loading tbody tr,
+.mailpoet_form_loading
   opacity: 0.2;
 
 .widefat tfoot td.mailpoet_check_column,
@@ -20,3 +21,4 @@
 
 .mailpoet_select_all td
   text-align: center
+

assets/js/src/listing/listing.jsx

@@ -76,8 +76,8 @@ define(
                   className="colspanchange">
                   {
                     (this.props.loading === true)
-                    ? MailPoetI18n.loading
+                    ? MailPoetI18n.loadingItems
-                    : MailPoetI18n.noRecordFound
+                    : MailPoetI18n.noItemsFound
                   }
                 </td>
               </tr>

assets/js/src/subscribers/form.jsx

@@ -3,13 +3,15 @@ define(
     'react',
     'react-router',
     'jquery',
-    'mailpoet'
+    'mailpoet',
+    'classnames',
   ],
   function(
     React,
     Router,
     jQuery,
-    MailPoet
+    MailPoet,
+    classNames
   ) {
 
     var Form = React.createClass({
@@ -19,9 +21,50 @@ define(
       getInitialState: function() {
         return {
           loading: false,
-          errors: []
+          errors: [],
+          item: {}
         };
       },
+      componentDidMount: function() {
+        if(this.props.params.id !== undefined) {
+          if(this.isMounted()) {
+            this.loadItem(this.props.params.id);
+          }
+        }
+      },
+      componentWillReceiveProps: function(props) {
+        if(props.params.id === undefined) {
+          this.setState({
+            loading: false,
+            item: {}
+          });
+        } else {
+          this.loadItem(props.params.id);
+        }
+      },
+      loadItem: function(id) {
+        this.setState({ loading: true });
+
+        MailPoet.Ajax.post({
+          endpoint: 'subscribers',
+          action: 'get',
+          data: { id: id }
+        }).done(function(response) {
+          if(response === false) {
+            this.setState({
+              loading: false,
+              item: {}
+            }, function() {
+              this.transitionTo('/new');
+            }.bind(this));
+          } else {
+            this.setState({
+              loading: false,
+              item: response
+            });
+          }
+        }.bind(this));
+      },
       handleSubmit: function(e) {
         e.preventDefault();
 
@@ -30,21 +73,31 @@ define(
         MailPoet.Ajax.post({
           endpoint: 'subscribers',
           action: 'save',
-          data: {
+          data: this.state.item
-            email: React.findDOMNode(this.refs.email).value,
-            first_name: React.findDOMNode(this.refs.first_name).value,
-            last_name: React.findDOMNode(this.refs.last_name).value
-          }
         }).done(function(response) {
           this.setState({ loading: false });
 
           if(response === true) {
             this.transitionTo('/');
+            if(this.props.params.id !== undefined) {
+              MailPoet.Notice.success('Subscriber succesfully updated!');
+            } else {
+              MailPoet.Notice.success('Subscriber succesfully added!');
+            }
+
           } else {
             this.setState({ errors: response });
           }
         }.bind(this));
       },
+      handleItemChange: function(e) {
+        var item = this.state.item;
+        item[e.target.name] = e.target.value;
+        this.setState({
+          item: item
+        });
+        return true;
+      },
       render: function() {
         var errors = this.state.errors.map(function(error, index) {
           return (
@@ -52,17 +105,38 @@ define(
           );
         });
 
+        var formClasses = classNames(
+          { 'mailpoet_form_loading': this.state.loading }
+        );
+
         return (
-          <form onSubmit={ this.handleSubmit }>
+          <form
+            className={ formClasses }
+            onSubmit={ this.handleSubmit }>
             { errors }
             <p>
-              <input type="text" placeholder="Email" ref="email" />
+              <input
+                type="text"
+                placeholder="Email"
+                name="email"
+                value={ this.state.item.email }
+                onChange={ this.handleItemChange }/>
             </p>
             <p>
-              <input type="text" placeholder="First name" ref="first_name" />
+              <input
+                type="text"
+                placeholder="First name"
+                name="first_name"
+                value={ this.state.item.first_name }
+                onChange={ this.handleItemChange }/>
             </p>
             <p>
-              <input type="text" placeholder="Last name" ref="last_name" />
+              <input
+                type="text"
+                placeholder="Last name"
+                name="last_name"
+                value={ this.state.item.last_name }
+                onChange={ this.handleItemChange }/>
             </p>
             <input
               className="button button-primary"

assets/js/src/subscribers/list.jsx

@@ -1,19 +1,21 @@
 define(
   [
     'react',
-    'jquery',
+    'react-router',
     'mailpoet',
     'listing/listing.jsx',
-    'classnames'
+    'classnames',
   ],
   function(
     React,
-    jQuery,
+    Router,
     MailPoet,
     Listing,
     classNames
   ) {
 
+    var Link = Router.Link;
+
     var columns = [
       {
         name: 'email',
@@ -47,26 +49,10 @@ define(
       },
     ];
 
-    var item_actions = [
-      {
-        name: 'view',
-        label: 'View',
-        onClick: function() {
-          this.transitionTo('/');
-        }
-      }
-    ];
-
     var bulk_actions = [
       {
         name: 'move',
-        label: 'Move to list...',
+        label: 'Move to list...'
-        onSelect: function(e) {
-          console.log(e);
-        },
-        onApply: function(selected) {
-          console.log(selected);
-        }
       },
       {
         name: 'add',
@@ -82,7 +68,7 @@ define(
       getItems: function(listing) {
         MailPoet.Ajax.post({
           endpoint: 'subscribers',
-          action: 'get',
+          action: 'listing',
           data: {
             offset: (listing.state.page - 1) * listing.state.limit,
             limit: listing.state.limit,
@@ -133,6 +119,13 @@ define(
               <strong>
                 <a>{ subscriber.email }</a>
               </strong>
+
+              <div className="row-actions">
+                <span className="edit">
+                  <Link to="edit" params={{ id: subscriber.id }}>Edit</Link>
+                </span>
+              </div>
+
               <button className="toggle-row" type="button">
                 <span className="screen-reader-text">Show more details</span>
               </button>
@@ -161,8 +154,7 @@ define(
             onRenderItem={ this.renderItem }
             items={ this.getItems }
             columns={ columns }
-            bulk_actions={ bulk_actions }
+            bulk_actions={ bulk_actions } />
-            item_actions={ item_actions } />
         );
       }
     });

assets/js/src/subscribers/subscribers.jsx

@@ -16,6 +16,7 @@ define(
     var Link = Router.Link;
     var Route = Router.Route;
     var RouteHandler = Router.RouteHandler;
+    var NotFoundRoute = Router.NotFoundRoute;
 
     var App = React.createClass({
       render: function() {
@@ -24,7 +25,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 +36,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>
     );

lib/Router/Subscribers.php

@@ -10,6 +10,17 @@ class Subscribers {
   }
 
   function get($data = array()) {
+    $id = (isset($data['id']) ? (int)$data['id'] : 0);
+
+    $subscriber = Subscriber::findOne($id);
+    if($subscriber === false) {
+      wp_send_json(false);
+    } else {
+      wp_send_json($subscriber->asArray());
+    }
+  }
+
+  function listing($data = array()) {
     $listing = new Listing\Handler(
       \Model::factory('\MailPoet\Models\Subscriber'),
       $data
@@ -18,23 +29,33 @@ class Subscribers {
   }
 
   function getAll() {
-    $collection = Subscriber::find_array();
+    $collection = Subscriber::findArray();
     wp_send_json($collection);
   }
 
-  function save($args) {
+  function save($data = array()) {
-    $model = Subscriber::create();
+    $id = (isset($data['id']) ? (int)$data['id'] : 0);
-    $model->hydrate($args);
-    $saved = $model->save();
 
-    if(!$saved) {
+    if($id > 0) {
-      wp_send_json($model->getValidationErrors());
+      // update
+      $model = Subscriber::findOne($id);
+      $model->hydrate($data);
+      $saved = $model->save();
+    } else {
+      // new
+      $model = Subscriber::create();
+      $model->hydrate($data);
+      $saved = $model->save();
     }
 
+    if($saved === false) {
+      wp_send_json($model->getValidationErrors());
+    } else {
       wp_send_json(true);
     }
+  }
 
-  function update($args) {
+  function update($data) {
 
   }
 

views/newsletters.html

@@ -6,7 +6,7 @@
   <%= localize({
     'pageTitle': __('Newsletters'),
     'searchLabel': __('Search'),
-    'loading': __('Loading newsletters...'),
+    'loadingItems': __('Loading newsletters...'),
-    'noRecordFound': __('No newsletters found.')
+    'noItemsFound': __('No newsletters found.')
   }) %>
 <% endblock %>

views/segments.html

@@ -6,7 +6,7 @@
   <%= localize({
     'pageTitle': __('Segments'),
     'searchLabel': __('Search'),
-    'loading': __('Loading segments...'),
+    'loadingItems': __('Loading segments...'),
-    'noRecordFound': __('No segments found.')
+    'noItemsFound': __('No segments found.')
   }) %>
 <% endblock %>

views/subscribers.html

@@ -6,8 +6,8 @@
   <%= localize({
     'pageTitle': __('Subscribers'),
     'searchLabel': __('Search'),
-    'loading': __('Loading subscribers...'),
+    'loadingItems': __('Loading subscribers...'),
-    'noRecordFound': __('No subscribers found.'),
+    'noItemsFound': __('No subscribers found.'),
     'selectAllLabel': __('All subscribers on this page are selected.'),
     'selectAllLink': __('Select all pages.'),
     'clearSelection': __('Clear selection.')