From 795a268184f32e25d155a25cbedfbe81f8e40cc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 15 Jul 2015 14:03:23 +0200 Subject: [PATCH] loan form styling and loan contract store --- js/actions/loan_contract_actions.js | 45 ++++++ js/components/ascribe_buttons/acl_button.js | 35 ++++- js/components/ascribe_forms/form_loan.js | 2 +- js/components/ascribe_forms/form_loan_new.js | 152 +++++++++++++++++++ js/components/ascribe_forms/property.js | 6 +- js/stores/loan_contract_store.js | 20 +++ sass/ascribe_settings.scss | 3 +- sass/main.scss | 12 -- 8 files changed, 252 insertions(+), 23 deletions(-) create mode 100644 js/actions/loan_contract_actions.js create mode 100644 js/components/ascribe_forms/form_loan_new.js create mode 100644 js/stores/loan_contract_store.js diff --git a/js/actions/loan_contract_actions.js b/js/actions/loan_contract_actions.js new file mode 100644 index 00000000..95c52d93 --- /dev/null +++ b/js/actions/loan_contract_actions.js @@ -0,0 +1,45 @@ +'use strict'; + +import alt from '../alt'; +import OwnershipFetcher from '../fetchers/ownership_fetcher'; + + +class LoanContractActions { + constructor() { + this.generateActions( + 'updateLoanContract' + ); + } + + fetchLoanContract(email) { + + if(email.match(/.+\@.+\..+/)) { + OwnershipFetcher.fetchLoanContract(email) + .then((contracts) => { + if (contracts && contracts.length > 0) { + this.actions.updateLoanContract({ + contractKey: contracts[0].s3Key, + contractUrl: contracts[0].s3Url + }); + } + else { + this.actions.updateLoanContract({ + contractKey: null, + contractUrl: null + }); + } + }) + .catch((err) => { + console.error(err); + this.actions.updateLoanContract({ + contractKey: null, + contractUrl: null + }); + }); + } else { + /* No email was entered - Ignore and keep going*/ + } + } +} + +export default alt.createActions(LoanContractActions); diff --git a/js/components/ascribe_buttons/acl_button.js b/js/components/ascribe_buttons/acl_button.js index 2aedc44f..c479174c 100644 --- a/js/components/ascribe_buttons/acl_button.js +++ b/js/components/ascribe_buttons/acl_button.js @@ -5,7 +5,7 @@ import React from 'react'; import ConsignForm from '../ascribe_forms/form_consign'; import UnConsignForm from '../ascribe_forms/form_unconsign'; import TransferForm from '../ascribe_forms/form_transfer'; -import LoanForm from '../ascribe_forms/form_loan'; +import LoanForm from '../ascribe_forms/form_loan_new'; import ShareForm from '../ascribe_forms/form_share_email'; import ModalWrapper from '../ascribe_modal/modal_wrapper'; import AppConstants from '../../constants/application_constants'; @@ -30,7 +30,7 @@ let AclButton = React.createClass({ }, isPiece(){ - return !(this.props.pieceOrEditions.constructor === Array); + return this.props.pieceOrEditions.constructor !== Array; }, actionProperties(){ @@ -68,7 +68,7 @@ let AclButton = React.createClass({ message={this.getTransferMessage()} id={this.getFormDataId()} url={apiUrls.ownership_transfers}/> - ), + ), handleSuccess: this.showNotification }; } @@ -76,7 +76,11 @@ let AclButton = React.createClass({ return { title: getLangText('Loan artwork'), tooltip: getLangText('Loan your artwork for a limited period of time'), - form: , + form: ( + ), handleSuccess: this.showNotification }; } @@ -135,6 +139,20 @@ let AclButton = React.createClass({ ${getLangText('I transfer ownership of')}: ${this.getTitlesString()} ${getLangText('to you')}. +${getLangText('Truly yours')}, +${this.props.currentUser.username} + ` + ); + }, + + // plz move to transfer form + getLoanMessage(){ + return ( + `${getLangText('Hi')}, + +${getLangText('I loan')}: +${this.getTitlesString()} ${getLangText('to you')}. + ${getLangText('Truly yours')}, ${this.props.currentUser.username} ` @@ -191,6 +209,7 @@ ${this.props.currentUser.username} render() { let shouldDisplay = this.props.availableAcls[this.props.action]; let aclProps = this.actionProperties(); + return ( } - handleSuccess={ aclProps.handleSuccess } - title={ aclProps.title } - tooltip={ aclProps.tooltip }> - { aclProps.form } + handleSuccess={aclProps.handleSuccess} + title={aclProps.title} + tooltip={aclProps.tooltip}> + {aclProps.form} ); } diff --git a/js/components/ascribe_forms/form_loan.js b/js/components/ascribe_forms/form_loan.js index b003650a..44240f76 100644 --- a/js/components/ascribe_forms/form_loan.js +++ b/js/components/ascribe_forms/form_loan.js @@ -13,7 +13,7 @@ import InputTextArea from './input_textarea'; import OwnershipFetcher from '../../fetchers/ownership_fetcher'; import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close'; -import { getLangText } from '../../utils/lang_utils.js' +import { getLangText } from '../../utils/lang_utils.js'; let LoanForm = React.createClass({ diff --git a/js/components/ascribe_forms/form_loan_new.js b/js/components/ascribe_forms/form_loan_new.js new file mode 100644 index 00000000..c25ef78a --- /dev/null +++ b/js/components/ascribe_forms/form_loan_new.js @@ -0,0 +1,152 @@ +'use strict'; + +import React from 'react'; + +import Button from 'react-bootstrap/lib/Button'; + +import Form from './form'; +import Property from './property'; +import InputTextAreaToggable from './input_textarea_toggable'; +import InputDate from './input_date'; +import InputCheckbox from './input_checkbox'; + +import LoanContractStore from '../../stores/loan_contract_store'; +import LoanContractActions from '../../actions/loan_contract_actions'; + +import AppConstants from '../../constants/application_constants'; +import { getLangText } from '../../utils/lang_utils.js'; + + +let LoanForm = React.createClass({ + propTypes: { + url: React.PropTypes.string, + id: React.PropTypes.object, + message: React.PropTypes.string, + onRequestHide: React.PropTypes.func, + handleSuccess: React.PropTypes.func + }, + + getInitialState() { + return LoanContractStore.getState(); + }, + + componentDidMount() { + LoanContractStore.listen(this.onChange); + }, + + componentWillUnmount() { + LoanContractStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + getFormData(){ + return this.props.id; + }, + + handleOnBlur(event) { + LoanContractActions.fetchLoanContract(event.target.value); + }, + + getContractCheckbox() { + if(this.state.contractKey && this.state.contractUrl) { + return ( + + + + {getLangText('I agree to the')}  + + {getLangText('terms of')} {this.refs.loaneeEmail.getDomNode().value} + + + + + ); + } + }, + + render() { + + return ( +
+

+ + +

+ } + spinner={ +
+ +
}> + + + + + + + + + + + + + + + + {this.getContractCheckbox()} + + + +
+
+ ); + } +}); + +export default LoanForm; \ No newline at end of file diff --git a/js/components/ascribe_forms/property.js b/js/components/ascribe_forms/property.js index 08129662..9f12a624 100644 --- a/js/components/ascribe_forms/property.js +++ b/js/components/ascribe_forms/property.js @@ -104,10 +104,14 @@ let Property = React.createClass({ }); }, - handleBlur() { + handleBlur(event) { this.setState({ isFocused: false }); + + if(this.props.onBlur) { + this.props.onBlur(event); + } }, handleSuccess(){ diff --git a/js/stores/loan_contract_store.js b/js/stores/loan_contract_store.js new file mode 100644 index 00000000..a69a051a --- /dev/null +++ b/js/stores/loan_contract_store.js @@ -0,0 +1,20 @@ +'use strict'; + +import alt from '../alt'; +import LoanContractActions from '../actions/loan_contract_actions'; + + +class LoanContractStore { + constructor() { + this.contractKey = null; + this.contractUrl = null; + this.bindActions(LoanContractActions); + } + + onUpdateLoanContract({contractKey, contractUrl}) { + this.contractKey = contractKey; + this.contractUrl = contractUrl; + } +} + +export default alt.createStore(LoanContractStore, 'LoanContractStore'); diff --git a/sass/ascribe_settings.scss b/sass/ascribe_settings.scss index 8dd0b169..c08d1114 100644 --- a/sass/ascribe_settings.scss +++ b/sass/ascribe_settings.scss @@ -96,7 +96,7 @@ margin-top: 0 !important; } - > input, > pre, > textarea, > select { + > input, > pre, > textarea, > select, .datepicker__input { font-weight: 400; font-size: 1.1em; width:100%; @@ -105,6 +105,7 @@ background-color: rgba(0,0,0,0); color: rgba(0,0,0,.8); padding-left: 0; + box-shadow: none; &:focus { border:0; diff --git a/sass/main.scss b/sass/main.scss index 462810fc..e1daabd2 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -234,18 +234,6 @@ hr { font-style: italic; } -.input-text-ascribe, -.datepicker__input { - border-bottom: 1px solid black; - border-top: 0; - border-left: 0; - border-right: 0; - background: transparent; - border-radius: 0 !important; - box-shadow: none; - width: 100%; -} - .textarea-ascribe-message { height: 13em !important; }