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

311
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() { // getInitialState() {
return { // return {
loading: false // loading: false
}; // };
}, // },
//
showNotification(){ // showNotification(){
this.props.handleSuccess(); // this.props.handleSuccess();
let notification = new GlobalNotificationModel('Details updated', 'success'); // let notification = new GlobalNotificationModel('Details updated', 'success');
GlobalNotificationActions.appendGlobalNotification(notification); // GlobalNotificationActions.appendGlobalNotification(notification);
}, // },
//
submitKey(key){ // submitKey(key){
this.setState({ // this.setState({
otherDataKey: key // otherDataKey: key
}); // });
}, // },
//
setIsUploadReady(isReady) { // setIsUploadReady(isReady) {
this.setState({ // this.setState({
isUploadReady: isReady // isUploadReady: isReady
}); // });
}, // },
//
isReadyForFormSubmission(files) { // isReadyForFormSubmission(files) {
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled'); // files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
if(files.length > 0 && files[0].status === 'upload successful') { // if(files.length > 0 && files[0].status === 'upload successful') {
return true; // return true;
} else { // } else {
return false; // return false;
} // }
}, // },
//
render() { // render() {
let editable = this.props.edition.acl.indexOf('edit') > -1; // let editable = this.props.edition.acl.indexOf('edit') > -1;
//
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={editable} // editable={editable}
edition={this.props.edition} /> // content={this.props.edition} />
<PieceExtraDataForm // <PieceExtraDataForm
name='display_instructions' // name='display_instructions'
title='Display Instructions' // title='Display Instructions'
handleSuccess={this.showNotification} // handleSuccess={this.showNotification}
editable={editable} // editable={editable}
edition={this.props.edition} /> // content={this.props.edition} />
<PieceExtraDataForm // <PieceExtraDataForm
name='technology_details' // name='technology_details'
title='Technology Details' // title='Technology Details'
handleSuccess={this.showNotification} // handleSuccess={this.showNotification}
editable={editable} // editable={editable}
edition={this.props.edition} /> // content={this.props.edition} />
<FileUploader // <FileUploader
submitKey={this.submitKey} // submitKey={this.submitKey}
setIsUploadReady={this.setIsUploadReady} // setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={this.isReadyForFormSubmission} // isReadyForFormSubmission={this.isReadyForFormSubmission}
editable={editable} // editable={editable}
edition={this.props.edition}/> // content={this.props.edition}/>
</Col> // </Col>
</Row> // </Row>
); // );
} // }
}); //});
//
let FileUploader = React.createClass({ //let FileUploader = React.createClass({
propTypes: { // propTypes: {
edition: React.PropTypes.object, // edition: 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,
editable: React.PropTypes.bool // editable: React.PropTypes.bool
}, // },
//
render() { // render() {
// Essentially there a three cases important to the fileuploader // // Essentially there a three cases important to the fileuploader
// // //
// 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.edition.other_data){ // if (!this.props.editable && !this.props.edition.other_data){
return null; // return null;
} // }
return ( // return (
<Form> // <Form>
<Property // <Property
label="Additional files"> // label="Additional files">
<ReactS3FineUploader // <ReactS3FineUploader
keyRoutine={{ // keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', // url: AppConstants.serverUrl + 's3/key/',
fileClass: 'otherdata', // fileClass: 'otherdata',
bitcoinId: this.props.edition.bitcoin_id // bitcoinId: this.props.edition.bitcoin_id
}} // }}
createBlobRoutine={{ // createBlobRoutine={{
url: apiUrls.blob_otherdatas, // url: apiUrls.blob_otherdatas,
bitcoinId: this.props.edition.bitcoin_id // bitcoinId: this.props.edition.bitcoin_id
}} // }}
validation={{ // validation={{
itemLimit: 100000, // itemLimit: 100000,
sizeLimit: '10000000' // sizeLimit: '10000000'
}} // }}
submitKey={this.props.submitKey} // submitKey={this.props.submitKey}
setIsUploadReady={this.props.setIsUploadReady} // setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission} // isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{ // session={{
endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/', // endpoint: AppConstants.serverUrl + 'api/blob/otherdatas/fineuploader_session/',
customHeaders: { // customHeaders: {
'X-CSRFToken': getCookie('csrftoken') // 'X-CSRFToken': getCookie('csrftoken')
}, // },
params: { // params: {
'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null // 'pk': this.props.edition.other_data ? this.props.edition.other_data.id : null
}, // },
cors: { // cors: {
expected: true, // expected: true,
sendCredentials: true // sendCredentials: true
} // }
}} // }}
signature={{ // signature={{
endpoint: AppConstants.serverUrl + 's3/signature/', // endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: { // customHeaders: {
'X-CSRFToken': getCookie('csrftoken') // 'X-CSRFToken': getCookie('csrftoken')
} // }
}} // }}
deleteFile={{ // deleteFile={{
enabled: true, // enabled: true,
method: 'DELETE', // method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete', // endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: { // customHeaders: {
'X-CSRFToken': getCookie('csrftoken') // 'X-CSRFToken': getCookie('csrftoken')
} // }
}} // }}
areAssetsDownloadable={true} // areAssetsDownloadable={true}
areAssetsEditable={this.props.editable}/> // areAssetsEditable={this.props.editable}/>
</Property> // </Property>
<hr /> // <hr />
</Form> // </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) => {