diff --git a/docs/refactor-todo.md b/docs/refactor-todo.md index 76fdec19..8554f001 100644 --- a/docs/refactor-todo.md +++ b/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 diff --git a/js/components/ascribe_uploader/file_drag_and_drop.js b/js/components/ascribe_uploader/file_drag_and_drop.js index 28c87677..6620c0f1 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop.js +++ b/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}/> ); } + if(this.props.areAssetsEditable) { + removeBtn = (
+
); + } + return (
-
-
+ {removeBtn} {previewElement}
); diff --git a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js b/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js index 896d9f1f..39ee67f7 100644 --- a/js/components/ascribe_uploader/file_drag_and_drop_preview_iterator.js +++ b/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; diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 2d6928df..8ab83d9a 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/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} /> ); } diff --git a/js/components/edition.js b/js/components/edition.js index fad29f38..1d61258f 100644 --- a/js/components/edition.js +++ b/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 ( @@ -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}/>
diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 44fc61b4..6003d70c 100644 --- a/js/components/register_piece.js +++ b/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}/> ); } });