diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 6c07a891..37803ad2 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -3,151 +3,24 @@ import React from 'react'; import Router from 'react-router'; -import Glyphicon from 'react-bootstrap/lib/Glyphicon'; -import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; -import Tooltip from 'react-bootstrap/lib/Tooltip'; - -import AccordionListItemEditionWidget from './accordion_list_item_edition_widget'; -import CreateEditionsForm from '../ascribe_forms/create_editions_form'; - -import PieceListActions from '../../actions/piece_list_actions'; -import PieceListStore from '../../stores/piece_list_store'; - -import WhitelabelStore from '../../stores/whitelabel_store'; - -import EditionListActions from '../../actions/edition_list_actions'; - -import GlobalNotificationModel from '../../models/global_notification_model'; -import GlobalNotificationActions from '../../actions/global_notification_actions'; - -import AclProxy from '../acl_proxy'; -import SubmitToPrizeButton from '../whitelabel/prize/components/ascribe_buttons/submit_to_prize_button'; - -import { getLangText } from '../../utils/lang_utils'; -import { mergeOptions } from '../../utils/general_utils'; - -let Link = Router.Link; - let AccordionListItem = React.createClass({ propTypes: { + badge: React.PropTypes.object, className: React.PropTypes.string, - content: React.PropTypes.object, - children: React.PropTypes.object + thumbnail: React.PropTypes.object, + heading: React.PropTypes.object, + subheading: React.PropTypes.object, + subsubheading: React.PropTypes.object, + buttons: React.PropTypes.object, + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]) }, mixins: [Router.Navigation], - getInitialState() { - return mergeOptions( - { - showCreateEditionsDialog: false - }, - PieceListStore.getState(), - WhitelabelStore.getState() - ); - }, - - componentDidMount() { - PieceListStore.listen(this.onChange); - WhitelabelStore.listen(this.onChange); - }, - - componentWillUnmount() { - PieceListStore.unlisten(this.onChange); - WhitelabelStore.unlisten(this.onChange); - }, - - onChange(state) { - this.setState(state); - }, - - getGlyphicon(){ - if (this.props.content.requestAction) { - return ( - {getLangText('You have actions pending in one of your editions')}}> - - ); - } - return null; - }, - - toggleCreateEditionsDialog() { - this.setState({ - showCreateEditionsDialog: !this.state.showCreateEditionsDialog - }); - }, - - handleEditionCreationSuccess() { - PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0}); - - this.toggleCreateEditionsDialog(); - }, - - handleSubmitPrizeSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - - let notification = new GlobalNotificationModel(response.notification, 'success', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - }, - - onPollingSuccess(pieceId) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - EditionListActions.toggleEditionList(pieceId); - - let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - }, - - getCreateEditionsDialog() { - if (this.props.content.num_editions < 1 && this.state.showCreateEditionsDialog) { - return ( -
- -
- ); - } - }, - - getLicences() { - // convert this to acl_view_licences later - if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') { - return ( - - , - - {getLangText('%s license', this.props.content.license_type.code)} - - - ); - } - }, - render() { - let linkData; - - if (this.props.content.num_editions < 1 || !this.props.content.first_edition) { - linkData = { - to: 'piece', - params: { - pieceId: this.props.content.id - } - }; - } else { - linkData = { - to: 'edition', - params: { - editionId: this.props.content.first_edition.bitcoin_id - } - }; - } return (
@@ -155,52 +28,22 @@ let AccordionListItem = React.createClass({
- - - + {this.props.thumbnail}
- -

{this.props.content.title}

- - -

{getLangText('by %s', this.props.content.artist_name)}

- -
- {this.props.content.date_created.split('-')[0]} - - - - - - - - {this.getLicences()} -
+ {this.props.heading} + {this.props.subheading} + {this.props.subsubheading} + {this.props.buttons}
- {this.getGlyphicon()} + {this.props.badge}
- - {this.getCreateEditionsDialog()} - - {/* this.props.children is AccordionListItemTableEditions */} {this.props.children} ); diff --git a/js/components/ascribe_accordion_list/accordion_list_item_piece.js b/js/components/ascribe_accordion_list/accordion_list_item_piece.js new file mode 100644 index 00000000..e1271b0a --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_piece.js @@ -0,0 +1,77 @@ +'use strict'; + +import React from 'react'; +import Router from 'react-router'; + +import AccordionListItem from './accordion_list_item'; + +import { getLangText } from '../../utils/lang_utils'; + +let Link = Router.Link; + + +let AccordionListItemPiece = React.createClass({ + propTypes: { + className: React.PropTypes.string, + piece: React.PropTypes.object, + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]), + subsubheading: React.PropTypes.object, + buttons: React.PropTypes.object, + badge: React.PropTypes.object + }, + + mixins: [Router.Navigation], + + getLinkData(){ + let linkData; + + if (this.props.piece.num_editions < 1 || !this.props.piece.first_edition) { + linkData = { + to: 'piece', + params: { + pieceId: this.props.piece.id + } + }; + } else { + linkData = { + to: 'edition', + params: { + editionId: this.props.piece.first_edition.bitcoin_id + } + }; + } + return linkData; + }, + + render() { + return ( + + + } + heading={ + +

{this.props.piece.title}

+ } + subheading={ +

+ {getLangText('by ')} + {this.props.artistName ? this.props.artistName : this.props.piece.artist_name} +

+ } + subsubheading={this.props.subsubheading} + buttons={this.props.buttons} + badge={this.props.badge} + > + {this.props.children} +
+ ); + } +}); + +export default AccordionListItemPiece; diff --git a/js/components/ascribe_accordion_list/accordion_list_item_wallet.js b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js new file mode 100644 index 00000000..3cb557ef --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_wallet.js @@ -0,0 +1,156 @@ +'use strict'; + +import React from 'react'; + +import Glyphicon from 'react-bootstrap/lib/Glyphicon'; +import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger'; +import Tooltip from 'react-bootstrap/lib/Tooltip'; + +import AccordionListItemPiece from './accordion_list_item_piece'; +import AccordionListItemEditionWidget from './accordion_list_item_edition_widget'; +import CreateEditionsForm from '../ascribe_forms/create_editions_form'; + +import PieceListActions from '../../actions/piece_list_actions'; +import PieceListStore from '../../stores/piece_list_store'; + +import WhitelabelStore from '../../stores/whitelabel_store'; + +import EditionListActions from '../../actions/edition_list_actions'; + +import GlobalNotificationModel from '../../models/global_notification_model'; +import GlobalNotificationActions from '../../actions/global_notification_actions'; + +import AclProxy from '../acl_proxy'; + +import { getLangText } from '../../utils/lang_utils'; +import { mergeOptions } from '../../utils/general_utils'; + + +let AccordionListItemWallet = React.createClass({ + propTypes: { + className: React.PropTypes.string, + content: React.PropTypes.object, + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]) + }, + + getInitialState() { + return mergeOptions( + { + showCreateEditionsDialog: false + }, + PieceListStore.getState(), + WhitelabelStore.getState() + ); + }, + + componentDidMount() { + PieceListStore.listen(this.onChange); + WhitelabelStore.listen(this.onChange); + }, + + componentWillUnmount() { + PieceListStore.unlisten(this.onChange); + WhitelabelStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + getGlyphicon(){ + if (this.props.content.requestAction) { + return ( + {getLangText('You have actions pending in one of your editions')}}> + + ); + } + return null; + }, + + toggleCreateEditionsDialog() { + this.setState({ + showCreateEditionsDialog: !this.state.showCreateEditionsDialog + }); + }, + + handleEditionCreationSuccess() { + PieceListActions.updatePropertyForPiece({pieceId: this.props.content.id, key: 'num_editions', value: 0}); + + this.toggleCreateEditionsDialog(); + }, + + onPollingSuccess(pieceId) { + PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc, this.state.filterBy); + EditionListActions.toggleEditionList(pieceId); + + let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + + getCreateEditionsDialog() { + if (this.props.content.num_editions < 1 && this.state.showCreateEditionsDialog) { + return ( +
+ +
+ ); + } + }, + + getLicences() { + // convert this to acl_view_licences later + if (this.state.whitelabel && this.state.whitelabel.name === 'Creative Commons France') { + return ( + + , + + {getLangText('%s license', this.props.content.license_type.code)} + + + ); + } + }, + + render() { + + return ( + + {this.props.content.date_created.split('-')[0]} + {this.getLicences()} + } + buttons={ +
+ + + +
} + badge={this.getGlyphicon()}> + {this.getCreateEditionsDialog()} + {/* this.props.children is AccordionListItemTableEditions */} + {this.props.children} +
+ ); + } +}); + +export default AccordionListItemWallet; diff --git a/js/components/ascribe_collapsible/collapsible_paragraph.js b/js/components/ascribe_collapsible/collapsible_paragraph.js index e04e82c2..8b3b3cf4 100644 --- a/js/components/ascribe_collapsible/collapsible_paragraph.js +++ b/js/components/ascribe_collapsible/collapsible_paragraph.js @@ -23,7 +23,7 @@ const CollapsibleParagraph = React.createClass({ getInitialState() { return { - expanded: false + expanded: this.props.defaultExpanded }; }, diff --git a/js/components/ascribe_detail/detail_property.js b/js/components/ascribe_detail/detail_property.js index f220fc98..828ed81a 100644 --- a/js/components/ascribe_detail/detail_property.js +++ b/js/components/ascribe_detail/detail_property.js @@ -17,9 +17,9 @@ let DetailProperty = React.createClass({ getDefaultProps() { return { - separator: ':', - labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2', - valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10' + separator: '', + labelClassName: 'col-xs-3 col-sm-3 col-md-2 col-lg-2 col-xs-height col-bottom ascribe-detail-property-label', + valueClassName: 'col-xs-9 col-sm-9 col-md-10 col-lg-10 col-xs-height col-bottom ascribe-detail-property-value' }; }, @@ -52,11 +52,11 @@ let DetailProperty = React.createClass({ return (
-
- { this.props.label + this.props.separator} +
+ { this.props.label } { this.props.separator}
{value}
diff --git a/js/components/ascribe_detail/media_container.js b/js/components/ascribe_detail/media_container.js index 529817c3..6ac2f745 100644 --- a/js/components/ascribe_detail/media_container.js +++ b/js/components/ascribe_detail/media_container.js @@ -19,7 +19,33 @@ const EMBED_IFRAME_HEIGHT = { let MediaContainer = React.createClass({ propTypes: { - content: React.PropTypes.object + content: React.PropTypes.object, + refreshObject: React.PropTypes.func + }, + + getInitialState() { + return {timerId: null}; + }, + + componentDidMount() { + if (!this.props.content.digital_work) { + return; + } + let isEncoding = this.props.content.digital_work.isEncoding; + if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { + let timerId = window.setInterval(this.props.refreshObject, 10000); + this.setState({timerId: timerId}); + } + }, + + componentWillUpdate() { + if (this.props.content.digital_work.isEncoding === 100) { + window.clearInterval(this.state.timerId); + } + }, + + componentWillUnmount() { + window.clearInterval(this.state.timerId); }, render() { diff --git a/js/components/ascribe_detail/piece.js b/js/components/ascribe_detail/piece.js index 3fabb055..ed312f5f 100644 --- a/js/components/ascribe_detail/piece.js +++ b/js/components/ascribe_detail/piece.js @@ -1,38 +1,14 @@ 'use strict'; import React from 'react'; -import Router from 'react-router'; 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'; - -import PieceListActions from '../../actions/piece_list_actions'; -import PieceListStore from '../../stores/piece_list_store'; - -import EditionListActions from '../../actions/edition_list_actions'; - import PieceActions from '../../actions/piece_actions'; import MediaContainer from './media_container'; -import EditionDetailProperty from './detail_property'; - -import AclButtonList from './../ascribe_buttons/acl_button_list'; -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'; -import { mergeOptions } from '../../utils/general_utils'; - /** * This is the component that implements display-specific functionality @@ -40,97 +16,16 @@ import { mergeOptions } from '../../utils/general_utils'; let Piece = React.createClass({ propTypes: { piece: React.PropTypes.object, + header: React.PropTypes.object, + subheader: React.PropTypes.object, + buttons: React.PropTypes.object, loadPiece: React.PropTypes.func, children: React.PropTypes.object }, - mixins: [Router.Navigation], - getInitialState() { - return mergeOptions( - UserStore.getState(), - PieceListStore.getState(), - { - 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); - }, - - toggleCreateEditionsDialog() { - this.setState({ - showCreateEditionsDialog: !this.state.showCreateEditionsDialog - }); - }, - - handleEditionCreationSuccess() { - PieceActions.updateProperty({key: 'num_editions', value: 0}); - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - this.toggleCreateEditionsDialog(); - }, - - handleDeleteSuccess(response) { - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - - // 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'); - }, - - getCreateEditionsDialog() { - if(this.props.piece.num_editions < 1 && this.state.showCreateEditionsDialog) { - return ( -
- -
-
- ); - } else { - return (
); - } - }, - - handlePollingSuccess(pieceId, numEditions) { - - // we need to refresh the num_editions property of the actual piece we're looking at - PieceActions.updateProperty({ - key: 'num_editions', - value: numEditions - }); - - // as well as its representation in the collection - // btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion - // list item also uses the firstEdition property which we can only get from the server in that case. - // Therefore we need to at least refetch the changed piece from the server or on our case simply all - PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, - this.state.orderBy, this.state.orderAsc, this.state.filterBy); - - let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); + updateObject() { + return PieceActions.fetchOne(this.props.piece.id); }, render() { @@ -138,38 +33,14 @@ let Piece = React.createClass({ -
-

{this.props.piece.title}

-
- - - {this.props.piece.num_editions > 0 ? : null} -
-
-
- -
+ {this.props.header} + {this.props.subheader} + {this.props.buttons} - - - - - - {this.getCreateEditionsDialog()} {this.props.children} diff --git a/js/components/ascribe_detail/piece_container.js b/js/components/ascribe_detail/piece_container.js index 8e3a5750..8625f7a0 100644 --- a/js/components/ascribe_detail/piece_container.js +++ b/js/components/ascribe_detail/piece_container.js @@ -1,37 +1,59 @@ 'use strict'; import React from 'react'; +import Router from 'react-router'; import PieceActions from '../../actions/piece_actions'; import PieceStore from '../../stores/piece_store'; +import PieceListActions from '../../actions/piece_list_actions'; +import PieceListStore from '../../stores/piece_list_store'; + +import UserActions from '../../actions/user_actions'; +import UserStore from '../../stores/user_store'; + +import EditionListActions from '../../actions/edition_list_actions'; + import Piece from './piece'; import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph'; import FurtherDetails from './further_details'; +import DetailProperty from './detail_property'; + +import AclButtonList from './../ascribe_buttons/acl_button_list'; +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 AppConstants from '../../constants/application_constants'; +import { mergeOptions } from '../../utils/general_utils'; +import { getLangText } from '../../utils/lang_utils'; /** * This is the component that implements resource/data specific functionality */ let PieceContainer = React.createClass({ - getInitialState() { - return PieceStore.getState(); - }, - onChange(state) { - this.setState(state); - if (!state.piece.digital_work) { - return; - } - let isEncoding = state.piece.digital_work.isEncoding; - if (state.piece.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { - let timerId = window.setInterval(() => PieceActions.fetchOne(this.props.params.pieceId), 10000); - this.setState({timerId: timerId}); - } + mixins: [Router.Navigation], + + getInitialState() { + return mergeOptions( + UserStore.getState(), + PieceListStore.getState(), + PieceStore.getState(), + { + showCreateEditionsDialog: false + } + ); }, componentDidMount() { + UserStore.listen(this.onChange); + PieceListStore.listen(this.onChange); + UserActions.fetchCurrentUser(); PieceStore.listen(this.onChange); PieceActions.fetchOne(this.props.params.pieceId); }, @@ -42,21 +64,121 @@ let PieceContainer = React.createClass({ // as it will otherwise display wrong/old data once the user loads // the piece detail a second time PieceActions.updatePiece({}); - window.clearInterval(this.state.timerId); PieceStore.unlisten(this.onChange); + UserStore.unlisten(this.onChange); + PieceListStore.unlisten(this.onChange); }, + onChange(state) { + this.setState(state); + }, loadPiece() { PieceActions.fetchOne(this.props.params.pieceId); }, + + toggleCreateEditionsDialog() { + this.setState({ + showCreateEditionsDialog: !this.state.showCreateEditionsDialog + }); + }, + + handleEditionCreationSuccess() { + PieceActions.updateProperty({key: 'num_editions', value: 0}); + PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc, this.state.filterBy); + this.toggleCreateEditionsDialog(); + }, + + handleDeleteSuccess(response) { + PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc, this.state.filterBy); + + // 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'); + }, + + getCreateEditionsDialog() { + if(this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) { + return ( +
+ +
+
+ ); + } else { + return (
); + } + }, + + handlePollingSuccess(pieceId, numEditions) { + + // we need to refresh the num_editions property of the actual piece we're looking at + PieceActions.updateProperty({ + key: 'num_editions', + value: numEditions + }); + + // as well as its representation in the collection + // btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion + // list item also uses the firstEdition property which we can only get from the server in that case. + // Therefore we need to at least refetch the changed piece from the server or on our case simply all + PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc, this.state.filterBy); + + let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + render() { if('title' in this.state.piece) { return ( + loadPiece={this.loadPiece} + header={ +
+

{this.state.piece.title}

+
+ + + {this.state.piece.num_editions > 0 ? : null} +
+
+ } + subheader={ +
+ +
+ } + buttons={ + + + + + }> + {this.getCreateEditionsDialog()} ); + let AccordionListItemType = this.props.accordionListItemType; return (
{this.state.pieceList.map((piece, i) => { return ( - - + ); })} diff --git a/js/components/whitelabel/prize/actions/prize_rating_actions.js b/js/components/whitelabel/prize/actions/prize_rating_actions.js index 536445f8..e36023a0 100644 --- a/js/components/whitelabel/prize/actions/prize_rating_actions.js +++ b/js/components/whitelabel/prize/actions/prize_rating_actions.js @@ -37,7 +37,6 @@ class PrizeRatingActions { resolve(res); }) .catch((err) => { - console.logGlobal(err); reject(err); }); }); @@ -52,7 +51,6 @@ class PrizeRatingActions { resolve(res); }) .catch((err) => { - console.logGlobal(err); reject(err); }); }); diff --git a/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js new file mode 100644 index 00000000..73c82ca4 --- /dev/null +++ b/js/components/whitelabel/prize/components/ascribe_accordion_list/accordion_list_item_prize.js @@ -0,0 +1,131 @@ +'use strict'; + +import React from 'react'; +import Router from 'react-router'; +import StarRating from 'react-star-rating'; + +import AccordionListItemPiece from '../../../../ascribe_accordion_list/accordion_list_item_piece'; + +import PieceListActions from '../../../../../actions/piece_list_actions'; +import PieceListStore from '../../../../../stores/piece_list_store'; + +import UserStore from '../../../../../stores/user_store'; + +import GlobalNotificationModel from '../../../../../models/global_notification_model'; +import GlobalNotificationActions from '../../../../../actions/global_notification_actions'; + +import AclProxy from '../../../../acl_proxy'; +import SubmitToPrizeButton from './../ascribe_buttons/submit_to_prize_button'; + + +import { getLangText } from '../../../../../utils/lang_utils'; +import { mergeOptions } from '../../../../../utils/general_utils'; + +let Link = Router.Link; + + +let AccordionListItemPrize = React.createClass({ + propTypes: { + className: React.PropTypes.string, + content: React.PropTypes.object, + children: React.PropTypes.oneOfType([ + React.PropTypes.arrayOf(React.PropTypes.element), + React.PropTypes.element + ]) + }, + + getInitialState() { + return mergeOptions( + PieceListStore.getState(), + UserStore.getState() + ); + }, + + componentDidMount() { + PieceListStore.listen(this.onChange); + UserStore.listen(this.onChange); + }, + + componentWillUnmount() { + PieceListStore.unlisten(this.onChange); + UserStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + handleSubmitPrizeSuccess(response) { + PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, + this.state.orderBy, this.state.orderAsc, this.state.filterBy); + + let notification = new GlobalNotificationModel(response.notification, 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }, + + getPrizeButtons() { + if (this.state.currentUser && this.state.currentUser.is_jury){ + if (this.props.content.ratings && this.props.content.ratings.rating){ + // jury and rating available + let rating = parseInt(this.props.content.ratings.rating, 10); + return ( +
+ + + +
); + } + else { + // jury and no rating yet + return ( +
+ + Submit your rating + +
+ ); + } + } + // participant + return ( +
+ + + +
+ ); + }, + + render() { + let artistName = this.state.currentUser.is_jury ? +
} + buttons={this.getPrizeButtons()}> + {this.props.children} + + ); + } +}); + +export default AccordionListItemPrize; diff --git a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js b/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js index b6363868..b41703e7 100644 --- a/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js +++ b/js/components/whitelabel/prize/components/ascribe_detail/piece_container.js @@ -1,15 +1,21 @@ 'use strict'; import React from 'react'; +import Router from 'react-router'; import StarRating from 'react-star-rating'; import PieceActions from '../../../../../actions/piece_actions'; import PieceStore from '../../../../../stores/piece_store'; +import PieceListStore from '../../../../../stores/piece_list_store'; +import PieceListActions from '../../../../../actions/piece_list_actions'; + import PrizeRatingActions from '../../actions/prize_rating_actions'; import PrizeRatingStore from '../../stores/prize_rating_store'; +import UserStore from '../../../../../stores/user_store'; + import Piece from '../../../../../components/ascribe_detail/piece'; import AppConstants from '../../../../../constants/application_constants'; @@ -19,21 +25,32 @@ import Property from '../../../../../components/ascribe_forms/property'; import InputTextAreaToggable from '../../../../../components/ascribe_forms/input_textarea_toggable'; import CollapsibleParagraph from '../../../../../components/ascribe_collapsible/collapsible_paragraph'; +import GlobalNotificationModel from '../../../../../models/global_notification_model'; +import GlobalNotificationActions from '../../../../../actions/global_notification_actions'; + +import DetailProperty from '../../../../ascribe_detail/detail_property'; + +import ApiUrls from '../../../../../constants/api_urls'; +import { mergeOptions } from '../../../../../utils/general_utils'; +import { getLangText } from '../../../../../utils/lang_utils'; + +let Link = Router.Link; + /** * This is the component that implements resource/data specific functionality */ let PieceContainer = React.createClass({ getInitialState() { - return PieceStore.getState(); - }, - - onChange(state) { - this.setState(state); + return mergeOptions( + PieceStore.getState(), + UserStore.getState() + ); }, componentDidMount() { PieceStore.listen(this.onChange); PieceActions.fetchOne(this.props.params.pieceId); + UserStore.listen(this.onChange); }, componentWillUnmount() { @@ -42,10 +59,20 @@ let PieceContainer = React.createClass({ // as it will otherwise display wrong/old data once the user loads // the piece detail a second time PieceActions.updatePiece({}); - PieceStore.unlisten(this.onChange); + UserStore.unlisten(this.onChange); }, + componentWillReceiveProps(nextProps) { + if(this.props.params.pieceId !== nextProps.params.pieceId) { + PieceActions.updatePiece({}); + PieceActions.fetchOne(nextProps.params.pieceId); + } + }, + + onChange(state) { + this.setState(state); + }, loadPiece() { PieceActions.fetchOne(this.props.params.pieceId); @@ -53,10 +80,29 @@ let PieceContainer = React.createClass({ render() { if('title' in this.state.piece) { + let artistName = this.state.currentUser.is_jury ? +