1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 09:50:31 +01:00
onion/js/components/ascribe_forms/form_create_contract.js
Brett Sun d23331d9b9 Remove ReactS3FineUploader's dependency on react-router's location
ReactS3FineUploader used to check the current url’s query params to
determine which method it should use to upload, but this decision means
the component is tightly coupled with react-router and history.js. A
major pain point is having to propagate the location prop all the way
down to this component even when it’s not necessary.

Now, ReactS3FineUploader’s parent elements can either parse the current
query params themselves or, if they have a location from react-router,
simply use the location.

Added a few utils to help parse url params.
2015-10-30 17:43:20 +01:00

112 lines
3.8 KiB
JavaScript

'use strict';
import React from 'react';
import Form from '../ascribe_forms/form';
import Property from '../ascribe_forms/property';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import ContractListActions from '../../actions/contract_list_actions';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import InputFineUploader from './input_fineuploader';
import { getLangText } from '../../utils/lang_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
let CreateContractForm = React.createClass({
propTypes: {
isPublic: React.PropTypes.bool,
// A class of a file the user has to upload
// Needs to be defined both in singular as well as in plural
fileClassToUpload: React.PropTypes.shape({
singular: React.PropTypes.string,
plural: React.PropTypes.string
})
},
getInitialState() {
return {
isUploadReady: false,
contractName: ''
};
},
setIsUploadReady(isReady) {
this.setState({
isUploadReady: isReady
});
},
handleCreateSuccess(response) {
ContractListActions.fetchContractList(true);
let notification = new GlobalNotificationModel(getLangText('Contract %s successfully created', response.name), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.refs.form.reset();
},
submitFileName(fileName) {
this.setState({
contractName: fileName
});
this.refs.form.submit();
},
render() {
return (
<Form
ref='form'
url={ApiUrls.ownership_contract_list}
handleSuccess={this.handleCreateSuccess}>
<Property
name="blob"
label={getLangText('Contract file (*.pdf only, max. 50MB per contract)')}>
<InputFineUploader
submitFileName={this.submitFileName}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
areAssetsDownloadable={true}
areAssetsEditable={true}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
fileClassToUpload={this.props.fileClassToUpload} />
</Property>
<Property
name='name'
label={getLangText('Contract name')}
hidden={true}>
<input
type="text"
value={this.state.contractName}/>
</Property>
<Property
name="is_public"
hidden={true}>
<input
type="checkbox"
value={this.props.isPublic} />
</Property>
</Form>
);
}
});
export default CreateContractForm;