mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 13:41:57 +02:00
otherdata and extradata on a piece level and templated in frontend
This commit is contained in:
diminator
parent
8ac26275f5
commit
9fd4c1a6fd
|
|
@ -23,14 +23,14 @@ import EditionDetailProperty from './detail_property';
|
|||
import InputTextAreaToggable from './../ascribe_forms/input_textarea_toggable';
|
||||
|
||||
import EditionHeader from './header';
|
||||
import EditionFurtherDetails from './further_details';
|
||||
|
||||
import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
|
||||
//import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
|
||||
import RequestActionForm from './../ascribe_forms/form_request_action';
|
||||
|
||||
import EditionActions from '../../actions/edition_actions';
|
||||
import AclButtonList from './../ascribe_buttons/acl_button_list';
|
||||
|
||||
import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
|
||||
//import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
|
||||
|
||||
import GlobalNotificationModel from '../../models/global_notification_model';
|
||||
import GlobalNotificationActions from '../../actions/global_notification_actions';
|
||||
|
|
@ -100,8 +100,11 @@ let Edition = React.createClass({
|
|||
|| Object.keys(this.props.edition.extra_data).length > 0
|
||||
|| this.props.edition.other_data !== null}>
|
||||
<EditionFurtherDetails
|
||||
handleSuccess={this.props.loadEdition}
|
||||
edition={this.props.edition}/>
|
||||
editable={this.props.edition.acl.indexOf('edit') > -1}
|
||||
pieceId={this.props.edition.parent}
|
||||
extraData={this.props.edition.extra_data}
|
||||
otherData={this.props.edition.other_data}
|
||||
handleSuccess={this.props.loadEdition}/>
|
||||
</CollapsibleParagraph>
|
||||
|
||||
<CollapsibleParagraph
|
||||
|
|
@ -329,155 +332,155 @@ let EditionPublicEditionNote = React.createClass({
|
|||
});
|
||||
|
||||
|
||||
let EditionFurtherDetails = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object,
|
||||
handleSuccess: React.PropTypes.func
|
||||
},
|
||||
|
||||
getInitialState() {
|
||||
return {
|
||||
loading: false
|
||||
};
|
||||
},
|
||||
|
||||
showNotification(){
|
||||
this.props.handleSuccess();
|
||||
let notification = new GlobalNotificationModel('Details updated', 'success');
|
||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
},
|
||||
|
||||
submitKey(key){
|
||||
this.setState({
|
||||
otherDataKey: key
|
||||
});
|
||||
},
|
||||
|
||||
setIsUploadReady(isReady) {
|
||||
this.setState({
|
||||
isUploadReady: isReady
|
||||
});
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
},
|
||||
|
||||
render() {
|
||||
let editable = this.props.edition.acl.indexOf('edit') > -1;
|
||||
|
||||
return (
|
||||
<Row>
|
||||
<Col md={12} className="ascribe-edition-personal-note">
|
||||
<PieceExtraDataForm
|
||||
name='artist_contact_info'
|
||||
title='Artist Contact Info'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={editable}
|
||||
edition={this.props.edition} />
|
||||
<PieceExtraDataForm
|
||||
name='display_instructions'
|
||||
title='Display Instructions'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={editable}
|
||||
edition={this.props.edition} />
|
||||
<PieceExtraDataForm
|
||||
name='technology_details'
|
||||
title='Technology Details'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={editable}
|
||||
edition={this.props.edition} />
|
||||
<FileUploader
|
||||
submitKey={this.submitKey}
|
||||
setIsUploadReady={this.setIsUploadReady}
|
||||
isReadyForFormSubmission={this.isReadyForFormSubmission}
|
||||
editable={editable}
|
||||
edition={this.props.edition}/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
let FileUploader = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object,
|
||||
setIsUploadReady: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func,
|
||||
editable: React.PropTypes.bool
|
||||
},
|
||||
|
||||
render() {
|
||||
// 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 (
|
||||
<Form>
|
||||
<Property
|
||||
label="Additional files">
|
||||
<ReactS3FineUploader
|
||||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'otherdata',
|
||||
bitcoinId: this.props.edition.bitcoin_id
|
||||
}}
|
||||
createBlobRoutine={{
|
||||
url: apiUrls.blob_otherdatas,
|
||||
bitcoinId: this.props.edition.bitcoin_id
|
||||
}}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
sizeLimit: '10000000'
|
||||
}}
|
||||
submitKey={this.props.submitKey}
|
||||
setIsUploadReady={this.props.setIsUploadReady}
|
||||
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
|
||||
session={{
|
||||
endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
},
|
||||
params: {
|
||||
'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
|
||||
},
|
||||
cors: {
|
||||
expected: true,
|
||||
sendCredentials: true
|
||||
}
|
||||
}}
|
||||
signature={{
|
||||
endpoint: AppConstants.serverUrl + 's3/signature/',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
}}
|
||||
deleteFile={{
|
||||
enabled: true,
|
||||
method: 'DELETE',
|
||||
endpoint: AppConstants.serverUrl + 's3/delete',
|
||||
customHeaders: {
|
||||
'X-CSRFToken': getCookie('csrftoken')
|
||||
}
|
||||
}}
|
||||
areAssetsDownloadable={true}
|
||||
areAssetsEditable={this.props.editable}/>
|
||||
</Property>
|
||||
<hr />
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
});
|
||||
//let EditionFurtherDetails = React.createClass({
|
||||
// propTypes: {
|
||||
// edition: React.PropTypes.object,
|
||||
// handleSuccess: React.PropTypes.func
|
||||
// },
|
||||
//
|
||||
// getInitialState() {
|
||||
// return {
|
||||
// loading: false
|
||||
// };
|
||||
// },
|
||||
//
|
||||
// showNotification(){
|
||||
// this.props.handleSuccess();
|
||||
// let notification = new GlobalNotificationModel('Details updated', 'success');
|
||||
// GlobalNotificationActions.appendGlobalNotification(notification);
|
||||
// },
|
||||
//
|
||||
// submitKey(key){
|
||||
// this.setState({
|
||||
// otherDataKey: key
|
||||
// });
|
||||
// },
|
||||
//
|
||||
// setIsUploadReady(isReady) {
|
||||
// this.setState({
|
||||
// isUploadReady: isReady
|
||||
// });
|
||||
// },
|
||||
//
|
||||
// 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;
|
||||
// }
|
||||
// },
|
||||
//
|
||||
// render() {
|
||||
// let editable = this.props.edition.acl.indexOf('edit') > -1;
|
||||
//
|
||||
// return (
|
||||
// <Row>
|
||||
// <Col md={12} className="ascribe-edition-personal-note">
|
||||
// <PieceExtraDataForm
|
||||
// name='artist_contact_info'
|
||||
// title='Artist Contact Info'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.edition} />
|
||||
// <PieceExtraDataForm
|
||||
// name='display_instructions'
|
||||
// title='Display Instructions'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.edition} />
|
||||
// <PieceExtraDataForm
|
||||
// name='technology_details'
|
||||
// title='Technology Details'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.edition} />
|
||||
// <FileUploader
|
||||
// submitKey={this.submitKey}
|
||||
// setIsUploadReady={this.setIsUploadReady}
|
||||
// isReadyForFormSubmission={this.isReadyForFormSubmission}
|
||||
// editable={editable}
|
||||
// content={this.props.edition}/>
|
||||
// </Col>
|
||||
// </Row>
|
||||
// );
|
||||
// }
|
||||
//});
|
||||
//
|
||||
//let FileUploader = React.createClass({
|
||||
// propTypes: {
|
||||
// edition: React.PropTypes.object,
|
||||
// setIsUploadReady: React.PropTypes.func,
|
||||
// submitKey: React.PropTypes.func,
|
||||
// isReadyForFormSubmission: React.PropTypes.func,
|
||||
// editable: React.PropTypes.bool
|
||||
// },
|
||||
//
|
||||
// render() {
|
||||
// // 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 (
|
||||
// <Form>
|
||||
// <Property
|
||||
// label="Additional files">
|
||||
// <ReactS3FineUploader
|
||||
// keyRoutine={{
|
||||
// url: AppConstants.serverUrl + 's3/key/',
|
||||
// fileClass: 'otherdata',
|
||||
// bitcoinId: this.props.edition.bitcoin_id
|
||||
// }}
|
||||
// createBlobRoutine={{
|
||||
// url: apiUrls.blob_otherdatas,
|
||||
// bitcoinId: this.props.edition.bitcoin_id
|
||||
// }}
|
||||
// validation={{
|
||||
// itemLimit: 100000,
|
||||
// sizeLimit: '10000000'
|
||||
// }}
|
||||
// submitKey={this.props.submitKey}
|
||||
// setIsUploadReady={this.props.setIsUploadReady}
|
||||
// isReadyForFormSubmission={this.props.isReadyForFormSubmission}
|
||||
// session={{
|
||||
// endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
|
||||
// customHeaders: {
|
||||
// 'X-CSRFToken': getCookie('csrftoken')
|
||||
// },
|
||||
// params: {
|
||||
// 'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
|
||||
// },
|
||||
// cors: {
|
||||
// expected: true,
|
||||
// sendCredentials: true
|
||||
// }
|
||||
// }}
|
||||
// signature={{
|
||||
// endpoint: AppConstants.serverUrl + 's3/signature/',
|
||||
// customHeaders: {
|
||||
// 'X-CSRFToken': getCookie('csrftoken')
|
||||
// }
|
||||
// }}
|
||||
// deleteFile={{
|
||||
// enabled: true,
|
||||
// method: 'DELETE',
|
||||
// endpoint: AppConstants.serverUrl + 's3/delete',
|
||||
// customHeaders: {
|
||||
// 'X-CSRFToken': getCookie('csrftoken')
|
||||
// }
|
||||
// }}
|
||||
// areAssetsDownloadable={true}
|
||||
// areAssetsEditable={this.props.editable}/>
|
||||
// </Property>
|
||||
// <hr />
|
||||
// </Form>
|
||||
// );
|
||||
// }
|
||||
//});
|
||||
|
||||
let CoaDetails = React.createClass({
|
||||
propTypes: {
|
||||
|
|
|
|||
|
|
@ -23,7 +23,10 @@ import { getCookie } from '../../utils/fetch_api_utils';
|
|||
|
||||
let FurtherDetails = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.object,
|
||||
editable: React.PropTypes.bool,
|
||||
pieceId: React.PropTypes.int,
|
||||
extraData: React.PropTypes.object,
|
||||
otherData: React.PropTypes.object,
|
||||
handleSuccess: React.PropTypes.func
|
||||
},
|
||||
|
||||
|
|
@ -61,44 +64,49 @@ let FurtherDetails = React.createClass({
|
|||
},
|
||||
|
||||
render() {
|
||||
let editable = this.props.content.acl.indexOf('edit') > -1;
|
||||
return (<span />);
|
||||
//return (
|
||||
// <Row>
|
||||
// <Col md={12} className="ascribe-edition-personal-note">
|
||||
// <PieceExtraDataForm
|
||||
// name='artist_contact_info'
|
||||
// title='Artist Contact Info'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.content} />
|
||||
// <PieceExtraDataForm
|
||||
// name='display_instructions'
|
||||
// title='Display Instructions'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.content} />
|
||||
// <PieceExtraDataForm
|
||||
// name='technology_details'
|
||||
// title='Technology Details'
|
||||
// handleSuccess={this.showNotification}
|
||||
// editable={editable}
|
||||
// content={this.props.content} />
|
||||
// <FileUploader
|
||||
// submitKey={this.submitKey}
|
||||
// setIsUploadReady={this.setIsUploadReady}
|
||||
// isReadyForFormSubmission={this.isReadyForFormSubmission}
|
||||
// editable={editable}
|
||||
// content={this.props.content}/>
|
||||
// </Col>
|
||||
// </Row>
|
||||
//);
|
||||
//return (<span />);
|
||||
return (
|
||||
<Row>
|
||||
<Col md={12} className="ascribe-edition-personal-note">
|
||||
<PieceExtraDataForm
|
||||
name='artist_contact_info'
|
||||
title='Artist Contact Info'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={this.props.editable}
|
||||
pieceId={this.props.pieceId}
|
||||
extraData={this.props.extraData}
|
||||
/>
|
||||
<PieceExtraDataForm
|
||||
name='display_instructions'
|
||||
title='Display Instructions'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={this.props.editable}
|
||||
pieceId={this.props.pieceId}
|
||||
extraData={this.props.extraData} />
|
||||
<PieceExtraDataForm
|
||||
name='technology_details'
|
||||
title='Technology Details'
|
||||
handleSuccess={this.showNotification}
|
||||
editable={this.props.editable}
|
||||
pieceId={this.props.pieceId}
|
||||
extraData={this.props.extraData} />
|
||||
<FileUploader
|
||||
submitKey={this.submitKey}
|
||||
setIsUploadReady={this.setIsUploadReady}
|
||||
isReadyForFormSubmission={this.isReadyForFormSubmission}
|
||||
editable={this.props.editable}
|
||||
pieceId={this.props.pieceId}
|
||||
otherData={this.props.otherData}/>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
let FileUploader = React.createClass({
|
||||
propTypes: {
|
||||
content: React.PropTypes.object,
|
||||
pieceId: React.PropTypes.int,
|
||||
otherData: React.PropTypes.object,
|
||||
setIsUploadReady: React.PropTypes.func,
|
||||
submitKey: React.PropTypes.func,
|
||||
isReadyForFormSubmission: React.PropTypes.func,
|
||||
|
|
@ -111,7 +119,7 @@ let FileUploader = React.createClass({
|
|||
// 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.content.other_data){
|
||||
if (!this.props.editable && !this.props.otherData){
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
|
|
@ -122,11 +130,11 @@ let FileUploader = React.createClass({
|
|||
keyRoutine={{
|
||||
url: AppConstants.serverUrl + 's3/key/',
|
||||
fileClass: 'otherdata',
|
||||
bitcoinId: this.props.content.bitcoin_id
|
||||
pieceId: this.props.pieceId
|
||||
}}
|
||||
createBlobRoutine={{
|
||||
url: apiUrls.blob_otherdatas,
|
||||
bitcoinId: this.props.content.bitcoin_id
|
||||
pieceId: this.props.pieceId
|
||||
}}
|
||||
validation={{
|
||||
itemLimit: 100000,
|
||||
|
|
@ -141,7 +149,7 @@ let FileUploader = React.createClass({
|
|||
'X-CSRFToken': getCookie('csrftoken')
|
||||
},
|
||||
params: {
|
||||
'pk': this.props.content.other_data ? this.props.content.other_data.id : null
|
||||
'pk': this.props.otherData ? this.props.otherData.id : null
|
||||
},
|
||||
cors: {
|
||||
expected: true,
|
||||
|
|
|
|||
|
|
@ -58,8 +58,11 @@ let Piece = React.createClass({
|
|||
|| Object.keys(this.props.piece.extra_data).length > 0
|
||||
|| this.props.piece.other_data !== null}>
|
||||
<FurtherDetails
|
||||
handleSuccess={this.props.loadPiece}
|
||||
content={this.props.piece}/>
|
||||
editable={this.props.piece.acl.indexOf('edit') > -1}
|
||||
pieceId={this.props.piece.id}
|
||||
extraData={this.props.piece.extra_data}
|
||||
otherData={this.props.piece.other_data}
|
||||
handleSuccess={this.props.loadPiece}/>
|
||||
</CollapsibleParagraph>
|
||||
|
||||
</Col>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,8 @@ import InputTextAreaToggable from './input_textarea_toggable';
|
|||
|
||||
let PieceExtraDataForm = React.createClass({
|
||||
propTypes: {
|
||||
edition: React.PropTypes.object,
|
||||
pieceId: React.PropTypes.int,
|
||||
extraData: React.PropTypes.object,
|
||||
handleSuccess: React.PropTypes.func,
|
||||
name: React.PropTypes.string,
|
||||
title: React.PropTypes.string,
|
||||
|
|
@ -22,16 +23,16 @@ let PieceExtraDataForm = React.createClass({
|
|||
let extradata = {};
|
||||
extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
|
||||
return {
|
||||
bitcoin_id: this.props.edition.bitcoin_id,
|
||||
extradata: extradata
|
||||
extradata: extradata,
|
||||
piece_id: this.props.pieceId
|
||||
};
|
||||
},
|
||||
render() {
|
||||
let defaultValue = this.props.edition.extra_data[this.props.name] || '';
|
||||
let defaultValue = this.props.extraData[this.props.name] || '';
|
||||
if (defaultValue.length === 0 && !this.props.editable){
|
||||
return null;
|
||||
}
|
||||
let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.edition.bitcoin_id});
|
||||
let url = requests.prepareUrl(apiUrls.piece_extradata, {piece_id: this.props.pieceId});
|
||||
return (
|
||||
<Form
|
||||
ref='form'
|
||||
|
|
@ -43,15 +44,12 @@ let PieceExtraDataForm = React.createClass({
|
|||
label={this.props.title}
|
||||
editable={this.props.editable}>
|
||||
<InputTextAreaToggable
|
||||
rows={3}
|
||||
rows={1}
|
||||
editable={this.props.editable}
|
||||
defaultValue={defaultValue}
|
||||
placeholder={'Fill in ' + this.props.title}
|
||||
required/>
|
||||
</Property>
|
||||
<Property hidden={true} name='bitcoin_id'>
|
||||
<input defaultValue={this.props.edition.bitcoin_id}/>
|
||||
</Property>
|
||||
<hr />
|
||||
</Form>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -23,11 +23,11 @@ var ReactS3FineUploader = React.createClass({
|
|||
keyRoutine: React.PropTypes.shape({
|
||||
url: React.PropTypes.string,
|
||||
fileClass: React.PropTypes.string,
|
||||
bitcoinId: React.PropTypes.string
|
||||
pieceId: React.PropTypes.string
|
||||
}),
|
||||
createBlobRoutine: React.PropTypes.shape({
|
||||
url: React.PropTypes.string,
|
||||
bitcoinId: React.PropTypes.string
|
||||
pieceId: React.PropTypes.string
|
||||
}),
|
||||
submitKey: React.PropTypes.func,
|
||||
autoUpload: React.PropTypes.bool,
|
||||
|
|
@ -206,7 +206,7 @@ var ReactS3FineUploader = React.createClass({
|
|||
body: JSON.stringify({
|
||||
'filename': filename,
|
||||
'file_class': this.props.keyRoutine.fileClass,
|
||||
'bitcoin_id': this.props.keyRoutine.bitcoinId
|
||||
'piece_id': this.props.keyRoutine.pieceId
|
||||
})
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
@ -275,7 +275,7 @@ var ReactS3FineUploader = React.createClass({
|
|||
body: JSON.stringify({
|
||||
'filename': file.name,
|
||||
'key': file.key,
|
||||
'bitcoin_id': this.props.createBlobRoutine.bitcoinId
|
||||
'bitcoin_id': this.props.createBlobRoutine.pieceId
|
||||
})
|
||||
})
|
||||
.then((res) => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user