Subscriber Edit page

2015-09-09 15:58:57 +02:00
parent bec7f3d5bf
commit 97db902529
9 changed files with 148 additions and 57 deletions
--- a/assets/css/src/listing.styl
+++ b/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
+
--- a/assets/js/src/listing/listing.jsx
+++ b/assets/js/src/listing/listing.jsx
@@ -76,8 +76,8 @@ define(
                  className="colspanchange">
                  {
                    (this.props.loading === true)
-                    ? MailPoetI18n.loading
-                    : MailPoetI18n.noRecordFound
+                    ? MailPoetI18n.loadingItems
+                    : MailPoetI18n.noItemsFound
                  }
                </td>
              </tr>
--- a/assets/js/src/subscribers/form.jsx
+++ b/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: {
-            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
-          }
+          data: this.state.item
        }).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"
--- a/assets/js/src/subscribers/list.jsx
+++ b/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...',
-        onSelect: function(e) {
-          console.log(e);
-        },
-        onApply: function(selected) {
-          console.log(selected);
-        }
+        label: 'Move to list...'
      },
      {
        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 }
-            item_actions={ item_actions } />
+            bulk_actions={ bulk_actions } />
        );
      }
    });
--- a/assets/js/src/subscribers/subscribers.jsx
+++ b/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="form" handler={Form} />
+        <Route name="new" path="/new" handler={Form} />
+        <Route name="edit" path="/edit/:id" handler={Form} />
+        <NotFoundRoute handler={List} />
        <DefaultRoute handler={List} />
      </Route>
    );
--- a/lib/Router/Subscribers.php
+++ b/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) {
-    $model = Subscriber::create();
-    $model->hydrate($args);
-    $saved = $model->save();
+  function save($data = array()) {
+    $id = (isset($data['id']) ? (int)$data['id'] : 0);

-    if(!$saved) {
-      wp_send_json($model->getValidationErrors());
+    if($id > 0) {
+      // 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) {

  }

--- a/views/newsletters.html
+++ b/views/newsletters.html
@@ -6,7 +6,7 @@
  <%= localize({
    'pageTitle': __('Newsletters'),
    'searchLabel': __('Search'),
-    'loading': __('Loading newsletters...'),
-    'noRecordFound': __('No newsletters found.')
+    'loadingItems': __('Loading newsletters...'),
+    'noItemsFound': __('No newsletters found.')
  }) %>
 <% endblock %>
--- a/views/segments.html
+++ b/views/segments.html
@@ -6,7 +6,7 @@
  <%= localize({
    'pageTitle': __('Segments'),
    'searchLabel': __('Search'),
-    'loading': __('Loading segments...'),
-    'noRecordFound': __('No segments found.')
+    'loadingItems': __('Loading segments...'),
+    'noItemsFound': __('No segments found.')
  }) %>
 <% endblock %>
--- a/views/subscribers.html
+++ b/views/subscribers.html
@@ -6,8 +6,8 @@
  <%= localize({
    'pageTitle': __('Subscribers'),
    'searchLabel': __('Search'),
-    'loading': __('Loading subscribers...'),
-    'noRecordFound': __('No subscribers found.'),
+    'loadingItems': __('Loading subscribers...'),
+    'noItemsFound': __('No subscribers found.'),
    'selectAllLabel': __('All subscribers on this page are selected.'),
    'selectAllLink': __('Select all pages.'),
    'clearSelection': __('Clear selection.')