refactor input textarea to use disabled instead of editable

js/components/ascribe_detail/note.js

@@ -44,14 +44,13 @@ let Note = React.createClass({
                 <Form
                     url={this.props.url}
                     getFormData={this.props.id}
-                    handleSuccess={this.showNotification}>
+                    handleSuccess={this.showNotification}
+                    disabled={!this.props.editable}>
                     <Property
                         name='note'
-                        label={this.props.label}
+                        label={this.props.label}>
-                        editable={this.props.editable}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={this.props.editable}
                             defaultValue={this.props.defaultValue}
                             placeholder={this.props.placeholder}/>
                     </Property>
@@ -63,4 +62,4 @@ let Note = React.createClass({
     }
 });
 
-export default Note
+export default Note;

js/components/ascribe_forms/form_consign.js

@@ -56,10 +56,10 @@ let ConsignForm = React.createClass({
                 <Property
                     name='consign_message'
                     label={getLangText('Personal Message')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>

js/components/ascribe_forms/form_contract_agreement.js

@@ -129,9 +129,11 @@ let ContractAgreementForm = React.createClass({
                         name='appendix'
                         checkboxLabel={getLangText('Add appendix to the contract')}>
                         <span>{getLangText('Appendix')}</span>
+                        {/* We're using disabled on a form here as PropertyCollapsible currently
+                        does not support the disabled + overrideForm functionality */}
                         <InputTextAreaToggable
                             rows={1}
-                            editable={true}
+                            disabled={false}
                             placeholder={getLangText('This will be appended to the contract selected above')}/>
                     </PropertyCollapsible>
                 </Form>

js/components/ascribe_forms/form_loan.js

@@ -256,10 +256,10 @@ let LoanForm = React.createClass({
                     name='loan_message'
                     label={getLangText('Personal Message')}
                     editable={true}
+                    overrideForm={true}
                     hidden={!this.props.showPersonalMessage}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required={this.props.showPersonalMessage ? 'required' : ''}/>

js/components/ascribe_forms/form_piece_extradata.js

@@ -41,14 +41,13 @@ let PieceExtraDataForm = React.createClass({
                 ref='form'
                 url={url}
                 handleSuccess={this.props.handleSuccess}
-                getFormData={this.getFormData}>
+                getFormData={this.getFormData}
+                disabled={!this.props.editable}>
                 <Property
                     name={this.props.name}
-                    label={this.props.title}
+                    label={this.props.title}>
-                    editable={this.props.editable}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={this.props.editable}
                         defaultValue={defaultValue}
                         placeholder={getLangText('Fill in%s', ' ') + this.props.title}
                         required="required"/>

js/components/ascribe_forms/form_register_piece.js

@@ -112,7 +112,7 @@ let RegisterPieceForm = React.createClass({
                         isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
                         isFineUploaderActive={this.props.isFineUploaderActive}
                         onLoggedOut={this.props.onLoggedOut}
-                        editable={this.props.isFineUploaderEditable}
+                        disabled={!this.props.isFineUploaderEditable}
                         enableLocalHashing={enableLocalHashing}/>
                 </Property>
                 <Property

js/components/ascribe_forms/form_share_email.js

@@ -60,10 +60,10 @@ let ShareForm = React.createClass({
                 <Property
                     name='share_message'
                     label='Personal Message'
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>

js/components/ascribe_forms/form_submit_to_prize.js

@@ -45,20 +45,20 @@ let PieceSubmitToPrizeForm = React.createClass({
                 <Property
                     name='artist_statement'
                     label={getLangText('Artist statement')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         placeholder={getLangText('Enter your statement')}
                         required="required"/>
                 </Property>
                 <Property
                     name='work_description'
                     label={getLangText('Work description')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         placeholder={getLangText('Enter the description for your work')}
                         required="required"/>
                 </Property>

js/components/ascribe_forms/form_transfer.js

@@ -61,10 +61,10 @@ let TransferForm = React.createClass({
                 <Property
                     name='transfer_message'
                     label={getLangText('Personal Message')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>

js/components/ascribe_forms/form_unconsign.js

@@ -50,10 +50,10 @@ let UnConsignForm = React.createClass({
                 <Property
                     name='unconsign_message'
                     label={getLangText('Personal Message')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>

js/components/ascribe_forms/form_unconsign_request.js

@@ -50,10 +50,10 @@ let UnConsignRequestForm = React.createClass({
                 <Property
                     name='unconsign_request_message'
                     label={getLangText('Personal Message')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         defaultValue={this.props.message}
                         placeholder={getLangText('Enter a message...')}
                         required="required"/>

js/components/ascribe_forms/input_fineuploader.js

@@ -8,12 +8,14 @@ import AppConstants from '../../constants/application_constants';
 
 import { getCookie } from '../../utils/fetch_api_utils';
 
-let InputFileUploader = React.createClass({
+let InputFineUploader = React.createClass({
     propTypes: {
         setIsUploadReady: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
         submitFileName: React.PropTypes.func,
 
+        areAssetsDownloadable: React.PropTypes.bool,
+
         onClick: React.PropTypes.func,
         keyRoutine: React.PropTypes.shape({
             url: React.PropTypes.string,
@@ -33,7 +35,7 @@ let InputFileUploader = React.createClass({
         // before login in
         isFineUploaderActive: React.PropTypes.bool,
         onLoggedOut: React.PropTypes.func,
-        editable: React.PropTypes.bool,
+
         enableLocalHashing: React.PropTypes.bool,
 
         // provided by Property
@@ -86,7 +88,7 @@ let InputFileUploader = React.createClass({
                 submitFile={this.submitFile}
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}
+                areAssetsDownloadable={this.props.areAssetsDownloadable}
                 areAssetsEditable={editable}
                 signature={{
                     endpoint: AppConstants.serverUrl + 's3/signature/',
@@ -109,4 +111,4 @@ let InputFileUploader = React.createClass({
     }
 });
 
-export default InputFileUploader;
+export default InputFineUploader;

js/components/ascribe_forms/input_textarea_toggable.js

@@ -7,7 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 
 let InputTextAreaToggable = React.createClass({
     propTypes: {
-        editable: React.PropTypes.bool.isRequired,
+        disabled: React.PropTypes.bool,
         rows: React.PropTypes.number.isRequired,
         required: React.PropTypes.string,
         defaultValue: React.PropTypes.string
@@ -54,7 +54,7 @@ let InputTextAreaToggable = React.createClass({
         let className = 'form-control ascribe-textarea';
         let textarea = null;
 
-        if(this.props.editable) {
+        if(!this.props.disabled) {
             className = className + ' ascribe-textarea-editable';
             textarea = (
                 <TextareaAutosize

js/components/coa_verify_container.js

@@ -84,10 +84,11 @@ let CoaVerifyForm = React.createClass({
                     </Property>
                     <Property
                         name='signature'
-                        label="Signature">
+                        label="Signature"
+                        editable={true}
+                        overrideForm={true}>
                         <InputTextAreaToggable
                             rows={3}
-                            editable={true}
                             placeholder={getLangText('Copy paste the signature on the bottom of your Certificate of Authenticity')}
                             required/>
                     </Property>

js/components/whitelabel/prize/components/ascribe_detail/prize_piece_container.js

@@ -426,10 +426,10 @@ let PrizePieceDetails = React.createClass({
                                 <Property
                                     name={data}
                                     label={label}
-                                    editable={false}>
+                                    editable={false}
+                                    overrideForm={true}>
                                     <InputTextAreaToggable
                                         rows={1}
-                                        editable={false}
                                         defaultValue={this.props.piece.extra_data[data]}/>
                                 </Property>);
                             }

js/components/whitelabel/prize/components/prize_register_piece.js

@@ -41,20 +41,20 @@ let PrizeRegisterPiece = React.createClass({
                 <Property
                     name='artist_statement'
                     label={getLangText('Artist statement')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         placeholder={getLangText('Enter your statement')}
                         required="required"/>
                 </Property>
                 <Property
                     name='work_description'
                     label={getLangText('Work description')}
-                    editable={true}>
+                    editable={true}
+                    overrideForm={true}>
                     <InputTextAreaToggable
                         rows={1}
-                        editable={true}
                         placeholder={getLangText('Enter the description for your work')}
                         required="required"/>
                 </Property>

js/components/whitelabel/wallet/components/cyland/ascribe_detail/cyland_piece_container.js

@@ -143,10 +143,10 @@ let CylandPieceDetails = React.createClass({
                                     key={i}
                                     name={data}
                                     label={label}
-                                    editable={false}>
+                                    editable={false}
+                                    overrideForm={true}>
                                     <InputTextAreaToggable
                                         rows={1}
-                                        editable={false}
                                         defaultValue={this.props.piece.extra_data[data]}/>
                                 </Property>);
                             }

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

@@ -92,21 +92,17 @@ let CylandAdditionalDataForm = React.createClass({
                     </div>
                     <Property
                         name='artist_bio'
-                        label={getLangText('Artist Biography')}
+                        label={getLangText('Artist Biography')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             placeholder={getLangText('Enter the artist\'s biography...')}
                             required="required"/>
                     </Property>
                     <Property
                         name='conceptual_overview'
-                        label={getLangText('Conceptual Overview')}
+                        label={getLangText('Conceptual Overview')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             placeholder={getLangText('Enter a conceptual overview...')}
                             required="required"/>
                     </Property>
@@ -115,7 +111,6 @@ let CylandAdditionalDataForm = React.createClass({
                         submitFile={this.submitFile}
                         setIsUploadReady={this.setIsUploadReady}
                         isReadyForFormSubmission={formSubmissionValidation.fileOptional}
-                        editable={!this.props.disabled}
                         pieceId={this.props.piece.id}
                         otherData={this.props.piece.other_data}
                         multiple={true}/>

js/components/whitelabel/wallet/components/ikonotv/ascribe_detail/ikonotv_piece_container.js

@@ -185,7 +185,9 @@ let IkonotvPieceDetails = React.createClass({
                     title={getLangText('Further Details')}
                     show={true}
                     defaultExpanded={true}>
-                    <Form ref='form'>
+                    <Form
+                        ref='form'
+                        disabled={!this.props.piece.acl.acl_edit}>
                         {Object.keys(this.props.piece.extra_data).map((data, i) => {
                             let label = data.replace('_', ' ');
                             return (
@@ -193,11 +195,9 @@ let IkonotvPieceDetails = React.createClass({
                                     key={i}
                                     name={data}
                                     label={label}
-                                    hidden={!this.props.piece.extra_data[data]}
+                                    hidden={!this.props.piece.extra_data[data]}>
-                                    editable={false}>
                                     <InputTextAreaToggable
                                         rows={1}
-                                        editable={false}
                                         defaultValue={this.props.piece.extra_data[data]}/>
                                 </Property>);
                             }

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artist_details_form.js

@@ -91,41 +91,33 @@ let IkonotvArtistDetailsForm = React.createClass({
                     </div>
                     <Property
                         name='artist_website'
-                        label={getLangText('Artist Website')}
+                        label={getLangText('Artist Website')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.artist_website}
                             placeholder={getLangText('The artist\'s website if present...')}/>
                     </Property>
                     <Property
                         name='gallery_website'
-                        label={getLangText('Website of related Gallery, Museum, etc.')}
+                        label={getLangText('Website of related Gallery, Museum, etc.')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.gallery_website}
                             placeholder={getLangText('The website of any related Gallery or Museum')}/>
                     </Property>
                     <Property
                         name='additional_websites'
-                        label={getLangText('Additional Websites/Publications')}
+                        label={getLangText('Additional Websites/Publications')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.additional_websites}
                             placeholder={getLangText('Enter additional Websites/Publications if any')}/>
                     </Property>
                     <Property
                         name='conceptual_overview'
-                        label={getLangText('Short text about the Artist')}
+                        label={getLangText('Short text about the Artist')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.conceptual_overview}
                             placeholder={getLangText('Enter a short bio about the Artist')}
                             />

js/components/whitelabel/wallet/components/ikonotv/ascribe_forms/ikonotv_artwork_details_form.js

@@ -89,61 +89,49 @@ let IkonotvArtworkDetailsForm = React.createClass({
                     </div>
                     <Property
                         name='medium'
-                        label={getLangText('Medium')}
+                        label={getLangText('Medium')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.medium}
                             placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
                     </Property>
                     <Property
                         name='size_duration'
-                        label={getLangText('Size/Duration')}
+                        label={getLangText('Size/Duration')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.size_duration}
                             placeholder={getLangText('The size of the file in MB or the duration of the movie')}/>
                     </Property>
                     <Property
                         name='copyright'
-                        label={getLangText('Copyright')}
+                        label={getLangText('Copyright')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.copyright}
                             placeholder={getLangText('Which copyright is attached to this work?')}/>
                     </Property>
                     <Property
                         name='courtesy_of'
-                        label={getLangText('Courtesy of')}
+                        label={getLangText('Courtesy of')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.courtesy_of}
                             placeholder={getLangText('The current owner of the artwork')}/>
                     </Property>
                     <Property
                         name='copyright_of_photography'
-                        label={getLangText('Copyright of Photography')}
+                        label={getLangText('Copyright of Photography')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.copyright_of_photography}
                             placeholder={getLangText('Who should be attributed for the photography?')}/>
                     </Property>
                     <Property
                         name='additional_details'
-                        label={getLangText('Additional Details about the artwork')}
+                        label={getLangText('Additional Details about the artwork')}>
-                        editable={!this.props.disabled}>
                         <InputTextAreaToggable
                             rows={1}
-                            editable={!this.props.disabled}
                             defaultValue={this.props.piece.extra_data.additional_details}
                             placeholder={getLangText('Insert artwork overview')}/>
                     </Property>