2015-06-17 17:48:52 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
2015-07-07 10:28:39 +02:00
|
|
|
import DatePicker from 'react-datepicker/dist/react-datepicker';
|
2015-06-19 11:01:06 +02:00
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
import Router from 'react-router';
|
2015-07-07 10:28:39 +02:00
|
|
|
import Col from 'react-bootstrap/lib/Col';
|
|
|
|
import Row from 'react-bootstrap/lib/Row';
|
|
|
|
|
|
|
|
import AppConstants from '../constants/application_constants';
|
2015-06-22 10:50:22 +02:00
|
|
|
|
2015-06-30 10:42:58 +02:00
|
|
|
import LicenseActions from '../actions/license_actions';
|
|
|
|
import LicenseStore from '../stores/license_store';
|
|
|
|
|
2015-07-01 16:19:02 +02:00
|
|
|
import PieceListStore from '../stores/piece_list_store';
|
|
|
|
import PieceListActions from '../actions/piece_list_actions';
|
|
|
|
|
2015-07-02 15:40:54 +02:00
|
|
|
import UserStore from '../stores/user_store';
|
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
import GlobalNotificationModel from '../models/global_notification_model';
|
|
|
|
import GlobalNotificationActions from '../actions/global_notification_actions';
|
|
|
|
|
|
|
|
import Form from './ascribe_forms/form';
|
|
|
|
import Property from './ascribe_forms/property';
|
|
|
|
|
2015-07-02 11:49:17 +02:00
|
|
|
import LoginContainer from './login_container';
|
2015-07-02 13:31:35 +02:00
|
|
|
import SlidesContainer from './ascribe_slides_container/slides_container';
|
2015-07-02 11:49:17 +02:00
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
import apiUrls from '../constants/api_urls';
|
|
|
|
|
2015-06-23 10:27:19 +02:00
|
|
|
import ReactS3FineUploader from './ascribe_uploader/react_s3_fine_uploader';
|
2015-06-19 11:01:06 +02:00
|
|
|
|
2015-06-30 10:42:58 +02:00
|
|
|
import { mergeOptions } from '../utils/general_utils';
|
2015-07-02 16:51:22 +02:00
|
|
|
import { getCookie } from '../utils/fetch_api_utils';
|
2015-06-29 10:00:26 +02:00
|
|
|
|
2015-06-17 17:48:52 +02:00
|
|
|
let RegisterPiece = React.createClass( {
|
2015-06-23 13:55:05 +02:00
|
|
|
mixins: [Router.Navigation],
|
2015-06-20 16:43:18 +02:00
|
|
|
|
2015-06-23 13:55:05 +02:00
|
|
|
getInitialState(){
|
2015-06-30 10:42:58 +02:00
|
|
|
return mergeOptions(
|
|
|
|
LicenseStore.getState(),
|
2015-07-02 15:40:54 +02:00
|
|
|
UserStore.getState(),
|
2015-07-01 16:19:02 +02:00
|
|
|
PieceListStore.getState(),
|
2015-06-30 10:42:58 +02:00
|
|
|
{
|
|
|
|
digitalWorkKey: null,
|
|
|
|
uploadStatus: false,
|
2015-07-02 11:49:17 +02:00
|
|
|
selectedLicense: 0,
|
2015-07-02 15:40:54 +02:00
|
|
|
isFineUploaderEditable: false
|
2015-06-30 10:42:58 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
LicenseActions.fetchLicense();
|
|
|
|
LicenseStore.listen(this.onChange);
|
2015-07-01 16:19:02 +02:00
|
|
|
PieceListStore.listen(this.onChange);
|
2015-07-02 15:40:54 +02:00
|
|
|
UserStore.listen(this.onChange);
|
2015-06-30 10:42:58 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
LicenseStore.unlisten(this.onChange);
|
2015-07-01 16:19:02 +02:00
|
|
|
PieceListStore.unlisten(this.onChange);
|
2015-07-02 15:40:54 +02:00
|
|
|
UserStore.unlisten(this.onChange);
|
2015-06-30 10:42:58 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
2015-07-02 15:40:54 +02:00
|
|
|
|
|
|
|
// once the currentUser object from UserStore is defined (eventually the user was transitioned
|
|
|
|
// to the login form via the slider and successfully logged in), we can direct him back to the
|
|
|
|
// register_piece slide
|
2015-07-02 16:51:22 +02:00
|
|
|
if(state.currentUser && state.currentUser.email || this.state.currentUser && this.state.currentUser.email) {
|
2015-07-02 15:40:54 +02:00
|
|
|
this.refs.slidesContainer.setSlideNum(0);
|
|
|
|
// we should also make the fineuploader component editable again
|
|
|
|
this.setState({
|
|
|
|
isFineUploaderEditable: true
|
|
|
|
});
|
|
|
|
}
|
2015-06-23 13:55:05 +02:00
|
|
|
},
|
2015-06-29 11:44:16 +02:00
|
|
|
|
2015-07-01 11:21:43 +02:00
|
|
|
handleSuccess(response){
|
|
|
|
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
|
2015-06-23 13:55:05 +02:00
|
|
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
2015-07-01 16:19:02 +02:00
|
|
|
|
|
|
|
// once the user was able to register a piece successfully, we need to make sure to keep
|
|
|
|
// the piece list up to date
|
2015-07-07 15:48:09 +02:00
|
|
|
PieceListActions.fetchPieceList(
|
|
|
|
this.state.page,
|
|
|
|
this.state.pageSize,
|
|
|
|
this.state.searchTerm,
|
|
|
|
this.state.orderBy,
|
|
|
|
this.state.orderAsc);
|
|
|
|
|
2015-07-08 22:54:07 +02:00
|
|
|
this.transitionTo('piece', {editionId: response.piece.id});
|
2015-06-23 13:55:05 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
getFormData(){
|
|
|
|
let data = {};
|
|
|
|
for (let ref in this.refs.form.refs){
|
|
|
|
data[this.refs.form.refs[ref].props.name] = this.refs.form.refs[ref].state.value;
|
|
|
|
}
|
2015-06-29 11:44:16 +02:00
|
|
|
data.digital_work_key = this.state.digitalWorkKey;
|
2015-06-23 13:55:05 +02:00
|
|
|
return data;
|
|
|
|
},
|
2015-06-29 11:44:16 +02:00
|
|
|
|
|
|
|
submitKey(key){
|
|
|
|
this.setState({
|
|
|
|
digitalWorkKey: key
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
2015-06-30 09:20:20 +02:00
|
|
|
setIsUploadReady(isReady) {
|
2015-06-29 11:44:16 +02:00
|
|
|
this.setState({
|
2015-06-30 09:20:20 +02:00
|
|
|
isUploadReady: isReady
|
2015-06-29 11:44:16 +02:00
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
isReadyForFormSubmission(files) {
|
|
|
|
files = files.filter((file) => file.status !== 'deleted' && file.status !== 'canceled');
|
2015-06-30 10:42:58 +02:00
|
|
|
if (files.length > 0 && files[0].status === 'upload successful') {
|
2015-06-29 11:44:16 +02:00
|
|
|
return true;
|
|
|
|
} else {
|
|
|
|
return false;
|
|
|
|
}
|
2015-06-23 13:55:05 +02:00
|
|
|
},
|
2015-06-30 10:42:58 +02:00
|
|
|
onLicenseChange(event){
|
2015-07-02 14:53:49 +02:00
|
|
|
//console.log(this.state.licenses[event.target.selectedIndex].url);
|
2015-06-30 10:42:58 +02:00
|
|
|
this.setState({selectedLicense: event.target.selectedIndex});
|
|
|
|
},
|
|
|
|
getLicenses() {
|
2015-07-07 10:28:39 +02:00
|
|
|
if (this.state.licenses && this.state.licenses.length > 1) {
|
2015-06-30 10:42:58 +02:00
|
|
|
return (
|
|
|
|
<Property
|
|
|
|
name='license'
|
|
|
|
label="Copyright license..."
|
|
|
|
onChange={this.onLicenseChange}
|
|
|
|
footer={
|
|
|
|
<a className="pull-right" href={this.state.licenses[this.state.selectedLicense].url} target="_blank">
|
2015-07-01 09:15:36 +02:00
|
|
|
Learn more
|
2015-06-30 10:42:58 +02:00
|
|
|
</a>}>
|
|
|
|
<select name="license">
|
|
|
|
{this.state.licenses.map((license, i) => {
|
|
|
|
return (
|
|
|
|
<option
|
|
|
|
name={i}
|
|
|
|
key={i}
|
|
|
|
value={ license.code }>
|
|
|
|
{ license.code.toUpperCase() }: { license.name }
|
|
|
|
</option>
|
|
|
|
);
|
|
|
|
})}
|
|
|
|
</select>
|
|
|
|
</Property>);
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
},
|
2015-06-23 13:55:05 +02:00
|
|
|
|
2015-07-02 15:40:54 +02:00
|
|
|
changeSlide() {
|
|
|
|
// only transition to the login store, if user is not logged in
|
|
|
|
// ergo the currentUser object is not properly defined
|
|
|
|
if(!this.state.currentUser.email) {
|
|
|
|
this.refs.slidesContainer.setSlideNum(1);
|
|
|
|
}
|
2015-07-02 13:56:24 +02:00
|
|
|
},
|
|
|
|
|
2015-06-23 13:55:05 +02:00
|
|
|
render() {
|
2015-06-17 17:48:52 +02:00
|
|
|
return (
|
2015-07-02 13:56:24 +02:00
|
|
|
<SlidesContainer ref="slidesContainer">
|
2015-07-02 16:51:22 +02:00
|
|
|
<div
|
|
|
|
onClick={this.changeSlide}
|
2015-07-02 15:40:54 +02:00
|
|
|
onFocus={this.changeSlide}>
|
2015-07-07 10:28:39 +02:00
|
|
|
<Row className="no-margin">
|
|
|
|
<Col sm={4}>
|
|
|
|
<div style={{'marginTop': 0, 'marginLeft': '1em'}}>
|
|
|
|
<FileUploader
|
|
|
|
submitKey={this.submitKey}
|
|
|
|
setIsUploadReady={this.setIsUploadReady}
|
|
|
|
isReadyForFormSubmission={this.isReadyForFormSubmission}
|
|
|
|
editable={this.state.isFineUploaderEditable}/>
|
|
|
|
</div>
|
|
|
|
<br />
|
|
|
|
<br />
|
|
|
|
</Col>
|
|
|
|
<Col sm={8}>
|
|
|
|
<h3 style={{'marginTop': 0, 'marginLeft': '1em'}} onClick={this.changePage}>Lock down title</h3>
|
|
|
|
<Form
|
|
|
|
ref='form'
|
|
|
|
url={apiUrls.pieces_list}
|
|
|
|
getFormData={this.getFormData}
|
|
|
|
handleSuccess={this.handleSuccess}
|
|
|
|
buttons={<button
|
|
|
|
type="submit"
|
|
|
|
className="btn ascribe-btn ascribe-btn-login"
|
|
|
|
disabled={!this.state.isUploadReady}>
|
|
|
|
Register work
|
|
|
|
</button>}
|
|
|
|
spinner={
|
|
|
|
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
|
|
|
|
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
|
|
|
</button>
|
|
|
|
}>
|
|
|
|
|
|
|
|
<Property
|
|
|
|
name='artist_name'
|
|
|
|
label="Artist Name">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="(e.g. Andy Warhol)"
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='title'
|
|
|
|
label="Title">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="(e.g. 32 Campbell's Soup Cans)"
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='date_created'
|
|
|
|
label="Year Created">
|
|
|
|
<input
|
|
|
|
type="number"
|
|
|
|
placeholder="(e.g. 1962)"
|
|
|
|
min={0}
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
{this.getLicenses()}
|
|
|
|
<hr />
|
|
|
|
</Form>
|
|
|
|
</Col>
|
|
|
|
</Row>
|
2015-07-02 13:31:35 +02:00
|
|
|
</div>
|
2015-07-02 13:56:24 +02:00
|
|
|
<div>
|
2015-07-02 15:40:54 +02:00
|
|
|
<LoginContainer
|
2015-07-02 18:42:24 +02:00
|
|
|
message="Please login before ascribing your work..."
|
2015-07-02 15:40:54 +02:00
|
|
|
redirectOnLoggedIn={false}
|
|
|
|
redirectOnLoginSuccess={false}/>
|
2015-06-19 11:01:06 +02:00
|
|
|
</div>
|
2015-07-02 13:31:35 +02:00
|
|
|
</SlidesContainer>
|
2015-06-17 17:48:52 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
|
2015-06-29 10:01:54 +02:00
|
|
|
let FileUploader = React.createClass({
|
2015-06-29 11:44:16 +02:00
|
|
|
propTypes: {
|
2015-06-30 09:20:20 +02:00
|
|
|
setIsUploadReady: React.PropTypes.func,
|
2015-06-29 11:44:16 +02:00
|
|
|
submitKey: React.PropTypes.func,
|
2015-07-02 15:40:54 +02:00
|
|
|
isReadyForFormSubmission: React.PropTypes.func,
|
|
|
|
onClick: React.PropTypes.func,
|
|
|
|
// editable is used to lock react fine uploader in case
|
|
|
|
// a user is actually not logged in already to prevent him from droping files
|
|
|
|
// before login in
|
|
|
|
editable: React.PropTypes.bool
|
2015-06-29 10:01:54 +02:00
|
|
|
},
|
2015-06-29 11:44:16 +02:00
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<ReactS3FineUploader
|
2015-07-02 15:40:54 +02:00
|
|
|
onClick={this.props.onClick}
|
2015-06-22 10:50:22 +02:00
|
|
|
keyRoutine={{
|
|
|
|
url: AppConstants.serverUrl + 's3/key/',
|
|
|
|
fileClass: 'digitalwork'
|
|
|
|
}}
|
2015-06-23 13:55:05 +02:00
|
|
|
createBlobRoutine={{
|
|
|
|
url: apiUrls.blob_digitalworks
|
|
|
|
}}
|
2015-06-29 11:44:16 +02:00
|
|
|
submitKey={this.props.submitKey}
|
2015-06-22 10:50:22 +02:00
|
|
|
validation={{
|
|
|
|
itemLimit: 100000,
|
|
|
|
sizeLimit: '25000000000'
|
2015-06-29 11:44:16 +02:00
|
|
|
}}
|
2015-06-30 09:20:20 +02:00
|
|
|
setIsUploadReady={this.props.setIsUploadReady}
|
2015-06-30 13:53:02 +02:00
|
|
|
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
|
2015-07-01 12:13:05 +02:00
|
|
|
areAssetsDownloadable={false}
|
2015-07-02 16:51:22 +02:00
|
|
|
areAssetsEditable={this.props.editable}
|
|
|
|
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')
|
|
|
|
}
|
|
|
|
}}/>
|
2015-06-22 10:50:22 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-06-23 10:27:19 +02:00
|
|
|
|
|
|
|
let InputDate = React.createClass({
|
|
|
|
propTypes: {
|
2015-06-25 10:35:25 +02:00
|
|
|
placeholderText: React.PropTypes.string,
|
|
|
|
onChange: React.PropTypes.func
|
2015-06-23 10:27:19 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
getInitialState() {
|
|
|
|
return {
|
|
|
|
value: null,
|
|
|
|
value_formatted: null
|
|
|
|
};
|
|
|
|
},
|
|
|
|
|
|
|
|
handleChange(date) {
|
|
|
|
this.setState({
|
|
|
|
value: date,
|
|
|
|
value_formatted: date.format('YYYY')});
|
2015-06-23 13:55:05 +02:00
|
|
|
let event = document.createEvent('HTMLEvents');
|
|
|
|
event.initEvent('click', false, true);
|
|
|
|
document.dispatchEvent(event);
|
|
|
|
event.target.value = date;
|
|
|
|
this.props.onChange(event);
|
2015-06-23 10:27:19 +02:00
|
|
|
},
|
|
|
|
|
|
|
|
render: function () {
|
|
|
|
return (
|
|
|
|
<DatePicker
|
|
|
|
key="example2"
|
|
|
|
dateFormat="YYYY"
|
|
|
|
selected={this.state.value}
|
|
|
|
onChange={this.handleChange}
|
|
|
|
onBlur={this.props.onBlur}
|
|
|
|
placeholderText={this.props.placeholderText}/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2015-06-19 14:05:56 +02:00
|
|
|
export default RegisterPiece;
|