mirror of
https://github.com/ascribe/onion.git
synced 2024-06-30 21:52:08 +02:00
add edition creation functionality
This commit is contained in:
parent
ca72168da2
commit
1df068d75f
|
@ -44,7 +44,7 @@ class EditionListActions {
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
reject(err);
|
reject(err);
|
||||||
console.log(err);
|
//console.log(err);
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,8 @@ class PieceListActions {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'updatePieceList',
|
'updatePieceList',
|
||||||
'updatePieceListRequestActions',
|
'updatePieceListRequestActions',
|
||||||
'addFirstEditionToPiece'
|
'addFirstEditionToPiece',
|
||||||
|
'updatePropertyForPiece'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,8 +3,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Router from 'react-router';
|
import Router from 'react-router';
|
||||||
|
|
||||||
import PieceListActions from '../../actions/piece_list_actions';
|
|
||||||
|
|
||||||
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
||||||
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
|
||||||
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||||
|
@ -12,6 +10,12 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
|
||||||
import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
|
import AccordionListItemEditionWidget from './accordion_list_item_edition_widget';
|
||||||
import AccordionListItemCreateEditions from './accordion_list_item_create_editions';
|
import AccordionListItemCreateEditions from './accordion_list_item_create_editions';
|
||||||
|
|
||||||
|
import PieceListActions from '../../actions/piece_list_actions';
|
||||||
|
import EditionListActions from '../../actions/edition_list_actions';
|
||||||
|
|
||||||
|
import GlobalNotificationModel from '../../models/global_notification_model';
|
||||||
|
import GlobalNotificationActions from '../../actions/global_notification_actions';
|
||||||
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let Link = Router.Link;
|
let Link = Router.Link;
|
||||||
|
@ -25,6 +29,13 @@ let AccordionListItem = React.createClass({
|
||||||
|
|
||||||
mixins: [Router.Navigation],
|
mixins: [Router.Navigation],
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
showCreateEditionsDialog: false,
|
||||||
|
creatingEditions: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
if(this.props.content.num_editions !== 0) {
|
if(this.props.content.num_editions !== 0) {
|
||||||
PieceListActions.fetchFirstEditionForPiece(this.props.content.id);
|
PieceListActions.fetchFirstEditionForPiece(this.props.content.id);
|
||||||
|
@ -46,6 +57,52 @@ let AccordionListItem = React.createClass({
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
toggleCreateEditionsDialog() {
|
||||||
|
this.setState({
|
||||||
|
showCreateEditionsDialog: !this.state.showCreateEditionsDialog
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleEditionCreationSuccess(response) {
|
||||||
|
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
|
||||||
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
creatingEditions: true
|
||||||
|
});
|
||||||
|
|
||||||
|
this.toggleCreateEditionsDialog();
|
||||||
|
|
||||||
|
// start polling until editions are defined
|
||||||
|
let pollingIntervalIndex = setInterval(() => {
|
||||||
|
EditionListActions.fetchEditionList(this.props.content.id)
|
||||||
|
.then((res) => {
|
||||||
|
|
||||||
|
clearInterval(this.state.pollingIntervalIndex);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
creatingEditions: false
|
||||||
|
});
|
||||||
|
|
||||||
|
PieceListActions.updatePropertyForPiece({
|
||||||
|
pieceId: this.props.content.id,
|
||||||
|
key: 'num_editions',
|
||||||
|
value: res.count
|
||||||
|
});
|
||||||
|
|
||||||
|
EditionListActions.toggleEditionList(this.props.content.id);
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
/* Ignore and keep going */
|
||||||
|
});
|
||||||
|
}, 5000);
|
||||||
|
|
||||||
|
this.setState({
|
||||||
|
pollingIntervalIndex
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let linkData;
|
let linkData;
|
||||||
|
|
||||||
|
@ -86,7 +143,9 @@ let AccordionListItem = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<AccordionListItemEditionWidget
|
<AccordionListItemEditionWidget
|
||||||
piece={this.props.content}/>
|
piece={this.props.content}
|
||||||
|
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
|
||||||
|
creatingEditions={this.state.creatingEditions}/>
|
||||||
{/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
|
{/* <a href={this.props.content.license_type.url} target="_blank" className="pull-right">
|
||||||
{getLangText('%s license', this.props.content.license_type.code)}
|
{getLangText('%s license', this.props.content.license_type.code)}
|
||||||
</a> */}
|
</a> */}
|
||||||
|
@ -98,7 +157,8 @@ let AccordionListItem = React.createClass({
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<AccordionListItemCreateEditions />
|
{this.props.content.num_editions === 0 && this.state.showCreateEditionsDialog ? <AccordionListItemCreateEditions pieceId={this.props.content.id} handleSuccess={this.handleEditionCreationSuccess}/> : null}
|
||||||
|
|
||||||
{/* this.props.children is AccordionListItemTableEditions */}
|
{/* this.props.children is AccordionListItemTableEditions */}
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Form from '../ascribe_forms/form';
|
import Form from '../ascribe_forms/form';
|
||||||
import FormPropertyHeader from '../ascribe_forms/form_property_header';
|
|
||||||
import Property from '../ascribe_forms/property';
|
import Property from '../ascribe_forms/property';
|
||||||
|
|
||||||
import apiUrls from '../../constants/api_urls';
|
import apiUrls from '../../constants/api_urls';
|
||||||
|
@ -11,8 +10,18 @@ import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let AccordionListItemCreateEditions = React.createClass({
|
let AccordionListItemCreateEditions = React.createClass({
|
||||||
|
|
||||||
handleSuccess() {
|
propTypes: {
|
||||||
|
pieceId: React.PropTypes.number,
|
||||||
|
handleSuccess: React.PropTypes.func
|
||||||
|
},
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
data.piece_id = parseInt(this.props.pieceId, 10);
|
||||||
|
return data;
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -20,21 +29,14 @@ let AccordionListItemCreateEditions = React.createClass({
|
||||||
<div className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
<div className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
||||||
<Form
|
<Form
|
||||||
ref='form'
|
ref='form'
|
||||||
url={apiUrls.editions_list}
|
url={apiUrls.editions}
|
||||||
getFormData={this.getFormData}
|
getFormData={this.getFormData}
|
||||||
handleSuccess={this.handleSuccess}
|
handleSuccess={this.props.handleSuccess}
|
||||||
buttons={<button
|
|
||||||
type="submit"
|
|
||||||
className="btn ascribe-btn ascribe-btn-login"
|
|
||||||
disabled={false}>
|
|
||||||
{getLangText('Create editions')}
|
|
||||||
</button>}
|
|
||||||
spinner={
|
spinner={
|
||||||
<button className="btn ascribe-btn ascribe-btn-login ascribe-btn-login-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" />
|
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/media/thumbnails/ascribe_animated_medium.gif" />
|
||||||
</button>
|
</button>
|
||||||
}>
|
}>
|
||||||
|
|
||||||
<Property
|
<Property
|
||||||
name='num_editions'
|
name='num_editions'
|
||||||
label={getLangText('Number of editions')}>
|
label={getLangText('Number of editions')}>
|
||||||
|
|
|
@ -9,7 +9,9 @@ import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
let AccordionListItemEditionWidget = React.createClass({
|
let AccordionListItemEditionWidget = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
piece: React.PropTypes.object.isRequired
|
piece: React.PropTypes.object.isRequired,
|
||||||
|
toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
|
||||||
|
creatingEditions: React.PropTypes.bool.isRequired
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
|
@ -74,13 +76,21 @@ let AccordionListItemEditionWidget = React.createClass({
|
||||||
let numEditions = piece.num_editions;
|
let numEditions = piece.num_editions;
|
||||||
|
|
||||||
if(numEditions === 0) {
|
if(numEditions === 0) {
|
||||||
return (
|
if(this.props.creatingEditions) {
|
||||||
<span
|
return (
|
||||||
onClick={this.toggleTable}
|
<span>
|
||||||
className="ascribe-accordion-list-item-edition-widget">
|
Creating Editions <span className="glyph-ascribe-spool-chunked ascribe-color spin"/>
|
||||||
+ Editions
|
</span>
|
||||||
</span>
|
);
|
||||||
);
|
} else {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
onClick={this.props.toggleCreateEditionsDialog}
|
||||||
|
className="ascribe-accordion-list-item-edition-widget">
|
||||||
|
+ Editions
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
} else if(numEditions === 1) {
|
} else if(numEditions === 1) {
|
||||||
let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : '';
|
let editionMapping = piece && piece.firstEdition ? piece.firstEdition.edition_number + '/' + piece.num_editions : '';
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,10 @@ import React from 'react';
|
||||||
|
|
||||||
let FormPropertyHeader = React.createClass({
|
let FormPropertyHeader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
children: React.PropTypes.arrayOf(React.PropTypes.element)
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
|
React.PropTypes.element
|
||||||
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -13,6 +13,7 @@ let apiUrls = {
|
||||||
'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
|
'edition': AppConstants.apiEndpoint + 'editions/${bitcoin_id}/',
|
||||||
'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
|
'edition_delete': AppConstants.apiEndpoint + 'editions/${edition_id}/',
|
||||||
'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
|
'edition_remove_from_collection': AppConstants.apiEndpoint + 'ownership/shares/${edition_id}/',
|
||||||
|
'editions': AppConstants.apiEndpoint + 'editions/', // this should be moved to the one below
|
||||||
'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
|
'editions_list': AppConstants.apiEndpoint + 'pieces/${piece_id}/editions/',
|
||||||
'licenses': AppConstants.apiEndpoint + 'ownership/licenses/',
|
'licenses': AppConstants.apiEndpoint + 'ownership/licenses/',
|
||||||
'note_notes': AppConstants.apiEndpoint + 'note/notes/',
|
'note_notes': AppConstants.apiEndpoint + 'note/notes/',
|
||||||
|
|
|
@ -84,6 +84,19 @@ class PieceListStore {
|
||||||
throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
|
throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onUpdatePropertyForPiece({pieceId, key, value}) {
|
||||||
|
let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);
|
||||||
|
|
||||||
|
if(filteredPieceList.length === 1) {
|
||||||
|
|
||||||
|
let piece = filteredPieceList[0];
|
||||||
|
piece[key] = value;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
throw new Error('Could not find a matching piece in piece list since its either not there or piecelist contains duplicates.');
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default alt.createStore(PieceListStore, 'PieceListStore');
|
export default alt.createStore(PieceListStore, 'PieceListStore');
|
||||||
|
|
|
@ -50,7 +50,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.ascribe-global-notification-bubble-off {
|
.ascribe-global-notification-bubble-off {
|
||||||
right: -50em;
|
right: -100em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ascribe-global-notification-bubble-on {
|
.ascribe-global-notification-bubble-on {
|
||||||
|
|
Loading…
Reference in New Issue
Block a user