diff --git a/js/components/ascribe_accordion_list/accordion_list_item.js b/js/components/ascribe_accordion_list/accordion_list_item.js index 593e84d6..8ed27235 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item.js +++ b/js/components/ascribe_accordion_list/accordion_list_item.js @@ -7,22 +7,26 @@ 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 requests from '../../utils/requests'; import { getLangText } from '../../utils/lang_utils'; let AccordionListItem = React.createClass({ - mixins: [Router.Navigation], - propTypes: { className: React.PropTypes.string, content: React.PropTypes.object, children: React.PropTypes.object }, + + mixins: [Router.Navigation], + handleClick(){ requests.get('piece_first_edition_id', {'piece_id': this.props.content.id}) .then((res) => this.transitionTo('edition', {editionId: res.bitcoin_id})); }, + getGlyphicon(){ if (this.props.content.requestAction){ return ( @@ -33,7 +37,9 @@ let AccordionListItem = React.createClass({ } return null; }, + render() { + return (
@@ -51,9 +57,12 @@ let AccordionListItem = React.createClass({

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

{this.props.content.date_created.split('-')[0]} + {/* {getLangText('%s license', this.props.content.license_type.code)} */} +
diff --git a/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js new file mode 100644 index 00000000..e66705be --- /dev/null +++ b/js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js @@ -0,0 +1,69 @@ +'use strict'; + +import React from 'react'; + +import EditionListActions from '../../actions/edition_list_actions'; +import EditionListStore from '../../stores/edition_list_store'; + +import { getLangText } from '../../utils/lang_utils'; + +let AccordionListItemEditionWidget = React.createClass({ + propTypes: { + piece: React.PropTypes.object + }, + + getInitialState() { + return EditionListStore.getState(); + }, + + componentDidMount() { + EditionListStore.listen(this.onChange); + }, + + componentWillUnmount() { + EditionListStore.unlisten(this.onChange); + }, + + onChange(state) { + this.setState(state); + }, + + toggleTable() { + let pieceId = this.props.piece.id; + let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; + + if(isEditionListOpen) { + EditionListActions.toggleEditionList(pieceId); + } else { + EditionListActions.toggleEditionList(pieceId); + EditionListActions.fetchEditionList(pieceId); + } + }, + + getGlyphicon() { + let pieceId = this.props.piece.id; + let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; + + if(isEditionListOpen) { + return ( + + ); + } else { + return ( + + ); + } + }, + + render() { + return ( + + {this.getGlyphicon()} {this.props.piece.num_editions + ' ' + getLangText('Editions')} + + ); + } +}); + +export default AccordionListItemEditionWidget; \ No newline at end of file diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js index 76b1aad1..1a34464d 100644 --- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js +++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js @@ -69,16 +69,6 @@ let AccordionListItemTableEditions = React.createClass({ return selectedEditions; }, - toggleTable() { - let isEditionListOpen = this.state.isEditionListOpenForPieceId[this.props.parentId] ? this.state.isEditionListOpenForPieceId[this.props.parentId].show : false; - if(isEditionListOpen) { - EditionListActions.toggleEditionList(this.props.parentId); - } else { - EditionListActions.toggleEditionList(this.props.parentId); - EditionListActions.fetchEditionList(this.props.parentId); - } - }, - loadFurtherEditions() { // trigger loading animation this.setState({ @@ -187,14 +177,14 @@ let AccordionListItemTableEditions = React.createClass({ ) ]; - let loadingSpinner = ; + let loadingSpinner = ; return (
- {getLangText('Hide editions')} : {getLangText('Show editions')} {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}} /> + message={show && typeof editionsForPiece !== 'undefined' ? {getLangText('Hide editions')} : {getLangText('Show editions')} {show && typeof editionsForPiece === 'undefined' ? loadingSpinner : null}} /> */} {this.state.pieceList.map((piece, i) => { - - let editionsTableForPiece; - - if(piece.num_editions !== 1) { - editionsTableForPiece = ; - } - return ( - {editionsTableForPiece} + ); })} diff --git a/js/constants/languages.js b/js/constants/languages.js index 4d8caeb1..1a43d1d3 100644 --- a/js/constants/languages.js +++ b/js/constants/languages.js @@ -204,7 +204,8 @@ const languages = { 'Have someone else sell the artwork': 'Have someone else sell the artwork', 'Loan History': 'Loan History', 'Title': 'Title', - 'Specify editions': 'Specify editions' + 'Specify editions': 'Specify editions', + 'Editions': 'Editions', }, 'de': { 'ID': 'ID', @@ -409,7 +410,8 @@ const languages = { 'Have someone else sell the artwork': 'Have someone else sell the artwork', 'Loan History': 'Loan History', 'Title': 'Titel', - 'Specify editions': 'Specify editions' + 'Specify editions': 'Specify editions', + 'Editions': 'Editions', }, 'fr': { 'ID': 'ID', @@ -614,7 +616,8 @@ const languages = { 'Have someone else sell the artwork': 'Demandez à quelqu\'un de vendre l\'oeuvre', 'Loan History': 'Historique de Prêts', 'Title': 'Title', - 'Specify editions': 'Specify editions' + 'Specify editions': 'Specify editions', + 'Editions': 'Editions', } }; diff --git a/sass/ascribe_accordion_list.scss b/sass/ascribe_accordion_list.scss index 74fb2893..82372cc9 100644 --- a/sass/ascribe_accordion_list.scss +++ b/sass/ascribe_accordion_list.scss @@ -139,4 +139,12 @@ span.ascribe-accordion-list-table-toggle { color: #666; font-size: 1.2em; padding: 0.3em; +} + +.ascribe-accordion-list-item-edition-widget { + cursor: pointer; + + &:hover { + color: $ascribe-color-full; + } } \ No newline at end of file