diff --git a/assets/css/src/listing.styl b/assets/css/src/listing.styl index 94d137c12e..2c80e4f427 100644 --- 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, @@ -19,4 +20,5 @@ background-color: #f1f1f1 .mailpoet_select_all td - text-align: center \ No newline at end of file + text-align: center + diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx index bc17a12243..1c7f1cdfa2 100644 --- 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 } diff --git a/assets/js/src/subscribers/form.jsx b/assets/js/src/subscribers/form.jsx index 28c1fbc833..444ead4c7d 100644 --- 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 ( -
+ { errors }

- +

- +

- +

{ subscriber.email } + +
+ + Edit + +
+ @@ -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 } /> ); } }); diff --git a/assets/js/src/subscribers/subscribers.jsx b/assets/js/src/subscribers/subscribers.jsx index b3ddb7de5b..065d0203bc 100644 --- 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(

{ MailPoetI18n.pageTitle }   - New + New

@@ -35,8 +36,9 @@ define( var routes = ( - - + + + ); diff --git a/lib/Router/Subscribers.php b/lib/Router/Subscribers.php index 5de5cc26a3..b8a5cbee82 100644 --- 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(); } - wp_send_json(true); + if($saved === false) { + wp_send_json($model->getValidationErrors()); + } else { + wp_send_json(true); + } } - function update($args) { + function update($data) { } diff --git a/views/newsletters.html b/views/newsletters.html index c007272a9b..80522803e0 100644 --- 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 %> diff --git a/views/segments.html b/views/segments.html index 68b2758bba..1b3810d762 100644 --- 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 %> diff --git a/views/subscribers.html b/views/subscribers.html index d547d12a31..ac1b0dd594 100644 --- 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.')