ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-23 01:36:28 +02:00
Code Issues Releases Wiki Activity

generic form submission determination for fineuploader

Browse Source
This commit is contained in:
Tim Daubenschütz 2015-09-01 14:42:09 +02:00
parent b5b1e36109
commit b4abe7a245
6 changed files with 145 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/components/ascribe_detail/further_details.js
View File

@ -15,7 +15,7 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
import FurtherDetailsFileuploader from './further_details_fileuploader';
import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
let FurtherDetails = React.createClass({
propTypes: {
@ -80,7 +80,7 @@ let FurtherDetails = React.createClass({
<FurtherDetailsFileuploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
editable={this.props.editable}
overrideForm={true}
pieceId={this.props.pieceId}

102
js/components/ascribe_forms/form_create_contract.js Normal file
View File

@ -0,0 +1,102 @@
'use strict';
import React from 'react';
import Form from '../ascribe_forms/form';
import Property from '../ascribe_forms/property';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import { getLangText } from '../../utils/lang_utils';
import { getCookie } from '../../utils/fetch_api_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
let CreateContractForm = React.createClass({
getInitialState() {
return {
digitalWorkKey: null,
isUploadReady: false
};
},
submitKey(key) {
this.setState({
digitalWorkKey: key
});
},
setIsUploadReady(isReady) {
this.setState({
isUploadReady: isReady
});
},
render() {
return (
<Form
url={ApiUrls.ownership_contract}
buttons={
<button
type="submit"
className="btn ascribe-btn ascribe-btn-login"
disabled={!this.state.isUploadReady}>
{getLangText('Create new contract')}
</button>
}
spinner={
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
</span>
}>
<Property
label="Contract file">
<ReactS3FineUploader
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: 100000,
sizeLimit: '50000000'
}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
areAssetsDownloadable={true}
areAssetsEditable={true}
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}/>
</Property>
<Property
name='contract_ name'
label={getLangText('Contract name')}>
<input
type="text"
placeholder="(e.g. Loan agreement #1)"
required/>
</Property>
</Form>
);
}
});
export default CreateContractForm;

6
js/components/ascribe_forms/form_register_piece.js
View File

@ -16,7 +16,7 @@ import ApiUrls from '../../constants/api_urls';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
import { isReadyForFormSubmission } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
let RegisterPieceForm = React.createClass({
@ -115,7 +115,7 @@ let RegisterPieceForm = React.createClass({
<FileUploader
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isFineUploaderActive={this.props.isFineUploaderActive}
onLoggedOut={this.props.onLoggedOut}
editable={this.props.isFineUploaderEditable}
@ -192,11 +192,11 @@ let FileUploader = React.createClass({
createBlobRoutine={{
url: ApiUrls.blob_digitalworks
}}
submitKey={this.props.submitKey}
validation={{
itemLimit: 100000,
sizeLimit: '25000000000'
}}
submitKey={this.props.submitKey}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
areAssetsDownloadable={false}

63
js/components/ascribe_settings/contract_settings.js
View File

@ -2,17 +2,9 @@
import React from 'react';
import Form from '../ascribe_forms/form';
import Property from '../ascribe_forms/property';
import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
import CreateContractForm from '../ascribe_forms/form_create_contract';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
@ -26,56 +18,9 @@ let ContractSettings = React.createClass({
<CollapsibleParagraph
title={getLangText('Contract Settings')}
show={true}
defaultExpanded={this.props.defaultExpanded}>
<CollapsibleParagraph
title={getLangText('Create new Contract')}
show={true}
defaultExpanded={this.props.defaultExpanded}>
<Form>
<Property
label="Contract file">
<ReactS3FineUploader
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: 100000,
sizeLimit: '50000000'
}}
session={{
endpoint: ApiUrls.blob_contracts,
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
},
cors: {
expected: true,
sendCredentials: true
}
}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
areAssetsDownloadable={true}
areAssetsEditable={true}/>
</Property>
<hr />
</Form>
</CollapsibleParagraph>
defaultExpanded={true}>
{/* this should be this.props.defaultExpanded */}
<CreateContractForm />
</CollapsibleParagraph>
);
}

44
js/components/ascribe_uploader/react_s3_fine_uploader_utils.js
View File

@ -1,16 +1,34 @@
'use strict';
/**
* Returns a boolean if there has been at least one file uploaded
* successfully without it being deleted or canceled.
* @param {array of files} files provided by react fine uploader
* @return {Boolean}
*/
export function isReadyForFormSubmission(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if (files.length > 0 && files[0].status === 'upload successful') {
return true;
} else {
return false;
export const formSubmissionValidation = {
/**
* Returns a boolean if there has been at least one file uploaded
* successfully without it being deleted or canceled.
* @param {array of files} files provided by react fine uploader
* @return {boolean}
*/
atLeastOneUploadedFile(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if (files.length > 0 && files[0].status === 'upload successful') {
return true;
} else {
return false;
}
},
/**
* File submission for the form is optional, but if the user decides to submit a file
* the form is not ready until there are no more files currently uploading.
* @param {array of files} files files provided by react fine uploader
* @return {boolean} [description]
*/
fileOptional(files) {
let uploadingFiles = files.filter((file) => file.status === 'submitting');
if (uploadingFiles.length === 0) {
return true;
} else {
return false;
}
}
}
};

14
js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js
View File

@ -15,6 +15,8 @@ import AppConstants from '../../../../../../constants/application_constants';
import requests from '../../../../../../utils/requests';
import { getLangText } from '../../../../../../utils/lang_utils';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
let CylandAdditionalDataForm = React.createClass({
propTypes: {
@ -60,16 +62,6 @@ let CylandAdditionalDataForm = React.createClass({
});
},
isReadyForFormSubmission(files) {
let uploadingFiles = files.filter((file) => file.status === 'submitting');
if (uploadingFiles.length === 0) {
return true;
} else {
return false;
}
},
render() {
if(this.props.piece && this.props.piece.id) {
return (
@ -122,7 +114,7 @@ let CylandAdditionalDataForm = React.createClass({
uploadStarted={this.uploadStarted}
submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
editable={!this.props.disabled}
pieceId={this.props.piece.id}
otherData={this.props.piece.other_data}