add editable acl to react s3 fineuploader

docs/refactor-todo.md

@@ -2,7 +2,7 @@
 
 *This should be a living document. So if you have any ideas for refactoring stuff, then feel free to add them to this document*
 
-- Get rid of all Mixins.
+- Get rid of all Mixins. (making good progress there :))
 - Make all standalone components independent from things like global utilities (GeneralUtils is maybe used in table for example)
 - Check if all polyfills are appropriately initialized and available: Compare to this
 - Extract all standalone components to their own folder structure and write application independent tests (+ figure out how to do that in a productive way) (fetch lib especially)
@@ -11,3 +11,8 @@
 queryParams of the piece_list_store should all be reflected in the url and not a single component each should manipulate the URL bar (refactor pagination, use actions and state)
 - Refactor string-templating for api_urls
 - Use classNames plugin instead of if-conditional-classes
+
+## React-S3-Fineuploader
+- implementation should enable to define all important methods outside
+- and: maybe create a utility class for all methods to avoid code duplication
+- filesToUpload CRUD methods are dirty

js/components/ascribe_uploader/file_drag_and_drop.js

@@ -4,8 +4,6 @@ import React from 'react';
 import FileDragAndDropPreviewIterator from './file_drag_and_drop_preview_iterator';
 
 
-let ReactTestUtils = React.addons.TestUtils;
-
 // Taken from: https://github.com/fedosejev/react-file-drag-and-drop
 let FileDragAndDrop = React.createClass({
     propTypes: {
@@ -25,7 +23,8 @@ let FileDragAndDrop = React.createClass({
         handleResumeFile: React.PropTypes.func,
         multiple: React.PropTypes.bool,
         dropzoneInactive: React.PropTypes.bool,
-        areAssetsDownloadable: React.PropTypes.bool
+        areAssetsDownloadable: React.PropTypes.bool,
+        areAssetsEditable: React.PropTypes.bool
     },
 
     handleDragStart(event) {
@@ -156,7 +155,8 @@ let FileDragAndDrop = React.createClass({
                         handleCancelFile={this.handleCancelFile}
                         handlePauseFile={this.handlePauseFile}
                         handleResumeFile={this.handleResumeFile}
-                        areAssetsDownloadable={this.props.areAssetsDownloadable}/>
+                        areAssetsDownloadable={this.props.areAssetsDownloadable}
+                        areAssetsEditable={this.props.areAssetsEditable}/>
                     <input
                         multiple={this.props.multiple}
                         ref="fileinput"

js/components/ascribe_uploader/file_drag_and_drop_preview.js

@@ -17,7 +17,8 @@ let FileDragAndDropPreview = React.createClass({
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
-        areAssetsDownloadable: React.PropTypes.bool
+        areAssetsDownloadable: React.PropTypes.bool,
+        areAssetsEditable: React.PropTypes.bool
     },
 
     toggleUploadProcess() {
@@ -48,6 +49,7 @@ let FileDragAndDropPreview = React.createClass({
 
     render() {
         let previewElement;
+        let removeBtn;
 
         // Decide whether an image or a placeholder picture should be displayed
         if(this.props.file.type.split('/')[0] === 'image') {
@@ -68,12 +70,16 @@ let FileDragAndDropPreview = React.createClass({
                                 downloadUrl={this.props.file.s3UrlSafe}/>);
         }
 
+        if(this.props.areAssetsEditable) {
+           removeBtn = (<div className="delete-file">
+                            <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
+                        </div>);
+        }
+
         return (
             <div
                 className="file-drag-and-drop-position">
-                <div className="delete-file">
+                {removeBtn}
-                    <span className="glyphicon glyphicon-remove text-center" aria-hidden="true" title="Remove file" onClick={this.handleDeleteFile}/>
-                </div>
                 {previewElement}
             </div>
         );

js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js

@@ -11,7 +11,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
         handleCancelFile: React.PropTypes.func,
         handlePauseFile: React.PropTypes.func,
         handleResumeFile: React.PropTypes.func,
-        areAssetsDownloadable: React.PropTypes.bool
+        areAssetsDownloadable: React.PropTypes.bool,
+        areAssetsEditable: React.PropTypes.bool
     },
 
     render() {
@@ -28,7 +29,8 @@ let FileDragAndDropPreviewIterator = React.createClass({
                                     handleCancelFile={this.props.handleCancelFile}
                                     handlePauseFile={this.props.handlePauseFile}
                                     handleResumeFile={this.props.handleResumeFile}
-                                    areAssetsDownloadable={this.props.areAssetsDownloadable}/>
+                                    areAssetsDownloadable={this.props.areAssetsDownloadable}
+                                    areAssetsEditable={this.props.areAssetsEditable}/>
                             );
                         } else {
                             return null;

js/components/ascribe_uploader/react_s3_fine_uploader.js

@@ -85,7 +85,8 @@ var ReactS3FineUploader = React.createClass({
         }),
         setIsUploadReady: React.PropTypes.func,
         isReadyForFormSubmission: React.PropTypes.func,
-        areAssetsDownloadable: React.PropTypes.bool
+        areAssetsDownloadable: React.PropTypes.bool,
+        areAssetsEditable: React.PropTypes.bool
     },
 
     getDefaultProps() {
@@ -278,6 +279,10 @@ var ReactS3FineUploader = React.createClass({
         .then((res) =>{
             if(res.otherdata) {
                 file.s3Url = res.otherdata.url_safe;
+                file.s3UrlSafe = res.otherdata.url_safe;
+            } else if(res.digitalwork) {
+                file.s3Url = res.digitalwork.url_safe;
+                file.s3UrlSafe = res.digitalwork.url_safe;
             } else {
                 throw new Error('Could not find a url to download.');
             }
@@ -519,7 +524,8 @@ var ReactS3FineUploader = React.createClass({
                     handleResumeFile={this.handleResumeFile}
                     multiple={this.props.multiple}
                     areAssetsDownloadable={this.props.areAssetsDownloadable}
-                    dropzoneInactive={!this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0} />
+                    areAssetsEditable={this.props.areAssetsEditable}
+                    dropzoneInactive={!this.props.areAssetsEditable || !this.props.multiple && this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1).length > 0} />
             </div>
         );
     }

js/components/edition.js

@@ -65,6 +65,8 @@ let Edition = React.createClass({
         this.setState(state);
     },
 
+
+
     render() {
         let thumbnail = this.props.edition.thumbnail;
         let mimetype = this.props.edition.digital_work.mime;
@@ -474,6 +476,7 @@ let EditionFurtherDetails = React.createClass({
 
     render() {
         let editable = this.props.edition.acl.indexOf('edit') > -1;
+
         return (
             <Row>
                 <Col md={12} className="ascribe-edition-personal-note">
@@ -512,11 +515,17 @@ let FileUploader = React.createClass({
         edition: React.PropTypes.object,
         setIsUploadReady: React.PropTypes.func,
         submitKey: React.PropTypes.func,
-        isReadyForFormSubmission: React.PropTypes.func
+        isReadyForFormSubmission: React.PropTypes.func,
+        editable: React.PropTypes.bool
     },
 
     render() {
-        if (!this.props.editable && this.props.edition.other_data === null){
+        // Essentially there a three cases important to the fileuploader
+        //
+        // 1. there is no other_data => do not show the fileuploader at all
+        // 2. there is other_data, but user has no edit rights => show fileuploader but without action buttons
+        // 3. both other_data and editable are defined or true => show fileuploade with all action buttons
+        if (!this.props.editable && !this.props.edition.other_data){
             return null;
         }
         return (
@@ -549,7 +558,8 @@ let FileUploader = React.createClass({
                                 'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
                             }
                         }}
-                        areAssetsDownloadable={true}/>
+                        areAssetsDownloadable={true}
+                        areAssetsEditable={this.props.editable}/>
                 </Property>
                 <hr />
             </Form>

js/components/register_piece.js

@@ -212,7 +212,8 @@ let FileUploader = React.createClass({
                 }}
                 setIsUploadReady={this.props.setIsUploadReady}
                 isReadyForFormSubmission={this.props.isReadyForFormSubmission}
-                areAssetsDownloadable={false}/>
+                areAssetsDownloadable={false}
+                areAssetsEditable={true}/>
         );
     }
 });