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 ( -