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

loan form styled,

overlay styled
This commit is contained in:
ddejongh 2015-06-02 18:43:37 +02:00
parent 82d14b30fc
commit a51c27fb9f
5 changed files with 26 additions and 31 deletions

View File

@ -28,8 +28,8 @@ let LoanForm = React.createClass({
bitcoin_id: this.getBitcoinIds().join(), bitcoin_id: this.getBitcoinIds().join(),
loanee: this.refs.loanee.state.value, loanee: this.refs.loanee.state.value,
gallery_name: this.refs.gallery_name.state.value, gallery_name: this.refs.gallery_name.state.value,
startdate: this.refs.startdate.state.value.format("YYYY-MM-DD"), startdate: this.refs.startdate.state.value_formatted,
enddate: this.refs.enddate.state.value.format("YYYY-MM-DD"), enddate: this.refs.enddate.state.value_formatted,
loan_message: this.refs.loan_message.state.value, loan_message: this.refs.loan_message.state.value,
password: this.refs.password.state.value, password: this.refs.password.state.value,
terms: this.refs.terms.state.value terms: this.refs.terms.state.value
@ -102,12 +102,12 @@ ${username}`;
type="text" type="text"
submitted={this.state.submitted}/> submitted={this.state.submitted}/>
<div className="row"> <div className="row">
<div className="col-md-6"> <div className="col-xs-6">
<InputDate <InputDate
ref="startdate" ref="startdate"
placeholderText="Loan start date" /> placeholderText="Loan start date" />
</div> </div>
<div className="col-md-6 form-group"> <div className="col-xs-6 form-group">
<InputDate <InputDate
ref="enddate" ref="enddate"
placeholderText="Loan end date" /> placeholderText="Loan end date" />

View File

@ -9,42 +9,31 @@ let InputDate = React.createClass({
getInitialState() { getInitialState() {
return {value: null, return {value: null,
value_formatted: null,
alerts: null // needed in AlertMixin alerts: null // needed in AlertMixin
}; };
}, },
handleChange(date) { handleChange(date) {
this.setState({value: date}); this.setState({
value: date,
value_formatted: date.format("YYYY-MM-DD")});
}, },
render: function () { render: function () {
let className = "form-control input-text-ascribe"; let className = "form-control input-text-ascribe";
let alerts = (this.props.submitted) ? null : this.state.alerts; let alerts = (this.props.submitted) ? null : this.state.alerts;
return ( return (
<DatePicker <div className="form-group">
key="example2" {alerts}
dateFormat="YYYY-MM-DD" <DatePicker
selected={this.state.value} key="example2"
onChange={this.handleChange} dateFormat="YYYY-MM-DD"
placeholderText={this.props.placeholderText} selected={this.state.value}
/> onChange={this.handleChange}
placeholderText={this.props.placeholderText}/>
</div>
); );
//return (
// <div className="input-group date"
// ref={this.props.name + "_picker"}
// onChange={this.handleChange}>
// <input className={className}
// ref={this.props.name}
// placeholder={this.props.placeholder}
// required={this.props.required}
// type="text"/>
// <span className="input-group-addon input-text-ascribe">
// <span className="glyphicon glyphicon-calendar" style={{"color": "black"}}></span>
// </span>
// </div>
//)
} }
}); });

View File

@ -8,7 +8,6 @@ export const FormMixin = {
getInitialState() { getInitialState() {
return { return {
submitted: false submitted: false
, status: null
, errors: [] , errors: []
} }
}, },
@ -16,12 +15,18 @@ export const FormMixin = {
submit(e) { submit(e) {
e.preventDefault(); e.preventDefault();
this.setState({submitted: true}); this.setState({submitted: true});
this.clearErrors();
fetch fetch
.post(this.url(), { body: this.getFormData() }) .post(this.url(), { body: this.getFormData() })
.then(response => { this.props.handleSuccess(); }) .then(response => { this.props.handleSuccess(); })
.catch(this.handleError); .catch(this.handleError);
}, },
clearErrors(){
for (var ref in this.refs){
this.refs[ref].clearAlerts();
}
this.setState({errors:[]});
},
handleError(err){ handleError(err){
if (err.json) { if (err.json) {
for (var input in err.json.errors){ for (var input in err.json.errors){

View File

@ -11,7 +11,7 @@
border-bottom-left-radius: 5px; border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom: 0.2em solid #E0E0E0; border-bottom: 0.2em solid #E0E0E0;
z-index:9999; z-index:1041; // between overlay and modal
} }
.piece-list-bulk-modal-clear-all { .piece-list-bulk-modal-clear-all {

View File

@ -173,6 +173,7 @@
background: transparent; background: transparent;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none; box-shadow: none;
width: 100%;
} }
.textarea-ascribe-message { .textarea-ascribe-message {