diff --git a/assets/js/src/form/form.jsx b/assets/js/src/form/form.jsx new file mode 100644 index 0000000000..0dc273f8e3 --- /dev/null +++ b/assets/js/src/form/form.jsx @@ -0,0 +1,167 @@ +define( + [ + 'react', + 'mailpoet', + 'classnames', + 'react-router' + ], + function( + React, + MailPoet, + classNames, + Router + ) { + + var FormField = React.createClass({ + render: function() { + return ( + + + + + + + + + ); + } + }); + + var Form = React.createClass({ + mixins: [ + Router.Navigation + ], + getInitialState: function() { + return { + loading: false, + 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(); + + this.setState({ loading: true }); + + MailPoet.Ajax.post({ + endpoint: 'subscribers', + action: 'save', + 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)); + }, + handleValueChange: 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 ( +

{ error }

+ ); + }); + + var formClasses = classNames( + { 'mailpoet_form_loading': this.state.loading } + ); + + var fields = this.props.fields.map(function(field, index) { + return ( + + ); + }.bind(this)); + + return ( +
+ + { errors } + + + + {fields} + +
+ + +
+ ); + } + }); + + return Form; + } +); \ No newline at end of file diff --git a/assets/js/src/listing/listing.jsx b/assets/js/src/listing/listing.jsx index 1c7f1cdfa2..2c8297cb88 100644 --- a/assets/js/src/listing/listing.jsx +++ b/assets/js/src/listing/listing.jsx @@ -72,7 +72,10 @@ define( { (this.props.loading === true) @@ -97,7 +100,10 @@ define( return ( - + { MailPoetI18n.selectAllLabel }  { error }

- ); - }); - - var formClasses = classNames( - { 'mailpoet_form_loading': this.state.loading } - ); return ( -
- { errors } -

- -

-

- -

-

- -

- -
+
); } }); - return Form; + return SubscriberForm; } ); \ No newline at end of file