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

finalized: separation of edition creation and edition form

This commit is contained in:
Tim Daubenschütz 2015-07-13 18:52:55 +02:00
parent 85ba816a53
commit 463f205a6e
5 changed files with 32 additions and 74 deletions

View File

@ -35,20 +35,6 @@ let AccordionListItem = React.createClass({
}; };
}, },
componentDidUpdate() {
if(this.props.content.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
componentWillUnmount() {
clearInterval(this.state.pollingIntervalIndex);
},
onChange(state) {
this.setState(state);
},
getGlyphicon(){ getGlyphicon(){
if (this.props.content.requestAction){ if (this.props.content.requestAction){
return ( return (
@ -66,39 +52,20 @@ let AccordionListItem = React.createClass({
}); });
}, },
handleEditionCreationSuccess(response) { handleEditionCreationSuccess() {
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0}); PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0});
this.toggleCreateEditionsDialog(); this.toggleCreateEditionsDialog();
}, },
startPolling() { onPollingSuccess(pieceId, numEditions) {
// start polling until editions are defined PieceListActions.updatePropertyForPiece({
let pollingIntervalIndex = setInterval(() => { pieceId,
EditionListActions.fetchEditionList(this.props.content.id) key: 'num_editions',
.then((res) => { value: numEditions
clearInterval(this.state.pollingIntervalIndex);
PieceListActions.updatePropertyForPiece({
pieceId: this.props.content.id,
key: 'num_editions',
value: res.editions[0].num_editions
});
EditionListActions.toggleEditionList(this.props.content.id);
})
.catch(() => {
/* Ignore and keep going */
});
}, 5000);
this.setState({
pollingIntervalIndex
}); });
EditionListActions.toggleEditionList(pieceId);
}, },
getCreateEditionsDialog() { getCreateEditionsDialog() {
@ -153,7 +120,8 @@ let AccordionListItem = React.createClass({
<AccordionListItemEditionWidget <AccordionListItemEditionWidget
className="pull-right" className="pull-right"
piece={this.props.content} piece={this.props.content}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}/> toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.onPollingSuccess}/>
</div> </div>
</div> </div>
<span style={{'clear': 'both'}}></span> <span style={{'clear': 'both'}}></span>

View File

@ -6,13 +6,16 @@ import classNames from 'classnames';
import EditionListActions from '../../actions/edition_list_actions'; import EditionListActions from '../../actions/edition_list_actions';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
import { getLangText } from '../../utils/lang_utils'; import { getLangText } from '../../utils/lang_utils';
let AccordionListItemEditionWidget = React.createClass({ let AccordionListItemEditionWidget = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string, className: React.PropTypes.string,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
toggleCreateEditionsDialog: React.PropTypes.func.isRequired toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
onPollingSuccess: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
@ -55,16 +58,9 @@ let AccordionListItemEditionWidget = React.createClass({
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) { if(isEditionListOpen) {
if(typeof this.state.editionList[pieceId] === 'undefined') { return (
return ( <span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span>
<span className="glyph-ascribe-spool-chunked spin"/> );
);
} else {
return (
<span className="glyphicon glyphicon-menu-up" aria-hidden="true" style={{top: 2}}></span>
);
}
} else { } else {
return ( return (
<span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span> <span className="glyphicon glyphicon-menu-down" aria-hidden="true" style={{top: 2}}></span>
@ -76,23 +72,16 @@ let AccordionListItemEditionWidget = React.createClass({
let piece = this.props.piece; let piece = this.props.piece;
let numEditions = piece.num_editions; let numEditions = piece.num_editions;
if(numEditions === -1) { if(numEditions <= 0) {
return ( return (
<button <CreateEditionsButton
onClick={this.props.toggleCreateEditionsDialog} label={getLangText('Create editions')}
className={classNames('btn', 'btn-default', 'btn-xs', 'ascribe-accordion-list-item-edition-widget', this.props.className)}> className="btn-xs pull-right"
+ Editions piece={piece}
</button> toggleCreateEditionsDialog={this.props.toggleCreateEditionsDialog}
onPollingSuccess={this.props.onPollingSuccess}/>
); );
} } else if(numEditions === 1) {
else if(numEditions === 0) {
return (
<button disabled className={classNames('btn', 'btn-default', 'btn-xs', this.props.className)}>
Creating Editions <span className="glyph-ascribe-spool-chunked spin"/>
</button>
);
}
else if(numEditions === 1) {
let editionMapping = piece && piece.first_edition ? piece.first_edition.edition_number + '/' + piece.num_editions : ''; let editionMapping = piece && piece.first_edition ? piece.first_edition.edition_number + '/' + piece.num_editions : '';
return ( return (

View File

@ -6,11 +6,13 @@ import EditionListActions from '../../actions/edition_list_actions';
import EditionListStore from '../../stores/edition_list_store'; import EditionListStore from '../../stores/edition_list_store';
import { getAvailableAcls } from '../../utils/acl_utils'; import { getAvailableAcls } from '../../utils/acl_utils';
import { getLangText } from '../../utils/lang_utils';
import classNames from 'classnames'; import classNames from 'classnames';
let CreateEditionsButton = React.createClass({ let CreateEditionsButton = React.createClass({
propTypes: { propTypes: {
label: React.PropTypes.string,
className: React.PropTypes.string, className: React.PropTypes.string,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
toggleCreateEditionsDialog: React.PropTypes.func.isRequired, toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
@ -47,7 +49,6 @@ let CreateEditionsButton = React.createClass({
.then((res) => { .then((res) => {
clearInterval(this.state.pollingIntervalIndex); clearInterval(this.state.pollingIntervalIndex);
this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions); this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
}) })
@ -75,7 +76,7 @@ let CreateEditionsButton = React.createClass({
<button <button
disabled disabled
className={classNames('btn', 'btn-default', this.props.className)}> className={classNames('btn', 'btn-default', this.props.className)}>
CREATING EDITIONS <span className="glyph-ascribe-spool-chunked spin"/> {getLangText('Creating editions')} <span className="glyph-ascribe-spool-chunked spin"/>
</button> </button>
); );
} else { } else {
@ -83,7 +84,7 @@ let CreateEditionsButton = React.createClass({
<button <button
className={classNames('btn', 'btn-default', this.props.className)} className={classNames('btn', 'btn-default', this.props.className)}
onClick={this.props.toggleCreateEditionsDialog}> onClick={this.props.toggleCreateEditionsDialog}>
CREATE EDITIONS {this.props.label}
</button> </button>
); );
} }

View File

@ -113,9 +113,9 @@ let Piece = React.createClass({
<AclButtonList <AclButtonList
className="text-center ascribe-button-list" className="text-center ascribe-button-list"
availableAcls={this.props.piece.acl} availableAcls={this.props.piece.acl}
editions={this.props.piece} editions={this.props.piece}>
handleSuccess={this.props.handleSuccess}>
<CreateEditionsButton <CreateEditionsButton
label={getLangText('CREATE EDITIONS')}
className="btn-sm" className="btn-sm"
piece={this.props.piece} piece={this.props.piece}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog} toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}

View File

@ -30,7 +30,7 @@ let CreateEditionsForm = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
if(this.props.handleSuccess) { if(this.props.handleSuccess) {
this.props.handleSuccess(); this.props.handleSuccess(response);
} }
}, },