1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00

modal + forms

This commit is contained in:
ddejongh 2015-05-27 15:53:26 +02:00
parent 8624eb26c7
commit 76317dcdca
2 changed files with 61 additions and 17 deletions

View File

@ -1,3 +1,8 @@
import fetch from 'isomorphic-fetch';
import AppConstants from '../../constants/application_constants';
import FetchApiUtils from '../../utils/fetch_api_utils';
import React from 'react'; import React from 'react';
import Modal from 'react-bootstrap/lib/Modal'; import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
@ -22,28 +27,66 @@ let ShareModalButton = React.createClass({
let ShareModal = React.createClass({ let ShareModal = React.createClass({
render() { render() {
var content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
"\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
return ( return (
<Modal {...this.props} title="Share artwork"> <Modal {...this.props} title="Share artwork">
<div className="modal-body"> <div className="modal-body">
<form id="share_modal_content" role="form"> <ShareForm edition={this.props.edition}
<div className="form-group"> currentUser={this.props.currentUser}/>
<input className="form-control input-text-ascribe" name="share_emails"
placeholder="Comma separated emails" required="required" type="text" />
</div> </div>
</Modal>
)
}
});
let ShareForm = React.createClass({
submit(e) {
e.preventDefault();
let url = "http://localhost:8000/api/ownership/shares/mail/";
fetch(url, {
method: 'post',
headers: {
'Authorization': 'Basic ' + AppConstants.debugCredentialBase64,
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(this.getFormData())
})
},
getFormData() {
return {
bitcoin_id: this.props.edition.bitcoin_id,
share_emails: this.refs.share_emails.getDOMNode().value,
share_message: this.refs.share_message.getDOMNode().value
}
},
renderTextInput(id, placeHolder, required){
return(
<div className="form-group"> <div className="form-group">
<textarea className="form-control input-text-ascribe textarea-ascribe-message" <input className="form-control input-text-ascribe" name={id} ref={id}
name="share_message" placeholder={placeHolder} required={required} type="text" />
defaultValue={content}></textarea>
</div> </div>
)
},
renderTextArea(id, placeHolder, required){
return(
<div className="form-group">
<textarea className="form-control input-text-ascribe textarea-ascribe-message" name={id} ref={id}
defaultValue={placeHolder} required={required}></textarea>
</div>
)
},
render() {
let content = "Hi,\n\nI am sharing \"" + this.props.edition.title +
"\" with you.\n\nTruly yours,\n" + this.props.currentUser.username;
return (
<form id="share_modal_content" role="form" onSubmit={this.submit}>
{this.renderTextInput("share_emails", "Comma separated emails", "required")}
{this.renderTextArea("share_message", content, "")}
<div className="modal-footer"> <div className="modal-footer">
<button type="submit" className="btn btn-ascribe-inv">SHARE</button> <button type="submit" className="btn btn-ascribe-inv">SHARE</button>
<button className="btn btn-ascribe-inv" onClick={this.props.onRequestHide}>CLOSE</button> <button className="btn btn-ascribe-inv" onClick={this.props.onRequestHide}>CLOSE</button>
</div> </div>
</form> </form>
</div>
</Modal>
); );
} }
}); });

View File

@ -46,6 +46,7 @@ let EditionDetails = React.createClass({
value={this.props.edition.edition_number + " of " + this.props.edition.num_editions} /> value={this.props.edition.edition_number + " of " + this.props.edition.num_editions} />
<EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } /> <EditionDetailProperty label="id" value={ this.props.edition.bitcoin_id } />
<EditionDetailProperty label="owner" value={ this.props.edition.owner } /> <EditionDetailProperty label="owner" value={ this.props.edition.owner } />
<br/>
<ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/> <ShareModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
<hr/> <hr/>
</div> </div>