2015-06-17 17:48:52 +02:00
|
|
|
'use strict';
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
|
2015-06-29 10:00:26 +02:00
|
|
|
import { getCookie } from '../utils/fetch_api_utils';
|
2015-06-19 11:01:06 +02:00
|
|
|
import AppConstants from '../constants/application_constants';
|
|
|
|
|
2015-06-22 10:50:22 +02:00
|
|
|
import Router from 'react-router';
|
|
|
|
|
2015-06-30 10:42:58 +02:00
|
|
|
import LicenseActions from '../actions/license_actions';
|
|
|
|
import LicenseStore from '../stores/license_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';
|
|
|
|
|
|
|
|
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-22 17:33:25 +02:00
|
|
|
import DatePicker from 'react-datepicker/dist/react-datepicker';
|
|
|
|
|
2015-06-30 10:42:58 +02:00
|
|
|
import { mergeOptions } from '../utils/general_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(),
|
|
|
|
{
|
|
|
|
digitalWorkKey: null,
|
|
|
|
uploadStatus: false,
|
|
|
|
selectedLicense: 0
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
LicenseActions.fetchLicense();
|
|
|
|
LicenseStore.listen(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
|
LicenseStore.unlisten(this.onChange);
|
|
|
|
},
|
|
|
|
|
|
|
|
onChange(state) {
|
|
|
|
this.setState(state);
|
2015-06-23 13:55:05 +02:00
|
|
|
},
|
2015-06-29 11:44:16 +02:00
|
|
|
|
2015-06-23 13:55:05 +02:00
|
|
|
handleSuccess(){
|
2015-07-01 09:15:36 +02:00
|
|
|
let notification = new GlobalNotificationModel('Piece successfully registered', 'success', 10000);
|
2015-06-23 13:55:05 +02:00
|
|
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
|
|
|
this.transitionTo('pieces');
|
|
|
|
},
|
|
|
|
|
|
|
|
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){
|
|
|
|
console.log(this.state.licenses[event.target.selectedIndex].url);
|
|
|
|
this.setState({selectedLicense: event.target.selectedIndex});
|
|
|
|
},
|
|
|
|
getLicenses() {
|
|
|
|
if (this.state.licenses && this.state.licenses.length > 0) {
|
|
|
|
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
|
|
|
|
|
|
|
render() {
|
2015-06-17 17:48:52 +02:00
|
|
|
return (
|
2015-06-22 10:50:22 +02:00
|
|
|
<div className="row ascribe-row">
|
2015-06-29 11:44:16 +02:00
|
|
|
<div className="col-md-12">
|
2015-06-23 13:55:05 +02:00
|
|
|
<h3 style={{'marginTop': 0}}>Lock down title</h3>
|
|
|
|
<Form
|
|
|
|
ref='form'
|
|
|
|
url={apiUrls.pieces_list}
|
|
|
|
getFormData={this.getFormData}
|
|
|
|
handleSuccess={this.handleSuccess}
|
2015-06-30 10:45:07 +02:00
|
|
|
buttons={<button
|
2015-06-30 09:20:20 +02:00
|
|
|
type="submit"
|
|
|
|
className="btn ascribe-btn ascribe-btn-login"
|
|
|
|
disabled={!this.state.isUploadReady}>
|
|
|
|
Register your artwork
|
|
|
|
</button>}
|
2015-06-23 13:55:05 +02:00
|
|
|
spinner={
|
2015-07-01 09:15:36 +02:00
|
|
|
<span className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-spinner">
|
2015-06-23 13:55:05 +02:00
|
|
|
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
2015-07-01 09:15:36 +02:00
|
|
|
</span>
|
2015-06-23 13:55:05 +02:00
|
|
|
}>
|
2015-06-29 11:44:16 +02:00
|
|
|
<Property
|
|
|
|
label="Files to upload">
|
|
|
|
<FileUploader
|
|
|
|
submitKey={this.submitKey}
|
2015-06-30 09:20:20 +02:00
|
|
|
setIsUploadReady={this.setIsUploadReady}
|
2015-06-29 11:44:16 +02:00
|
|
|
isReadyForFormSubmission={this.isReadyForFormSubmission}/>
|
|
|
|
</Property>
|
2015-06-23 13:55:05 +02:00
|
|
|
<Property
|
|
|
|
name='artist_name'
|
|
|
|
label="Artist Name">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="The name of the creator"
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='title'
|
|
|
|
label="Artwork title">
|
|
|
|
<input
|
|
|
|
type="text"
|
|
|
|
placeholder="The title of the artwork"
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='date_created'
|
|
|
|
label="Year Created">
|
|
|
|
<input
|
|
|
|
type="number"
|
|
|
|
placeholder="Year Created (e.g. 2015)"
|
|
|
|
min={0}
|
|
|
|
required/>
|
|
|
|
</Property>
|
|
|
|
<Property
|
|
|
|
name='num_editions'
|
|
|
|
label="Number of editions">
|
|
|
|
<input
|
|
|
|
type="number"
|
|
|
|
placeholder="Specify the number of unique editions for this artwork"
|
|
|
|
min={1}
|
|
|
|
required/>
|
|
|
|
</Property>
|
2015-06-30 10:42:58 +02:00
|
|
|
{this.getLicenses()}
|
2015-06-23 13:55:05 +02:00
|
|
|
<hr />
|
|
|
|
</Form>
|
2015-06-19 11:01:06 +02:00
|
|
|
</div>
|
2015-06-22 10:50:22 +02:00
|
|
|
</div>
|
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,
|
|
|
|
isReadyForFormSubmission: React.PropTypes.func
|
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
|
|
|
|
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}
|
|
|
|
areAssetsDownloadable={false}/>
|
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;
|