generic form submission determination for fineuploader

js/components/ascribe_detail/further_details.js

@@ -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}

js/components/ascribe_forms/form_create_contract.js

@@ -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;

js/components/ascribe_forms/form_register_piece.js

@@ -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}

js/components/ascribe_settings/contract_settings.js

@@ -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}>
+                defaultExpanded={true}>
-                <CollapsibleParagraph
+                {/* this should be this.props.defaultExpanded */}
-                    title={getLangText('Create new Contract')}
+                <CreateContractForm />
-                    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>
             </CollapsibleParagraph>
         );
     }

js/components/ascribe_uploader/react_s3_fine_uploader_utils.js

@@ -1,16 +1,34 @@
 'use strict';
 
+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}       
+     * @return {boolean}       
      */
-export function isReadyForFormSubmission(files) {
+    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;
         }
+    }
+};

js/components/whitelabel/wallet/components/cyland/ascribe_forms/cyland_additional_data_form.js

@@ -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}