2015-06-05 11:06:36 +02:00
|
|
|
'use strict';
|
2015-05-29 16:53:30 +02:00
|
|
|
|
|
|
|
import React from 'react';
|
2015-08-12 13:34:41 +02:00
|
|
|
import classnames from 'classnames';
|
|
|
|
|
2015-07-15 17:51:09 +02:00
|
|
|
import Button from 'react-bootstrap/lib/Button';
|
|
|
|
|
2015-12-03 21:29:56 +01:00
|
|
|
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
|
|
|
|
2015-07-15 17:51:09 +02:00
|
|
|
import Form from './form';
|
2015-12-03 15:22:17 +01:00
|
|
|
import Property from './property';
|
2015-07-15 17:51:09 +02:00
|
|
|
|
2015-12-03 21:29:56 +01:00
|
|
|
import InputDate from './input_date';
|
|
|
|
import InputTextAreaToggable from './input_textarea_toggable';
|
|
|
|
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
|
|
|
|
|
2015-10-12 15:25:21 +02:00
|
|
|
import AscribeSpinner from '../ascribe_spinner';
|
2015-06-05 11:40:49 +02:00
|
|
|
|
2015-12-03 15:22:17 +01:00
|
|
|
import AclInformation from '../ascribe_buttons/acl_information';
|
|
|
|
|
2015-07-15 17:51:09 +02:00
|
|
|
import { getLangText } from '../../utils/lang_utils';
|
2015-12-03 21:29:56 +01:00
|
|
|
import { mergeOptions } from '../../utils/general_utils';
|
|
|
|
|
2015-07-03 19:08:56 +02:00
|
|
|
|
2015-06-01 13:02:53 +02:00
|
|
|
let LoanForm = React.createClass({
|
2015-07-15 17:51:09 +02:00
|
|
|
propTypes: {
|
2015-08-12 14:40:44 +02:00
|
|
|
loanHeading: React.PropTypes.string,
|
2015-12-16 12:43:03 +01:00
|
|
|
buttons: React.PropTypes.element,
|
2015-08-12 13:34:41 +02:00
|
|
|
email: React.PropTypes.string,
|
|
|
|
gallery: React.PropTypes.string,
|
2015-12-03 13:34:00 +01:00
|
|
|
startDate: React.PropTypes.object,
|
|
|
|
endDate: React.PropTypes.object,
|
2015-08-12 13:34:41 +02:00
|
|
|
showPersonalMessage: React.PropTypes.bool,
|
2015-08-26 09:50:38 +02:00
|
|
|
showEndDate: React.PropTypes.bool,
|
|
|
|
showStartDate: React.PropTypes.bool,
|
|
|
|
showPassword: React.PropTypes.bool,
|
2015-07-15 17:51:09 +02:00
|
|
|
url: React.PropTypes.string,
|
|
|
|
id: React.PropTypes.object,
|
|
|
|
message: React.PropTypes.string,
|
2015-09-16 23:27:38 +02:00
|
|
|
createPublicContractAgreement: React.PropTypes.bool,
|
2015-12-03 13:34:00 +01:00
|
|
|
handleSuccess: React.PropTypes.func,
|
|
|
|
children: React.PropTypes.oneOfType([
|
|
|
|
React.PropTypes.object,
|
|
|
|
React.PropTypes.array
|
|
|
|
])
|
2015-07-15 17:51:09 +02:00
|
|
|
},
|
|
|
|
|
2015-08-12 13:34:41 +02:00
|
|
|
getDefaultProps() {
|
|
|
|
return {
|
2015-08-12 14:40:44 +02:00
|
|
|
loanHeading: '',
|
2015-08-26 09:50:38 +02:00
|
|
|
showPersonalMessage: true,
|
2015-08-26 17:32:42 +02:00
|
|
|
showEndDate: true,
|
|
|
|
showStartDate: true,
|
2015-12-03 15:22:17 +01:00
|
|
|
showPassword: true
|
2015-08-12 13:34:41 +02:00
|
|
|
};
|
|
|
|
},
|
|
|
|
|
2015-06-05 11:06:36 +02:00
|
|
|
getInitialState() {
|
2015-12-03 15:21:14 +01:00
|
|
|
return {
|
|
|
|
email: this.props.email || ''
|
|
|
|
};
|
2015-09-14 17:53:50 +02:00
|
|
|
},
|
|
|
|
|
2015-12-16 15:17:47 +01:00
|
|
|
componentWillReceiveProps(nextProps) {
|
|
|
|
if (this.props.email !== nextProps.email) {
|
|
|
|
this.setState({
|
|
|
|
email: nextProps.email
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-12-03 21:29:56 +01:00
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
|
|
|
},
|
|
|
|
|
2015-12-03 15:21:14 +01:00
|
|
|
handleEmailOnChange(event) {
|
2015-09-10 13:24:32 +02:00
|
|
|
// event.target.value is the submitted email of the loanee
|
2015-12-03 15:21:14 +01:00
|
|
|
this.setState({
|
|
|
|
email: event && event.target && event.target.value || ''
|
|
|
|
});
|
2015-06-01 13:02:53 +02:00
|
|
|
},
|
2015-07-15 17:51:09 +02:00
|
|
|
|
2015-12-03 20:26:53 +01:00
|
|
|
handleReset() {
|
2015-12-03 15:22:17 +01:00
|
|
|
this.handleEmailOnChange();
|
2015-09-21 10:54:13 +02:00
|
|
|
},
|
|
|
|
|
2015-12-03 17:19:17 +01:00
|
|
|
getFormData() {
|
2015-12-03 21:29:56 +01:00
|
|
|
return this.props.id;
|
2015-12-03 17:19:17 +01:00
|
|
|
},
|
|
|
|
|
2015-08-12 13:34:41 +02:00
|
|
|
getButtons() {
|
2015-12-16 12:43:03 +01:00
|
|
|
const { buttons, loanHeading } = this.props;
|
|
|
|
|
|
|
|
if (buttons) {
|
|
|
|
return buttons;
|
|
|
|
} else if (loanHeading) {
|
2015-08-12 13:34:41 +02:00
|
|
|
return (
|
|
|
|
<button
|
|
|
|
type="submit"
|
2015-10-12 17:55:02 +02:00
|
|
|
className="btn btn-default btn-wide">
|
2015-08-12 13:34:41 +02:00
|
|
|
{getLangText('Finish process')}
|
|
|
|
</button>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<div className="modal-footer">
|
|
|
|
<p className="pull-right">
|
|
|
|
<Button
|
|
|
|
className="btn btn-default btn-sm ascribe-margin-1px"
|
|
|
|
type="submit">
|
|
|
|
{getLangText('LOAN')}
|
|
|
|
</Button>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
},
|
2015-06-05 11:06:36 +02:00
|
|
|
|
2015-08-12 13:34:41 +02:00
|
|
|
render() {
|
2015-12-03 15:21:14 +01:00
|
|
|
const { email } = this.state;
|
2016-01-18 14:46:39 +01:00
|
|
|
const { children,
|
|
|
|
createPublicContractAgreement,
|
|
|
|
email: defaultEmail,
|
|
|
|
handleSuccess,
|
|
|
|
gallery,
|
|
|
|
loanHeading,
|
|
|
|
message,
|
|
|
|
showPersonalMessage,
|
|
|
|
endDate,
|
|
|
|
startDate,
|
|
|
|
showEndDate,
|
|
|
|
showStartDate,
|
|
|
|
showPassword,
|
|
|
|
url } = this.props;
|
2015-12-03 13:34:00 +01:00
|
|
|
|
2015-05-29 16:53:30 +02:00
|
|
|
return (
|
2015-07-15 17:51:09 +02:00
|
|
|
<Form
|
2015-12-03 13:34:00 +01:00
|
|
|
className={classnames({'ascribe-form-bordered': loanHeading})}
|
2015-07-15 17:51:09 +02:00
|
|
|
ref='form'
|
2015-12-03 13:34:00 +01:00
|
|
|
url={url}
|
2015-07-15 17:51:09 +02:00
|
|
|
getFormData={this.getFormData}
|
2015-12-03 15:22:17 +01:00
|
|
|
onReset={this.handleReset}
|
2015-12-03 13:34:00 +01:00
|
|
|
handleSuccess={handleSuccess}
|
2015-08-12 13:34:41 +02:00
|
|
|
buttons={this.getButtons()}
|
2015-07-15 17:51:09 +02:00
|
|
|
spinner={
|
|
|
|
<div className="modal-footer">
|
2015-10-12 15:25:21 +02:00
|
|
|
<p className="pull-right">
|
|
|
|
<AscribeSpinner color='dark-blue' size='md'/>
|
|
|
|
</p>
|
2015-07-15 17:51:09 +02:00
|
|
|
</div>}>
|
2015-12-03 13:34:00 +01:00
|
|
|
<div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
|
|
|
|
<h3>{loanHeading}</h3>
|
2015-08-12 13:34:41 +02:00
|
|
|
</div>
|
2015-10-15 11:17:16 +02:00
|
|
|
<AclInformation aim={'form'} verbs={['acl_loan']}/>
|
2015-07-15 17:51:09 +02:00
|
|
|
<Property
|
|
|
|
name='loanee'
|
|
|
|
label={getLangText('Loanee Email')}
|
2015-12-03 15:21:14 +01:00
|
|
|
editable={!defaultEmail}
|
|
|
|
onChange={this.handleEmailOnChange}
|
|
|
|
overrideForm={!!defaultEmail}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<input
|
2015-12-03 13:34:00 +01:00
|
|
|
value={email}
|
2015-07-15 17:51:09 +02:00
|
|
|
type="email"
|
|
|
|
placeholder={getLangText('Email of the loanee')}
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
2015-08-26 09:50:38 +02:00
|
|
|
name='gallery'
|
2015-08-12 13:34:41 +02:00
|
|
|
label={getLangText('Gallery/exhibition (optional)')}
|
2015-12-03 13:34:00 +01:00
|
|
|
editable={!gallery}
|
|
|
|
overrideForm={!!gallery}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<input
|
2015-12-18 15:00:52 +01:00
|
|
|
defaultValue={gallery}
|
2015-07-15 17:51:09 +02:00
|
|
|
type="text"
|
|
|
|
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='startdate'
|
2015-08-12 13:34:41 +02:00
|
|
|
label={getLangText('Start date')}
|
2015-12-03 13:34:00 +01:00
|
|
|
editable={!startDate}
|
|
|
|
overrideForm={!!startDate}
|
2015-12-03 20:26:53 +01:00
|
|
|
expanded={showStartDate}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<InputDate
|
2015-12-03 13:34:00 +01:00
|
|
|
defaultValue={startDate}
|
2015-07-15 17:51:09 +02:00
|
|
|
placeholderText={getLangText('Loan start date')} />
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='enddate'
|
2015-12-03 13:34:00 +01:00
|
|
|
editable={!endDate}
|
|
|
|
overrideForm={!!endDate}
|
2015-08-12 13:34:41 +02:00
|
|
|
label={getLangText('End date')}
|
2015-12-03 20:26:53 +01:00
|
|
|
expanded={showEndDate}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<InputDate
|
2015-12-03 13:34:00 +01:00
|
|
|
defaultValue={endDate}
|
2015-07-15 17:51:09 +02:00
|
|
|
placeholderText={getLangText('Loan end date')} />
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='loan_message'
|
|
|
|
label={getLangText('Personal Message')}
|
2015-08-12 13:34:41 +02:00
|
|
|
editable={true}
|
2015-09-21 12:05:42 +02:00
|
|
|
overrideForm={true}
|
2015-12-03 20:26:53 +01:00
|
|
|
expanded={showPersonalMessage}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<InputTextAreaToggable
|
|
|
|
rows={1}
|
2015-12-03 13:34:00 +01:00
|
|
|
defaultValue={message}
|
2015-07-15 17:51:09 +02:00
|
|
|
placeholder={getLangText('Enter a message...')}
|
2015-12-03 13:34:00 +01:00
|
|
|
required={showPersonalMessage}/>
|
2015-07-15 17:51:09 +02:00
|
|
|
</Property>
|
2015-12-03 21:29:56 +01:00
|
|
|
<Property
|
2015-12-03 17:19:17 +01:00
|
|
|
name='contract_agreement'
|
2015-12-03 21:29:56 +01:00
|
|
|
label={getLangText('Loan Contract')}
|
2015-12-16 19:03:01 +01:00
|
|
|
className="ascribe-property-collapsible-toggle">
|
2015-12-03 21:29:56 +01:00
|
|
|
<InputContractAgreementCheckbox
|
|
|
|
createPublicContractAgreement={createPublicContractAgreement}
|
|
|
|
email={email} />
|
|
|
|
</Property>
|
2015-07-15 17:51:09 +02:00
|
|
|
<Property
|
|
|
|
name='password'
|
2015-08-26 09:50:38 +02:00
|
|
|
label={getLangText('Password')}
|
2015-12-03 20:26:53 +01:00
|
|
|
expanded={showPassword}>
|
2015-07-15 17:51:09 +02:00
|
|
|
<input
|
|
|
|
type="password"
|
|
|
|
placeholder={getLangText('Enter your password')}
|
2015-12-04 16:34:25 +01:00
|
|
|
required={showPassword}/>
|
2015-07-15 17:51:09 +02:00
|
|
|
</Property>
|
2015-12-03 13:34:00 +01:00
|
|
|
{children}
|
2015-07-15 17:51:09 +02:00
|
|
|
</Form>
|
2015-05-29 16:53:30 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-10-28 19:19:14 +01:00
|
|
|
export default LoanForm;
|