diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index 0f022a0d..23ace605 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -15,13 +15,25 @@ import { mergeOptionsWithDuplicates } from '../../utils/general_utils'; let Form = React.createClass({ propTypes: { url: React.PropTypes.string, + method: React.PropTypes.string, handleSuccess: React.PropTypes.func, getFormData: React.PropTypes.func, children: React.PropTypes.oneOfType([ React.PropTypes.object, React.PropTypes.array ]), - className: React.PropTypes.string + className: React.PropTypes.string, + spinner: React.PropTypes.element, + buttons: React.PropTypes.oneOfType([ + React.PropTypes.element, + React.PropTypes.arrayOf(React.PropTypes.element) + ]) + }, + + getDefaultProps() { + return { + method: 'post' + }; }, getInitialState() { @@ -31,6 +43,7 @@ let Form = React.createClass({ errors: [] }; }, + reset(){ for (let ref in this.refs){ if (typeof this.refs[ref].reset === 'function'){ @@ -39,22 +52,38 @@ let Form = React.createClass({ } this.setState(this.getInitialState()); }, + submit(event){ - if (event) { + + if(event) { event.preventDefault(); } + this.setState({submitted: true}); this.clearErrors(); - let action = (this.httpVerb && this.httpVerb()) || 'post'; - window.setTimeout(() => this[action](), 100); + + // selecting http method based on props + if(this[this.props.method]) { + window.setTimeout(() => this[this.props.method](), 100); + } else { + throw new Error('This HTTP method is not supported by form.js (' + this.props.method + ')'); + } }, - post(){ + + post() { requests .post(this.props.url, { body: this.getFormData() }) .then(this.handleSuccess) .catch(this.handleError); }, + delete() { + requests + .delete(this.props.url, this.getFormData()) + .then(this.handleSuccess) + .catch(this.handleError); + }, + getFormData(){ let data = {}; for (let ref in this.refs){ @@ -70,6 +99,7 @@ let Form = React.createClass({ handleChangeChild(){ this.setState({edited: true}); }, + handleSuccess(response){ if ('handleSuccess' in this.props){ this.props.handleSuccess(response); @@ -79,8 +109,12 @@ let Form = React.createClass({ this.refs[ref].handleSuccess(); } } - this.setState({edited: false, submitted: false}); + this.setState({ + edited: false, + submitted: false + }); }, + handleError(err){ if (err.json) { for (var input in err.json.errors){ @@ -104,6 +138,7 @@ let Form = React.createClass({ } this.setState({submitted: false}); }, + clearErrors(){ for (var ref in this.refs){ if ('clearErrors' in this.refs[ref]){ @@ -112,6 +147,7 @@ let Form = React.createClass({ } this.setState({errors: []}); }, + getButtons() { if (this.state.submitted){ return this.props.spinner; @@ -134,6 +170,7 @@ let Form = React.createClass({ } return buttons; }, + getErrors() { let errors = null; if (this.state.errors.length > 0){ @@ -143,6 +180,7 @@ let Form = React.createClass({ } return errors; }, + renderChildren() { return ReactAddons.Children.map(this.props.children, (child) => { if (child) { @@ -153,6 +191,7 @@ let Form = React.createClass({ } }); }, + render() { let className = 'ascribe-form'; diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js index 875b6ddd..9b3f0c9c 100644 --- a/js/components/ascribe_forms/form_consign.js +++ b/js/components/ascribe_forms/form_consign.js @@ -26,7 +26,6 @@ let ConsignForm = React.createClass({ }, render() { - return (