1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-24 02:16:10 +01:00
onion/js/components/ascribe_detail/piece.js

169 lines
5.9 KiB
JavaScript
Raw Normal View History

2015-07-08 22:54:07 +02:00
'use strict';
import React from 'react';
import Router from 'react-router';
2015-07-08 22:54:07 +02:00
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import DetailProperty from './detail_property';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
2015-07-08 22:54:07 +02:00
import PieceListActions from '../../actions/piece_list_actions';
import PieceListStore from '../../stores/piece_list_store';
import EditionListActions from '../../actions/edition_list_actions';
2015-07-13 18:13:16 +02:00
import PieceActions from '../../actions/piece_actions';
2015-07-08 22:54:07 +02:00
import MediaContainer from './media_container';
2015-07-13 17:09:44 +02:00
import EditionDetailProperty from './detail_property';
2015-07-08 22:54:07 +02:00
import AclButtonList from './../ascribe_buttons/acl_button_list';
2015-07-13 17:09:44 +02:00
import CreateEditionsForm from '../ascribe_forms/create_editions_form';
import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
import DeleteButton from '../ascribe_buttons/delete_button';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import { getLangText } from '../../utils/lang_utils';
2015-07-13 17:09:44 +02:00
import { mergeOptions } from '../../utils/general_utils';
2015-07-15 15:00:39 +02:00
2015-07-08 22:54:07 +02:00
/**
* This is the component that implements display-specific functionality
*/
let Piece = React.createClass({
propTypes: {
piece: React.PropTypes.object,
2015-07-15 15:00:39 +02:00
loadPiece: React.PropTypes.func,
children: React.PropTypes.object
2015-07-08 22:54:07 +02:00
},
mixins: [Router.Navigation],
getInitialState() {
2015-07-13 17:09:44 +02:00
return mergeOptions(
UserStore.getState(),
PieceListStore.getState(),
2015-07-13 17:09:44 +02:00
{
showCreateEditionsDialog: false
}
);
},
componentDidMount() {
UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
PieceListStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
2015-07-08 22:54:07 +02:00
2015-07-13 17:09:44 +02:00
toggleCreateEditionsDialog() {
this.setState({
showCreateEditionsDialog: !this.state.showCreateEditionsDialog
});
},
2015-07-13 18:13:16 +02:00
handleEditionCreationSuccess() {
PieceActions.updateProperty({key: 'num_editions', value: 0});
this.toggleCreateEditionsDialog();
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, this.state.orderBy, this.state.orderAsc);
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.transitionTo('pieces');
},
2015-07-13 17:09:44 +02:00
getCreateEditionsDialog() {
if(this.props.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
return (
<div style={{marginTop: '1em'}}>
<CreateEditionsForm
pieceId={this.props.piece.id}
handleSuccess={this.handleEditionCreationSuccess} />
<hr/>
</div>
);
} else {
return (<hr/>);
}
},
2015-07-08 22:54:07 +02:00
2015-07-13 18:13:16 +02:00
handlePollingSuccess(pieceId, numEditions) {
PieceActions.updateProperty({
key: 'num_editions',
value: numEditions
});
let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
2015-07-13 18:13:16 +02:00
},
2015-07-13 17:09:44 +02:00
render() {
2015-07-08 22:54:07 +02:00
return (
<Row>
<Col md={6}>
<MediaContainer
content={this.props.piece}/>
2015-07-08 22:54:07 +02:00
</Col>
<Col md={6} className="ascribe-edition-details">
2015-07-13 17:09:44 +02:00
<div className="ascribe-detail-header">
<EditionDetailProperty label="TITLE" value={<div className="ascribe-detail-title">{this.props.piece.title}</div>} />
<EditionDetailProperty label="BY" value={this.props.piece.artist_name} />
<EditionDetailProperty label="DATE" value={ this.props.piece.date_created.slice(0, 4) } />
{this.props.piece.num_editions > 0 ? <EditionDetailProperty label="EDITIONS" value={ this.props.piece.num_editions } /> : null}
2015-07-13 17:09:44 +02:00
<hr/>
</div>
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
</div>
<AclButtonList
className="text-center ascribe-button-list"
availableAcls={this.props.piece.acl}
2015-07-13 23:57:16 +02:00
editions={this.props.piece}
handleSuccess={this.props.loadPiece}>
2015-07-13 17:09:44 +02:00
<CreateEditionsButton
label={getLangText('CREATE EDITIONS')}
2015-07-13 18:13:16 +02:00
className="btn-sm"
2015-07-13 17:09:44 +02:00
piece={this.props.piece}
2015-07-13 18:13:16 +02:00
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.handlePollingSuccess}/>
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
piece={this.props.piece}/>
2015-07-13 17:09:44 +02:00
</AclButtonList>
{this.getCreateEditionsDialog()}
2015-07-15 15:00:39 +02:00
{this.props.children}
2015-07-13 17:09:44 +02:00
2015-07-08 22:54:07 +02:00
</Col>
</Row>
);
}
});
export default Piece;