ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2025-02-14 21:10:27 +01:00
Code Issues Releases Wiki Activity

otherdata and extradata on a piece level and templated in frontend

Browse Source
This commit is contained in:
diminator 2015-07-09 13:37:33 +01:00
parent 8ac26275f5
commit 9fd4c1a6fd
5 changed files with 219 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

309
js/components/ascribe_detail/edition.js
View File

@ -23,14 +23,14 @@ import EditionDetailProperty from './detail_property';
import InputTextAreaToggable from './../ascribe_forms/input_textarea_toggable'; import InputTextAreaToggable from './../ascribe_forms/input_textarea_toggable';
import EditionHeader from './header'; 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 RequestActionForm from './../ascribe_forms/form_request_action';
import EditionActions from '../../actions/edition_actions'; import EditionActions from '../../actions/edition_actions';
import AclButtonList from './../ascribe_buttons/acl_button_list'; 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 GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
@ -100,8 +100,11 @@ let Edition = React.createClass({
|| Object.keys(this.props.edition.extra_data).length > 0 || Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data !== null}> || this.props.edition.other_data !== null}>
<EditionFurtherDetails <EditionFurtherDetails
handleSuccess={this.props.loadEdition} editable={this.props.edition.acl.indexOf('edit') > -1}
edition={this.props.edition}/> pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data}
otherData={this.props.edition.other_data}
handleSuccess={this.props.loadEdition}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
@ -329,155 +332,155 @@ let EditionPublicEditionNote = React.createClass({
}); });
let EditionFurtherDetails = React.createClass({ //let EditionFurtherDetails = React.createClass({
propTypes: { // propTypes: {
edition: React.PropTypes.object, // edition: React.PropTypes.object,
handleSuccess: React.PropTypes.func // 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 // getInitialState() {
// 2. there is other_data, but user has no edit rights => show fileuploader but without action buttons // return {
// 3. both other_data and editable are defined or true => show fileuploade with all action buttons // loading: false
if (!this.props.editable && !this.props.edition.other_data){ // };
return null; // },
} //
return ( // showNotification(){
<Form> // this.props.handleSuccess();
<Property // let notification = new GlobalNotificationModel('Details updated', 'success');
label="Additional files"> // GlobalNotificationActions.appendGlobalNotification(notification);
<ReactS3FineUploader // },
keyRoutine={{ //
url: AppConstants.serverUrl + 's3/key/', // submitKey(key){
fileClass: 'otherdata', // this.setState({
bitcoinId: this.props.edition.bitcoin_id // otherDataKey: key
}} // });
createBlobRoutine={{ // },
url: apiUrls.blob_otherdatas, //
bitcoinId: this.props.edition.bitcoin_id // setIsUploadReady(isReady) {
}} // this.setState({
validation={{ // isUploadReady: isReady
itemLimit: 100000, // });
sizeLimit: '10000000' // },
}} //
submitKey={this.props.submitKey} // isReadyForFormSubmission(files) {
setIsUploadReady={this.props.setIsUploadReady} // files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
isReadyForFormSubmission={this.props.isReadyForFormSubmission} // if(files.length > 0 && files[0].status === 'upload successful') {
session={{ // return true;
endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/', // } else {
customHeaders: { // return false;
'X-CSRFToken': getCookie('csrftoken') // }
}, // },
params: { //
'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null // render() {
}, // let editable = this.props.edition.acl.indexOf('edit') > -1;
cors: { //
expected: true, // return (
sendCredentials: true // <Row>
} // <Col md={12} className="ascribe-edition-personal-note">
}} // <PieceExtraDataForm
signature={{ // name='artist_contact_info'
endpoint: AppConstants.serverUrl + 's3/signature/', // title='Artist Contact Info'
customHeaders: { // handleSuccess={this.showNotification}
'X-CSRFToken': getCookie('csrftoken') // editable={editable}
} // content={this.props.edition} />
}} // <PieceExtraDataForm
deleteFile={{ // name='display_instructions'
enabled: true, // title='Display Instructions'
method: 'DELETE', // handleSuccess={this.showNotification}
endpoint: AppConstants.serverUrl + 's3/delete', // editable={editable}
customHeaders: { // content={this.props.edition} />
'X-CSRFToken': getCookie('csrftoken') // <PieceExtraDataForm
} // name='technology_details'
}} // title='Technology Details'
areAssetsDownloadable={true} // handleSuccess={this.showNotification}
areAssetsEditable={this.props.editable}/> // editable={editable}
</Property> // content={this.props.edition} />
<hr /> // <FileUploader
</Form> // 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({ let CoaDetails = React.createClass({
propTypes: { propTypes: {

84
js/components/ascribe_detail/further_details.js
View File

@ -23,7 +23,10 @@ import { getCookie } from '../../utils/fetch_api_utils';
let FurtherDetails = React.createClass({ let FurtherDetails = React.createClass({
propTypes: { 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 handleSuccess: React.PropTypes.func
}, },
@ -61,44 +64,49 @@ let FurtherDetails = React.createClass({
}, },
render() { render() {
let editable = this.props.content.acl.indexOf('edit') > -1; //return (<span />);
return (<span />); return (
//return ( <Row>
// <Row> <Col md={12} className="ascribe-edition-personal-note">
// <Col md={12} className="ascribe-edition-personal-note"> <PieceExtraDataForm
// <PieceExtraDataForm name='artist_contact_info'
// name='artist_contact_info' title='Artist Contact Info'
// title='Artist Contact Info' handleSuccess={this.showNotification}
// handleSuccess={this.showNotification} editable={this.props.editable}
// editable={editable} pieceId={this.props.pieceId}
// content={this.props.content} /> extraData={this.props.extraData}
// <PieceExtraDataForm />
// name='display_instructions' <PieceExtraDataForm
// title='Display Instructions' name='display_instructions'
// handleSuccess={this.showNotification} title='Display Instructions'
// editable={editable} handleSuccess={this.showNotification}
// content={this.props.content} /> editable={this.props.editable}
// <PieceExtraDataForm pieceId={this.props.pieceId}
// name='technology_details' extraData={this.props.extraData} />
// title='Technology Details' <PieceExtraDataForm
// handleSuccess={this.showNotification} name='technology_details'
// editable={editable} title='Technology Details'
// content={this.props.content} /> handleSuccess={this.showNotification}
// <FileUploader editable={this.props.editable}
// submitKey={this.submitKey} pieceId={this.props.pieceId}
// setIsUploadReady={this.setIsUploadReady} extraData={this.props.extraData} />
// isReadyForFormSubmission={this.isReadyForFormSubmission} <FileUploader
// editable={editable} submitKey={this.submitKey}
// content={this.props.content}/> setIsUploadReady={this.setIsUploadReady}
// </Col> isReadyForFormSubmission={this.isReadyForFormSubmission}
// </Row> editable={this.props.editable}
//); pieceId={this.props.pieceId}
otherData={this.props.otherData}/>
</Col>
</Row>
);
} }
}); });
let FileUploader = React.createClass({ let FileUploader = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, pieceId: React.PropTypes.int,
otherData: React.PropTypes.object,
setIsUploadReady: React.PropTypes.func, setIsUploadReady: React.PropTypes.func,
submitKey: React.PropTypes.func, submitKey: React.PropTypes.func,
isReadyForFormSubmission: 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 // 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 // 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 // 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 null;
} }
return ( return (
@ -122,11 +130,11 @@ let FileUploader = React.createClass({
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'otherdata', fileClass: 'otherdata',
bitcoinId: this.props.content.bitcoin_id pieceId: this.props.pieceId
}} }}
createBlobRoutine={{ createBlobRoutine={{
url: apiUrls.blob_otherdatas, url: apiUrls.blob_otherdatas,
bitcoinId: this.props.content.bitcoin_id pieceId: this.props.pieceId
}} }}
validation={{ validation={{
itemLimit: 100000, itemLimit: 100000,
@ -141,7 +149,7 @@ let FileUploader = React.createClass({
'X-CSRFToken': getCookie('csrftoken') 'X-CSRFToken': getCookie('csrftoken')
}, },
params: { params: {
'pk': this.props.content.other_data ? this.props.content.other_data.id : null 'pk': this.props.otherData ? this.props.otherData.id : null
}, },
cors: { cors: {
expected: true, expected: true,

7
js/components/ascribe_detail/piece.js
View File

@ -58,8 +58,11 @@ let Piece = React.createClass({
|| Object.keys(this.props.piece.extra_data).length > 0 || Object.keys(this.props.piece.extra_data).length > 0
|| this.props.piece.other_data !== null}> || this.props.piece.other_data !== null}>
<FurtherDetails <FurtherDetails
handleSuccess={this.props.loadPiece} editable={this.props.piece.acl.indexOf('edit') > -1}
content={this.props.piece}/> pieceId={this.props.piece.id}
extraData={this.props.piece.extra_data}
otherData={this.props.piece.other_data}
handleSuccess={this.props.loadPiece}/>
</CollapsibleParagraph> </CollapsibleParagraph>
</Col> </Col>

16
js/components/ascribe_forms/form_piece_extradata.js
View File

@ -12,7 +12,8 @@ import InputTextAreaToggable from './input_textarea_toggable';
let PieceExtraDataForm = React.createClass({ let PieceExtraDataForm = React.createClass({
propTypes: { propTypes: {
edition: React.PropTypes.object, pieceId: React.PropTypes.int,
extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func, handleSuccess: React.PropTypes.func,
name: React.PropTypes.string, name: React.PropTypes.string,
title: React.PropTypes.string, title: React.PropTypes.string,
@ -22,16 +23,16 @@ let PieceExtraDataForm = React.createClass({
let extradata = {}; let extradata = {};
extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value; extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
return { return {
bitcoin_id: this.props.edition.bitcoin_id, extradata: extradata,
extradata: extradata piece_id: this.props.pieceId
}; };
}, },
render() { 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){ if (defaultValue.length === 0 && !this.props.editable){
return null; 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 ( return (
<Form <Form
ref='form' ref='form'
@ -43,15 +44,12 @@ let PieceExtraDataForm = React.createClass({
label={this.props.title} label={this.props.title}
editable={this.props.editable}> editable={this.props.editable}>
<InputTextAreaToggable <InputTextAreaToggable
rows={3} rows={1}
editable={this.props.editable} editable={this.props.editable}
defaultValue={defaultValue} defaultValue={defaultValue}
placeholder={'Fill in ' + this.props.title} placeholder={'Fill in ' + this.props.title}
required/> required/>
</Property> </Property>
<Property hidden={true} name='bitcoin_id'>
<input defaultValue={this.props.edition.bitcoin_id}/>
</Property>
<hr /> <hr />
</Form> </Form>
); );

8
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -23,11 +23,11 @@ var ReactS3FineUploader = React.createClass({
keyRoutine: React.PropTypes.shape({ keyRoutine: React.PropTypes.shape({
url: React.PropTypes.string, url: React.PropTypes.string,
fileClass: React.PropTypes.string, fileClass: React.PropTypes.string,
bitcoinId: React.PropTypes.string pieceId: React.PropTypes.string
}), }),
createBlobRoutine: React.PropTypes.shape({ createBlobRoutine: React.PropTypes.shape({
url: React.PropTypes.string, url: React.PropTypes.string,
bitcoinId: React.PropTypes.string pieceId: React.PropTypes.string
}), }),
submitKey: React.PropTypes.func, submitKey: React.PropTypes.func,
autoUpload: React.PropTypes.bool, autoUpload: React.PropTypes.bool,
@ -206,7 +206,7 @@ var ReactS3FineUploader = React.createClass({
body: JSON.stringify({ body: JSON.stringify({
'filename': filename, 'filename': filename,
'file_class': this.props.keyRoutine.fileClass, 'file_class': this.props.keyRoutine.fileClass,
'bitcoin_id': this.props.keyRoutine.bitcoinId 'piece_id': this.props.keyRoutine.pieceId
}) })
}) })
.then((res) => { .then((res) => {
@ -275,7 +275,7 @@ var ReactS3FineUploader = React.createClass({
body: JSON.stringify({ body: JSON.stringify({
'filename': file.name, 'filename': file.name,
'key': file.key, 'key': file.key,
'bitcoin_id': this.props.createBlobRoutine.bitcoinId 'bitcoin_id': this.props.createBlobRoutine.pieceId
}) })
}) })
.then((res) => { .then((res) => {