ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 09:23:13 +01:00
Code Issues Releases Wiki Activity

Finalize InputContractAgreementCheckbox

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-12-04 12:06:08 +01:00
parent 0b79a55175
commit 3335032609
4 changed files with 52 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
js/components/ascribe_forms/form.js
View File

@ -131,7 +131,6 @@ let Form = React.createClass({
// An input can also provide an `Object` as a value
// which we're going to merge with `data` (overwrites)
if(ref.state.value.constructor === Object) {
console.log(ref.state.value);
Object.assign(data, ref.state.value);
} else {
data[ref.props.name] = ref.state.value;

60
js/components/ascribe_forms/input_contract_agreement_checkbox.js
View File

@ -74,7 +74,21 @@ const InputContractAgreementCheckbox = React.createClass({
state = mergeOptions(state, {
value: {
// If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
// is either:
//
// - fetching a already existing contract agreement; or
// - trying to create a contract agreement
//
// If both attempts result in `contractAgreement` being not defined,
// it means that the receiver hasn't defined a contract, which means
// a contract agreement cannot be created, which means we don't have to
// specify `contract_agreement_id` when sending a request to the server.
contract_agreement_id: contractAgreement ? contractAgreement.id : null,
// If the receiver hasn't set a contract or the contract was
// previously accepted, we set the terms to `true`
// as we always need to at least give a boolean value for `terms`
// to the API endpoint
terms: !contractAgreement || !!contractAgreement.datetime_accepted
}
});
@ -91,7 +105,7 @@ const InputContractAgreementCheckbox = React.createClass({
this.props.onChange(event);
},
getContractAgreement(contractAgreementList) {
getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
if (contractAgreementList && contractAgreementList.length > 0) {
return contractAgreementList[0];
}
@ -107,30 +121,22 @@ const InputContractAgreementCheckbox = React.createClass({
},
getAppendix() {
const { contractAgreementList } = this.state;
const contractAgreement = this.getContractAgreement();
if (contractAgreementList && contractAgreementList.length > 0) {
const appendix = contractAgreementList[0].appendix;
if (appendix && appendix.default) {
return (
<pre className="ascribe-pre">{appendix.default}</pre>
);
}
if (contractAgreement &&
contractAgreement.appendix &&
contractAgreement.appendix.default) {
return (
<div className="ascribe-property contract-appendix-form">
<p><span>{getLangText('Appendix')}</span></p>
<pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
</div>
);
}
},
getContractCheckbox() {
const { name,
disabled,
style } = this.props;
const { contractAgreementList } = this.state;
const contractAgreement = this.getContractAgreement(contractAgreementList);
const inputCheckboxProps = {
name,
disabled,
style,
onChange: this.onChange
};
const contractAgreement = this.getContractAgreement();
if(contractAgreement) {
const {
@ -145,19 +151,27 @@ const InputContractAgreementCheckbox = React.createClass({
return (
<div className="notification-contract-pdf">
<embed
className="loan-form"
className="embed-form"
src={contractUrl}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
<a href={contractUrl} target="_blank">
<span className="glyphicon glyphicon-download" aria-hidden="true" /> {getLangText('Download contract')}
</a>
</div>
);
} else {
const {
name,
disabled,
style } = this.props;
return (
<InputCheckbox
{...inputCheckboxProps}
name={name}
disabled={disabled}
style={style}
onChange={this.onChange}
key="terms_explicitly"
defaultChecked={false}>
<span>

13
js/components/ascribe_forms/property.js
View File

@ -42,7 +42,8 @@ const Property = React.createClass({
]),
style: object,
expanded: bool,
checkboxLabel: string
checkboxLabel: string,
autoFocus: bool
},
getDefaultProps() {
@ -75,6 +76,12 @@ const Property = React.createClass({
};
},
componentDidMount() {
if(this.props.autoFocus) {
this.handleFocus();
}
},
componentWillReceiveProps(nextProps) {
let childInput = this.refs.input;
@ -82,11 +89,11 @@ const Property = React.createClass({
//
// 1. Control its value from the outside completely (do not define `checkboxLabel`)
// 2. Let it be controlled from the inside (default value can be set though via `expanded`)
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
// set from the outside as a prop then(!!!))
//
// This handles case 1. and 3.
if(typeof nextProps.expanded === this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
this.setState({ expanded: nextProps.expanded });
}

13
sass/ascribe_notification_page.scss
View File

@ -31,18 +31,11 @@
margin-top: .5em;
margin-bottom: 1em;
.consign-form,
.loan-form {
margin-top: .5em;
&.embed-form {
height: 45vh;
}
}
.consign-form,
.loan-form {
height: 40vh;
}
.notification-contract-pdf-download {
text-align: left;
margin-left: 1em;
@ -72,3 +65,7 @@
width: 100%;
}
}
.ascribe-property.contract-appendix-form {
padding-left: 0;
}