ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-12-22 17:33:14 +01:00
Code Issues Releases Wiki Activity

Merge branch 'master' into AD-1452-share-to-facebook-not-loaded

Browse Source
This commit is contained in:
Brett Sun 2016-01-19 10:18:52 +01:00
commit dbdef3ce6b
91 changed files with 1359 additions and 1262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/actions/edition_actions.js
View File

@ -7,11 +7,11 @@ class EditionActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'fetchEdition', 'fetchEdition',
'successFetchEdition',
'successFetchCoa', 'successFetchCoa',
'flushEdition', 'successFetchEdition',
'errorCoa', 'errorCoa',
'errorEdition' 'errorEdition',
'flushEdition'
); );
} }
} }

24
js/actions/edition_list_actions.js
View File

@ -17,23 +17,31 @@ class EditionListActions {
); );
} }
fetchEditionList(pieceId, page, pageSize, orderBy, orderAsc, filterBy) { fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) {
if((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) { if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
orderBy = 'edition_number'; orderBy = 'edition_number';
orderAsc = true; orderAsc = true;
} }
// Taken from: http://stackoverflow.com/a/519157/1263876 // Taken from: http://stackoverflow.com/a/519157/1263876
if((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) { if ((typeof page === 'undefined' || !page) && (typeof pageSize === 'undefined' || !pageSize)) {
page = 1; page = 1;
pageSize = 10; pageSize = 10;
} }
let itemsToFetch = pageSize;
// If we only want to fetch up to a specified edition, fetch all pages up to it
// as one page and adjust afterwards
if (typeof maxEdition === 'number') {
itemsToFetch = Math.ceil(maxEdition / pageSize) * pageSize;
page = 1;
}
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
EditionListFetcher EditionListFetcher
.fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) .fetch({ pieceId, page, itemsToFetch, orderBy, orderAsc, filterBy })
.then((res) => { .then((res) => {
if(res && !res.editions) { if (res && !res.editions) {
throw new Error('Piece has no editions to fetch.'); throw new Error('Piece has no editions to fetch.');
} }
@ -44,8 +52,9 @@ class EditionListActions {
orderBy, orderBy,
orderAsc, orderAsc,
filterBy, filterBy,
'editionListOfPiece': res.editions, maxEdition,
'count': res.count count: res.count,
editionListOfPiece: res.editions
}); });
resolve(res); resolve(res);
}) })
@ -54,7 +63,6 @@ class EditionListActions {
reject(err); reject(err);
}); });
}); });
} }
} }

19
js/actions/piece_actions.js
View File

@ -1,28 +1,19 @@
'use strict'; 'use strict';
import { alt } from '../alt'; import { alt } from '../alt';
import PieceFetcher from '../fetchers/piece_fetcher';
class PieceActions { class PieceActions {
constructor() { constructor() {
this.generateActions( this.generateActions(
'fetchPiece',
'successFetchPiece',
'errorPiece',
'flushPiece',
'updatePiece', 'updatePiece',
'updateProperty', 'updateProperty'
'pieceFailed'
); );
} }
fetchOne(pieceId) {
PieceFetcher.fetchOne(pieceId)
.then((res) => {
this.actions.updatePiece(res.piece);
})
.catch((err) => {
console.logGlobal(err);
this.actions.pieceFailed(err.json);
});
}
} }
export default alt.createActions(PieceActions); export default alt.createActions(PieceActions);

4
js/actions/piece_list_actions.js
View File

@ -15,7 +15,7 @@ class PieceListActions {
); );
} }
fetchPieceList(page, pageSize, search, orderBy, orderAsc, filterBy) { fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
// To prevent flickering on a pagination request, // To prevent flickering on a pagination request,
// we overwrite the piecelist with an empty list before // we overwrite the piecelist with an empty list before
// pieceListCount === -1 defines the loading state // pieceListCount === -1 defines the loading state
@ -34,7 +34,7 @@ class PieceListActions {
// afterwards, we can load the list // afterwards, we can load the list
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PieceListFetcher PieceListFetcher
.fetch(page, pageSize, search, orderBy, orderAsc, filterBy) .fetch({ page, pageSize, search, orderBy, orderAsc, filterBy })
.then((res) => { .then((res) => {
this.actions.updatePieceList({ this.actions.updatePieceList({
page, page,

34
js/actions/prize_list_actions.js
View File

@ -1,34 +0,0 @@
'use strict';
import { alt } from '../alt';
import Q from 'q';
import PrizeListFetcher from '../fetchers/prize_list_fetcher';
class PrizeListActions {
constructor() {
this.generateActions(
'updatePrizeList'
);
}
fetchPrizeList() {
return Q.Promise((resolve, reject) => {
PrizeListFetcher
.fetch()
.then((res) => {
this.actions.updatePrizeList({
prizeList: res.prizes,
prizeListCount: res.count
});
resolve(res);
})
.catch((err) => {
console.logGlobal(err);
reject(err);
});
});
}
}
export default alt.createActions(PrizeListActions);

1
js/app.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import 'babel/polyfill'; import 'babel/polyfill';
import 'classlist-polyfill';
import React from 'react'; import React from 'react';
import { Router, Redirect } from 'react-router'; import { Router, Redirect } from 'react-router';

12
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -19,9 +19,10 @@ import { getLangText } from '../../utils/lang_utils';
let AccordionListItemEditionWidget = React.createClass({ let AccordionListItemEditionWidget = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
toggleCreateEditionsDialog: React.PropTypes.func.isRequired, toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
className: React.PropTypes.string,
onPollingSuccess: React.PropTypes.func onPollingSuccess: React.PropTypes.func
}, },
@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({
* Calls the store to either show or hide the editionListTable * Calls the store to either show or hide the editionListTable
*/ */
toggleTable() { toggleTable() {
let pieceId = this.props.piece.id; const { piece: { id: pieceId } } = this.props;
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false; const { filterBy, isEditionListOpenForPieceId } = this.state;
const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) { if (isEditionListOpen) {
EditionListActions.toggleEditionList(pieceId); EditionListActions.toggleEditionList(pieceId);
} else { } else {
EditionListActions.toggleEditionList(pieceId); EditionListActions.toggleEditionList(pieceId);
EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy); EditionListActions.fetchEditionList({ pieceId, filterBy });
} }
}, },

139
js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
View File

@ -66,22 +66,34 @@ let AccordionListItemTableEditions = React.createClass({
}, },
filterSelectedEditions() { filterSelectedEditions() {
let selectedEditions = this.state.editionList[this.props.parentId] return this.state
.editionList[this.props.parentId]
.filter((edition) => edition.selected); .filter((edition) => edition.selected);
return selectedEditions;
}, },
loadFurtherEditions() { loadFurtherEditions() {
const { parentId: pieceId } = this.props;
const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId];
// trigger loading animation // trigger loading animation
this.setState({ this.setState({
showMoreLoading: true showMoreLoading: true
}); });
let editionList = this.state.editionList[this.props.parentId]; EditionListActions.fetchEditionList({
EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize, pieceId,
editionList.orderBy, editionList.orderAsc, editionList.filterBy); pageSize,
orderBy,
orderAsc,
filterBy,
page: page + 1
});
}, },
render() { render() {
const { className, parentId } = this.props;
const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
const editionsForPiece = editionList[parentId];
let selectedEditionsCount = 0; let selectedEditionsCount = 0;
let allEditionsCount = 0; let allEditionsCount = 0;
let orderBy; let orderBy;
@ -89,95 +101,97 @@ let AccordionListItemTableEditions = React.createClass({
let show = false; let show = false;
let showExpandOption = false; let showExpandOption = false;
let editionsForPiece = this.state.editionList[this.props.parentId];
let loadingSpinner = <AscribeSpinner size="sm" color="dark-blue" />;
// here we need to check if all editions of a specific // here we need to check if all editions of a specific
// piece are already defined. Otherwise .length will throw an error and we'll not // piece are already defined. Otherwise .length will throw an error and we'll not
// be notified about it. // be notified about it.
if(editionsForPiece) { if (editionsForPiece) {
selectedEditionsCount = this.filterSelectedEditions().length; selectedEditionsCount = this.filterSelectedEditions().length;
allEditionsCount = editionsForPiece.length; allEditionsCount = editionsForPiece.length;
orderBy = editionsForPiece.orderBy; orderBy = editionsForPiece.orderBy;
orderAsc = editionsForPiece.orderAsc; orderAsc = editionsForPiece.orderAsc;
} }
if(this.props.parentId in this.state.isEditionListOpenForPieceId) { if (parentId in isEditionListOpenForPieceId) {
show = this.state.isEditionListOpenForPieceId[this.props.parentId].show; show = isEditionListOpenForPieceId[parentId].show;
} }
// if the number of editions in the array is equal to the maximum number of editions, // if the number of editions in the array is equal to the maximum number of editions,
// then the "Show me more" dialog should be hidden from the user's view // then the "Show me more" dialog should be hidden from the user's view
if(editionsForPiece && editionsForPiece.count > editionsForPiece.length) { if (editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
showExpandOption = true; showExpandOption = true;
} }
let transition = new TransitionModel('editions', 'editionId', 'bitcoin_id', (e) => e.stopPropagation() ); const transition = new TransitionModel({
to: 'editions',
queryKey: 'editionId',
valueKey: 'bitcoin_id',
callback: (e) => e.stopPropagation()
});
let columnList = [ const columnList = [
new ColumnModel( new ColumnModel({
(item) => { transformFn: (item) => {
return { return {
'editionId': item.id, 'editionId': item.id,
'pieceId': this.props.parentId, 'pieceId': parentId,
'selectItem': this.selectItem, 'selectItem': this.selectItem,
'selected': item.selected 'selected': item.selected
}; }, };
'', },
displayElement: (
<AccordionListItemTableSelectAllEditionsCheckbox <AccordionListItemTableSelectAllEditionsCheckbox
onChange={this.toggleAllItems} onChange={this.toggleAllItems}
numOfSelectedEditions={selectedEditionsCount} numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>, numOfAllEditions={allEditionsCount}/>
TableItemCheckbox,
1,
false
), ),
new ColumnModel( displayType: TableItemCheckbox,
(item) => { rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return { return {
'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions 'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
}; }, };
'edition_number', },
getLangText('Edition'), columnName: 'edition_number',
TableItemText, displayElement: getLangText('Edition'),
1, displayType: TableItemText,
false, rowWidth: 1
transition }),
), new ColumnModel({
new ColumnModel( transition,
(item) => { transformFn: (item) => {
return { return {
'content': item.bitcoin_id 'content': item.bitcoin_id
}; }, };
'bitcoin_id', },
getLangText('ID'), columnName: 'bitcoin_id',
TableItemText, displayElement: getLangText('ID'),
5, displayType: TableItemText,
false, rowWidth: 5,
className: 'hidden-xs visible-sm visible-md visible-lg'
}),
new ColumnModel({
transition, transition,
'hidden-xs visible-sm visible-md visible-lg' transformFn: (item) => {
),
new ColumnModel(
(item) => {
let content = item.acl;
return { return {
'content': content, 'content': item.acl,
'notifications': item.notifications 'notifications': item.notifications
}; }, };
'acl', },
getLangText('Actions'), columnName: 'acl',
TableItemAclFiltered, displayElement: getLangText('Actions'),
4, displayType: TableItemAclFiltered,
false, rowWidth: 4
transition })
)
]; ];
if(show && editionsForPiece && editionsForPiece.length > 0) { if (show && editionsForPiece && editionsForPiece.length) {
return ( return (
<div className={this.props.className}> <div className={className}>
<AccordionListItemTable <AccordionListItemTable
parentId={this.props.parentId} parentId={parentId}
itemList={editionsForPiece} itemList={editionsForPiece}
columnList={columnList} columnList={columnList}
show={show} show={show}
@ -188,7 +202,14 @@ let AccordionListItemTableEditions = React.createClass({
<AccordionListItemTableToggle <AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle" className="ascribe-accordion-list-table-toggle"
onClick={this.loadFurtherEditions} onClick={this.loadFurtherEditions}
message={show && showExpandOption ? <span>{this.state.showMoreLoading ? loadingSpinner : <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />} Show me more</span> : null} /> message={show && showExpandOption ? (
<span>
{showMoreLoading ? <AscribeSpinner size="sm" color="dark-blue" />
: <span className="glyphicon glyphicon-option-horizontal" aria-hidden="true" style={{top: 3}} />}
{getLangText('Show me more')}
</span>
) : null
} />
</div> </div>
); );
} else { } else {

7
js/components/ascribe_accordion_list/accordion_list_item_wallet.js
View File

@ -88,11 +88,12 @@ let AccordionListItemWallet = React.createClass({
}, },
onPollingSuccess(pieceId) { onPollingSuccess(pieceId) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
EditionListActions.toggleEditionList(pieceId); EditionListActions.toggleEditionList(pieceId);
let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); const notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },

20
js/components/ascribe_buttons/create_editions_button.js
View File

@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({
EditionListStore.listen(this.onChange); EditionListStore.listen(this.onChange);
}, },
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
componentWillUnmount() { componentWillUnmount() {
EditionListStore.unlisten(this.onChange); EditionListStore.unlisten(this.onChange);
clearInterval(this.state.pollingIntervalIndex); clearInterval(this.state.pollingIntervalIndex);
@ -37,24 +43,20 @@ let CreateEditionsButton = React.createClass({
this.setState(state); this.setState(state);
}, },
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
startPolling() { startPolling() {
// start polling until editions are defined // start polling until editions are defined
let pollingIntervalIndex = setInterval(() => { let pollingIntervalIndex = setInterval(() => {
// requests, will try to merge the filterBy parameter with other parameters (mergeOptions). // requests, will try to merge the filterBy parameter with other parameters (mergeOptions).
// Therefore it can't but null but instead has to be an empty object // Therefore it can't but null but instead has to be an empty object
EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {}) EditionListActions
.fetchEditionList({
pieceId: this.props.piece.id,
filterBy: {}
})
.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);
}) })
.catch((err) => { .catch((err) => {
/* Ignore and keep going */ /* Ignore and keep going */

93
js/components/ascribe_detail/edition.js
View File

@ -1,7 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link, History } from 'react-router'; import { Link } from 'react-router';
import Moment from 'moment'; import Moment from 'moment';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
@ -44,8 +44,6 @@ let Edition = React.createClass({
loadEdition: React.PropTypes.func loadEdition: React.PropTypes.func
}, },
mixins: [History],
getDefaultProps() { getDefaultProps() {
return { return {
furtherDetailsType: FurtherDetails furtherDetailsType: FurtherDetails
@ -53,98 +51,103 @@ let Edition = React.createClass({
}, },
render() { render() {
let FurtherDetailsType = this.props.furtherDetailsType; const {
actionPanelButtonListType,
coaError,
currentUser,
edition,
furtherDetailsType: FurtherDetailsType,
loadEdition } = this.props;
return ( return (
<Row> <Row>
<Col md={6} className="ascribe-print-col-left"> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
content={this.props.edition}/> content={edition}
currentUser={currentUser} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1> <h1 className="ascribe-detail-title">{edition.title}</h1>
<DetailProperty label="BY" value={this.props.edition.artist_name} /> <DetailProperty label="BY" value={edition.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
<EditionSummary <EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
edition={this.props.edition} edition={edition}
currentUser={this.props.currentUser} currentUser={currentUser}
handleSuccess={this.props.loadEdition}/> handleSuccess={loadEdition}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Certificate of Authenticity')} title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}> show={edition.acl.acl_coa === true}>
<CoaDetails <CoaDetails
coa={this.props.edition.coa} coa={edition.coa}
coaError={this.props.coaError} coaError={coaError}
editionId={this.props.edition.bitcoin_id}/> editionId={edition.bitcoin_id}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Provenance/Ownership History')} title={getLangText('Provenance/Ownership History')}
show={this.props.edition.ownership_history && this.props.edition.ownership_history.length > 0}> show={edition.ownership_history && edition.ownership_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.ownership_history} /> history={edition.ownership_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Consignment History')} title={getLangText('Consignment History')}
show={this.props.edition.consign_history && this.props.edition.consign_history.length > 0}> show={edition.consign_history && edition.consign_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.consign_history} /> history={edition.consign_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.edition.loan_history && this.props.edition.loan_history.length > 0}> show={edition.loan_history && edition.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.edition.loan_history} /> history={edition.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title="Notes" title="Notes"
show={!!(this.props.currentUser.username show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.props.edition.private_note ? this.props.edition.private_note : null} defaultValue={edition.private_note ? edition.private_note : null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition} url={ApiUrls.note_private_edition}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
label={getLangText('Personal note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null} defaultValue={edition.public_note ? edition.public_note : null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit} editable={!!edition.acl.acl_edit}
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit} show={!!edition.public_note || !!edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')} successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition} url={ApiUrls.note_public_edition}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit show={edition.acl.acl_edit ||
|| Object.keys(this.props.edition.extra_data).length > 0 Object.keys(edition.extra_data).length > 0 ||
|| this.props.edition.other_data.length > 0}> edition.other_data.length > 0}>
<FurtherDetailsType <FurtherDetailsType
editable={this.props.edition.acl.acl_edit} editable={edition.acl.acl_edit}
pieceId={this.props.edition.parent} pieceId={edition.parent}
extraData={this.props.edition.extra_data} extraData={edition.extra_data}
otherData={this.props.edition.other_data} otherData={edition.other_data}
handleSuccess={this.props.loadEdition} /> handleSuccess={loadEdition} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('SPOOL Details')}> title={getLangText('SPOOL Details')}>
<SpoolDetails <SpoolDetails
edition={this.props.edition} /> edition={edition} />
</CollapsibleParagraph> </CollapsibleParagraph>
</Col> </Col>
</Row> </Row>
@ -221,7 +224,11 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({ let CoaDetails = React.createClass({
propTypes: { propTypes: {
editionId: React.PropTypes.string, editionId: React.PropTypes.string,
coa: React.PropTypes.object, coa: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
React.PropTypes.object
]),
coaError: React.PropTypes.object coaError: React.PropTypes.object
}, },

15
js/components/ascribe_detail/edition_action_panel.js
View File

@ -72,19 +72,20 @@ let EditionActionPanel = React.createClass({
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
refreshCollection() { refreshCollection() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
EditionListActions.refreshEditionList({pieceId: this.props.edition.parent}); PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
EditionListActions.refreshEditionList({ pieceId: this.props.edition.parent });
}, },
handleSuccess(response){ handleSuccess(response) {
this.refreshCollection(); this.refreshCollection();
this.props.handleSuccess(); this.props.handleSuccess();
if (response){ if (response){
@ -93,7 +94,7 @@ let EditionActionPanel = React.createClass({
} }
}, },
render(){ render() {
const { const {
actionPanelButtonListType: ActionPanelButtonListType, actionPanelButtonListType: ActionPanelButtonListType,
edition, edition,

32
js/components/ascribe_detail/edition_container.js
View File

@ -35,7 +35,7 @@ let EditionContainer = React.createClass({
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
EditionStore.getState(), EditionStore.getInitialState(),
UserStore.getState() UserStore.getState()
); );
}, },
@ -44,27 +44,23 @@ let EditionContainer = React.createClass({
EditionStore.listen(this.onChange); EditionStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
// Every time we're entering the edition detail page, this.loadEdition();
// just reset the edition that is saved in the edition store
// as it will otherwise display wrong/old data once the user loads
// the edition detail a second time
EditionActions.flushEdition();
EditionActions.fetchEdition(this.props.params.editionId);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
}, },
// This is done to update the container when the user clicks on the prev or next // This is done to update the container when the user clicks on the prev or next
// button to update the URL parameter (and therefore to switch pieces) // button to update the URL parameter (and therefore to switch pieces)
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(this.props.params.editionId !== nextProps.params.editionId) { if (this.props.params.editionId !== nextProps.params.editionId) {
EditionActions.fetchEdition(this.props.params.editionId); EditionActions.flushEdition();
this.loadEdition(nextProps.params.editionId);
} }
}, },
componentDidUpdate() { componentDidUpdate() {
const { editionMeta } = this.state; const { err: editionErr } = this.state.editionMeta;
if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
if (editionErr && editionErr.json && editionErr.json.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist."))); this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
} }
}, },
@ -81,18 +77,22 @@ let EditionContainer = React.createClass({
if(state && state.edition && state.edition.digital_work) { if(state && state.edition && state.edition.digital_work) {
let isEncoding = state.edition.digital_work.isEncoding; let isEncoding = state.edition.digital_work.isEncoding;
if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { if (state.edition.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(() => EditionActions.fetchOne(this.props.params.editionId), 10000); let timerId = window.setInterval(() => EditionActions.fetchEdition(this.props.params.editionId), 10000);
this.setState({timerId: timerId}); this.setState({timerId: timerId});
} }
} }
}, },
loadEdition(editionId = this.props.params.editionId) {
EditionActions.fetchEdition(editionId);
},
render() { render() {
const { edition, currentUser, coaMeta } = this.state; const { edition, currentUser, coaMeta } = this.state;
const { actionPanelButtonListType, furtherDetailsType } = this.props; const { actionPanelButtonListType, furtherDetailsType } = this.props;
if (Object.keys(edition).length && edition.id) { if (edition.id) {
setDocumentTitle([edition.artist_name, edition.title].join(', ')); setDocumentTitle(`${edition.artist_name}, ${edition.title}`);
return ( return (
<Edition <Edition
@ -101,7 +101,7 @@ let EditionContainer = React.createClass({
edition={edition} edition={edition}
coaError={coaMeta.err} coaError={coaMeta.err}
currentUser={currentUser} currentUser={currentUser}
loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)} /> loadEdition={this.loadEdition} />
); );
} else { } else {
return ( return (

30
js/components/ascribe_detail/further_details.js
View File

@ -5,25 +5,27 @@ import React from 'react';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col'; import Col from 'react-bootstrap/lib/Col';
import Form from './../ascribe_forms/form';
import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import FurtherDetailsFileuploader from './further_details_fileuploader'; import FurtherDetailsFileuploader from './further_details_fileuploader';
import Form from './../ascribe_forms/form';
import PieceExtraDataForm from './../ascribe_forms/form_piece_extradata';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils'; import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { getLangText } from '../../utils/lang_utils';
let FurtherDetails = React.createClass({ let FurtherDetails = React.createClass({
propTypes: { propTypes: {
pieceId: React.PropTypes.number.isRequired,
editable: React.PropTypes.bool, editable: React.PropTypes.bool,
pieceId: React.PropTypes.number,
extraData: React.PropTypes.object, extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
otherData: React.PropTypes.arrayOf(React.PropTypes.object), otherData: React.PropTypes.arrayOf(React.PropTypes.object),
handleSuccess: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
@ -32,13 +34,18 @@ let FurtherDetails = React.createClass({
}; };
}, },
showNotification(){ showNotification() {
this.props.handleSuccess(); const { handleSuccess } = this.props;
let notification = new GlobalNotificationModel('Details updated', 'success');
if (typeof handleSucess === 'function') {
handleSuccess();
}
const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
submitFile(file){ submitFile(file) {
this.setState({ this.setState({
otherDataKey: file.key otherDataKey: file.key
}); });
@ -60,8 +67,7 @@ let FurtherDetails = React.createClass({
handleSuccess={this.showNotification} handleSuccess={this.showNotification}
editable={this.props.editable} editable={this.props.editable}
pieceId={this.props.pieceId} pieceId={this.props.pieceId}
extraData={this.props.extraData} extraData={this.props.extraData} />
/>
<PieceExtraDataForm <PieceExtraDataForm
name='display_instructions' name='display_instructions'
title='Display Instructions' title='Display Instructions'

42
js/components/ascribe_detail/media_container.js
View File

@ -14,10 +14,6 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
import AclProxy from '../acl_proxy'; import AclProxy from '../acl_proxy';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import { mergeOptions } from '../../utils/general_utils.js';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
const EMBED_IFRAME_HEIGHT = { const EMBED_IFRAME_HEIGHT = {
@ -28,25 +24,22 @@ const EMBED_IFRAME_HEIGHT = {
let MediaContainer = React.createClass({ let MediaContainer = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
currentUser: React.PropTypes.object,
refreshObject: React.PropTypes.func refreshObject: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
return mergeOptions( return {
UserStore.getState(),
{
timerId: null timerId: null
}); };
}, },
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
if (!this.props.content.digital_work) { if (!this.props.content.digital_work) {
return; return;
} }
let isEncoding = this.props.content.digital_work.isEncoding;
const isEncoding = this.props.content.digital_work.isEncoding;
if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) { if (this.props.content.digital_work.mime === 'video' && typeof isEncoding === 'number' && isEncoding !== 100 && !this.state.timerId) {
let timerId = window.setInterval(this.props.refreshObject, 10000); let timerId = window.setInterval(this.props.refreshObject, 10000);
this.setState({timerId: timerId}); this.setState({timerId: timerId});
@ -60,22 +53,16 @@ let MediaContainer = React.createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
UserStore.unlisten(this.onChange);
window.clearInterval(this.state.timerId); window.clearInterval(this.state.timerId);
}, },
onChange(state) {
this.setState(state);
},
render() { render() {
const { content } = this.props; const { content, currentUser } = this.props;
// Pieces and editions are joined to the user by a foreign key in the database, so // Pieces and editions are joined to the user by a foreign key in the database, so
// the information in content will be updated if a user updates their username. // the information in content will be updated if a user updates their username.
// We also force uniqueness of usernames, so this check is safe to dtermine if the // We also force uniqueness of usernames, so this check is safe to dtermine if the
// content was registered by the current user. // content was registered by the current user.
const didUserRegisterContent = this.state.currentUser && (this.state.currentUser.username === content.user_registered); const didUserRegisterContent = currentUser && (currentUser.username === content.user_registered);
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ? let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe; content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@ -94,8 +81,11 @@ let MediaContainer = React.createClass({
embed = ( embed = (
<CollapsibleButton <CollapsibleButton
button={ button={
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}> <Button
Embed bsSize="xsmall"
className="ascribe-margin-1px"
disabled={isEmbedDisabled}>
{getLangText('Embed')}
</Button> </Button>
} }
panel={ panel={
@ -125,8 +115,12 @@ let MediaContainer = React.createClass({
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download} show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
aclObject={content.acl} aclObject={content.acl}
aclName="acl_download"> aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank"> <Button
Download .{mimetype} <Glyphicon glyph="cloud-download"/> bsSize="xsmall"
className="ascribe-margin-1px"
href={content.digital_work.url}
target="_blank">
{getLangText('Download')} .{mimetype} <Glyphicon glyph="cloud-download"/>
</Button> </Button>
</AclProxy> </AclProxy>
{embed} {embed}

20
js/components/ascribe_detail/piece.js
View File

@ -16,10 +16,10 @@ import MediaContainer from './media_container';
let Piece = React.createClass({ let Piece = React.createClass({
propTypes: { propTypes: {
piece: React.PropTypes.object, piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
header: React.PropTypes.object, header: React.PropTypes.object,
subheader: React.PropTypes.object, subheader: React.PropTypes.object,
buttons: React.PropTypes.object, buttons: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -28,24 +28,26 @@ let Piece = React.createClass({
updateObject() { updateObject() {
return PieceActions.fetchOne(this.props.piece.id); return PieceActions.fetchPiece(this.props.piece.id);
}, },
render() { render() {
const { buttons, children, currentUser, header, piece, subheader } = this.props;
return ( return (
<Row> <Row>
<Col md={6} className="ascribe-print-col-left"> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
refreshObject={this.updateObject} content={piece}
content={this.props.piece}/> currentUser={currentUser}
refreshObject={this.updateObject} />
</Col> </Col>
<Col md={6} className="ascribe-edition-details ascribe-print-col-right"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header} {header}
{this.props.subheader} {subheader}
{this.props.buttons} {buttons}
{this.props.children}
{children}
</Col> </Col>
</Row> </Row>
); );

134
js/components/ascribe_detail/piece_container.js
View File

@ -69,7 +69,7 @@ let PieceContainer = React.createClass({
return mergeOptions( return mergeOptions(
UserStore.getState(), UserStore.getState(),
PieceListStore.getState(), PieceListStore.getState(),
PieceStore.getState(), PieceStore.getInitialState(),
{ {
showCreateEditionsDialog: false showCreateEditionsDialog: false
} }
@ -81,19 +81,24 @@ let PieceContainer = React.createClass({
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
this.loadPiece(); this.loadPiece();
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
}, },
componentDidUpdate() { // This is done to update the container when the user clicks on the prev or next
const { pieceError } = this.state; // button to update the URL parameter (and therefore to switch pieces) or
// when the user clicks on a notification while being in another piece view
componentWillReceiveProps(nextProps) {
if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.flushPiece();
this.loadPiece(nextProps.params.pieceId);
}
},
if (pieceError && pieceError.status === 404) { componentDidUpdate() {
const { err: pieceErr } = this.state.pieceMeta;
if (pieceErr && pieceErr.json && pieceErr.json.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist."))); this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
} }
}, },
@ -116,8 +121,7 @@ let PieceContainer = React.createClass({
ALSO, WE ENABLED THE LOAN BUTTON FOR IKONOTV TO LET THEM LOAN ON A PIECE LEVEL ALSO, WE ENABLED THE LOAN BUTTON FOR IKONOTV TO LET THEM LOAN ON A PIECE LEVEL
*/ */
if(state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') { if (state && state.piece && state.piece.acl && typeof state.piece.acl.acl_loan !== 'undefined') {
let pieceState = mergeOptions({}, state.piece); let pieceState = mergeOptions({}, state.piece);
pieceState.acl.acl_loan = false; pieceState.acl.acl_loan = false;
this.setState({ this.setState({
@ -129,11 +133,10 @@ let PieceContainer = React.createClass({
} }
}, },
loadPiece() { loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchOne(this.props.params.pieceId); PieceActions.fetchPiece(pieceId);
}, },
toggleCreateEditionsDialog() { toggleCreateEditionsDialog() {
this.setState({ this.setState({
showCreateEditionsDialog: !this.state.showCreateEditionsDialog showCreateEditionsDialog: !this.state.showCreateEditionsDialog
@ -141,43 +144,47 @@ let PieceContainer = React.createClass({
}, },
handleEditionCreationSuccess() { handleEditionCreationSuccess() {
PieceActions.updateProperty({key: 'num_editions', value: 0}); const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy); PieceActions.updateProperty({ key: 'num_editions', value: 0 });
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.toggleCreateEditionsDialog(); this.toggleCreateEditionsDialog();
}, },
handleDeleteSuccess(response) { handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close // since we're deleting a piece, we just need to close
// all editions dialogs and not reload them // all editions dialogs and not reload them
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCreateEditionsDialog() { getCreateEditionsDialog() {
if(this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) { if (this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
return ( return (
<div style={{marginTop: '1em'}}> <div style={{marginTop: '1em'}}>
<CreateEditionsForm <CreateEditionsForm
pieceId={this.state.piece.id} pieceId={this.state.piece.id}
handleSuccess={this.handleEditionCreationSuccess} /> handleSuccess={this.handleEditionCreationSuccess} />
<hr/> <hr />
</div> </div>
); );
} else { } else {
return (<hr/>); return (<hr />);
} }
}, },
handlePollingSuccess(pieceId, numEditions) { handlePollingSuccess(pieceId, numEditions) {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
// we need to refresh the num_editions property of the actual piece we're looking at // we need to refresh the num_editions property of the actual piece we're looking at
PieceActions.updateProperty({ PieceActions.updateProperty({
@ -189,27 +196,26 @@ let PieceContainer = React.createClass({
// btw.: It's not sufficient to just set num_editions to numEditions, since a single accordion // 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. // 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 // 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, PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
getId() { getId() {
return {'id': this.state.piece.id}; return { 'id': this.state.piece.id };
}, },
getActions() { getActions() {
const { piece, currentUser } = this.state; const { piece, currentUser } = this.state;
if (piece && piece.notifications && piece.notifications.length > 0) { if (piece.notifications && piece.notifications.length > 0) {
return ( return (
<ListRequestActions <ListRequestActions
pieceOrEditions={piece} pieceOrEditions={piece}
currentUser={currentUser} currentUser={currentUser}
handleSuccess={this.loadPiece} handleSuccess={this.loadPiece}
notifications={piece.notifications}/>); notifications={piece.notifications} />);
} else { } else {
return ( return (
<AclProxy <AclProxy
@ -235,12 +241,12 @@ let PieceContainer = React.createClass({
onPollingSuccess={this.handlePollingSuccess}/> onPollingSuccess={this.handlePollingSuccess}/>
<DeleteButton <DeleteButton
handleSuccess={this.handleDeleteSuccess} handleSuccess={this.handleDeleteSuccess}
piece={piece}/> piece={piece} />
<AclInformation <AclInformation
aim="button" aim="button"
verbs={['acl_share', 'acl_transfer', 'acl_create_editions', 'acl_loan', 'acl_delete', verbs={['acl_share', 'acl_transfer', 'acl_create_editions', 'acl_loan', 'acl_delete',
'acl_consign']} 'acl_consign']}
aclObject={piece.acl}/> aclObject={piece.acl} />
</AclButtonList> </AclButtonList>
</DetailProperty> </DetailProperty>
</AclProxy> </AclProxy>
@ -249,76 +255,76 @@ let PieceContainer = React.createClass({
}, },
render() { render() {
if (this.state.piece && this.state.piece.id) { const { furtherDetailsType: FurtherDetailsType } = this.props;
let FurtherDetailsType = this.props.furtherDetailsType; const { currentUser, piece } = this.state;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
if (piece.id) {
setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return ( return (
<Piece <Piece
piece={this.state.piece} piece={piece}
loadPiece={this.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr className="hidden-print" style={{marginTop: 0}}/> <hr className="hidden-print" style={{marginTop: 0}} />
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null} {piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={this.state.piece.license_type} /> <LicenseDetail license={piece.license_type} />
</div> </div>
} }
buttons={this.getActions()}> buttons={this.getActions()}>
{this.getCreateEditionsDialog()} {this.getCreateEditionsDialog()}
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.state.piece.loan_history} /> history={piece.loan_history} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.state.currentUser.username show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null} defaultValue={piece.private_note || null}
show = {!!this.state.currentUser.username} show = {!!currentUser.username}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.state.currentUser}/> currentUser={currentUser} />
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null} defaultValue={piece.public_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit} editable={!!piece.acl.acl_edit}
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)} show={!!(piece.public_note || piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')} successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece} url={ApiUrls.note_public_piece}
currentUser={this.state.currentUser}/> currentUser={currentUser} />
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
show={this.state.piece.acl.acl_edit show={piece.acl.acl_edit
|| Object.keys(this.state.piece.extra_data).length > 0 || Object.keys(piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0} || piece.other_data.length > 0}
defaultExpanded={true}> defaultExpanded={true}>
<FurtherDetailsType <FurtherDetailsType
editable={this.state.piece.acl.acl_edit} editable={piece.acl.acl_edit}
pieceId={this.state.piece.id} pieceId={piece.id}
extraData={this.state.piece.extra_data} extraData={piece.extra_data}
otherData={this.state.piece.other_data} otherData={piece.other_data}
handleSuccess={this.loadPiece} /> handleSuccess={this.loadPiece} />
</CollapsibleParagraph> </CollapsibleParagraph>

35
js/components/ascribe_forms/form_piece_extradata.js
View File

@ -13,43 +13,46 @@ import InputTextAreaToggable from './input_textarea_toggable';
let PieceExtraDataForm = React.createClass({ let PieceExtraDataForm = React.createClass({
propTypes: { propTypes: {
pieceId: React.PropTypes.number, name: React.PropTypes.string.isRequired,
pieceId: React.PropTypes.number.isRequired,
editable: React.PropTypes.bool,
extraData: React.PropTypes.object, extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func, handleSuccess: React.PropTypes.func,
name: React.PropTypes.string, title: React.PropTypes.string
title: React.PropTypes.string,
editable: React.PropTypes.bool
}, },
getFormData() { getFormData() {
let extradata = {};
extradata[this.props.name] = this.refs.form.refs[this.props.name].state.value;
return { return {
extradata: extradata, extradata: {
[this.props.name]: this.refs.form.refs[this.props.name].state.value
},
piece_id: this.props.pieceId piece_id: this.props.pieceId
}; };
}, },
render() { render() {
let defaultValue = this.props.extraData[this.props.name] || ''; const { editable, extraData, handleSuccess, name, pieceId, title } = this.props;
if (defaultValue.length === 0 && !this.props.editable){ const defaultValue = (extraData && extraData[name]) || null;
if (!defaultValue && !editable) {
return null; return null;
} }
let url = requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.pieceId});
return ( return (
<Form <Form
ref='form' ref='form'
url={url} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
handleSuccess={this.props.handleSuccess} handleSuccess={handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
disabled={!this.props.editable}> disabled={!editable}>
<Property <Property
name={this.props.name} name={name}
label={this.props.title}> label={title}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={defaultValue} defaultValue={defaultValue}
placeholder={getLangText('Fill in%s', ' ') + this.props.title} placeholder={getLangText('Fill in%s', ' ') + title}
required /> required />
</Property> </Property>
<hr /> <hr />

2
js/components/ascribe_forms/form_send_contract_agreement.js
View File

@ -58,7 +58,7 @@ let SendContractAgreementForm = React.createClass({
notification = new GlobalNotificationModel(notification, 'success', 10000); notification = new GlobalNotificationModel(notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getFormData() { getFormData() {

2
js/components/ascribe_media/media_player.js
View File

@ -184,7 +184,7 @@ let Video = React.createClass({
); );
} else { } else {
return ( return (
<Image src={this.props.preview} /> <Image preview={this.props.preview} />
); );
} }
} }

39
js/components/ascribe_modal/modal_wrapper.js
View File

@ -1,19 +1,20 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import ReactAddons from 'react/addons';
import Modal from 'react-bootstrap/lib/Modal'; import Modal from 'react-bootstrap/lib/Modal';
let ModalWrapper = React.createClass({ let ModalWrapper = React.createClass({
propTypes: { propTypes: {
trigger: React.PropTypes.element,
title: React.PropTypes.oneOfType([ title: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element, React.PropTypes.element,
React.PropTypes.string React.PropTypes.string
]).isRequired, ]).isRequired,
handleSuccess: React.PropTypes.func.isRequired,
handleCancel: React.PropTypes.func,
handleSuccess: React.PropTypes.func,
trigger: React.PropTypes.element,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -38,14 +39,25 @@ let ModalWrapper = React.createClass({
}); });
}, },
handleCancel() {
if (typeof this.props.handleCancel === 'function') {
this.props.handleCancel();
}
this.hide();
},
handleSuccess(response) { handleSuccess(response) {
if (typeof this.props.handleSuccess === 'function') {
this.props.handleSuccess(response); this.props.handleSuccess(response);
}
this.hide(); this.hide();
}, },
renderChildren() { renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => { return React.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, { return React.cloneElement(child, {
handleSuccess: (response) => { handleSuccess: (response) => {
if (typeof child.props.handleSuccess === 'function') { if (typeof child.props.handleSuccess === 'function') {
child.props.handleSuccess(response); child.props.handleSuccess(response);
@ -60,14 +72,23 @@ let ModalWrapper = React.createClass({
render() { render() {
const { trigger, title } = this.props; const { trigger, title } = this.props;
// If the trigger component exists, we add the ModalWrapper's show() as its onClick method. // If the trigger component exists, we add the ModalWrapper's show() to its onClick method.
// The trigger component should, in most cases, be a button. // The trigger component should, in most cases, be a button.
const clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show}) const clonedTrigger = React.isValidElement(trigger) ?
: null; React.cloneElement(trigger, {
onClick: (...params) => {
if (typeof trigger.props.onClick === 'function') {
trigger.props.onClick(...params);
}
this.show();
}
}) : null;
return ( return (
<span> <span>
{clonedTrigger} {clonedTrigger}
<Modal show={this.state.showModal} onHide={this.hide}> <Modal show={this.state.showModal} onHide={this.handleCancel}>
<Modal.Header closeButton> <Modal.Header closeButton>
<Modal.Title> <Modal.Title>
{title} {title}

24
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_filter_widget.js
View File

@ -91,13 +91,13 @@ let PieceListToolbarFilterWidget = React.createClass({
label also iterate over its items, to get all filterable options */} label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => { {this.props.filterParams.map(({ label, items }, i) => {
return ( return (
<div> <div key={label}>
<li <li style={{'textAlign': 'center'}}>
style={{'textAlign': 'center'}}
key={i}>
<em>{label}:</em> <em>{label}:</em>
</li> </li>
{items.map((param, j) => { {items.map((paramItem) => {
let itemLabel;
let param;
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // be a string or an object of the shape:
@ -108,22 +108,22 @@ let PieceListToolbarFilterWidget = React.createClass({
// } // }
// //
// This is why we need to distinguish between both here. // This is why we need to distinguish between both here.
if (typeof param !== 'string') { if (typeof paramItem !== 'string') {
label = param.label; param = paramItem.key;
param = param.key; itemLabel = paramItem.label;
} else { } else {
param = param; param = paramItem;
label = param.split('acl_')[1].replace(/_/g, ' '); itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={j} key={itemLabel}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(itemLabel)}
</span> </span>
<input <input
readOnly readOnly

2
js/components/ascribe_piece_list_toolbar/piece_list_toolbar_order_widget.js
View File

@ -63,7 +63,6 @@ let PieceListToolbarOrderWidget = React.createClass({
</li> </li>
{this.props.orderParams.map((param) => { {this.props.orderParams.map((param) => {
return ( return (
<div>
<li <li
key={param} key={param}
onClick={this.orderBy(param)} onClick={this.orderBy(param)}
@ -78,7 +77,6 @@ let PieceListToolbarOrderWidget = React.createClass({
checked={param.indexOf(this.props.orderBy) > -1} /> checked={param.indexOf(this.props.orderBy) > -1} />
</div> </div>
</li> </li>
</div>
); );
})} })}
</DropdownButton> </DropdownButton>

4
js/components/ascribe_routes/proxy_handler.js
View File

@ -40,7 +40,7 @@ export function AuthRedirect({to, when}) {
// and redirect if `true`. // and redirect if `true`.
if(exprToValidate) { if(exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
// Otherwise there can also be the case that the backend // Otherwise there can also be the case that the backend
@ -48,7 +48,7 @@ export function AuthRedirect({to, when}) {
} else if(!exprToValidate && when === 'loggedIn' && redirect) { } else if(!exprToValidate && when === 'loggedIn' && redirect) {
delete query.redirect; delete query.redirect;
window.setTimeout(() => history.replaceState(null, '/' + redirect, query)); window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
return true; return true;
} else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {

35
js/components/ascribe_settings/webhook_settings.js
View File

@ -34,7 +34,6 @@ let WebhookSettings = React.createClass({
componentDidMount() { componentDidMount() {
WebhookStore.listen(this.onChange); WebhookStore.listen(this.onChange);
WebhookActions.fetchWebhooks(); WebhookActions.fetchWebhooks();
WebhookActions.fetchWebhookEvents();
}, },
componentWillUnmount() { componentWillUnmount() {
@ -49,7 +48,7 @@ let WebhookSettings = React.createClass({
return (event) => { return (event) => {
WebhookActions.removeWebhook(webhookId); WebhookActions.removeWebhook(webhookId);
let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000); const notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}; };
}, },
@ -57,16 +56,16 @@ let WebhookSettings = React.createClass({
handleCreateSuccess() { handleCreateSuccess() {
this.refs.webhookCreateForm.reset(); this.refs.webhookCreateForm.reset();
WebhookActions.fetchWebhooks(true); WebhookActions.fetchWebhooks(true);
let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
const notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
getWebhooks(){ getWebhooks() {
let content = <AscribeSpinner color='dark-blue' size='lg'/>;
if (this.state.webhooks) { if (this.state.webhooks) {
content = this.state.webhooks.map(function(webhook, i) { return this.state.webhooks.map(function(webhook, i) {
const event = webhook.event.split('.')[0]; const event = webhook.event.split('.')[0];
return ( return (
<ActionPanel <ActionPanel
name={webhook.event} name={webhook.event}
@ -91,11 +90,14 @@ let WebhookSettings = React.createClass({
</button> </button>
</div> </div>
</div> </div>
}/> } />
); );
}, this); }, this);
} else {
return (
<AscribeSpinner color='dark-blue' size='lg'/>
);
} }
return content;
}, },
getEvents() { getEvents() {
@ -110,18 +112,18 @@ let WebhookSettings = React.createClass({
<option <option
name={i} name={i}
key={i} key={i}
value={ event + '.webhook' }> value={event + '.webhook'}>
{ event.toUpperCase() } {event.toUpperCase()}
</option> </option>
); );
})} })}
</select> </select>
</Property>); </Property>);
} } else {
return null; return null;
}
}, },
render() { render() {
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
@ -138,20 +140,19 @@ let WebhookSettings = React.createClass({
a target url. a target url.
</p> </p>
</div> </div>
<AclProxy <AclProxy show={this.state.webhookEvents && this.state.webhookEvents.length}>
show={this.state.webhookEvents && this.state.webhookEvents.length}>
<Form <Form
ref="webhookCreateForm" ref="webhookCreateForm"
url={ApiUrls.webhooks} url={ApiUrls.webhooks}
handleSuccess={this.handleCreateSuccess}> handleSuccess={this.handleCreateSuccess}>
{ this.getEvents() } {this.getEvents()}
<Property <Property
name='target' name='target'
label={getLangText('Redirect Url')}> label={getLangText('Redirect Url')}>
<input <input
type="text" type="text"
placeholder={getLangText('Enter the url to be triggered')} placeholder={getLangText('Enter the url to be triggered')}
required/> required />
</Property> </Property>
<hr /> <hr />
</Form> </Form>

12
js/components/ascribe_slides_container/slides_container.js
View File

@ -57,21 +57,21 @@ const SlidesContainer = React.createClass({
// When the start_from parameter is used, this.setSlideNum can not simply be used anymore. // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
nextSlide(additionalQueryParams) { nextSlide(additionalQueryParams) {
const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0; const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
let nextSlide = slideNum + 1; this.setSlideNum(slideNum + 1, additionalQueryParams);
this.setSlideNum(nextSlide, additionalQueryParams);
}, },
setSlideNum(nextSlideNum, additionalQueryParams = {}) { setSlideNum(nextSlideNum, additionalQueryParams = {}) {
let queryParams = Object.assign(this.props.location.query, additionalQueryParams); const { location: { pathname } } = this.props;
queryParams.slide_num = nextSlideNum; const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
this.history.pushState(null, this.props.location.pathname, queryParams);
this.history.push({ pathname, query });
}, },
// breadcrumbs are defined as attributes of the slides. // breadcrumbs are defined as attributes of the slides.
// To extract them we have to read the DOM element's attributes // To extract them we have to read the DOM element's attributes
extractBreadcrumbs() { extractBreadcrumbs() {
const startFrom = parseInt(this.props.location.query.start_from, 10) || -1; const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
let breadcrumbs = []; const breadcrumbs = [];
React.Children.map(this.props.children, (child, i) => { React.Children.map(this.props.children, (child, i) => {
if(child && i >= startFrom && child.props['data-slide-title']) { if(child && i >= startFrom && child.props['data-slide-title']) {

8
js/components/ascribe_table/models/table_models.js
View File

@ -2,15 +2,15 @@
export class ColumnModel { export class ColumnModel {
// ToDo: Add validation for all passed-in parameters // ToDo: Add validation for all passed-in parameters
constructor(transformFn, columnName, displayName, displayType, rowWidth, canBeOrdered, transition, className) { constructor({ transformFn, columnName = '', displayElement, displayType, rowWidth, canBeOrdered, transition, className = '' }) {
this.transformFn = transformFn; this.transformFn = transformFn;
this.columnName = columnName; this.columnName = columnName;
this.displayName = displayName; this.displayElement = displayElement;
this.displayType = displayType; this.displayType = displayType;
this.rowWidth = rowWidth; this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered; this.canBeOrdered = canBeOrdered;
this.transition = transition; this.transition = transition;
this.className = className ? className : ''; this.className = className;
} }
} }
@ -28,7 +28,7 @@ export class ColumnModel {
* our selfes, using this TransitionModel. * our selfes, using this TransitionModel.
*/ */
export class TransitionModel { export class TransitionModel {
constructor(to, queryKey, valueKey, callback) { constructor({ to, queryKey, valueKey, callback }) {
this.to = to; this.to = to;
this.queryKey = queryKey; this.queryKey = queryKey;
this.valueKey = valueKey; this.valueKey = valueKey;

4
js/components/ascribe_table/table_header.js
View File

@ -1,5 +1,5 @@
'use strict';
'use strict';
import React from 'react'; import React from 'react';
import TableHeaderItem from './table_header_item'; import TableHeaderItem from './table_header_item';
@ -29,7 +29,7 @@ let TableHeader = React.createClass({
<TableHeaderItem <TableHeaderItem
className={column.className} className={column.className}
key={i} key={i}
displayName={column.displayName} displayElement={column.displayElement}
columnName={columnName} columnName={columnName}
canBeOrdered={canBeOrdered} canBeOrdered={canBeOrdered}
orderAsc={this.props.orderAsc} orderAsc={this.props.orderAsc}

20
js/components/ascribe_table/table_header_item.js
View File

@ -7,7 +7,7 @@ import TableHeaderItemCarret from './table_header_item_carret';
let TableHeaderItem = React.createClass({ let TableHeaderItem = React.createClass({
propTypes: { propTypes: {
displayName: React.PropTypes.oneOfType([ displayElement: React.PropTypes.oneOfType([
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.element React.PropTypes.element
]).isRequired, ]).isRequired,
@ -24,29 +24,31 @@ let TableHeaderItem = React.createClass({
}, },
render() { render() {
if(this.props.canBeOrdered && this.props.changeOrder && this.props.orderAsc != null && this.props.orderBy) { const { canBeOrdered, changeOrder, className, columnName, displayElement, orderAsc, orderBy } = this.props;
if(this.props.columnName === this.props.orderBy) {
if (canBeOrdered && changeOrder && orderAsc != null && orderBy) {
if (columnName === orderBy) {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName} <TableHeaderItemCarret orderAsc={this.props.orderAsc} /></span> <span>{displayElement} <TableHeaderItemCarret orderAsc={orderAsc} /></span>
</th> </th>
); );
} else { } else {
return ( return (
<th <th
className={'ascribe-table-header-column ' + this.props.className} className={'ascribe-table-header-column ' + className}
onClick={this.changeOrder}> onClick={this.changeOrder}>
<span>{this.props.displayName}</span> <span>{displayElement}</span>
</th> </th>
); );
} }
} else { } else {
return ( return (
<th className={'ascribe-table-header-column ' + this.props.className}> <th className={'ascribe-table-header-column ' + className}>
<span> <span>
{this.props.displayName} {displayElement}
</span> </span>
</th> </th>
); );

19
js/components/ascribe_table/table_item_acl_filtered.js
View File

@ -3,15 +3,15 @@
import React from 'react'; import React from 'react';
let TableItemAclFiltered = React.createClass({ const TableItemAclFiltered = React.createClass({
propTypes: { propTypes: {
content: React.PropTypes.object, content: React.PropTypes.object,
notifications: React.PropTypes.string notifications: React.PropTypes.array
}, },
render() { render() {
var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete']; const availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare', 'acl_delete'];
if (this.props.notifications && this.props.notifications.length > 0){ if (this.props.notifications && this.props.notifications.length) {
return ( return (
<span> <span>
{this.props.notifications[0].action_str} {this.props.notifications[0].action_str}
@ -19,15 +19,14 @@ let TableItemAclFiltered = React.createClass({
); );
} }
let filteredAcls = Object.keys(this.props.content).filter((key) => { const filteredAcls = Object.keys(this.props.content)
return availableAcls.indexOf(key) > -1 && this.props.content[key]; .filter((key) => availableAcls.indexOf(key) > -1 && this.props.content[key])
}); .map((acl) => acl.split('acl_')[1])
.join('/');
filteredAcls = filteredAcls.map((acl) => acl.split('acl_')[1]);
return ( return (
<span> <span>
{filteredAcls.join('/')} {filteredAcls}
</span> </span>
); );
} }

10
js/components/ascribe_uploader/react_s3_fine_uploader.js
View File

@ -36,17 +36,11 @@ const ReactS3FineUploader = React.createClass({
keyRoutine: shape({ keyRoutine: shape({
url: string, url: string,
fileClass: string, fileClass: string,
pieceId: oneOfType([ pieceId: number
string,
number
])
}), }),
createBlobRoutine: shape({ createBlobRoutine: shape({
url: string, url: string,
pieceId: oneOfType([ pieceId: number
string,
number
])
}), }),
handleChangedFile: func, // is for when a file is dropped or selected handleChangedFile: func, // is for when a file is dropped or selected
submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile

43
js/components/global_action.js
View File

@ -1,43 +0,0 @@
'use strict';
import React from 'react';
let GlobalAction = React.createClass({
propTypes: {
requestActions: React.PropTypes.object
},
render() {
let pieceActions = null;
if (this.props.requestActions && this.props.requestActions.pieces){
pieceActions = this.props.requestActions.pieces.map((item) => {
return (
<div className="ascribe-global-action">
{item}
</div>);
});
}
let editionActions = null;
if (this.props.requestActions && this.props.requestActions.editions){
editionActions = Object.keys(this.props.requestActions.editions).map((pieceId) => {
return this.props.requestActions.editions[pieceId].map((item) => {
return (
<div className="ascribe-global-action">
{item}
</div>);
});
});
}
if (pieceActions || editionActions) {
return (
<div className="ascribe-global-action-wrapper">
{pieceActions}
{editionActions}
</div>);
}
return null;
}
});
export default GlobalAction;

5
js/components/password_reset_container.js
View File

@ -130,8 +130,9 @@ let PasswordResetForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
this.history.pushState(null, '/collection'); this.history.push('/collection');
let notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
const notification = new GlobalNotificationModel(getLangText('password successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },

39
js/components/piece_list.js
View File

@ -115,13 +115,13 @@ let PieceList = React.createClass({
}, },
componentDidUpdate() { componentDidUpdate() {
const { redirectTo, shouldRedirect } = this.props; const { location: { query }, redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state; const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 && if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
} }
}, },
@ -174,15 +174,16 @@ let PieceList = React.createClass({
} }
}, },
searchFor(searchTerm) { searchFor(search) {
this.loadPieceList({ const { location: { pathname } } = this.props;
page: 1,
search: searchTerm this.loadPieceList({ search, page: 1 });
}); this.history.push({ pathname, query: { page: 1 } });
this.history.pushState(null, this.props.location.pathname, {page: 1});
}, },
applyFilterBy(filterBy){ applyFilterBy(filterBy) {
const { location: { pathname } } = this.props;
this.setState({ this.setState({
isFilterDirty: true isFilterDirty: true
}); });
@ -195,31 +196,32 @@ let PieceList = React.createClass({
this.state.pieceList this.state.pieceList
.forEach((piece) => { .forEach((piece) => {
// but only if they're actually open // but only if they're actually open
if(this.state.isEditionListOpenForPieceId[piece.id].show) { const isEditionListOpenForPiece = this.state.isEditionListOpenForPieceId[piece.id];
if (isEditionListOpenForPiece && isEditionListOpenForPiece.show) {
EditionListActions.refreshEditionList({ EditionListActions.refreshEditionList({
pieceId: piece.id, pieceId: piece.id,
filterBy filterBy
}); });
} }
}); });
}); });
// we have to redirect the user always to page one as it could be that there is no page two // we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces // for filtered pieces
this.history.pushState(null, this.props.location.pathname, {page: 1}); this.history.push({ pathname, query: { page: 1 } });
}, },
applyOrderBy(orderBy) { applyOrderBy(orderBy) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, page, pageSize, search } = this.state;
orderBy, this.state.orderAsc, this.state.filterBy); PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
}, },
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) { loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
const { orderAsc, pageSize } = this.state;
const orderBy = this.state.orderBy || this.props.orderBy; const orderBy = this.state.orderBy || this.props.orderBy;
return PieceListActions.fetchPieceList(page, this.state.pageSize, search, return PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
orderBy, this.state.orderAsc, filterBy);
}, },
fetchSelectedPieceEditionList() { fetchSelectedPieceEditionList() {
@ -245,8 +247,9 @@ let PieceList = React.createClass({
}, },
handleAclSuccess() { handleAclSuccess() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderBy, orderAsc, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.fetchSelectedPieceEditionList() this.fetchSelectedPieceEditionList()
.forEach((pieceId) => { .forEach((pieceId) => {

19
js/components/register_piece.js
View File

@ -65,26 +65,21 @@ let RegisterPiece = React.createClass( {
this.setState(state); this.setState(state);
}, },
handleSuccess(response){ handleSuccess(response) {
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
// once the user was able to register a piece successfully, we need to make sure to keep // once the user was able to register a piece successfully, we need to make sure to keep
// the piece list up to date // the piece list up to date
PieceListActions.fetchPieceList( PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
this.history.pushState(null, `/pieces/${response.piece.id}`); this.history.push(`/pieces/${response.piece.id}`);
}, },
getSpecifyEditions() { getSpecifyEditions() {
if(this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) { if (this.state.whitelabel && this.state.whitelabel.acl_create_editions || Object.keys(this.state.whitelabel).length === 0) {
return ( return (
<Property <Property
name="num_editions" name="num_editions"

2
js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js
View File

@ -106,7 +106,7 @@ const PRRegisterPieceForm = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notificationMessage); GlobalNotificationActions.appendGlobalNotification(notificationMessage);
}); });
}) })
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .then(() => this.history.push(`/pieces/${this.state.piece.id}`))
.catch((err) => { .catch((err) => {
const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) + const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
getLangText(' Please contact support@ascribe.io'); getLangText(' Please contact support@ascribe.io');

15
js/components/whitelabel/prize/portfolioreview/components/pr_landing.js
View File

@ -14,7 +14,7 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import UserStore from '../../../../../stores/user_store'; import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions'; import UserActions from '../../../../../actions/user_actions';
import { mergeOptions } from '../../../../../utils/general_utils'; import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -34,15 +34,18 @@ const PRLanding = React.createClass({
componentDidMount() { componentDidMount() {
const { location } = this.props; const { location } = this.props;
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeStore.listen(this.onChange); PrizeStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeActions.fetchPrize(); PrizeActions.fetchPrize();
if(location && location.query && location.query.redirect) { if (location && location.query && location.query.redirect) {
let queryCopy = JSON.parse(JSON.stringify(location.query)); window.setTimeout(() => this.history.replace({
delete queryCopy.redirect; pathname: `/${location.query.redirect}`,
window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy)); query: omitFromObject(location.query, ['redirect'])
}));
} }
}, },

2
js/components/whitelabel/prize/portfolioreview/components/pr_register_piece.js
View File

@ -39,7 +39,7 @@ const PRRegisterPiece = React.createClass({
if(currentUser && currentUser.email) { if(currentUser && currentUser.email) {
const submittedPieceId = getCookie(currentUser.email); const submittedPieceId = getCookie(currentUser.email);
if(submittedPieceId) { if(submittedPieceId) {
this.history.pushState(null, `/pieces/${submittedPieceId}`); this.history.push(`/pieces/${submittedPieceId}`);
} }
} }
}, },

2
js/components/whitelabel/prize/portfolioreview/components/pr_routes/pr_proxy_handler.js
View File

@ -17,7 +17,7 @@ export function AuthPrizeRoleRedirect({ to, when }) {
.reduce((a, b) => a || b); .reduce((a, b) => a || b);
if (exprToValidate) { if (exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
} else { } else {
return false; return false;

16
js/components/whitelabel/prize/simple_prize/actions/prize_rating_actions.js
View File

@ -15,10 +15,10 @@ class PrizeRatingActions {
); );
} }
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchAverage(pieceId) .fetchAverage(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRatingAverage(res.data); this.actions.updatePrizeRatingAverage(res.data);
resolve(res); resolve(res);
@ -30,10 +30,10 @@ class PrizeRatingActions {
}); });
} }
fetchOne(pieceId) { fetchOne(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchOne(pieceId) .fetchOne(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -44,10 +44,10 @@ class PrizeRatingActions {
}); });
} }
createRating(pieceId, rating) { createRating(pieceId, rating, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.rate(pieceId, rating) .rate(pieceId, rating, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -71,10 +71,6 @@ class PrizeRatingActions {
}); });
}); });
} }
updateRating(rating) {
this.actions.updatePrizeRating(rating);
}
} }
export default alt.createActions(PrizeRatingActions); export default alt.createActions(PrizeRatingActions);

10
js/components/whitelabel/prize/simple_prize/components/ascribe_accordion_list/accordion_list_item_prize.js
View File

@ -58,8 +58,9 @@ let AccordionListItemPrize = React.createClass({
}, },
handleSubmitPrizeSuccess(response) { handleSubmitPrizeSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
@ -138,8 +139,9 @@ let AccordionListItemPrize = React.createClass({
}, },
refreshPieceData() { refreshPieceData() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
}, },
onSelectChange(){ onSelectChange(){

131
js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
View File

@ -9,15 +9,16 @@ import StarRating from 'react-star-rating';
import ReactError from '../../../../../../mixins/react_error'; import ReactError from '../../../../../../mixins/react_error';
import { ResourceNotFoundError } from '../../../../../../models/errors'; import { ResourceNotFoundError } from '../../../../../../models/errors';
import PieceActions from '../../../../../../actions/piece_actions'; import PrizeActions from '../../actions/prize_actions';
import PieceStore from '../../../../../../stores/piece_store'; import PrizeStore from '../../stores/prize_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import PrizeRatingActions from '../../actions/prize_rating_actions'; import PrizeRatingActions from '../../actions/prize_rating_actions';
import PrizeRatingStore from '../../stores/prize_rating_store'; import PrizeRatingStore from '../../stores/prize_rating_store';
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 UserStore from '../../../../../../stores/user_store'; import UserStore from '../../../../../../stores/user_store';
import UserActions from '../../../../../../actions/user_actions'; import UserActions from '../../../../../../actions/user_actions';
@ -59,16 +60,10 @@ let PrizePieceContainer = React.createClass({
mixins: [ReactError], mixins: [ReactError],
getInitialState() { getInitialState() {
//FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data return mergeOptions(
// It should instead use something like getInitialState() where that call also resets the state. PieceStore.getInitialState(),
return UserStore.getState(); UserStore.getState()
}, );
componentWillMount() {
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
}, },
componentDidMount() { componentDidMount() {
@ -80,18 +75,19 @@ let PrizePieceContainer = React.createClass({
}, },
// This is done to update the container when the user clicks on the prev or next // This is done to update the container when the user clicks on the prev or next
// button to update the URL parameter (and therefore to switch pieces) // button to update the URL parameter (and therefore to switch pieces) or
// when the user clicks on a notification while being in another piece view
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (this.props.params.pieceId !== nextProps.params.pieceId) { if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({}); PieceActions.flushPiece();
this.loadPiece(nextProps.params.pieceId); this.loadPiece(nextProps.params.pieceId);
} }
}, },
componentDidUpdate() { componentDidUpdate() {
const { pieceError } = this.state; const { pieceMeta: { err: pieceErr } } = this.state;
if (pieceError && pieceError.status === 404) { if (pieceErr && pieceErr.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist."))); this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
} }
}, },
@ -108,25 +104,25 @@ let PrizePieceContainer = React.createClass({
getActions() { getActions() {
const { currentUser, piece } = this.state; const { currentUser, piece } = this.state;
if (piece && piece.notifications && piece.notifications.length > 0) { if (piece.notifications && piece.notifications.length > 0) {
return ( return (
<ListRequestActions <ListRequestActions
pieceOrEditions={piece} pieceOrEditions={piece}
currentUser={currentUser} currentUser={currentUser}
handleSuccess={this.loadPiece} handleSuccess={this.loadPiece}
notifications={piece.notifications}/>); notifications={piece.notifications} />);
} }
}, },
loadPiece(pieceId = this.props.params.pieceId) { loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchOne(pieceId); PieceActions.fetchPiece(pieceId);
}, },
render() { render() {
const { selectedPrizeActionButton } = this.props; const { selectedPrizeActionButton } = this.props;
const { currentUser, piece } = this.state; const { currentUser, piece } = this.state;
if (piece && piece.id) { if (piece.id) {
/* /*
This really needs a refactor! This really needs a refactor!
@ -137,16 +133,19 @@ let PrizePieceContainer = React.createClass({
// Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted // Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
let artistName; let artistName;
if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) { if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>; artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true" />;
setDocumentTitle(piece.title); setDocumentTitle(piece.title);
} else { } else {
artistName = piece.artist_name; artistName = piece.artist_name;
setDocumentTitle([artistName, piece.title].join(', ')); setDocumentTitle(`${artistName}, ${piece.title}`);
} }
// Only show the artist email if you are a judge and the piece is shortlisted // Only show the artist email if you are a judge and the piece is shortlisted
const artistEmail = (currentUser.is_judge && piece.selected ) ? const artistEmail = currentUser.is_judge && piece.selected ? (
<DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } /> : null; <DetailProperty
label={getLangText('REGISTREE')}
value={piece.user_registered} />
) : null;
return ( return (
<Piece <Piece
@ -156,14 +155,14 @@ let PrizePieceContainer = React.createClass({
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<NavigationHeader <NavigationHeader
piece={piece} piece={piece}
currentUser={currentUser}/> currentUser={currentUser} />
<h1 className="ascribe-detail-title">{piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label={getLangText('BY')} value={artistName} /> <DetailProperty label={getLangText('BY')} value={artistName} />
<DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
{artistEmail} {artistEmail}
{this.getActions()} {this.getActions()}
<hr/> <hr />
</div> </div>
} }
subheader={ subheader={
@ -195,9 +194,8 @@ let NavigationHeader = React.createClass({
render() { render() {
const { currentUser, piece } = this.props; const { currentUser, piece } = this.props;
if (currentUser && currentUser.email && currentUser.is_judge && currentUser.is_jury && if (currentUser.email && currentUser.is_judge && currentUser.is_jury && !currentUser.is_admin && piece.navigation) {
!currentUser.is_admin && piece && piece.navigation) { const nav = piece.navigation;
let nav = piece.navigation;
return ( return (
<div style={{marginBottom: '1em'}}> <div style={{marginBottom: '1em'}}>
@ -217,9 +215,10 @@ let NavigationHeader = React.createClass({
<hr/> <hr/>
</div> </div>
); );
} } else {
return null; return null;
} }
}
}); });
@ -234,21 +233,24 @@ let PrizePieceRatings = React.createClass({
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceListStore.getState(), PieceListStore.getState(),
PrizeStore.getState(),
PrizeRatingStore.getInitialState() PrizeRatingStore.getInitialState()
); );
}, },
componentDidMount() { componentDidMount() {
PrizeRatingStore.listen(this.onChange);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
PrizeStore.listen(this.onChange);
PrizeRatingStore.listen(this.onChange);
PrizeRatingActions.fetchOne(this.props.piece.id); PrizeActions.fetchPrize();
PrizeRatingActions.fetchAverage(this.props.piece.id); this.fetchPrizeRatings();
}, },
componentWillUnmount() { componentWillUnmount() {
PrizeRatingStore.unlisten(this.onChange);
PieceListStore.unlisten(this.onChange); PieceListStore.unlisten(this.onChange);
PrizeStore.unlisten(this.onChange);
PrizeRatingStore.unlisten(this.onChange);
}, },
// The StarRating component does not have a property that lets us set // The StarRating component does not have a property that lets us set
@ -256,7 +258,12 @@ let PrizePieceRatings = React.createClass({
// every mouseover be overridden, we need to set it ourselves initially to deal // every mouseover be overridden, we need to set it ourselves initially to deal
// with the problem. // with the problem.
onChange(state) { onChange(state) {
if (state.prize && state.prize.active_round != this.state.prize.active_round) {
this.fetchPrizeRatings(state);
}
this.setState(state); this.setState(state);
if (this.refs.rating) { if (this.refs.rating) {
this.refs.rating.state.ratingCache = { this.refs.rating.state.ratingCache = {
pos: this.refs.rating.state.pos, pos: this.refs.rating.state.pos,
@ -267,10 +274,15 @@ let PrizePieceRatings = React.createClass({
} }
}, },
fetchPrizeRatings(state = this.state) {
PrizeRatingActions.fetchOne(this.props.piece.id, state.prize.active_round);
PrizeRatingActions.fetchAverage(this.props.piece.id, state.prize.active_round);
},
onRatingClick(event, args) { onRatingClick(event, args) {
event.preventDefault(); event.preventDefault();
PrizeRatingActions PrizeRatingActions
.createRating(this.props.piece.id, args.rating) .createRating(this.props.piece.id, args.rating, this.state.prize.active_round)
.then(this.refreshPieceData); .then(this.refreshPieceData);
}, },
@ -289,9 +301,10 @@ let PrizePieceRatings = React.createClass({
}, },
refreshPieceData() { refreshPieceData() {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.props.loadPiece(); this.props.loadPiece();
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
}, },
onSelectChange() { onSelectChange() {
@ -308,7 +321,7 @@ let PrizePieceRatings = React.createClass({
}, },
render() { render() {
if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) { if (this.props.piece.id && this.props.currentUser.is_judge && this.state.average) {
// Judge sees shortlisting, average and per-jury notes // Judge sees shortlisting, average and per-jury notes
return ( return (
<div> <div>
@ -340,7 +353,7 @@ let PrizePieceRatings = React.createClass({
size='md' size='md'
step={0.5} step={0.5}
rating={this.state.average} rating={this.state.average}
ratingAmount={5}/> ratingAmount={5} />
</div> </div>
<hr /> <hr />
{this.state.ratings.map((item, i) => { {this.state.ratings.map((item, i) => {
@ -365,7 +378,7 @@ let PrizePieceRatings = React.createClass({
size='sm' size='sm'
step={0.5} step={0.5}
rating={item.rating} rating={item.rating}
ratingAmount={5}/> ratingAmount={5} />
</span> </span>
<span> {item.user}</span> <span> {item.user}</span>
{note} {note}
@ -376,7 +389,7 @@ let PrizePieceRatings = React.createClass({
<hr /> <hr />
</CollapsibleParagraph> </CollapsibleParagraph>
</div>); </div>);
} else if (this.props.currentUser && this.props.currentUser.is_jury) { } else if (this.props.currentUser.is_jury) {
// Jury can set rating and note // Jury can set rating and note
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
@ -394,14 +407,14 @@ let PrizePieceRatings = React.createClass({
ratingAmount={5} /> ratingAmount={5} />
</div> </div>
<Note <Note
id={() => {return {'piece_id': this.props.piece.id}; }} id={() => ({ 'piece_id': this.props.piece.id })}
label={getLangText('Jury note')} label={getLangText('Jury note')}
defaultValue={this.props.piece && this.props.piece.note_from_user ? this.props.piece.note_from_user.note : null} defaultValue={this.props.piece.note_from_user || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Jury note saved')} successMessage={getLangText('Jury note saved')}
url={ApiUrls.notes} url={ApiUrls.notes}
currentUser={this.props.currentUser}/> currentUser={this.props.currentUser} />
</CollapsibleParagraph>); </CollapsibleParagraph>);
} else { } else {
return null; return null;
@ -418,18 +431,18 @@ let PrizePieceDetails = React.createClass({
render() { render() {
const { piece } = this.props; const { piece } = this.props;
if (piece && if (piece.prize && piece.prize.name && Object.keys(piece.extra_data).length) {
piece.prize &&
piece.prize.name &&
Object.keys(piece.extra_data).length !== 0) {
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Prize Details')} title={getLangText('Prize Details')}
defaultExpanded={true}> defaultExpanded={true}>
<Form ref='form'> <Form>
{Object.keys(piece.extra_data).sort().map((data) => { {Object
.keys(piece.extra_data)
.sort()
.map((data) => {
// Remove leading number (for sorting), if any, and underscores with spaces // Remove leading number (for sorting), if any, and underscores with spaces
let label = data.replace(/^\d-/, '').replace(/_/g, ' '); const label = data.replace(/^\d-/, '').replace(/_/g, ' ');
const value = piece.extra_data[data] || 'N/A'; const value = piece.extra_data[data] || 'N/A';
return ( return (
@ -441,10 +454,11 @@ let PrizePieceDetails = React.createClass({
overrideForm={true}> overrideForm={true}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={value}/> defaultValue={value} />
</Property> </Property>
); );
})} })
}
<FurtherDetailsFileuploader <FurtherDetailsFileuploader
submitFile={() => {}} submitFile={() => {}}
setIsUploadReady={() => {}} setIsUploadReady={() => {}}
@ -457,9 +471,10 @@ let PrizePieceDetails = React.createClass({
</Form> </Form>
</CollapsibleParagraph> </CollapsibleParagraph>
); );
} } else {
return null; return null;
} }
}
}); });
export default PrizePieceContainer; export default PrizePieceContainer;

2
js/components/whitelabel/prize/simple_prize/components/prize_landing.js
View File

@ -46,7 +46,7 @@ let Landing = React.createClass({
// if user is already logged in, redirect him to piece list // if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },

37
js/components/whitelabel/prize/simple_prize/fetchers/prize_rating_fetcher.js
View File

@ -4,16 +4,41 @@ import requests from '../../../../../utils/requests';
let PrizeRatingFetcher = { let PrizeRatingFetcher = {
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return requests.get('rating_average', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating_average', params);
}, },
fetchOne(pieceId) { fetchOne(pieceId, round) {
return requests.get('rating', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating', params);
}, },
rate(pieceId, rating) { rate(pieceId, rating, round) {
return requests.post('ratings', {body: {'piece_id': pieceId, 'note': rating}}); const body = {
'piece_id': pieceId,
'note': rating
};
if (typeof round === 'number') {
body['prize_round'] = round;
}
return requests.post('ratings', { body });
}, },
select(pieceId) { select(pieceId) {

24
js/components/whitelabel/prize/simple_prize/stores/prize_rating_store.js
View File

@ -14,6 +14,18 @@ class PrizeRatingStore {
}); });
} }
getInitialState() {
this.ratings = [];
this.currentRating = null;
this.average = null;
return {
ratings: this.ratings,
currentRating: this.currentRating,
average: this.average
};
}
onUpdatePrizeRatings(ratings) { onUpdatePrizeRatings(ratings) {
this.ratings = ratings; this.ratings = ratings;
} }
@ -30,18 +42,6 @@ class PrizeRatingStore {
onResetPrizeRatings() { onResetPrizeRatings() {
this.getInitialState(); this.getInitialState();
} }
getInitialState() {
this.ratings = [];
this.currentRating = null;
this.average = null;
return {
ratings: this.ratings,
currentRating: this.currentRating,
average: this.average
};
}
} }
export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore'); export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');

2
js/components/whitelabel/prize/simple_prize/stores/prize_store.js
View File

@ -6,7 +6,7 @@ import PrizeActions from '../actions/prize_actions';
class PrizeStore { class PrizeStore {
constructor() { constructor() {
this.prize = []; this.prize = {};
this.bindActions(PrizeActions); this.bindActions(PrizeActions);
} }

49
js/components/whitelabel/wallet/components/ascribe_detail/wallet_piece_container.js
View File

@ -32,55 +32,62 @@ let WalletPieceContainer = React.createClass({
]) ])
}, },
render() { render() {
if (this.props.piece && this.props.piece.id) { const {
children,
currentUser,
handleDeleteSuccess,
loadPiece,
piece,
submitButtonType } = this.props;
if (piece && piece.id) {
return ( return (
<Piece <Piece
piece={this.props.piece} piece={piece}
loadPiece={this.props.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/> <hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1> <h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} /> <DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<hr/> <hr/>
</div> </div>
}> }>
<WalletActionPanel <WalletActionPanel
piece={this.props.piece} piece={piece}
currentUser={this.props.currentUser} currentUser={currentUser}
loadPiece={this.props.loadPiece} loadPiece={loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess} handleDeleteSuccess={handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/> submitButtonType={submitButtonType}/>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.props.piece.loan_history && this.props.piece.loan_history.length > 0}> show={piece.loan_history && piece.loan_history.length > 0}>
<HistoryIterator <HistoryIterator
history={this.props.piece.loan_history}/> history={piece.loan_history}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.props.currentUser.username || this.props.piece.public_note)}> show={!!(currentUser.username || piece.public_note)}>
<Note <Note
id={() => {return {'id': this.props.piece.id}; }} id={() => {return {'id': piece.id}; }}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.props.piece.private_note || null} defaultValue={piece.private_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/> currentUser={currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
{this.props.children} {children}
</Piece> </Piece>
); );
} else { } else {

5
js/components/whitelabel/wallet/components/cyland/cyland_accordion_list/cyland_accordion_list_item.js
View File

@ -52,8 +52,9 @@ let CylandAccordionListItem = React.createClass({
}, },
handleSubmitSuccess(response) { handleSubmitSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);

41
js/components/whitelabel/wallet/components/cyland/cyland_detail/cyland_piece_container.js
View File

@ -40,7 +40,7 @@ let CylandPieceContainer = React.createClass({
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceStore.getState(), PieceStore.getInitialState(),
UserStore.getState(), UserStore.getState(),
PieceListStore.getState() PieceListStore.getState()
); );
@ -51,14 +51,17 @@ let CylandPieceContainer = React.createClass({
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
this.loadPiece(); this.loadPiece();
}, },
// We need this for when the user clicks on a notification while being in another piece view
componentWillReceiveProps(nextProps) {
if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.flushPiece();
this.loadPiece();
}
},
componentWillUnmount() { componentWillUnmount() {
PieceStore.unlisten(this.onChange); PieceStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
@ -70,31 +73,34 @@ let CylandPieceContainer = React.createClass({
}, },
loadPiece() { loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId); PieceActions.fetchPiece(this.props.params.pieceId);
}, },
handleDeleteSuccess(response) { handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close // since we're deleting a piece, we just need to close
// all editions dialogs and not reload them // all editions dialogs and not reload them
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {
if(this.state.piece && this.state.piece.id) { const { piece } = this.state;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
if (piece.id) {
setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return ( return (
<WalletPieceContainer <WalletPieceContainer
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess} handleDeleteSuccess={this.handleDeleteSuccess}
@ -103,14 +109,13 @@ let CylandPieceContainer = React.createClass({
title={getLangText('Further Details')} title={getLangText('Further Details')}
defaultExpanded={true}> defaultExpanded={true}>
<CylandAdditionalDataForm <CylandAdditionalDataForm
piece={this.state.piece} piece={piece}
disabled={!this.state.piece.acl.acl_edit} disabled={!piece.acl.acl_edit}
isInline={true} /> isInline={true} />
</CollapsibleParagraph> </CollapsibleParagraph>
</WalletPieceContainer> </WalletPieceContainer>
); );
} } else {
else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' /> <AscribeSpinner color='dark-blue' size='lg' />

70
js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
View File

@ -23,9 +23,10 @@ import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_
let CylandAdditionalDataForm = React.createClass({ let CylandAdditionalDataForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
}, },
render() { render() {
let { piece, isInline, disabled, handleSuccess, location } = this.props; const { disabled, handleSuccess, isInline, piece } = this.props;
let buttons, spinner, heading;
if(!isInline) { let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -101,13 +105,15 @@ let CylandAdditionalDataForm = React.createClass({
); );
} }
if(piece && piece.id) { if (piece.id) {
const { extra_data: extraData = {} } = piece;
return ( return (
<Form <Form
disabled={disabled} disabled={disabled}
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
handleSuccess={handleSuccess || this.handleSuccess} handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
@ -116,65 +122,65 @@ let CylandAdditionalDataForm = React.createClass({
<Property <Property
name='artist_bio' name='artist_bio'
label={getLangText('Artist Biography')} label={getLangText('Artist Biography')}
expanded={!disabled || !!piece.extra_data.artist_bio}> expanded={!disabled || !!extraData.artist_bio}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.artist_bio} defaultValue={extraData.artist_bio}
placeholder={getLangText('Enter the artist\'s biography...')}/> placeholder={getLangText('Enter the artist\'s biography...')} />
</Property> </Property>
<Property <Property
name='artist_contact_information' name='artist_contact_information'
label={getLangText('Artist Contact Information')} label={getLangText('Artist Contact Information')}
expanded={!disabled || !!piece.extra_data.artist_contact_information}> expanded={!disabled || !!extraData.artist_contact_information}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.artist_contact_information} defaultValue={extraData.artist_contact_information}
placeholder={getLangText('Enter the artist\'s contact information...')}/> placeholder={getLangText('Enter the artist\'s contact information...')} />
</Property> </Property>
<Property <Property
name='conceptual_overview' name='conceptual_overview'
label={getLangText('Conceptual Overview')} label={getLangText('Conceptual Overview')}
expanded={!disabled || !!piece.extra_data.conceptual_overview}> expanded={!disabled || !!extraData.conceptual_overview}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.conceptual_overview} defaultValue={extraData.conceptual_overview}
placeholder={getLangText('Enter a conceptual overview...')}/> placeholder={getLangText('Enter a conceptual overview...')} />
</Property> </Property>
<Property <Property
name='medium' name='medium'
label={getLangText('Medium (technical specifications)')} label={getLangText('Medium (technical specifications)')}
expanded={!disabled || !!piece.extra_data.medium}> expanded={!disabled || !!extraData.medium}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.medium} defaultValue={extraData.medium}
placeholder={getLangText('Enter the medium (and other technical specifications)...')}/> placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
</Property> </Property>
<Property <Property
name='size_duration' name='size_duration'
label={getLangText('Size / Duration')} label={getLangText('Size / Duration')}
expanded={!disabled || !!piece.extra_data.size_duration}> expanded={!disabled || !!extraData.size_duration}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.size_duration} defaultValue={extraData.size_duration}
placeholder={getLangText('Enter the size / duration...')}/> placeholder={getLangText('Enter the size / duration...')} />
</Property> </Property>
<Property <Property
name='display_instructions' name='display_instructions'
label={getLangText('Display instructions')} label={getLangText('Display instructions')}
expanded={!disabled || !!piece.extra_data.display_instructions}> expanded={!disabled || !!extraData.display_instructions}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.display_instructions} defaultValue={extraData.display_instructions}
placeholder={getLangText('Enter the display instructions...')}/> placeholder={getLangText('Enter the display instructions...')} />
</Property> </Property>
<Property <Property
name='additional_details' name='additional_details'
label={getLangText('Additional details')} label={getLangText('Additional details')}
expanded={!disabled || !!piece.extra_data.additional_details}> expanded={!disabled || !!extraData.additional_details}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.additional_details} defaultValue={extraData.additional_details}
placeholder={getLangText('Enter additional details...')}/> placeholder={getLangText('Enter additional details...')} />
</Property> </Property>
<FurtherDetailsFileuploader <FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')} label={getLangText('Additional files (e.g. still images, pdf)')}
@ -189,7 +195,7 @@ let CylandAdditionalDataForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</div> </div>
); );
} }

2
js/components/whitelabel/wallet/components/cyland/cyland_landing.js
View File

@ -49,7 +49,7 @@ let CylandLanding = React.createClass({
// if user is already logged in, redirect him to piece list // if user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },

59
js/components/whitelabel/wallet/components/cyland/cyland_register_piece.js
View File

@ -52,7 +52,7 @@ let CylandRegisterPiece = React.createClass({
return mergeOptions( return mergeOptions(
UserStore.getState(), UserStore.getState(),
PieceListStore.getState(), PieceListStore.getState(),
PieceStore.getState(), PieceStore.getInitialState(),
WhitelabelStore.getState(), WhitelabelStore.getState(),
{ {
step: 0 step: 0
@ -67,7 +67,7 @@ let CylandRegisterPiece = React.createClass({
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel(); WhitelabelActions.fetchWhitelabel();
let queryParams = this.props.location.query; const queryParams = this.props.location.query;
// Since every step of this register process is atomic, // Since every step of this register process is atomic,
// we may need to enter the process at step 1 or 2. // we may need to enter the process at step 1 or 2.
@ -76,8 +76,8 @@ let CylandRegisterPiece = React.createClass({
// //
// We're using 'in' here as we want to know if 'piece_id' is present in the url, // We're using 'in' here as we want to know if 'piece_id' is present in the url,
// we don't care about the value. // we don't care about the value.
if(queryParams && 'piece_id' in queryParams) { if ('piece_id' in queryParams) {
PieceActions.fetchOne(queryParams.piece_id); PieceActions.fetchPiece(queryParams.piece_id);
} }
}, },
@ -92,64 +92,50 @@ let CylandRegisterPiece = React.createClass({
this.setState(state); this.setState(state);
}, },
handleRegisterSuccess(response){ handleRegisterSuccess(response) {
this.refreshPieceList(); this.refreshPieceList();
// also start loading the piece for the next step // Also load the newly registered piece for the next step
if(response && response.piece) { if (response && response.piece) {
PieceActions.updatePiece({});
PieceActions.updatePiece(response.piece); PieceActions.updatePiece(response.piece);
} }
this.incrementStep(); this.nextSlide({ piece_id: response.piece.id });
this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id });
}, },
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
// We need to refetch the piece again after submitting the additional data // We need to refetch the piece again after submitting the additional data
// since we want it's otherData to be displayed when the user choses to click // since we want its otherData to be displayed when the user choses to click
// on the browsers back button. // on the browsers back button.
PieceActions.fetchOne(this.state.piece.id); PieceActions.fetchPiece(this.state.piece.id);
this.refreshPieceList(); this.refreshPieceList();
this.incrementStep(); this.nextSlide();
this.refs.slidesContainer.nextSlide();
}, },
handleLoanSuccess(response) { handleLoanSuccess(response) {
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.refreshPieceList(); this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id); this.history.push(`/pieces/${this.state.piece.id}`);
this.history.pushState(null, `/pieces/${this.state.piece.id}`);
}, },
nextSlide(queryParams) {
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out
incrementStep() {
// also increase step
let newStep = this.state.step + 1;
this.setState({ this.setState({
step: newStep step: this.state.step + 1
}); });
this.refs.slidesContainer.nextSlide(queryParams);
}, },
refreshPieceList() { refreshPieceList() {
PieceListActions.fetchPieceList( const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.page,
this.state.pageSize, PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
}, },
render() { render() {
@ -157,8 +143,7 @@ let CylandRegisterPiece = React.createClass({
const { currentUser, piece, step, whitelabel } = this.state; const { currentUser, piece, step, whitelabel } = this.state;
const today = new Moment(); const today = new Moment();
const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment(); const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment().add(1000, 'years');
datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years');
const loanHeading = getLangText('Loan to Cyland archive'); const loanHeading = getLangText('Loan to Cyland archive');
const loanButtons = ( const loanButtons = (
@ -201,7 +186,7 @@ let CylandRegisterPiece = React.createClass({
submitMessage={getLangText('Submit')} submitMessage={getLangText('Submit')}
isFineUploaderActive={true} isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
location={location}/> location={location} />
</Col> </Col>
</Row> </Row>
</div> </div>

5
js/components/whitelabel/wallet/components/ikonotv/ikonotv_accordion_list/ikonotv_accordion_list_item.js
View File

@ -53,8 +53,9 @@ let IkonotvAccordionListItem = React.createClass({
}, },
handleSubmitSuccess(response) { handleSubmitSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);

4
js/components/whitelabel/wallet/components/ikonotv/ikonotv_contract_notifications.js
View File

@ -119,7 +119,7 @@ let IkonotvContractNotifications = React.createClass({
NotificationActions.flushContractAgreementListNotifications(); NotificationActions.flushContractAgreementListNotifications();
NotificationActions.fetchContractAgreementListNotifications(); NotificationActions.fetchContractAgreementListNotifications();
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
handleDeny() { handleDeny() {
@ -132,7 +132,7 @@ let IkonotvContractNotifications = React.createClass({
handleDenySuccess() { handleDenySuccess() {
let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000); let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCopyrightAssociationForm(){ getCopyrightAssociationForm(){

46
js/components/whitelabel/wallet/components/ikonotv/ikonotv_detail/ikonotv_piece_container.js
View File

@ -41,7 +41,7 @@ let IkonotvPieceContainer = React.createClass({
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceStore.getState(), PieceStore.getInitialState(),
UserStore.getState(), UserStore.getState(),
PieceListStore.getState() PieceListStore.getState()
); );
@ -52,19 +52,14 @@ let IkonotvPieceContainer = React.createClass({
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
this.loadPiece(); this.loadPiece();
}, },
// We need this for when the user clicks on a notification while being in another piece view // We need this for when the user clicks on a notification while being in another piece view
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(this.props.params.pieceId !== nextProps.params.pieceId) { if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({}); PieceActions.flushPiece();
PieceActions.fetchOne(nextProps.params.pieceId); this.loadPiece();
} }
}, },
@ -79,25 +74,28 @@ let IkonotvPieceContainer = React.createClass({
}, },
loadPiece() { loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId); PieceActions.fetchPiece(this.props.params.pieceId);
}, },
handleDeleteSuccess(response) { handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search, const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close // since we're deleting a piece, we just need to close
// all editions dialogs and not reload them // all editions dialogs and not reload them
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { render() {
const { piece } = this.state;
let furtherDetails = ( let furtherDetails = (
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
@ -106,28 +104,29 @@ let IkonotvPieceContainer = React.createClass({
</CollapsibleParagraph> </CollapsibleParagraph>
); );
if(this.state.piece.extra_data && Object.keys(this.state.piece.extra_data).length > 0 && this.state.piece.acl) { if (piece.extra_data && Object.keys(piece.extra_data).length && piece.acl) {
furtherDetails = ( furtherDetails = (
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Further Details')} title={getLangText('Further Details')}
defaultExpanded={true}> defaultExpanded={true}>
<IkonotvArtistDetailsForm <IkonotvArtistDetailsForm
piece={this.state.piece} piece={piece}
isInline={true} isInline={true}
disabled={!this.state.piece.acl.acl_edit} /> disabled={!piece.acl.acl_edit} />
<IkonotvArtworkDetailsForm <IkonotvArtworkDetailsForm
piece={this.state.piece} piece={piece}
isInline={true} isInline={true}
disabled={!this.state.piece.acl.acl_edit} /> disabled={!piece.acl.acl_edit} />
</CollapsibleParagraph> </CollapsibleParagraph>
); );
} }
if(this.state.piece && this.state.piece.id) { if (piece.id) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return ( return (
<WalletPieceContainer <WalletPieceContainer
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess} handleDeleteSuccess={this.handleDeleteSuccess}
@ -135,8 +134,7 @@ let IkonotvPieceContainer = React.createClass({
{furtherDetails} {furtherDetails}
</WalletPieceContainer> </WalletPieceContainer>
); );
} } else {
else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' /> <AscribeSpinner color='dark-blue' size='lg' />

53
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtistDetailsForm = React.createClass({ let IkonotvArtistDetailsForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -53,20 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel('Artist details successfully updated', 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Artist details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
let buttons, spinner, heading; const { disabled, isInline, handleSuccess, piece } = this.props;
let { isInline, handleSuccess } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={disabled}>
{getLangText('Proceed to loan')} {getLangText('Proceed to loan')}
</button> </button>
); );
@ -74,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -88,13 +90,15 @@ let IkonotvArtistDetailsForm = React.createClass({
); );
} }
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { if (piece.id) {
const { extra_data: extraData = {} } = piece;
return ( return (
<Form <Form
disabled={this.props.disabled} disabled={disabled}
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
handleSuccess={handleSuccess || this.handleSuccess} handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
@ -103,39 +107,38 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property <Property
name='artist_website' name='artist_website'
label={getLangText('Artist Website')} label={getLangText('Artist Website')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}> expanded={!disabled || !!extraData.artist_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.artist_website} defaultValue={extraData.artist_website}
placeholder={getLangText('The artist\'s website if present...')}/> placeholder={getLangText('The artist\'s website if present...')} />
</Property> </Property>
<Property <Property
name='gallery_website' name='gallery_website'
label={getLangText('Website of related Gallery, Museum, etc.')} label={getLangText('Website of related Gallery, Museum, etc.')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}> expanded={!disabled || !!extraData.gallery_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.gallery_website} defaultValue={extraData.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')}/> placeholder={getLangText('The website of any related Gallery or Museum')} />
</Property> </Property>
<Property <Property
name='additional_websites' name='additional_websites'
label={getLangText('Additional Websites/Publications/Museums/Galleries')} label={getLangText('Additional Websites/Publications/Museums/Galleries')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}> expanded={!disabled || !!extraData.additional_websites}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_websites} defaultValue={extraData.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')}/> placeholder={getLangText('Enter additional Websites/Publications if any')} />
</Property> </Property>
<Property <Property
name='conceptual_overview' name='conceptual_overview'
label={getLangText('Short text about the Artist')} label={getLangText('Short text about the Artist')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}> expanded={!disabled || !!extraData.conceptual_overview}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview} defaultValue={extraData.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')} placeholder={getLangText('Enter a short bio about the Artist')} />
/>
</Property> </Property>
</Form> </Form>
); );

64
js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
View File

@ -20,11 +20,10 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let IkonotvArtworkDetailsForm = React.createClass({ let IkonotvArtworkDetailsForm = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired, piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool isInline: React.PropTypes.bool
}, },
@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
}, },
handleSuccess() { handleSuccess() {
let notification = new GlobalNotificationModel('Artwork details successfully updated', 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Artwork details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
render() { render() {
let buttons, spinner, heading; const { disabled, isInline, handleSuccess, piece } = this.props;
let { isInline, handleSuccess } = this.props;
let buttons;
let spinner;
let heading;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" type="submit"
className="btn btn-default btn-wide" className="btn btn-default btn-wide"
disabled={this.props.disabled}> disabled={disabled}>
{getLangText('Proceed to artist details')} {getLangText('Proceed to artist details')}
</button> </button>
); );
@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -88,13 +90,15 @@ let IkonotvArtworkDetailsForm = React.createClass({
); );
} }
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) { if (piece.id && piece.extra_data) {
const { extra_data: extraData = {} } = piece;
return ( return (
<Form <Form
disabled={this.props.disabled} disabled={disabled}
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: this.props.piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: piece.id })}
handleSuccess={handleSuccess || this.handleSuccess} handleSuccess={handleSuccess || this.handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
@ -103,56 +107,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='medium' name='medium'
label={getLangText('Medium')} label={getLangText('Medium')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}> expanded={!disabled || !!extraData.medium}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.medium} defaultValue={extraData.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/> placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
</Property> </Property>
<Property <Property
name='size_duration' name='size_duration'
label={getLangText('Size/Duration')} label={getLangText('Size/Duration')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}> expanded={!disabled || !!extraData.size_duration}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.size_duration} defaultValue={extraData.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')}/> placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
</Property> </Property>
<Property <Property
name='copyright' name='copyright'
label={getLangText('Copyright')} label={getLangText('Copyright')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}> expanded={!disabled || !!extraData.copyright}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright} defaultValue={extraData.copyright}
placeholder={getLangText('Which copyright is attached to this work?')}/> placeholder={getLangText('Which copyright is attached to this work?')} />
</Property> </Property>
<Property <Property
name='courtesy_of' name='courtesy_of'
label={getLangText('Courtesy of')} label={getLangText('Courtesy of')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}> expanded={!disabled || !!extraData.courtesy_of}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of} defaultValue={extraData.courtesy_of}
placeholder={getLangText('The current owner of the artwork')}/> placeholder={getLangText('The current owner of the artwork')} />
</Property> </Property>
<Property <Property
name='copyright_of_photography' name='copyright_of_photography'
label={getLangText('Copyright of Photography')} label={getLangText('Copyright of Photography')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}> expanded={!disabled || !!extraData.copyright_of_photography}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography} defaultValue={extraData.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')}/> placeholder={getLangText('Who should be attributed for the photography?')} />
</Property> </Property>
<Property <Property
name='additional_details' name='additional_details'
label={getLangText('Additional Details about the artwork')} label={getLangText('Additional Details about the artwork')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}> expanded={!disabled || !!extraData.additional_details}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_details} defaultValue={extraData.additional_details}
placeholder={getLangText('Insert artwork overview')}/> placeholder={getLangText('Insert artwork overview')} />
</Property> </Property>
</Form> </Form>
); );

80
js/components/whitelabel/wallet/components/ikonotv/ikonotv_register_piece.js
View File

@ -49,7 +49,7 @@ let IkonotvRegisterPiece = React.createClass({
return mergeOptions( return mergeOptions(
UserStore.getState(), UserStore.getState(),
PieceListStore.getState(), PieceListStore.getState(),
PieceStore.getState(), PieceStore.getInitialState(),
WhitelabelStore.getState(), WhitelabelStore.getState(),
{ {
step: 0, step: 0,
@ -65,11 +65,7 @@ let IkonotvRegisterPiece = React.createClass({
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel(); WhitelabelActions.fetchWhitelabel();
// Before we load the new piece, we reset the piece store to delete old data that we do const queryParams = this.props.location.query;
// not want to display to the user.
PieceActions.updatePiece({});
let queryParams = this.props.location.query;
// Since every step of this register process is atomic, // Since every step of this register process is atomic,
// we may need to enter the process at step 1 or 2. // we may need to enter the process at step 1 or 2.
@ -78,8 +74,8 @@ let IkonotvRegisterPiece = React.createClass({
// //
// We're using 'in' here as we want to know if 'piece_id' is present in the url, // We're using 'in' here as we want to know if 'piece_id' is present in the url,
// we don't care about the value. // we don't care about the value.
if (queryParams && 'piece_id' in queryParams) { if ('piece_id' in queryParams) {
PieceActions.fetchOne(queryParams.piece_id); PieceActions.fetchPiece(queryParams.piece_id);
} }
}, },
@ -95,72 +91,62 @@ let IkonotvRegisterPiece = React.createClass({
}, },
handleRegisterSuccess(response){ handleRegisterSuccess(response) {
this.refreshPieceList(); this.refreshPieceList();
// also start loading the piece for the next step // Also load the newly registered piece for the next step
if(response && response.piece) { if (response && response.piece) {
PieceActions.updatePiece(response.piece); PieceActions.updatePiece(response.piece);
} }
if (!this.canSubmit()) { if (!this.canSubmit()) {
this.history.pushState(null, '/collection'); this.history.push('/collection');
} } else {
else { this.nextSlide({ piece_id: response.piece.id });
this.incrementStep();
this.refs.slidesContainer.nextSlide();
} }
}, },
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
// We need to refetch the piece again after submitting the additional data // We need to refetch the piece again after submitting the additional data
// since we want it's otherData to be displayed when the user choses to click // since we want it's otherData to be displayed when the user choses to click
// on the browsers back button. // on the browsers back button.
PieceActions.fetchOne(this.state.piece.id); PieceActions.fetchPiece(this.state.piece.id);
this.refreshPieceList(); this.refreshPieceList();
this.incrementStep(); this.nextSlide();
this.refs.slidesContainer.nextSlide();
}, },
handleLoanSuccess(response) { handleLoanSuccess(response) {
this.setState({ pageExitWarning: null }); this.setState({ pageExitWarning: null });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.refreshPieceList(); this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id); this.history.push(`/pieces/${this.state.piece.id}`);
this.history.pushState(null, `/pieces/${this.state.piece.id}`);
}, },
nextSlide(queryParams) {
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out
incrementStep() {
// also increase step
let newStep = this.state.step + 1;
this.setState({ this.setState({
step: newStep step: this.state.step + 1
}); });
this.refs.slidesContainer.nextSlide(queryParams);
}, },
refreshPieceList() { refreshPieceList() {
PieceListActions.fetchPieceList( const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.page,
this.state.pageSize, PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
}, },
canSubmit() { canSubmit() {
let currentUser = this.state.currentUser; let currentUser = this.state.currentUser;
let whitelabel = this.state.whitelabel; let whitelabel = this.state.whitelabel;
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user; return currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel.user;
}, },
getSlideArtistDetails() { getSlideArtistDetails() {
@ -171,13 +157,14 @@ let IkonotvRegisterPiece = React.createClass({
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<IkonotvArtistDetailsForm <IkonotvArtistDetailsForm
handleSuccess={this.handleAdditionalDataSuccess} handleSuccess={this.handleAdditionalDataSuccess}
piece={this.state.piece}/> piece={this.state.piece} />
</Col> </Col>
</Row> </Row>
</div> </div>
); );
} } else {
return null; return null;
}
}, },
getSlideArtworkDetails() { getSlideArtworkDetails() {
@ -188,21 +175,21 @@ let IkonotvRegisterPiece = React.createClass({
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<IkonotvArtworkDetailsForm <IkonotvArtworkDetailsForm
handleSuccess={this.handleAdditionalDataSuccess} handleSuccess={this.handleAdditionalDataSuccess}
piece={this.state.piece}/> piece={this.state.piece} />
</Col> </Col>
</Row> </Row>
</div> </div>
); );
} } else {
return null; return null;
}
}, },
getSlideLoan() { getSlideLoan() {
if (this.canSubmit()) { if (this.canSubmit()) {
const { piece, whitelabel } = this.state; const { piece, whitelabel } = this.state;
let today = new Moment(); const today = new Moment();
let endDate = new Moment(); const endDate = new Moment().add(2, 'years');
endDate.add(2, 'years');
return ( return (
<div data-slide-title={getLangText('Loan')}> <div data-slide-title={getLangText('Loan')}>
@ -225,8 +212,9 @@ let IkonotvRegisterPiece = React.createClass({
</Row> </Row>
</div> </div>
); );
} } else {
return null; return null;
}
}, },
render() { render() {
@ -252,7 +240,7 @@ let IkonotvRegisterPiece = React.createClass({
submitMessage={getLangText('Register')} submitMessage={getLangText('Register')}
isFineUploaderActive={true} isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
location={this.props.location}/> location={this.props.location} />
</Col> </Col>
</Row> </Row>
</div> </div>

2
js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js
View File

@ -30,7 +30,7 @@ let MarketAclButtonList = React.createClass({
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser.defer();
}, },
componentWillUnmount() { componentWillUnmount() {

62
js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js
View File

@ -3,6 +3,11 @@
import React from 'react'; import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import EditionActions from '../../../../../../actions/edition_actions';
import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../../stores/whitelabel_store';
import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'; import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory'; import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
@ -11,10 +16,7 @@ import ConsignForm from '../../../../../ascribe_forms/form_consign';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper'; import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import AclProxy from '../../../../../acl_proxy'; import AclProxy from '../../../../../acl_proxy';
import AscribeSpinner from '../../../../../ascribe_spinner';
import PieceActions from '../../../../../../actions/piece_actions';
import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../../stores/whitelabel_store';
import ApiUrls from '../../../../../../constants/api_urls'; import ApiUrls from '../../../../../../constants/api_urls';
@ -26,8 +28,9 @@ let MarketSubmitButton = React.createClass({
availableAcls: React.PropTypes.object.isRequired, availableAcls: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object, currentUser: React.PropTypes.object,
editions: React.PropTypes.array.isRequired, editions: React.PropTypes.array.isRequired,
handleSuccess: React.PropTypes.func.isRequired,
className: React.PropTypes.string, className: React.PropTypes.string,
handleSuccess: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
@ -50,22 +53,21 @@ let MarketSubmitButton = React.createClass({
canEditionBeSubmitted(edition) { canEditionBeSubmitted(edition) {
if (edition && edition.extra_data && edition.other_data) { if (edition && edition.extra_data && edition.other_data) {
const { extra_data, other_data } = edition; const {
extra_data: {
artist_bio: artistBio,
display_instructions: displayInstructions,
technology_details: technologyDetails,
work_description: workDescription
},
other_data: otherData } = edition;
if (extra_data.artist_bio && extra_data.work_description && return artistBio && displayInstructions && technologyDetails && workDescription && otherData.length;
extra_data.technology_details && extra_data.display_instructions &&
other_data.length > 0) {
return true;
}
} }
return false; return false;
}, },
getFormDataId() {
return getAclFormDataId(false, this.props.editions);
},
getAggregateEditionDetails() { getAggregateEditionDetails() {
const { editions } = this.props; const { editions } = this.props;
@ -82,13 +84,20 @@ let MarketSubmitButton = React.createClass({
}); });
}, },
handleAdditionalDataSuccess(pieceId) { getFormDataId() {
// Fetch newly updated piece to update the views return getAclFormDataId(false, this.props.editions);
PieceActions.fetchOne(pieceId); },
handleAdditionalDataSuccess() {
this.refs.consignModal.show(); this.refs.consignModal.show();
}, },
refreshEdition() {
if (this.props.editions.length === 1) {
EditionActions.fetchEdition(this.props.editions[0].bitcoin_id);
}
},
render() { render() {
const { availableAcls, currentUser, className, editions, handleSuccess } = this.props; const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state; const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
@ -101,6 +110,10 @@ let MarketSubmitButton = React.createClass({
senderName: currentUser.username senderName: currentUser.username
}); });
// If only a single piece is selected, all the edition's extra_data and other_data will
// be the same, so we just take the first edition's
const { extra_data: extraData, other_data: otherData } = solePieceId ? editions[0] : {};
const triggerButton = ( const triggerButton = (
<button className={classNames('btn', 'btn-default', 'btn-sm', className)}> <button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
{getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())} {getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
@ -126,16 +139,25 @@ let MarketSubmitButton = React.createClass({
aclName='acl_consign'> aclName='acl_consign'>
<ModalWrapper <ModalWrapper
trigger={triggerButton} trigger={triggerButton}
handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)} handleSuccess={this.handleAdditionalDataSuccess}
title={getLangText('Add additional information')}> title={getLangText('Add additional information')}>
<MarketAdditionalDataForm <MarketAdditionalDataForm
extraData={extraData}
otherData={otherData}
pieceId={solePieceId} pieceId={solePieceId}
submitLabel={getLangText('Continue to consignment')} /> submitLabel={getLangText('Continue to consignment')} />
</ModalWrapper> </ModalWrapper>
<ModalWrapper <ModalWrapper
ref="consignModal" ref="consignModal"
handleSuccess={handleSuccess} handleCancel={this.refreshEdition}
handleSuccess={(...params) => {
if (typeof handleSuccess === 'function') {
handleSuccess(...params);
}
this.refreshEdition();
}}
title={getLangText('Consign artwork')}> title={getLangText('Consign artwork')}>
{consignForm} {consignForm}
</ModalWrapper> </ModalWrapper>

6
js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js
View File

@ -6,8 +6,12 @@ import MarketAdditionalDataForm from '../market_forms/market_additional_data_for
let MarketFurtherDetails = React.createClass({ let MarketFurtherDetails = React.createClass({
propTypes: { propTypes: {
pieceId: React.PropTypes.number, pieceId: React.PropTypes.number.isRequired,
editable: React.PropTypes.bool,
extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func, handleSuccess: React.PropTypes.func,
otherData: React.PropTypes.arrayOf(React.PropTypes.object)
}, },
render() { render() {

120
js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js
View File

@ -2,21 +2,18 @@
import React from 'react'; import React from 'react';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import AscribeSpinner from '../../../../../ascribe_spinner';
import GlobalNotificationModel from '../../../../../../models/global_notification_model'; import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils'; import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
import PieceActions from '../../../../../../actions/piece_actions'; import AscribeSpinner from '../../../../../ascribe_spinner';
import PieceStore from '../../../../../../stores/piece_store';
import ApiUrls from '../../../../../../constants/api_urls'; import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants'; import AppConstants from '../../../../../../constants/application_constants';
@ -28,16 +25,16 @@ import { getLangText } from '../../../../../../utils/lang_utils';
let MarketAdditionalDataForm = React.createClass({ let MarketAdditionalDataForm = React.createClass({
propTypes: { propTypes: {
pieceId: React.PropTypes.oneOfType([ pieceId: React.PropTypes.number.isRequired,
React.PropTypes.number,
React.PropTypes.string
]),
editable: React.PropTypes.bool, editable: React.PropTypes.bool,
extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool, isInline: React.PropTypes.bool,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
showHeading: React.PropTypes.bool, showHeading: React.PropTypes.bool,
showNotification: React.PropTypes.bool, showNotification: React.PropTypes.bool,
submitLabel: React.PropTypes.string, submitLabel: React.PropTypes.string
handleSuccess: React.PropTypes.func
}, },
getDefaultProps() { getDefaultProps() {
@ -48,33 +45,18 @@ let MarketAdditionalDataForm = React.createClass({
}, },
getInitialState() { getInitialState() {
const pieceStore = PieceStore.getState(); return {
return mergeOptions(
pieceStore,
{
// Allow the form to be submitted if there's already an additional image uploaded // Allow the form to be submitted if there's already an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(pieceStore.piece), isUploadReady: this.isUploadReadyOnChange(),
forceUpdateKey: 0 forceUpdateKey: 0
});
},
componentDidMount() {
PieceStore.listen(this.onChange);
if (this.props.pieceId) {
PieceActions.fetchOne(this.props.pieceId);
} }
}, },
componentWillUnmount() { componentWillReceiveProps(nextProps) {
PieceStore.unlisten(this.onChange); if (this.props.extraData !== nextProps.extraData || this.props.otherData !== nextProps.otherData) {
}, this.setState({
// Allow the form to be submitted if the updated piece has an additional image uploaded
onChange(state) { isUploadReady: this.isUploadReadyOnChange(),
Object.assign({}, state, {
// Allow the form to be submitted if the updated piece already has an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(state.piece),
/** /**
* Increment the forceUpdateKey to force the form to rerender on each change * Increment the forceUpdateKey to force the form to rerender on each change
@ -85,13 +67,12 @@ let MarketAdditionalDataForm = React.createClass({
*/ */
forceUpdateKey: this.state.forceUpdateKey + 1 forceUpdateKey: this.state.forceUpdateKey + 1
}); });
}
this.setState(state);
}, },
getFormData() { getFormData() {
let extradata = {}; const extradata = {};
let formRefs = this.refs.form.refs; const formRefs = this.refs.form.refs;
// Put additional fields in extra data object // Put additional fields in extra data object
Object Object
@ -102,12 +83,12 @@ let MarketAdditionalDataForm = React.createClass({
return { return {
extradata: extradata, extradata: extradata,
piece_id: this.state.piece.id piece_id: this.props.pieceId
}; };
}, },
isUploadReadyOnChange(piece) { isUploadReadyOnChange() {
return piece && piece.other_data && piece.other_data.length > 0; return this.props.otherData && this.props.otherData.length;
}, },
handleSuccessWithNotification() { handleSuccessWithNotification() {
@ -115,7 +96,7 @@ let MarketAdditionalDataForm = React.createClass({
this.props.handleSuccess(); this.props.handleSuccess();
} }
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000); const notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}, },
@ -126,11 +107,20 @@ let MarketAdditionalDataForm = React.createClass({
}, },
render() { render() {
const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props; const {
const { piece } = this.state; editable,
let buttons, heading; extraData = {},
isInline,
handleSuccess,
otherData,
pieceId,
showHeading,
showNotification,
submitLabel } = this.props;
let spinner = <AscribeSpinner color='dark-blue' size='lg' />; let buttons;
let heading;
let spinner;
if (!isInline) { if (!isInline) {
buttons = ( buttons = (
@ -145,7 +135,7 @@ let MarketAdditionalDataForm = React.createClass({
spinner = ( spinner = (
<div className="modal-footer"> <div className="modal-footer">
<p className="pull-right"> <p className="pull-right">
{spinner} <AscribeSpinner color='dark-blue' size='md' />
</p> </p>
</div> </div>
); );
@ -159,64 +149,64 @@ let MarketAdditionalDataForm = React.createClass({
) : null; ) : null;
} }
if (piece && piece.id) { if (pieceId) {
return ( return (
<Form <Form
className="ascribe-form-bordered" className="ascribe-form-bordered"
ref='form' ref='form'
key={this.state.forceUpdateKey} key={this.state.forceUpdateKey}
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})} url={requests.prepareUrl(ApiUrls.piece_extradata, { piece_id: pieceId })}
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess} handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
getFormData={this.getFormData} getFormData={this.getFormData}
buttons={buttons} buttons={buttons}
spinner={spinner} spinner={spinner}
disabled={!this.props.editable || !piece.acl.acl_edit}> disabled={!this.props.editable}>
{heading} {heading}
<FurtherDetailsFileuploader <FurtherDetailsFileuploader
label={getLangText('Marketplace Thumbnail Image')} label={getLangText('Marketplace Thumbnail Image')}
submitFile={function () {}} submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady} setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
pieceId={piece.id} pieceId={pieceId}
otherData={piece.other_data} otherData={otherData}
editable={editable} /> editable={editable} />
<Property <Property
name='artist_bio' name='artist_bio'
label={getLangText('Artist Bio')} label={getLangText('Artist Bio')}
expanded={editable || !!piece.extra_data.artist_bio}> expanded={editable || !!extraData.artist_bio}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.artist_bio} defaultValue={extraData.artist_bio}
placeholder={getLangText('Enter a biography of the artist...')} placeholder={getLangText('Enter a biography of the artist...')}
required /> required />
</Property> </Property>
<Property <Property
name='work_description' name='work_description'
label={getLangText('Work Description')} label={getLangText('Work Description')}
expanded={editable || !!piece.extra_data.work_description}> expanded={editable || !!extraData.work_description}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.work_description} defaultValue={extraData.work_description}
placeholder={getLangText('Enter a description of the work...')} placeholder={getLangText('Enter a description of the work...')}
required /> required />
</Property> </Property>
<Property <Property
name='technology_details' name='technology_details'
label={getLangText('Technology Details')} label={getLangText('Technology Details')}
expanded={editable || !!piece.extra_data.technology_details}> expanded={editable || !!extraData.technology_details}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.technology_details} defaultValue={extraData.technology_details}
placeholder={getLangText('Enter technological details about the work...')} placeholder={getLangText('Enter technological details about the work...')}
required /> required />
</Property> </Property>
<Property <Property
name='display_instructions' name='display_instructions'
label={getLangText('Display Instructions')} label={getLangText('Display Instructions')}
expanded={editable || !!piece.extra_data.display_instructions}> expanded={editable || !!extraData.display_instructions}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={piece.extra_data.display_instructions} defaultValue={extraData.display_instructions}
placeholder={getLangText('Enter instructions on how to best display the work...')} placeholder={getLangText('Enter instructions on how to best display the work...')}
required /> required />
</Property> </Property>
@ -225,7 +215,7 @@ let MarketAdditionalDataForm = React.createClass({
} else { } else {
return ( return (
<div className="ascribe-loading-position"> <div className="ascribe-loading-position">
{spinner} <AscribeSpinner color='dark-blue' size='lg' />
</div> </div>
); );
} }

77
js/components/whitelabel/wallet/components/market/market_register_piece.js
View File

@ -6,19 +6,23 @@ import { History } from 'react-router';
import Col from 'react-bootstrap/lib/Col'; import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row'; import Row from 'react-bootstrap/lib/Row';
import PieceStore from '../../../../../stores/piece_store';
import PieceActions from '../../../../../actions/piece_actions';
import PieceListStore from '../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../actions/piece_list_actions';
import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import MarketAdditionalDataForm from './market_forms/market_additional_data_form'; import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
import Property from '../../../../ascribe_forms/property'; import Property from '../../../../ascribe_forms/property';
import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece'; import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
import PieceActions from '../../../../../actions/piece_actions';
import PieceListStore from '../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../actions/piece_list_actions';
import UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import SlidesContainer from '../../../../ascribe_slides_container/slides_container'; import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -35,6 +39,7 @@ let MarketRegisterPiece = React.createClass({
getInitialState(){ getInitialState(){
return mergeOptions( return mergeOptions(
PieceListStore.getState(), PieceListStore.getState(),
PieceStore.getInitialState(),
UserStore.getState(), UserStore.getState(),
WhitelabelStore.getState(), WhitelabelStore.getState(),
{ {
@ -44,19 +49,27 @@ let MarketRegisterPiece = React.createClass({
componentDidMount() { componentDidMount() {
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
PieceStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
WhitelabelStore.listen(this.onChange); WhitelabelStore.listen(this.onChange);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel(); WhitelabelActions.fetchWhitelabel();
// Reset the piece store to make sure that we don't display old data const queryParams = this.props.location.query;
// if the user repeatedly registers works
PieceActions.updatePiece({}); // Load the correct piece if the user loads the second step directly
// by pressing on the back button or using the url
// We're using 'in' here as we want to know if 'piece_id' is present in the url,
// we don't care about the value.
if ('piece_id' in queryParams) {
PieceActions.fetchPiece(queryParams.piece_id);
}
}, },
componentWillUnmount() { componentWillUnmount() {
PieceListStore.unlisten(this.onChange); PieceListStore.unlisten(this.onChange);
PieceStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange);
}, },
@ -68,53 +81,39 @@ let MarketRegisterPiece = React.createClass({
handleRegisterSuccess(response) { handleRegisterSuccess(response) {
this.refreshPieceList(); this.refreshPieceList();
// Use the response's piece for the next step if available // Also load the newly registered piece for the next step
let pieceId = null;
if (response && response.piece) { if (response && response.piece) {
pieceId = response.piece.id;
PieceActions.updatePiece(response.piece); PieceActions.updatePiece(response.piece);
} }
this.incrementStep(); this.nextSlide({ piece_id: response.piece.id });
this.refs.slidesContainer.nextSlide({ piece_id: pieceId });
}, },
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
this.refreshPieceList(); this.refreshPieceList();
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
nextSlide(queryParams) {
// We need to increase the step to lock the forms that are already filled out // We need to increase the step to lock the forms that are already filled out
incrementStep() {
this.setState({ this.setState({
step: this.state.step + 1 step: this.state.step + 1
}); });
},
getPieceFromQueryParam() { this.refs.slidesContainer.nextSlide(queryParams);
const queryParams = this.props.location.query;
// Since every step of this register process is atomic,
// we may need to enter the process at step 1 or 2.
// If this is the case, we'll need the piece number to complete submission.
// It is encoded in the URL as a queryParam and we're checking for it here.
return queryParams && queryParams.piece_id;
}, },
refreshPieceList() { refreshPieceList() {
PieceListActions.fetchPieceList( const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.state.page,
this.state.pageSize, PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
}, },
render() { render() {
const { location } = this.props;
const { const {
piece,
step, step,
whitelabel: { whitelabel: {
name: whitelabelName = 'Market' name: whitelabelName = 'Market'
@ -130,7 +129,7 @@ let MarketRegisterPiece = React.createClass({
pending: 'glyphicon glyphicon-chevron-right', pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock' completed: 'glyphicon glyphicon-lock'
}} }}
location={this.props.location}> location={location}>
<div data-slide-title={getLangText('Register work')}> <div data-slide-title={getLangText('Register work')}>
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@ -142,7 +141,7 @@ let MarketRegisterPiece = React.createClass({
isFineUploaderActive={true} isFineUploaderActive={true}
enableSeparateThumbnail={false} enableSeparateThumbnail={false}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
location={this.props.location}> location={location}>
<Property <Property
name="num_editions" name="num_editions"
label={getLangText('Specify editions')}> label={getLangText('Specify editions')}>
@ -160,8 +159,10 @@ let MarketRegisterPiece = React.createClass({
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<MarketAdditionalDataForm <MarketAdditionalDataForm
extraData={piece.extra_data}
handleSuccess={this.handleAdditionalDataSuccess} handleSuccess={this.handleAdditionalDataSuccess}
pieceId={this.getPieceFromQueryParam()} otherData={piece.other_data}
pieceId={piece.id}
showHeading /> showHeading />
</Col> </Col>
</Row> </Row>

3
js/constants/api_urls.js
View File

@ -76,8 +76,7 @@ let ApiUrls = {
'webhooks': AppConstants.apiEndpoint + 'webhooks/', 'webhooks': AppConstants.apiEndpoint + 'webhooks/',
'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/', 'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/', 'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
'delete_s3_file': AppConstants.serverUrl + 's3/delete/', 'delete_s3_file': AppConstants.serverUrl + 's3/delete/'
'prize_list': AppConstants.apiEndpoint + 'prize/'
}; };

6
js/fetchers/edition_list_fetcher.js
View File

@ -9,10 +9,10 @@ let EditionListFetcher = {
/** /**
* Fetches a list of editions from the API. * Fetches a list of editions from the API.
*/ */
fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy) { fetch({ pieceId, page, pageSize, orderBy, orderAsc, filterBy }) {
let ordering = generateOrderingQueryParams(orderBy, orderAsc); const ordering = generateOrderingQueryParams(orderBy, orderAsc);
let queryParams = mergeOptions( const queryParams = mergeOptions(
{ {
page, page,
pageSize, pageSize,

15
js/fetchers/piece_fetcher.js
View File

@ -1,15 +0,0 @@
'use strict';
import requests from '../utils/requests';
let PieceFetcher = {
/**
* Fetch a piece from the API.
*/
fetchOne(id) {
return requests.get('piece', {'piece_id': id});
}
};
export default PieceFetcher;

6
js/fetchers/piece_list_fetcher.js
View File

@ -10,12 +10,12 @@ let PieceListFetcher = {
* Fetches a list of pieces from the API. * Fetches a list of pieces from the API.
* Can be called with all supplied queryparams the API. * Can be called with all supplied queryparams the API.
*/ */
fetch(page, pageSize, search, orderBy, orderAsc, filterBy) { fetch({ page, pageSize, search, orderBy, orderAsc, filterBy }) {
let ordering = generateOrderingQueryParams(orderBy, orderAsc); const ordering = generateOrderingQueryParams(orderBy, orderAsc);
// filterBy is an object of acl key-value pairs. // filterBy is an object of acl key-value pairs.
// The values are booleans // The values are booleans
let queryParams = mergeOptions( const queryParams = mergeOptions(
{ {
page, page,
pageSize, pageSize,

12
js/fetchers/prize_list_fetcher.js
View File

@ -1,12 +0,0 @@
'use strict';
import requests from '../utils/requests';
let PrizeListFetcher = {
fetch() {
return requests.get('prize_list');
}
};
export default PrizeListFetcher;

3
js/history.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import useBasename from 'history/lib/useBasename'; import useBasename from 'history/lib/useBasename';
import useQueries from 'history/lib/useQueries';
import createBrowserHistory from 'history/lib/createBrowserHistory'; import createBrowserHistory from 'history/lib/createBrowserHistory';
import AppConstants from './constants/application_constants'; import AppConstants from './constants/application_constants';
@ -8,6 +9,6 @@ import AppConstants from './constants/application_constants';
// Remove the trailing slash if present // Remove the trailing slash if present
let baseUrl = AppConstants.baseUrl.replace(/\/$/, ''); let baseUrl = AppConstants.baseUrl.replace(/\/$/, '');
export default useBasename(createBrowserHistory)({ export default useBasename(useQueries(createBrowserHistory))({
basename: baseUrl basename: baseUrl
}); });

6
js/sources/NAMING_CONVENTIONS.md
View File

@ -22,12 +22,8 @@ refreshApplicationToken
we cannot repeat this for a sources' methods as patterns like this would emerge in the stores: we cannot repeat this for a sources' methods as patterns like this would emerge in the stores:
```javascript ```javascript
onFetchCurrentUser(invalidateCache) { onFetchCurrentUser() {
this.invalidateCache = invalidateCache;
if(!this.getInstance().isLoading()) {
this.getInstance().fetchCurrentUser(); // does not call a flux "action" but a method in user_source.js - which is confusing this.getInstance().fetchCurrentUser(); // does not call a flux "action" but a method in user_source.js - which is confusing
}
} }
``` ```

11
js/sources/coa_source.js
View File

@ -7,9 +7,9 @@ import EditionActions from '../actions/edition_actions';
const CoaSource = { const CoaSource = {
lookupCoa: { lookupCoa: {
remote(state) { remote(state, coaId) {
return requests return requests
.get('coa', { id: state.edition.coa }) .get('coa', { id: coaId })
.then((res) => { .then((res) => {
// If no coa is found here, fake a 404 error so the error action can pick it up // If no coa is found here, fake a 404 error so the error action can pick it up
return (res && res.coa) ? res : Promise.reject({ json: { status: 404 } }); return (res && res.coa) ? res : Promise.reject({ json: { status: 404 } });
@ -20,10 +20,11 @@ const CoaSource = {
error: EditionActions.errorCoa error: EditionActions.errorCoa
}, },
performCreateCoa: { performCreateCoaForEdition: {
remote(state) { remote(state, editionId) {
return requests.post('coa_create', {body: { bitcoin_id: state.edition.bitcoin_id }}); return requests.post('coa_create', { body: { bitcoin_id: editionId } });
}, },
success: EditionActions.successFetchCoa, success: EditionActions.successFetchCoa,
error: EditionActions.errorCoa error: EditionActions.errorCoa
} }

4
js/sources/edition_source.js
View File

@ -7,8 +7,8 @@ import EditionActions from '../actions/edition_actions';
const EditionSource = { const EditionSource = {
lookupEdition: { lookupEdition: {
remote(state) { remote(state, editionId) {
return requests.get('edition', { bitcoin_id: state.editionMeta.idToFetch }); return requests.get('edition', { bitcoin_id: editionId });
}, },
success: EditionActions.successFetchEdition, success: EditionActions.successFetchEdition,

19
js/sources/piece_source.js Normal file
View File

@ -0,0 +1,19 @@
'use strict';
import requests from '../utils/requests';
import PieceActions from '../actions/piece_actions';
const PieceSource = {
lookupPiece: {
remote(state, pieceId) {
return requests.get('piece', { piece_id: pieceId });
},
success: PieceActions.successFetchPiece,
error: PieceActions.errorPiece
}
};
export default PieceSource;

9
js/sources/user_source.js
View File

@ -13,12 +13,14 @@ const UserSource = {
}, },
local(state) { local(state) {
return state.currentUser && state.currentUser.email ? state : {}; return !Object.keys(state.currentUser).length ? state : {};
}, },
success: UserActions.successFetchCurrentUser, success: UserActions.successFetchCurrentUser,
error: UserActions.errorCurrentUser, error: UserActions.errorCurrentUser,
shouldFetch(state) {
return state.userMeta.invalidateCache || state.currentUser && !state.currentUser.email; shouldFetch(state, invalidateCache) {
return invalidateCache || !Object.keys(state.currentUser).length;
} }
}, },
@ -26,6 +28,7 @@ const UserSource = {
remote() { remote() {
return requests.get(ApiUrls.users_logout); return requests.get(ApiUrls.users_logout);
}, },
success: UserActions.successLogoutCurrentUser, success: UserActions.successLogoutCurrentUser,
error: UserActions.errorCurrentUser error: UserActions.errorCurrentUser
} }

23
js/sources/webhook_source.js
View File

@ -10,13 +10,16 @@ const WebhookSource = {
remote() { remote() {
return requests.get('webhooks'); return requests.get('webhooks');
}, },
local(state) { local(state) {
return state.webhooks && !Object.keys(state.webhooks).length ? state : {}; return !Object.keys(state.webhooks).length ? state : {};
}, },
success: WebhookActions.successFetchWebhooks, success: WebhookActions.successFetchWebhooks,
error: WebhookActions.errorWebhooks, error: WebhookActions.errorWebhooks,
shouldFetch(state) {
return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length; shouldFetch(state, invalidateCache) {
return invalidateCache || !Object.keys(state.webhooks).length;
} }
}, },
@ -24,20 +27,24 @@ const WebhookSource = {
remote() { remote() {
return requests.get('webhooks_events'); return requests.get('webhooks_events');
}, },
local(state) { local(state) {
return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {}; return !Object.keys(state.webhookEvents).length ? state : {};
}, },
success: WebhookActions.successFetchWebhookEvents, success: WebhookActions.successFetchWebhookEvents,
error: WebhookActions.errorWebhookEvents, error: WebhookActions.errorWebhookEvents,
shouldFetch(state) {
return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length; shouldFetch(state, invalidateCache) {
return invalidateCache || !Object.keys(state.webhookEvents).length;
} }
}, },
performRemoveWebhook: { performRemoveWebhook: {
remote(state) { remote(state, webhookId) {
return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete }); return requests.delete('webhook', { 'webhook_id': webhookId });
}, },
success: WebhookActions.successRemoveWebhook, success: WebhookActions.successRemoveWebhook,
error: WebhookActions.errorWebhooks error: WebhookActions.errorWebhooks
} }

11
js/sources/whitelabel_source.js
View File

@ -9,15 +9,18 @@ import { getSubdomain } from '../utils/general_utils';
const WhitelabelSource = { const WhitelabelSource = {
lookupWhitelabel: { lookupWhitelabel: {
remote() { remote() {
return requests.get('whitelabel_settings', {'subdomain': getSubdomain()}); return requests.get('whitelabel_settings', { 'subdomain': getSubdomain() });
}, },
local(state) { local(state) {
return Object.keys(state.whitelabel).length > 0 ? state : {}; return Object.keys(state.whitelabel).length ? state : {};
}, },
success: WhitelabelActions.successFetchWhitelabel, success: WhitelabelActions.successFetchWhitelabel,
error: WhitelabelActions.errorWhitelabel, error: WhitelabelActions.errorWhitelabel,
shouldFetch(state) {
return state.whitelabelMeta.invalidateCache || Object.keys(state.whitelabel).length === 0; shouldFetch(state, invalidateCache) {
return invalidateCache || !Object.keys(state.whitelabel).length;
} }
} }
}; };

121
js/stores/edition_list_store.js
View File

@ -12,7 +12,11 @@ class EditionListStore {
this.bindActions(EditionsListActions); this.bindActions(EditionsListActions);
} }
onUpdateEditionList({pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy}) { onUpdateEditionList({ pieceId, editionListOfPiece, page, pageSize, orderBy, orderAsc, count, filterBy, maxEdition }) {
// if editionList for a specific piece does not exist yet,
// just initialize a new array
const pieceEditionList = this.editionList[pieceId] || [];
/* /*
Basically there are two modes an edition list can be updated. Basically there are two modes an edition list can be updated.
@ -20,27 +24,42 @@ class EditionListStore {
2. The elements are already defined => merge current objects with the new ones from the server 2. The elements are already defined => merge current objects with the new ones from the server
*/ */
for(let i = 0; i < editionListOfPiece.length; i++) { editionListOfPiece.forEach((updatedEdition, index) => {
// this is the index formula for accessing an edition starting from a specific page
// if editionList for a specific piece does not exist yet, const storeEditionIndex = (page - 1) * pageSize + index;
// just initialize a new array
if(!this.editionList[pieceId]) {
this.editionList[pieceId] = [];
}
// this is the index formula for accessing an edition of a specific
// page
let storeEditionIndex = (page - 1) * pageSize + i;
let editionsForPieces = this.editionList[pieceId];
// if edition already exists, just merge // if edition already exists, just merge
if(editionsForPieces[storeEditionIndex]) { if (pieceEditionList[storeEditionIndex]) {
editionsForPieces[storeEditionIndex] = React.addons.update(editionsForPieces[storeEditionIndex], {$merge: editionListOfPiece[i]}); pieceEditionList[storeEditionIndex] = React.addons.update(pieceEditionList[storeEditionIndex], { $merge: updatedEdition });
} else { } else {
// if does not exist, assign // if does not exist, assign
editionsForPieces[storeEditionIndex] = editionListOfPiece[i]; pieceEditionList[storeEditionIndex] = updatedEdition;
}
});
// Remove editions after specified max by finding the index of the first
// edition larger than the max edition and using that to cut off the rest of the list
if (typeof maxEdition === 'number') {
const largerThanMaxIndex = pieceEditionList.findIndex(edition => edition.edition_number > maxEdition);
if (largerThanMaxIndex !== -1) {
// The API defines inflexible page buckets based on the page number
// and page size, so we cannot just arbitrarily cut off the end of
// a page and expect get the rest of it on the next pagination request.
// Hence, we use the max edition index as a guide for which page to
// cut off to so as to always provide complete pages.
page = Math.ceil(largerThanMaxIndex / pageSize);
// We only want to cut off the list if there are more editions than
// there should be (ie. we're not already at the end of the editions)
const totalPageSize = page * pageSize;
if (pieceEditionList.length > totalPageSize) {
pieceEditionList.length = totalPageSize;
} }
} }
}
const lastEdition = pieceEditionList[pieceEditionList.length - 1];
/** /**
* page, pageSize, orderBy, orderAsc and count are specific to a single list of editions * page, pageSize, orderBy, orderAsc and count are specific to a single list of editions
@ -48,65 +67,64 @@ class EditionListStore {
* *
* Default values for both are set in the editon_list_actions. * Default values for both are set in the editon_list_actions.
*/ */
this.editionList[pieceId].page = page; pieceEditionList.page = page;
this.editionList[pieceId].pageSize = pageSize; pieceEditionList.pageSize = pageSize;
this.editionList[pieceId].orderBy = orderBy; pieceEditionList.orderBy = orderBy;
this.editionList[pieceId].orderAsc = orderAsc; pieceEditionList.orderAsc = orderAsc;
this.editionList[pieceId].count = count; pieceEditionList.count = count;
this.editionList[pieceId].filterBy = filterBy; pieceEditionList.filterBy = filterBy;
if (pieceEditionList.maxSeen == null || lastEdition.edition_number > pieceEditionList.maxSeen) {
pieceEditionList.maxSeen = lastEdition.edition_number;
}
this.editionList[pieceId] = pieceEditionList;
} }
/** /**
* We often just have to refresh the edition list for a certain pieceId, * We often just have to refresh the edition list for a certain pieceId,
* this method provides exactly that functionality without any side effects * this method provides exactly that functionality without any side effects
*/ */
onRefreshEditionList({pieceId, filterBy = {}}) { onRefreshEditionList({ pieceId, filterBy }) {
const pieceEditionList = this.editionList[pieceId];
// It may happen that the user enters the site logged in already // It may happen that the user enters the site logged in already
// through /editions // through /editions
// If he then tries to delete a piece/edition and this method is called, // If he then tries to delete a piece/edition and this method is called,
// we'll not be able to refresh his edition list since its not yet there. // we'll not be able to refresh his edition list since its not yet there.
// Therefore we can just return, since there is no data to be refreshed // Therefore we can just return, since there is no data to be refreshed
if(!this.editionList[pieceId]) { if (!this.editionList[pieceId]) {
return; return;
} }
let prevEditionListLength = this.editionList[pieceId].length; if (typeof filterBy !== 'object') {
let prevEditionListPage = this.editionList[pieceId].page; filterBy = pieceEditionList.filterBy;
let prevEditionListPageSize = this.editionList[pieceId].pageSize;
// we can also refresh the edition list using filterBy,
// if we decide not to do that then the old filter will just be applied.
if(filterBy && Object.keys(filterBy).length <= 0) {
filterBy = this.editionList[pieceId].filterBy;
prevEditionListLength = 10;
prevEditionListPage = 1;
prevEditionListPageSize = 10;
} }
const { maxSeen, orderAsc, orderBy, pageSize } = pieceEditionList;
// to clear an array, david walsh recommends to just set it's length to zero // to clear an array, david walsh recommends to just set it's length to zero
// http://davidwalsh.name/empty-array // http://davidwalsh.name/empty-array
this.editionList[pieceId].length = 0; pieceEditionList.length = 0;
// refetch editions with adjusted page size EditionsListActions
EditionsListActions.fetchEditionList(pieceId, 1, prevEditionListLength, .fetchEditionList({
this.editionList[pieceId].orderBy, pieceId,
this.editionList[pieceId].orderAsc, pageSize,
filterBy) orderBy,
.then(() => { orderAsc,
// reset back to the normal pageSize and page filterBy,
this.editionList[pieceId].page = prevEditionListPage; maxSeen,
this.editionList[pieceId].pageSize = prevEditionListPageSize; page: 1
}) })
.catch((err) => { .catch(console.logGlobal);
console.logGlobal(err);
});
} }
onSelectEdition({pieceId, editionId, toValue}) { onSelectEdition({ pieceId, editionId, toValue }) {
this.editionList[pieceId].forEach((edition) => { this.editionList[pieceId].forEach((edition) => {
// Taken from: http://stackoverflow.com/a/519157/1263876 // Taken from: http://stackoverflow.com/a/519157/1263876
if(typeof toValue !== 'undefined' && edition.id === editionId) { if (typeof toValue !== 'undefined' && edition.id === editionId) {
edition.selected = toValue; edition.selected = toValue;
} else if(edition.id === editionId) { } else if(edition.id === editionId) {
if(edition.selected) { if(edition.selected) {
@ -132,7 +150,6 @@ class EditionListStore {
} }
onToggleEditionList(pieceId) { onToggleEditionList(pieceId) {
this.isEditionListOpenForPieceId[pieceId] = { this.isEditionListOpenForPieceId[pieceId] = {
show: this.isEditionListOpenForPieceId[pieceId] ? !this.isEditionListOpenForPieceId[pieceId].show : true show: this.isEditionListOpenForPieceId[pieceId] ? !this.isEditionListOpenForPieceId[pieceId].show : true
}; };
@ -141,7 +158,7 @@ class EditionListStore {
// the merge fails, as the edition list is not refreshed when closed. // the merge fails, as the edition list is not refreshed when closed.
// Therefore in the case of a filter application when closed, we need to reload the // Therefore in the case of a filter application when closed, we need to reload the
// edition list // edition list
if(!this.isEditionListOpenForPieceId[pieceId].show) { if (!this.isEditionListOpenForPieceId[pieceId].show) {
// to clear an array, david walsh recommends to just set it's length to zero // to clear an array, david walsh recommends to just set it's length to zero
// http://davidwalsh.name/empty-array // http://davidwalsh.name/empty-array

62
js/stores/edition_store.js
View File

@ -12,39 +12,55 @@ import { mergeOptions } from '../utils/general_utils';
class EditionStore { class EditionStore {
constructor() { constructor() {
this.getInitialState();
this.bindActions(EditionActions);
this.registerAsync(mergeOptions(EditionSource, CoaSource));
this.exportPublicMethods({
getInitialState: this.getInitialState.bind(this)
});
}
getInitialState() {
this.edition = {}; this.edition = {};
this.editionMeta = { this.editionMeta = {
err: null, err: null
idToFetch: null
}; };
this.coaMeta = { this.coaMeta = {
err: null err: null
}; };
this.bindActions(EditionActions); return {
this.registerAsync(mergeOptions(EditionSource, CoaSource)); edition: this.edition,
editionMeta: this.editionMeta,
coaMeta: this.coaMeta
};
} }
onFetchEdition(idToFetch) { onFetchEdition(editionId) {
this.editionMeta.idToFetch = idToFetch; this.getInstance().lookupEdition(editionId);
this.getInstance().lookupEdition(); // Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
} }
onSuccessFetchEdition({ edition }) { onSuccessFetchEdition({ edition }) {
if (edition) { if (edition) {
this.edition = edition; this.edition = edition;
this.editionMeta.err = null; this.editionMeta.err = null;
this.editionMeta.idToFetch = null;
if (this.edition.coa && this.edition.acl.acl_coa && // Also fetch coa if allowed
typeof this.edition.coa.constructor !== Object) { if (edition.acl.acl_coa) {
this.getInstance().lookupCoa(); if (edition.coa && typeof edition.coa.constructor !== Object) {
} else if (!this.edition.coa && this.edition.acl.acl_coa) { this.getInstance().lookupCoa(edition.coa);
this.getInstance().performCreateCoa(); } else if (!edition.coa) {
this.getInstance().performCreateCoaForEdition(edition.bitcoin_id);
}
} }
} else { } else {
this.editionMeta.err = new Error('Problem fetching the edition'); this.editionMeta.err = new Error('Problem fetching the edition');
console.logGlobal(this.editionMeta.err);
} }
} }
@ -54,32 +70,28 @@ class EditionStore {
this.coaMeta.err = null; this.coaMeta.err = null;
} else { } else {
this.coaMeta.err = new Error('Problem generating/fetching the COA'); this.coaMeta.err = new Error('Problem generating/fetching the COA');
console.logGlobal(this.coaMeta.err);
} }
} }
onFlushEdition() {
this.edition = {};
this.editionMeta = {
err: null,
idToFetch: null
};
this.coaMeta = {
err: null
};
}
onErrorEdition(err) { onErrorEdition(err) {
console.logGlobal(err);
this.editionMeta.err = err; this.editionMeta.err = err;
} }
onErrorCoa(err) { onErrorCoa(err) {
// On 404s, create a new COA as the COA has not been made yet // On 404s, create a new COA as the COA has not been made yet
if (err && err.json && err.json.status === 404) { if (err && err.json && err.json.status === 404) {
this.getInstance().performCreateCoa(); this.getInstance().performCreateCoaForEdition(this.edition.bitcoin_id);
} else { } else {
console.logGlobal(err);
this.coaMeta.err = err; this.coaMeta.err = err;
} }
} }
onFlushEdition() {
this.getInitialState();
}
} }
export default alt.createStore(EditionStore, 'EditionStore'); export default alt.createStore(EditionStore, 'EditionStore');

13
js/stores/piece_list_store.js
View File

@ -60,8 +60,8 @@ class PieceListStore {
* point anyway. Then, this problem is automatically resolved. * point anyway. Then, this problem is automatically resolved.
*/ */
pieceList.forEach((piece, i) => { pieceList.forEach((piece, i) => {
let oldPiece = this.pieceList[i]; const oldPiece = this.pieceList[i];
if(oldPiece) { if (oldPiece) {
piece = React.addons.update(piece, { piece = React.addons.update(piece, {
show: { $set: oldPiece.show } show: { $set: oldPiece.show }
}); });
@ -76,12 +76,11 @@ class PieceListStore {
this.requestActions = res.actions; this.requestActions = res.actions;
} }
onUpdatePropertyForPiece({pieceId, key, value}) { onUpdatePropertyForPiece({ pieceId, key, value }) {
let filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId); const filteredPieceList = this.pieceList.filter((piece) => piece.id === pieceId);
if(filteredPieceList.length === 1) { if (filteredPieceList.length === 1) {
const piece = filteredPieceList[0];
let piece = filteredPieceList[0];
piece[key] = value; piece[key] = value;
} else { } else {
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.');

59
js/stores/piece_store.js
View File

@ -1,32 +1,73 @@
'use strict'; 'use strict';
import { alt } from '../alt'; import { alt } from '../alt';
import PieceActions from '../actions/piece_actions'; import PieceActions from '../actions/piece_actions';
import PieceSource from '../sources/piece_source';
class PieceStore { class PieceStore {
constructor() { constructor() {
this.piece = {}; this.getInitialState();
this.pieceError = null;
this.bindActions(PieceActions); this.bindActions(PieceActions);
this.registerAsync(PieceSource);
this.exportPublicMethods({
getInitialState: this.getInitialState.bind(this)
});
}
getInitialState() {
this.piece = {};
this.pieceMeta = {
err: null
};
return {
piece: this.piece,
pieceMeta: this.pieceMeta
}
}
onFetchPiece(pieceId) {
this.getInstance().lookupPiece(pieceId);
// Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
}
onSuccessFetchPiece({ piece }) {
if (piece) {
this.onUpdatePiece(piece);
} else {
this.pieceMeta.err = new Error('Problem fetching the piece');
console.logGlobal(this.pieceMeta.err);
}
}
onErrorPiece(err) {
console.logGlobal(err);
this.pieceMeta.err = err;
}
onFlushPiece() {
this.getInitialState();
} }
onUpdatePiece(piece) { onUpdatePiece(piece) {
this.piece = piece; this.piece = piece;
this.pieceError = null; this.pieceMeta.err = null;
} }
onUpdateProperty({key, value}) { onUpdateProperty({ key, value }) {
if(this.piece && key in this.piece) { if (this.piece && key in this.piece) {
this.piece[key] = value; this.piece[key] = value;
} else { } else {
throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.'); throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
} }
} }
onPieceFailed(err) {
this.pieceError = err;
}
} }
export default alt.createStore(PieceStore, 'PieceStore'); export default alt.createStore(PieceStore, 'PieceStore');

20
js/stores/prize_list_store.js
View File

@ -1,20 +0,0 @@
'use strict';
import { alt } from '../alt';
import PrizeListActions from '../actions/prize_list_actions';
class PrizeListStore {
constructor() {
this.prizeList = [];
this.prizeListCount = -1;
this.bindActions(PrizeListActions);
}
onUpdatePrizeList({ prizeList, prizeListCount }) {
this.prizeList = prizeList;
this.prizeListCount = prizeListCount;
}
}
export default alt.createStore(PrizeListStore, 'PrizeListStore');

22
js/stores/user_store.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import { altUser } from '../alt'; import { altUser } from '../alt';
import UserActions from '../actions/user_actions'; import UserActions from '../actions/user_actions';
import UserSource from '../sources/user_source'; import UserSource from '../sources/user_source';
@ -10,7 +11,6 @@ class UserStore {
constructor() { constructor() {
this.currentUser = {}; this.currentUser = {};
this.userMeta = { this.userMeta = {
invalidateCache: false,
err: null err: null
}; };
@ -19,24 +19,30 @@ class UserStore {
} }
onFetchCurrentUser(invalidateCache) { onFetchCurrentUser(invalidateCache) {
this.userMeta.invalidateCache = invalidateCache; if (invalidateCache || !this.getInstance().isLoading()) {
this.getInstance().lookupCurrentUser(invalidateCache);
if(!this.getInstance().isLoading()) {
this.getInstance().lookupCurrentUser();
}
} }
onSuccessFetchCurrentUser({users: [user = {}]}) { // Prevent alt from sending an empty change event when a request is sent
this.userMeta.invalidateCache = false; // off to the source
this.preventDefault();
}
onSuccessFetchCurrentUser({ users: [ user = {} ] }) {
this.userMeta.err = null; this.userMeta.err = null;
this.currentUser = user; this.currentUser = user;
} }
onLogoutCurrentUser() { onLogoutCurrentUser() {
this.getInstance().performLogoutCurrentUser(); this.getInstance().performLogoutCurrentUser();
// Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
} }
onSuccessLogoutCurrentUser() { onSuccessLogoutCurrentUser() {
this.userMeta.err = null;
this.currentUser = {}; this.currentUser = {};
} }

45
js/stores/webhook_store.js
View File

@ -1,6 +1,7 @@
'use strict'; 'use strict';
import { alt } from '../alt'; import { alt } from '../alt';
import WebhookActions from '../actions/webhook_actions'; import WebhookActions from '../actions/webhook_actions';
import WebhookSource from '../sources/webhook_source'; import WebhookSource from '../sources/webhook_source';
@ -10,12 +11,9 @@ class WebhookStore {
this.webhooks = []; this.webhooks = [];
this.webhookEvents = []; this.webhookEvents = [];
this.webhookMeta = { this.webhookMeta = {
invalidateCache: false, err: null
err: null,
idToDelete: null
}; };
this.webhookEventsMeta = { this.webhookEventsMeta = {
invalidateCache: false,
err: null err: null
}; };
@ -24,26 +22,33 @@ class WebhookStore {
} }
onFetchWebhooks(invalidateCache) { onFetchWebhooks(invalidateCache) {
this.webhookMeta.invalidateCache = invalidateCache; if (invalidateCache || !this.getInstance().isLoading()) {
this.getInstance().lookupWebhooks(); this.getInstance().lookupWebhooks(invalidateCache);
}
// Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
} }
onSuccessFetchWebhooks({ webhooks = [] }) { onSuccessFetchWebhooks({ webhooks = [] }) {
this.webhookMeta.invalidateCache = false;
this.webhookMeta.err = null; this.webhookMeta.err = null;
this.webhooks = webhooks; this.webhooks = webhooks;
this.webhookEventsMeta.invalidateCache = true; this.onFetchWebhookEvents(true);
this.getInstance().lookupWebhookEvents();
} }
onFetchWebhookEvents(invalidateCache) { onFetchWebhookEvents(invalidateCache) {
this.webhookEventsMeta.invalidateCache = invalidateCache; if (invalidateCache || !this.getInstance().isLoading()) {
this.getInstance().lookupWebhookEvents(); this.getInstance().lookupWebhookEvents(invalidateCache);
}
// Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
} }
onSuccessFetchWebhookEvents({ events }) { onSuccessFetchWebhookEvents({ events }) {
this.webhookEventsMeta.invalidateCache = false;
this.webhookEventsMeta.err = null; this.webhookEventsMeta.err = null;
// remove all events that have already been used. // remove all events that have already been used.
@ -58,20 +63,16 @@ class WebhookStore {
}); });
} }
onRemoveWebhook(id) { onRemoveWebhook(webhookId) {
this.webhookMeta.invalidateCache = true; this.getInstance().performRemoveWebhook(webhookId);
this.webhookMeta.idToDelete = id;
if(!this.getInstance().isLoading()) { // Prevent alt from sending an empty change event when a request is sent
this.getInstance().performRemoveWebhook(); // off to the source
} this.preventDefault();
} }
onSuccessRemoveWebhook() { onSuccessRemoveWebhook() {
this.webhookMeta.idToDelete = null; this.getInstance().lookupWebhooks(true);
if(!this.getInstance().isLoading()) {
this.getInstance().lookupWebhooks();
}
} }
onErrorWebhooks(err) { onErrorWebhooks(err) {

14
js/stores/whitelabel_store.js
View File

@ -1,7 +1,9 @@
'use strict'; 'use strict';
import { altWhitelabel } from '../alt'; import { altWhitelabel } from '../alt';
import WhitelabelActions from '../actions/whitelabel_actions'; import WhitelabelActions from '../actions/whitelabel_actions';
import WhitelabelSource from '../sources/whitelabel_source'; import WhitelabelSource from '../sources/whitelabel_source';
@ -9,7 +11,6 @@ class WhitelabelStore {
constructor() { constructor() {
this.whitelabel = {}; this.whitelabel = {};
this.whitelabelMeta = { this.whitelabelMeta = {
invalidateCache: false,
err: null err: null
}; };
@ -18,15 +19,16 @@ class WhitelabelStore {
} }
onFetchWhitelabel(invalidateCache) { onFetchWhitelabel(invalidateCache) {
this.whitelabelMeta.invalidateCache = invalidateCache; if (invalidateCache || !this.getInstance().isLoading()) {
this.getInstance().lookupWhitelabel(invalidateCache);
if(!this.getInstance().isLoading()) {
this.getInstance().lookupWhitelabel();
} }
// Prevent alt from sending an empty change event when a request is sent
// off to the source
this.preventDefault();
} }
onSuccessFetchWhitelabel({ whitelabel = {} }) { onSuccessFetchWhitelabel({ whitelabel = {} }) {
this.whitelabelMeta.invalidateCache = false;
this.whitelabelMeta.err = null; this.whitelabelMeta.err = null;
this.whitelabel = whitelabel; this.whitelabel = whitelabel;
} }

4
js/third_party/notifications_handler.js vendored
View File

@ -22,14 +22,14 @@ class NotificationsHandler {
return; return;
} }
let subdomain = getSubdomain(); const subdomain = getSubdomain();
if (subdomain === 'ikonotv') { if (subdomain === 'ikonotv') {
NotificationActions.fetchContractAgreementListNotifications().then( NotificationActions.fetchContractAgreementListNotifications().then(
(res) => { (res) => {
if (res.notifications && res.notifications.length > 0) { if (res.notifications && res.notifications.length > 0) {
this.loaded = true; this.loaded = true;
console.log('Contractagreement notifications loaded'); console.log('Contractagreement notifications loaded');
history.pushState(null, '/contract_notifications'); history.push('/contract_notifications');
} }
} }
); );

13
js/utils/error_utils.js
View File

@ -13,22 +13,19 @@ import AppConstants from '../constants/application_constants';
* @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry * @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
* @param {string} comment Will also be submitted to Sentry, but will not be logged * @param {string} comment Will also be submitted to Sentry, but will not be logged
*/ */
function logGlobal(error, comment, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1) { function logGlobal(error, comment, ignoreSentry) {
console.error(error); console.error(error);
if(!ignoreSentry) { if (!ignoreSentry) {
if(comment) { Raven.captureException(error, comment ? { extra: { comment } } : undefined);
Raven.captureException(error, {extra: { comment }});
} else {
Raven.captureException(error);
}
} }
} }
export function initLogging() { export function initLogging() {
// Initialize Raven for logging on Sentry // Initialize Raven for logging on Sentry
Raven.config(AppConstants.raven.url, { Raven.config(AppConstants.raven.url, {
release: AppConstants.version release: AppConstants.version,
ignoreErrors: AppConstants.errorMessagesToIgnore
}).install(); }).install();
window.onerror = Raven.process; window.onerror = Raven.process;

11
js/utils/url_utils.js
View File

@ -2,7 +2,7 @@
import camelCase from 'camelcase'; import camelCase from 'camelcase';
import decamelize from 'decamelize'; import decamelize from 'decamelize';
import qs from 'qs'; import queryString from 'query-string';
import { sanitize } from './general_utils'; import { sanitize } from './general_utils';
@ -36,8 +36,7 @@ export function argsToQueryParams(obj) {
queryParamObj[decamelize(key)] = sanitizedObj[key]; queryParamObj[decamelize(key)] = sanitizedObj[key];
}); });
// Use bracket arrayFormat as history.js and react-router use it return '?' + queryString.stringify(queryParamObj);
return '?' + qs.stringify(queryParamObj, { arrayFormat: 'brackets' });
} }
/** /**
@ -56,13 +55,13 @@ export function getCurrentQueryParams() {
* @return {object} Query params dictionary * @return {object} Query params dictionary
*/ */
export function queryParamsToArgs(queryParamString) { export function queryParamsToArgs(queryParamString) {
const qsQueryParamObj = qs.parse(queryParamString); const queryParamObj = queryString.parse(queryParamString);
const camelCaseParamObj = {}; const camelCaseParamObj = {};
Object Object
.keys(qsQueryParamObj) .keys(queryParamObj)
.forEach((key) => { .forEach((key) => {
camelCaseParamObj[camelCase(key)] = qsQueryParamObj[key]; camelCaseParamObj[camelCase(key)] = queryParamObj[key];
}); });
return camelCaseParamObj; return camelCaseParamObj;

8
package.json
View File

@ -35,6 +35,7 @@
"devDependencies": { "devDependencies": {
"babel-eslint": "^3.1.11", "babel-eslint": "^3.1.11",
"babel-jest": "^5.2.0", "babel-jest": "^5.2.0",
"gulp-sass": "^2.1.1",
"jest-cli": "^0.4.0" "jest-cli": "^0.4.0"
}, },
"dependencies": { "dependencies": {
@ -47,6 +48,7 @@
"browserify": "^9.0.8", "browserify": "^9.0.8",
"browserify-shim": "^3.8.10", "browserify-shim": "^3.8.10",
"camelcase": "^1.2.1", "camelcase": "^1.2.1",
"classlist-polyfill": "^1.0.2",
"classnames": "^1.2.2", "classnames": "^1.2.2",
"compression": "^1.4.4", "compression": "^1.4.4",
"decamelize": "^1.1.1", "decamelize": "^1.1.1",
@ -66,7 +68,7 @@
"gulp-uglify": "^1.2.0", "gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4", "gulp-util": "^3.0.4",
"harmonize": "^1.4.2", "harmonize": "^1.4.2",
"history": "^1.13.1", "history": "1.17.0",
"invariant": "^2.1.1", "invariant": "^2.1.1",
"isomorphic-fetch": "^2.0.2", "isomorphic-fetch": "^2.0.2",
"jest-cli": "^0.4.0", "jest-cli": "^0.4.0",
@ -75,12 +77,12 @@
"object-assign": "^2.0.0", "object-assign": "^2.0.0",
"opn": "^3.0.2", "opn": "^3.0.2",
"q": "^1.4.1", "q": "^1.4.1",
"qs": "^4.0.0", "query-string": "^3.0.0",
"raven-js": "^1.1.19", "raven-js": "^1.1.19",
"react": "0.13.2", "react": "0.13.2",
"react-bootstrap": "0.25.1", "react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0", "react-datepicker": "^0.12.0",
"react-router": "1.0.0", "react-router": "1.0.3",
"react-router-bootstrap": "^0.19.0", "react-router-bootstrap": "^0.19.0",
"react-star-rating": "~1.3.2", "react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2", "react-textarea-autosize": "^2.5.2",

4
sass/ascribe_custom_style.scss
View File

@ -447,9 +447,9 @@ fieldset[disabled] .btn-secondary.active {
} }
.search-bar > .form-group > .input-group { .search-bar > .form-group > .input-group {
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid $ascribe-blue-border;
&:hover, &:focus, &:active { &:hover, &:focus, &:active {
border-color: $ascribe-blue-border; border-color: $ascribe-blue-border-active;
} }
input::-webkit-input-placeholder { input::-webkit-input-placeholder {
color: rgba($ascribe-dark-blue, 0.5); color: rgba($ascribe-dark-blue, 0.5);

1
sass/ascribe_variables.scss
View File

@ -5,6 +5,7 @@ $ascribe-light-blue: #D3DEE4;
$ascribe-white: #F8F8F8; $ascribe-white: #F8F8F8;
$ascribe-pink: #D10074; $ascribe-pink: #D10074;
$ascribe-blue-border: rgba(0, 60, 105, 0.1); $ascribe-blue-border: rgba(0, 60, 105, 0.1);
$ascribe-blue-border-active: rgba(0, 60, 105, 0.2);
$ascribe-red-error: rgb(169, 68, 66); $ascribe-red-error: rgb(169, 68, 66);

2
sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
View File

@ -238,7 +238,7 @@ $vivi23--highlight-color: #de2600;
&.active:hover{ &.active:hover{
background-color: $vivi23--highlight-color; background-color: $vivi23--highlight-color;
border-color: $vivi23--highlight-color; border-color: $vivi23--highlight-color;
color: $vivi23--highlight-color; color: $vivi23--bg-color;
} }
} }