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

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2016-01-26 13:50:03 +01:00
commit 6a1dc7ed98
163 changed files with 3444 additions and 2185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.env-template Normal file
View File

@ -0,0 +1,3 @@
SAUCE_USERNAME=ascribe
SAUCE_ACCESS_KEY=
SAUCE_DEFAULT_URL=

2
.eslintrc
View File

@ -2,7 +2,7 @@
"parser": "babel-eslint",
"env": {
"browser": true,
"es6": true
"es6": true,
},
"rules": {
"new-cap": [2, {newIsCap: true, capIsNew: false}],

1
.gitignore vendored
View File

@ -22,3 +22,4 @@ node_modules/*
build
.DS_Store
.env

11
README.md
View File

@ -48,15 +48,18 @@ For this project, we're using:
Branch names
=====================
Since we moved to Github, we cannot create branch names automatically with JIRA anymore.
To not lose context, but still be able to switch branches quickly using a ticket's number, we're recommending the following rules when naming our branches in onion.
To allow Github and JIRA to track branches while still allowing us to switch branches quickly using a ticket's number (and keep our peace of mind), we have the following rules for naming branches:
```
// For issues logged in Github:
AG-<Github-issue-id>-brief-and-sane-description-of-the-ticket
// For issues logged in JIRA:
AD-<JIRA-ticket-id>-brief-and-sane-description-of-the-ticket
```
where `brief-and-sane-description-of-the-ticket` does not need to equal to the ticket's title.
This allows JIRA to still track branches and pull-requests while allowing us to keep our peace of mind.
where `brief-and-sane-description-of-the-ticket` does not need to equal to the issue or ticket's title.
Example
-------------

11
js/actions/contract_agreement_list_actions.js
View File

@ -83,9 +83,9 @@ class ContractAgreementListActions {
contractAgreementList in the store is already set to null;
*/
}
}).then((publicContracAgreement) => {
if (publicContracAgreement) {
this.actions.updateContractAgreementList([publicContracAgreement]);
}).then((publicContractAgreement) => {
if (publicContractAgreement) {
this.actions.updateContractAgreementList([publicContractAgreement]);
}
}).catch(console.logGlobal);
}
@ -93,7 +93,10 @@ class ContractAgreementListActions {
createContractAgreement(issuer, contract){
return Q.Promise((resolve, reject) => {
OwnershipFetcher
.createContractAgreement(issuer, contract).then(resolve)
.createContractAgreement(issuer, contract)
.then((res) => {
resolve(res && res.contractagreement)
})
.catch((err) => {
console.logGlobal(err);
reject(err);

16
js/actions/contract_list_actions.js
View File

@ -28,12 +28,10 @@ class ContractListActions {
}
changeContract(contract){
changeContract(contract) {
return Q.Promise((resolve, reject) => {
OwnershipFetcher.changeContract(contract)
.then((res) => {
resolve(res);
})
.then(resolve)
.catch((err)=> {
console.logGlobal(err);
reject(err);
@ -41,13 +39,11 @@ class ContractListActions {
});
}
removeContract(contractId){
return Q.Promise( (resolve, reject) => {
removeContract(contractId) {
return Q.Promise((resolve, reject) => {
OwnershipFetcher.deleteContract(contractId)
.then((res) => {
resolve(res);
})
.catch( (err) => {
.then(resolve)
.catch((err) => {
console.logGlobal(err);
reject(err);
});

6
js/actions/edition_actions.js
View File

@ -7,11 +7,11 @@ class EditionActions {
constructor() {
this.generateActions(
'fetchEdition',
'successFetchEdition',
'successFetchCoa',
'flushEdition',
'successFetchEdition',
'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) {
if((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
fetchEditionList({ pieceId, page, pageSize, orderBy, orderAsc, filterBy, maxEdition }) {
if ((!orderBy && typeof orderAsc === 'undefined') || !orderAsc) {
orderBy = 'edition_number';
orderAsc = true;
}
// 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;
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) => {
EditionListFetcher
.fetch(pieceId, page, pageSize, orderBy, orderAsc, filterBy)
.fetch({ pieceId, page, orderBy, orderAsc, filterBy, pageSize: itemsToFetch })
.then((res) => {
if(res && !res.editions) {
if (res && !res.editions) {
throw new Error('Piece has no editions to fetch.');
}
@ -44,8 +52,9 @@ class EditionListActions {
orderBy,
orderAsc,
filterBy,
'editionListOfPiece': res.editions,
'count': res.count
maxEdition,
count: res.count,
editionListOfPiece: res.editions
});
resolve(res);
})
@ -54,7 +63,6 @@ class EditionListActions {
reject(err);
});
});
}
}

14
js/actions/facebook_actions.js Normal file
View File

@ -0,0 +1,14 @@
'use strict';
import { altThirdParty } from '../alt';
class FacebookActions {
constructor() {
this.generateActions(
'sdkReady'
);
}
}
export default altThirdParty.createActions(FacebookActions);

5
js/actions/notification_actions.js
View File

@ -9,10 +9,13 @@ class NotificationActions {
constructor() {
this.generateActions(
'updatePieceListNotifications',
'flushPieceListNotifications',
'updateEditionListNotifications',
'flushEditionListNotifications',
'updateEditionNotifications',
'updatePieceNotifications',
'updateContractAgreementListNotifications'
'updateContractAgreementListNotifications',
'flushContractAgreementListNotifications'
);
}

19
js/actions/piece_actions.js
View File

@ -1,28 +1,19 @@
'use strict';
import { alt } from '../alt';
import PieceFetcher from '../fetchers/piece_fetcher';
class PieceActions {
constructor() {
this.generateActions(
'fetchPiece',
'successFetchPiece',
'errorPiece',
'flushPiece',
'updatePiece',
'updateProperty',
'pieceFailed'
'updateProperty'
);
}
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);

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,
// we overwrite the piecelist with an empty list before
// pieceListCount === -1 defines the loading state
@ -34,7 +34,7 @@ class PieceListActions {
// afterwards, we can load the list
return Q.Promise((resolve, reject) => {
PieceListFetcher
.fetch(page, pageSize, search, orderBy, orderAsc, filterBy)
.fetch({ page, pageSize, search, orderBy, orderAsc, filterBy })
.then((res) => {
this.actions.updatePieceList({
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);

88
js/app.js
View File

@ -1,14 +1,13 @@
'use strict';
import polyfill from 'babel/polyfill';
import 'babel/polyfill';
import 'classlist-polyfill';
import React from 'react';
import { Router, Redirect } from 'react-router';
import history from './history';
/* eslint-disable */
import fetch from 'isomorphic-fetch';
/* eslint-enable */
import ApiUrls from './constants/api_urls';
@ -17,44 +16,27 @@ import getRoutes from './routes';
import requests from './utils/requests';
import { updateApiUrls } from './constants/api_urls';
import { getSubdomainSettings } from './utils/constants_utils';
import { getDefaultSubdomainSettings, getSubdomainSettings } from './utils/constants_utils';
import { initLogging } from './utils/error_utils';
import { getSubdomain } from './utils/general_utils';
import EventActions from './actions/event_actions';
/* eslint-disable */
// You can comment out the modules you don't need
// import DebugHandler from './third_party/debug';
import GoogleAnalyticsHandler from './third_party/ga';
import RavenHandler from './third_party/raven';
import IntercomHandler from './third_party/intercom';
import NotificationsHandler from './third_party/notifications';
import FacebookHandler from './third_party/facebook';
/* eslint-enable */
// import DebugHandler from './third_party/debug_handler';
import FacebookHandler from './third_party/facebook_handler';
import GoogleAnalyticsHandler from './third_party/ga_handler';
import IntercomHandler from './third_party/intercom_handler';
import NotificationsHandler from './third_party/notifications_handler';
import RavenHandler from './third_party/raven_handler';
initLogging();
let headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
};
requests.defaults({
urlMap: ApiUrls,
http: {
headers: headers,
credentials: 'include'
}
});
class AppGateway {
const AppGateway = {
start() {
let settings;
let subdomain = getSubdomain();
try {
settings = getSubdomainSettings(subdomain);
const subdomain = getSubdomain();
const settings = getSubdomainSettings(subdomain);
AppConstants.whitelabel = settings;
updateApiUrls(settings.type, subdomain);
this.load(settings);
@ -62,28 +44,25 @@ class AppGateway {
// if there are no matching subdomains, we're routing
// to the default frontend
console.logGlobal(err);
this.load();
this.load(getDefaultSubdomainSettings());
}
}
},
load(settings) {
let type = 'default';
let subdomain = 'www';
const { subdomain, type } = settings;
let redirectRoute = (<Redirect from="/" to="/collection" />);
if (settings) {
type = settings.type;
subdomain = settings.subdomain;
}
if (subdomain) {
// Some whitelabels have landing pages so we should not automatically redirect from / to /collection.
// Only www and cc do not have a landing page.
if (subdomain !== 'cc') {
redirectRoute = null;
}
// www and cc do not have a landing page
if(subdomain && subdomain !== 'cc') {
redirectRoute = null;
// Adds a client specific class to the body for whitelabel styling
window.document.body.classList.add('client--' + subdomain);
}
// Adds a client specific class to the body for whitelabel styling
window.document.body.classList.add('client--' + subdomain);
// Send the applicationWillBoot event to the third-party stores
EventActions.applicationWillBoot(settings);
@ -101,8 +80,21 @@ class AppGateway {
// Send the applicationDidBoot event to the third-party stores
EventActions.applicationDidBoot(settings);
}
}
};
let ag = new AppGateway();
ag.start();
// Initialize pre-start components
initLogging();
requests.defaults({
urlMap: ApiUrls,
http: {
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
credentials: 'include'
}
});
// And bootstrap app
AppGateway.start();

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({
propTypes: {
className: React.PropTypes.string,
piece: React.PropTypes.object.isRequired,
toggleCreateEditionsDialog: React.PropTypes.func.isRequired,
className: React.PropTypes.string,
onPollingSuccess: React.PropTypes.func
},
@ -50,14 +51,15 @@ let AccordionListItemEditionWidget = React.createClass({
* Calls the store to either show or hide the editionListTable
*/
toggleTable() {
let pieceId = this.props.piece.id;
let isEditionListOpen = this.state.isEditionListOpenForPieceId[pieceId] ? this.state.isEditionListOpenForPieceId[pieceId].show : false;
const { piece: { id: pieceId } } = this.props;
const { filterBy, isEditionListOpenForPieceId } = this.state;
const isEditionListOpen = isEditionListOpenForPieceId[pieceId] ? isEditionListOpenForPieceId[pieceId].show : false;
if(isEditionListOpen) {
if (isEditionListOpen) {
EditionListActions.toggleEditionList(pieceId);
} else {
EditionListActions.toggleEditionList(pieceId);
EditionListActions.fetchEditionList(pieceId, null, null, null, null, this.state.filterBy);
EditionListActions.fetchEditionList({ pieceId, filterBy });
}
},

20
js/components/ascribe_accordion_list/accordion_list_item_piece.js
View File

@ -12,8 +12,11 @@ import { getLangText } from '../../utils/lang_utils';
let AccordionListItemPiece = React.createClass({
propTypes: {
className: React.PropTypes.string,
artistName: React.PropTypes.string,
piece: React.PropTypes.object,
artistName: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
]),
piece: React.PropTypes.object.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
@ -51,17 +54,21 @@ let AccordionListItemPiece = React.createClass({
piece,
subsubheading,
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
const { url, url_safe } = piece.thumbnail;
const { url: thumbnailUrl, url_safe: thumbnailSafeUrl } = piece.thumbnail;
// Display the 300x300 thumbnail if we have it, otherwise just use the safe url
const thumbnailDisplayUrl = (piece.thumbnail.thumbnail_sizes && piece.thumbnail.thumbnail_sizes['300x300']) || thumbnailSafeUrl;
let thumbnail;
// Since we're going to refactor the thumbnail generation anyway at one point,
// for not use the annoying ascribe_spiral.png, we're matching the url against
// this name and replace it with a CSS version of the new logo.
if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
if (thumbnailUrl.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
thumbnail = (<ThumbnailPlaceholder />);
} else {
thumbnail = (
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
<div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
);
}
@ -79,8 +86,7 @@ let AccordionListItemPiece = React.createClass({
subsubheading={subsubheading}
buttons={buttons}
badge={badge}
linkData={this.getLinkData()}
>
linkData={this.getLinkData()}>
{children}
</AccordionListItem>
);

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

@ -66,22 +66,34 @@ let AccordionListItemTableEditions = React.createClass({
},
filterSelectedEditions() {
let selectedEditions = this.state.editionList[this.props.parentId]
.filter((edition) => edition.selected);
return selectedEditions;
return this.state
.editionList[this.props.parentId]
.filter((edition) => edition.selected);
},
loadFurtherEditions() {
const { parentId: pieceId } = this.props;
const { page, pageSize, orderBy, orderAsc, filterBy } = this.state.editionList[pieceId];
// trigger loading animation
this.setState({
showMoreLoading: true
});
let editionList = this.state.editionList[this.props.parentId];
EditionListActions.fetchEditionList(this.props.parentId, editionList.page + 1, editionList.pageSize,
editionList.orderBy, editionList.orderAsc, editionList.filterBy);
EditionListActions.fetchEditionList({
pieceId,
pageSize,
orderBy,
orderAsc,
filterBy,
page: page + 1
});
},
render() {
const { className, parentId } = this.props;
const { editionList, isEditionListOpenForPieceId, showMoreLoading } = this.state;
const editionsForPiece = editionList[parentId];
let selectedEditionsCount = 0;
let allEditionsCount = 0;
let orderBy;
@ -89,95 +101,97 @@ let AccordionListItemTableEditions = React.createClass({
let show = 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
// piece are already defined. Otherwise .length will throw an error and we'll not
// be notified about it.
if(editionsForPiece) {
if (editionsForPiece) {
selectedEditionsCount = this.filterSelectedEditions().length;
allEditionsCount = editionsForPiece.length;
orderBy = editionsForPiece.orderBy;
orderAsc = editionsForPiece.orderAsc;
}
if(this.props.parentId in this.state.isEditionListOpenForPieceId) {
show = this.state.isEditionListOpenForPieceId[this.props.parentId].show;
if (parentId in isEditionListOpenForPieceId) {
show = isEditionListOpenForPieceId[parentId].show;
}
// 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
if(editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
if (editionsForPiece && editionsForPiece.count > editionsForPiece.length) {
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 = [
new ColumnModel(
(item) => {
const columnList = [
new ColumnModel({
transformFn: (item) => {
return {
'editionId': item.id,
'pieceId': this.props.parentId,
'pieceId': parentId,
'selectItem': this.selectItem,
'selected': item.selected
}; },
'',
};
},
displayElement: (
<AccordionListItemTableSelectAllEditionsCheckbox
onChange={this.toggleAllItems}
numOfSelectedEditions={selectedEditionsCount}
numOfAllEditions={allEditionsCount}/>,
TableItemCheckbox,
1,
false
),
new ColumnModel(
(item) => {
numOfAllEditions={allEditionsCount}/>
),
displayType: TableItemCheckbox,
rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': item.edition_number + ' ' + getLangText('of') + ' ' + item.num_editions
}; },
'edition_number',
getLangText('Edition'),
TableItemText,
1,
false,
transition
),
new ColumnModel(
(item) => {
};
},
columnName: 'edition_number',
displayElement: getLangText('Edition'),
displayType: TableItemText,
rowWidth: 1
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': item.bitcoin_id
}; },
'bitcoin_id',
getLangText('ID'),
TableItemText,
5,
false,
transition,
'hidden-xs visible-sm visible-md visible-lg'
),
new ColumnModel(
(item) => {
let content = item.acl;
};
},
columnName: 'bitcoin_id',
displayElement: getLangText('ID'),
displayType: TableItemText,
rowWidth: 5,
className: 'hidden-xs visible-sm visible-md visible-lg'
}),
new ColumnModel({
transition,
transformFn: (item) => {
return {
'content': content,
'content': item.acl,
'notifications': item.notifications
}; },
'acl',
getLangText('Actions'),
TableItemAclFiltered,
4,
false,
transition
)
};
},
columnName: 'acl',
displayElement: getLangText('Actions'),
displayType: TableItemAclFiltered,
rowWidth: 4
})
];
if(show && editionsForPiece && editionsForPiece.length > 0) {
if (show && editionsForPiece && editionsForPiece.length) {
return (
<div className={this.props.className}>
<div className={className}>
<AccordionListItemTable
parentId={this.props.parentId}
parentId={parentId}
itemList={editionsForPiece}
columnList={columnList}
show={show}
@ -188,7 +202,14 @@ let AccordionListItemTableEditions = React.createClass({
<AccordionListItemTableToggle
className="ascribe-accordion-list-table-toggle"
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>
);
} else {

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

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

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

@ -28,6 +28,12 @@ let CreateEditionsButton = React.createClass({
EditionListStore.listen(this.onChange);
},
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
componentWillUnmount() {
EditionListStore.unlisten(this.onChange);
clearInterval(this.state.pollingIntervalIndex);
@ -37,28 +43,24 @@ let CreateEditionsButton = React.createClass({
this.setState(state);
},
componentDidUpdate() {
if(this.props.piece.num_editions === 0 && typeof this.state.pollingIntervalIndex === 'undefined') {
this.startPolling();
}
},
startPolling() {
// start polling until editions are defined
let pollingIntervalIndex = setInterval(() => {
// 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
EditionListActions.fetchEditionList(this.props.piece.id, null, null, null, null, {})
.then((res) => {
clearInterval(this.state.pollingIntervalIndex);
this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
})
.catch((err) => {
/* Ignore and keep going */
});
EditionListActions
.fetchEditionList({
pieceId: this.props.piece.id,
filterBy: {}
})
.then((res) => {
clearInterval(this.state.pollingIntervalIndex);
this.props.onPollingSuccess(this.props.piece.id, res.editions[0].num_editions);
})
.catch((err) => {
/* Ignore and keep going */
});
}, 5000);
this.setState({

34
js/components/ascribe_detail/detail_property.js
View File

@ -1,9 +1,10 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
let DetailProperty = React.createClass({
const DetailProperty = React.createClass({
propTypes: {
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
React.PropTypes.element
]),
separator: React.PropTypes.string,
className: React.PropTypes.string,
labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string,
ellipsis: React.PropTypes.bool,
@ -30,31 +32,23 @@ let DetailProperty = React.createClass({
},
render() {
let styles = {};
const { labelClassName,
label,
separator,
valueClassName,
children,
value } = this.props;
if(this.props.ellipsis) {
styles = {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
};
}
const {
children,
className,
ellipsis,
label,
labelClassName,
separator,
valueClassName,
value } = this.props;
return (
<div className="row ascribe-detail-property">
<div className={classNames('row ascribe-detail-property', className)}>
<div className="row-same-height">
<div className={labelClassName}>
{label} {separator}
</div>
<div
className={valueClassName}
style={styles}>
<div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
{children || value}
</div>
</div>

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

@ -1,7 +1,7 @@
'use strict';
import React from 'react';
import { Link, History } from 'react-router';
import { Link } from 'react-router';
import Moment from 'moment';
import Row from 'react-bootstrap/lib/Row';
@ -16,7 +16,7 @@ import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph
import Form from './../ascribe_forms/form';
import Property from './../ascribe_forms/property';
import EditionDetailProperty from './detail_property';
import DetailProperty from './detail_property';
import LicenseDetail from './license_detail';
import FurtherDetails from './further_details';
@ -44,8 +44,6 @@ let Edition = React.createClass({
loadEdition: React.PropTypes.func
},
mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
@ -53,98 +51,103 @@ let Edition = React.createClass({
},
render() {
let FurtherDetailsType = this.props.furtherDetailsType;
const {
actionPanelButtonListType,
coaError,
currentUser,
edition,
furtherDetailsType: FurtherDetailsType,
loadEdition } = this.props;
return (
<Row>
<Col md={6}>
<Col md={6} className="ascribe-print-col-left">
<MediaContainer
content={this.props.edition}/>
content={edition}
currentUser={currentUser} />
</Col>
<Col md={6} className="ascribe-edition-details">
<Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
<hr className="hidden-print" style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{edition.title}</h1>
<DetailProperty label="CREATED BY" value={edition.artist_name} />
<DetailProperty label="DATE" value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
<hr/>
</div>
<EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition}
currentUser={this.props.currentUser}
handleSuccess={this.props.loadEdition}/>
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={loadEdition}/>
<CollapsibleParagraph
title={getLangText('Certificate of Authenticity')}
show={this.props.edition.acl.acl_coa === true}>
show={edition.acl.acl_coa === true}>
<CoaDetails
coa={this.props.edition.coa}
coaError={this.props.coaError}
editionId={this.props.edition.bitcoin_id}/>
coa={edition.coa}
coaError={coaError}
editionId={edition.bitcoin_id}/>
</CollapsibleParagraph>
<CollapsibleParagraph
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
history={this.props.edition.ownership_history} />
history={edition.ownership_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
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
history={this.props.edition.consign_history} />
history={edition.consign_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
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
history={this.props.edition.loan_history} />
history={edition.loan_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title="Notes"
show={!!(this.props.currentUser.username
|| this.props.edition.acl.acl_edit
|| this.props.edition.public_note)}>
show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
<Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
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 ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_edition}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
<Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
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 ...')}
editable={!!this.props.edition.acl.acl_edit}
show={!!this.props.edition.public_note || !!this.props.edition.acl.acl_edit}
editable={!!edition.acl.acl_edit}
show={!!edition.public_note || !!edition.acl.acl_edit}
successMessage={getLangText('Public edition note saved')}
url={ApiUrls.note_public_edition}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
show={this.props.edition.acl.acl_edit
|| Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data.length > 0}>
show={edition.acl.acl_edit ||
Object.keys(edition.extra_data).length > 0 ||
edition.other_data.length > 0}>
<FurtherDetailsType
editable={this.props.edition.acl.acl_edit}
pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data}
otherData={this.props.edition.other_data}
handleSuccess={this.props.loadEdition} />
editable={edition.acl.acl_edit}
pieceId={edition.parent}
extraData={edition.extra_data}
otherData={edition.other_data}
handleSuccess={loadEdition} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('SPOOL Details')}>
<SpoolDetails
edition={this.props.edition} />
edition={edition} />
</CollapsibleParagraph>
</Col>
</Row>
@ -169,10 +172,10 @@ let EditionSummary = React.createClass({
let status = null;
if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
status = <DetailProperty label="STATUS" value={ statusStr }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = (
<EditionDetailProperty label="STATUS" value={ statusStr } />
<DetailProperty label="STATUS" value={ statusStr } />
);
}
}
@ -183,14 +186,14 @@ let EditionSummary = React.createClass({
let { actionPanelButtonListType, edition, currentUser } = this.props;
return (
<div className="ascribe-detail-header">
<EditionDetailProperty
<DetailProperty
label={getLangText('EDITION')}
value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
<EditionDetailProperty
<DetailProperty
label={getLangText('ID')}
value={ edition.bitcoin_id }
ellipsis={true} />
<EditionDetailProperty
<DetailProperty
label={getLangText('OWNER')}
value={ edition.owner } />
<LicenseDetail license={edition.license_type}/>
@ -201,14 +204,15 @@ let EditionSummary = React.createClass({
`AclInformation` would show up
*/}
<AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
<EditionDetailProperty
label={getLangText('ACTIONS')}>
<DetailProperty
label={getLangText('ACTIONS')}
className="hidden-print">
<EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={this.handleSuccess} />
</EditionDetailProperty>
</DetailProperty>
</AclProxy>
<hr/>
</div>
@ -220,66 +224,76 @@ let EditionSummary = React.createClass({
let CoaDetails = React.createClass({
propTypes: {
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
},
contactOnIntercom() {
window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`);
console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`));
const { coaError, editionId } = this.props;
window.Intercom('showNewMessage', getLangText("Hi, I'm having problems generating a Certificate of Authenticity for Edition: %s", editionId));
console.logGlobal(new Error(`Coa couldn't be created for edition: ${editionId}`), coaError);
},
render() {
if(this.props.coaError) {
return (
<div className="text-center">
<p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>
<p>
{getLangText('Try to refresh the page. If this happens repeatedly, please ')}
<a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
</p>
</div>
);
}
if(this.props.coa && this.props.coa.url_safe) {
return (
<div>
<div
className="notification-contract-pdf"
style={{paddingBottom: '1em'}}>
<embed
className="embed-form"
src={this.props.coa.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
</div>
<div className="text-center ascribe-button-list">
<a href={this.props.coa.url_safe} target="_blank">
<button className="btn btn-default btn-xs">
{getLangText('Download')} <Glyphicon glyph="cloud-download"/>
</button>
</a>
<Link to="/coa_verify">
<button className="btn btn-default btn-xs">
{getLangText('Verify')} <Glyphicon glyph="check"/>
</button>
</Link>
const { coa, coaError } = this.props;
let coaDetailElement;
</div>
if (coaError) {
coaDetailElement = [
<p>{getLangText('There was an error generating your Certificate of Authenticity.')}</p>,
<p>
{getLangText('Try to refresh the page. If this happens repeatedly, please ')}
<a style={{ cursor: 'pointer' }} onClick={this.contactOnIntercom}>{getLangText('contact us')}</a>.
</p>
];
} else if (coa && coa.url_safe) {
coaDetailElement = [
<div
className="notification-contract-pdf"
style={{paddingBottom: '1em'}}>
<embed
className="embed-form"
src={coa.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
</div>,
<div className="text-center ascribe-button-list">
<a href={coa.url_safe} target="_blank">
<button className="btn btn-default btn-xs">
{getLangText('Download')} <Glyphicon glyph="cloud-download"/>
</button>
</a>
<Link to="/coa_verify">
<button className="btn btn-default btn-xs">
{getLangText('Verify')} <Glyphicon glyph="check"/>
</button>
</Link>
</div>
);
} else if(typeof this.props.coa === 'string'){
return (
<div className="text-center">
{this.props.coa}
</div>
);
}
return (
<div className="text-center">
<AscribeSpinner color='dark-blue' size='md'/>
<p>{getLangText("Just a sec, we\'re generating your COA")}</p>
];
} else if (typeof coa === 'string') {
coaDetailElement = coa;
} else {
coaDetailElement = [
<AscribeSpinner color='dark-blue' size='md'/>,
<p>{getLangText("Just a sec, we're generating your COA")}</p>,
<p>{getLangText('(you may leave the page)')}</p>
];
}
return (
<div>
<div className="text-center hidden-print">
{coaDetailElement}
</div>
{/* Hide the COA and just show that it's a seperate document when printing */}
<div className="visible-print ascribe-coa-print-placeholder">
{getLangText('The COA is available as a seperate document')}
</div>
</div>
);
}
@ -291,16 +305,34 @@ let SpoolDetails = React.createClass({
},
render() {
let bitcoinIdValue = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a>
const { edition: {
bitcoin_id: bitcoinId,
hash_as_address: hashAsAddress,
btc_owner_address_noprefix: bitcoinOwnerAddress
} } = this.props;
const bitcoinIdValue = (
<a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + bitcoinId}>
{bitcoinId}
</a>
);
let hashOfArtwork = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a>
const hashOfArtwork = (
<a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
{hashAsAddress}
</a>
);
let ownerAddress = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.btc_owner_address_noprefix}>{this.props.edition.btc_owner_address_noprefix}</a>
const ownerAddress = (
<a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
{bitcoinOwnerAddress}
</a>
);
return (

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

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

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

@ -35,7 +35,7 @@ let EditionContainer = React.createClass({
getInitialState() {
return mergeOptions(
EditionStore.getState(),
EditionStore.getInitialState(),
UserStore.getState()
);
},
@ -44,27 +44,23 @@ let EditionContainer = React.createClass({
EditionStore.listen(this.onChange);
UserStore.listen(this.onChange);
// Every time we're entering the edition detail page,
// 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);
this.loadEdition();
UserActions.fetchCurrentUser();
},
// 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)
componentWillReceiveProps(nextProps) {
if(this.props.params.editionId !== nextProps.params.editionId) {
EditionActions.fetchEdition(this.props.params.editionId);
if (this.props.params.editionId !== nextProps.params.editionId) {
EditionActions.flushEdition();
this.loadEdition(nextProps.params.editionId);
}
},
componentDidUpdate() {
const { editionMeta } = this.state;
if(editionMeta.err && editionMeta.err.json && editionMeta.err.json.status === 404) {
const { err: editionErr } = this.state.editionMeta;
if (editionErr && editionErr.json && editionErr.json.status === 404) {
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) {
let isEncoding = state.edition.digital_work.isEncoding;
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});
}
}
},
loadEdition(editionId = this.props.params.editionId) {
EditionActions.fetchEdition(editionId);
},
render() {
const { edition, currentUser, coaMeta } = this.state;
const { actionPanelButtonListType, furtherDetailsType } = this.props;
if (Object.keys(edition).length && edition.id) {
setDocumentTitle([edition.artist_name, edition.title].join(', '));
if (edition.id) {
setDocumentTitle(`${edition.artist_name}, ${edition.title}`);
return (
<Edition
@ -101,7 +101,7 @@ let EditionContainer = React.createClass({
edition={edition}
coaError={coaMeta.err}
currentUser={currentUser}
loadEdition={() => EditionActions.fetchEdition(this.props.params.editionId)} />
loadEdition={this.loadEdition} />
);
} else {
return (

55
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 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 GlobalNotificationActions from '../../actions/global_notification_actions';
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 { getLangText } from '../../utils/lang_utils';
let FurtherDetails = React.createClass({
propTypes: {
pieceId: React.PropTypes.number.isRequired,
editable: React.PropTypes.bool,
pieceId: React.PropTypes.number,
extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
handleSuccess: React.PropTypes.func
},
getInitialState() {
@ -32,13 +34,18 @@ let FurtherDetails = React.createClass({
};
},
showNotification(){
this.props.handleSuccess();
let notification = new GlobalNotificationModel('Details updated', 'success');
showNotification() {
const { handleSuccess } = this.props;
if (typeof handleSucess === 'function') {
handleSuccess();
}
const notification = new GlobalNotificationModel(getLangText('Details updated'), 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
},
submitFile(file){
submitFile(file) {
this.setState({
otherDataKey: file.key
});
@ -51,40 +58,42 @@ let FurtherDetails = React.createClass({
},
render() {
const { editable, extraData, otherData, pieceId } = this.props;
return (
<Row>
<Col md={12} className="ascribe-edition-personal-note">
<PieceExtraDataForm
name='artist_contact_info'
title='Artist Contact Info'
convertLinks
editable={editable}
extraData={extraData}
handleSuccess={this.showNotification}
editable={this.props.editable}
pieceId={this.props.pieceId}
extraData={this.props.extraData}
/>
pieceId={pieceId} />
<PieceExtraDataForm
name='display_instructions'
title='Display Instructions'
editable={editable}
extraData={extraData}
handleSuccess={this.showNotification}
editable={this.props.editable}
pieceId={this.props.pieceId}
extraData={this.props.extraData} />
pieceId={pieceId} />
<PieceExtraDataForm
name='technology_details'
title='Technology Details'
editable={editable}
extraData={extraData}
handleSuccess={this.showNotification}
editable={this.props.editable}
pieceId={this.props.pieceId}
extraData={this.props.extraData} />
pieceId={pieceId} />
<Form>
<FurtherDetailsFileuploader
submitFile={this.submitFile}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
editable={this.props.editable}
editable={editable}
overrideForm={true}
pieceId={this.props.pieceId}
otherData={this.props.otherData}
pieceId={pieceId}
otherData={otherData}
multiple={true} />
</Form>
</Col>

22
js/components/ascribe_detail/further_details_fileuploader.js
View File

@ -8,6 +8,7 @@ import ReactS3FineUploader from './../ascribe_uploader/react_s3_fine_uploader';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { validationTypes } from '../../constants/uploader_constants';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
@ -15,20 +16,26 @@ import { getLangText } from '../../utils/lang_utils';
let FurtherDetailsFileuploader = React.createClass({
propTypes: {
pieceId: React.PropTypes.number.isRequired,
areAssetsDownloadable: React.PropTypes.bool,
editable: React.PropTypes.bool,
isReadyForFormSubmission: React.PropTypes.func,
label: React.PropTypes.string,
pieceId: React.PropTypes.number,
multiple: React.PropTypes.bool,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
onValidationFailed: React.PropTypes.func,
setIsUploadReady: React.PropTypes.func,
submitFile: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func,
editable: React.PropTypes.bool,
multiple: React.PropTypes.bool
validation: ReactS3FineUploader.propTypes.validation
},
getDefaultProps() {
return {
areAssetsDownloadable: true,
label: getLangText('Additional files'),
multiple: false
multiple: false,
validation: validationTypes.additionalData
};
},
@ -58,8 +65,9 @@ let FurtherDetailsFileuploader = React.createClass({
url: ApiUrls.blob_otherdatas,
pieceId: this.props.pieceId
}}
validation={AppConstants.fineUploader.validation.additionalData}
validation={this.props.validation}
submitFile={this.props.submitFile}
onValidationFailed={this.props.onValidationFailed}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{
@ -89,7 +97,7 @@ let FurtherDetailsFileuploader = React.createClass({
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
areAssetsDownloadable={true}
areAssetsDownloadable={this.props.areAssetsDownloadable}
areAssetsEditable={this.props.editable}
multiple={this.props.multiple} />
</Property>

6
js/components/ascribe_detail/history_iterator.js
View File

@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({
return (
<span>
{historicalEventDescription}
<a href={historicalEvent[2]} target="_blank">{contractName}</a>
<a className="anchor-no-expand-print"
target="_blank"
href={historicalEvent[2]}>
{contractName}
</a>
</span>
);
} else if(historicalEvent.length === 2) {

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

@ -14,11 +14,9 @@ import CollapsibleButton from './../ascribe_collapsible/collapsible_button';
import AclProxy from '../acl_proxy';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import { getLangText } from '../../utils/lang_utils';
import { extractFileExtensionFromString } from '../../utils/file_utils';
import { mergeOptions } from '../../utils/general_utils.js';
import { getLangText } from '../../utils/lang_utils.js';
const EMBED_IFRAME_HEIGHT = {
video: 315,
@ -28,25 +26,22 @@ const EMBED_IFRAME_HEIGHT = {
let MediaContainer = React.createClass({
propTypes: {
content: React.PropTypes.object,
currentUser: React.PropTypes.object,
refreshObject: React.PropTypes.func
},
getInitialState() {
return mergeOptions(
UserStore.getState(),
{
timerId: null
});
return {
timerId: null
};
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
if (!this.props.content.digital_work) {
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) {
let timerId = window.setInterval(this.props.refreshObject, 10000);
this.setState({timerId: timerId});
@ -60,22 +55,26 @@ let MediaContainer = React.createClass({
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
window.clearInterval(this.state.timerId);
},
onChange(state) {
this.setState(state);
},
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
// 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
// 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);
// We want to show the file's extension as a label of the download button.
// We can however not only use `extractFileExtensionFromString` on the url for that
// as files might be saved on S3 without a file extension which leads
// `extractFileExtensionFromString` to extract everything starting from the top level
// domain: e.g. '.net/live/<hash>'.
// Therefore, we extract the file's name (last part of url, separated with a slash)
// and try to extract the file extension from there.
const fileName = content.digital_work.url.split('/').pop();
const fileExtension = extractFileExtensionFromString(fileName);
let thumbnail = content.thumbnail.thumbnail_sizes && content.thumbnail.thumbnail_sizes['600x600'] ?
content.thumbnail.thumbnail_sizes['600x600'] : content.thumbnail.url_safe;
@ -94,8 +93,11 @@ let MediaContainer = React.createClass({
embed = (
<CollapsibleButton
button={
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
Embed
<Button
bsSize="xsmall"
className="ascribe-margin-1px"
disabled={isEmbedDisabled}>
{getLangText('Embed')}
</Button>
}
panel={
@ -114,7 +116,7 @@ let MediaContainer = React.createClass({
url={content.digital_work.url}
extraData={extraData}
encodingStatus={content.digital_work.isEncoding} />
<p className="text-center">
<p className="text-center hidden-print">
<span className="ascribe-social-button-list">
<FacebookShareButton />
<TwitterShareButton
@ -125,8 +127,16 @@ let MediaContainer = React.createClass({
show={['video', 'audio', 'image'].indexOf(mimetype) === -1 || content.acl.acl_download}
aclObject={content.acl}
aclName="acl_download">
<Button bsSize="xsmall" className="ascribe-margin-1px" href={this.props.content.digital_work.url} target="_blank">
Download .{mimetype} <Glyphicon glyph="cloud-download"/>
<Button
bsSize="xsmall"
className="ascribe-margin-1px"
href={content.digital_work.url}
target="_blank">
{/*
If it turns out that `fileExtension` is an empty string, we're just
using the label 'file'.
*/}
{getLangText('Download')} .{fileExtension || 'file'} <Glyphicon glyph="cloud-download"/>
</Button>
</AclProxy>
{embed}

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

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

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

@ -69,7 +69,7 @@ let PieceContainer = React.createClass({
return mergeOptions(
UserStore.getState(),
PieceListStore.getState(),
PieceStore.getState(),
PieceStore.getInitialState(),
{
showCreateEditionsDialog: false
}
@ -81,19 +81,24 @@ let PieceContainer = React.createClass({
PieceListStore.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();
UserActions.fetchCurrentUser();
},
componentDidUpdate() {
const { pieceError } = this.state;
// 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) 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.")));
}
},
@ -116,8 +121,7 @@ let PieceContainer = React.createClass({
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);
pieceState.acl.acl_loan = false;
this.setState({
@ -129,11 +133,10 @@ let PieceContainer = React.createClass({
}
},
loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId);
loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchPiece(pieceId);
},
toggleCreateEditionsDialog() {
this.setState({
showCreateEditionsDialog: !this.state.showCreateEditionsDialog
@ -141,43 +144,47 @@ let PieceContainer = React.createClass({
},
handleEditionCreationSuccess() {
PieceActions.updateProperty({key: 'num_editions', value: 0});
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceActions.updateProperty({ key: 'num_editions', value: 0 });
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.toggleCreateEditionsDialog();
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
getCreateEditionsDialog() {
if(this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
if (this.state.piece.num_editions < 1 && this.state.showCreateEditionsDialog) {
return (
<div style={{marginTop: '1em'}}>
<CreateEditionsForm
pieceId={this.state.piece.id}
handleSuccess={this.handleEditionCreationSuccess} />
<hr/>
<hr />
</div>
);
} else {
return (<hr/>);
return (<hr />);
}
},
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
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
// list item also uses the firstEdition property which we can only get from the server in that case.
// Therefore we need to at least refetch the changed piece from the server or on our case simply all
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel('Editions successfully created', 'success', 10000);
const notification = new GlobalNotificationModel(getLangText('Editions successfully created'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
getId() {
return {'id': this.state.piece.id};
return { 'id': this.state.piece.id };
},
getActions() {
const { piece, currentUser } = this.state;
if (piece && piece.notifications && piece.notifications.length > 0) {
if (piece.notifications && piece.notifications.length > 0) {
return (
<ListRequestActions
pieceOrEditions={piece}
currentUser={currentUser}
handleSuccess={this.loadPiece}
notifications={piece.notifications}/>);
notifications={piece.notifications} />);
} else {
return (
<AclProxy
@ -219,7 +225,9 @@ let PieceContainer = React.createClass({
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
`AclInformation` would show up
*/}
<DetailProperty label={getLangText('ACTIONS')}>
<DetailProperty
label={getLangText('ACTIONS')}
className="hidden-print">
<AclButtonList
className="ascribe-button-list"
availableAcls={piece.acl}
@ -233,12 +241,12 @@ let PieceContainer = React.createClass({
onPollingSuccess={this.handlePollingSuccess}/>
<DeleteButton
handleSuccess={this.handleDeleteSuccess}
piece={piece}/>
piece={piece} />
<AclInformation
aim="button"
verbs={['acl_share', 'acl_transfer', 'acl_create_editions', 'acl_loan', 'acl_delete',
'acl_consign']}
aclObject={piece.acl}/>
aclObject={piece.acl} />
</AclButtonList>
</DetailProperty>
</AclProxy>
@ -247,76 +255,76 @@ let PieceContainer = React.createClass({
},
render() {
if (this.state.piece && this.state.piece.id) {
let FurtherDetailsType = this.props.furtherDetailsType;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
const { furtherDetailsType: FurtherDetailsType } = this.props;
const { currentUser, piece } = this.state;
if (piece.id) {
setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return (
<Piece
piece={this.state.piece}
loadPiece={this.loadPiece}
piece={piece}
currentUser={currentUser}
header={
<div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } />
{this.state.piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ this.state.piece.num_editions } /> : null}
<hr className="hidden-print" style={{marginTop: 0}} />
<h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="CREATED BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year() } />
{piece.num_editions > 0 ? <DetailProperty label="EDITIONS" value={ piece.num_editions } /> : null}
<hr/>
</div>
}
subheader={
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.state.piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={this.state.piece.license_type} />
<DetailProperty label={getLangText('ASCRIBED BY')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<LicenseDetail license={piece.license_type} />
</div>
}
buttons={this.getActions()}>
{this.getCreateEditionsDialog()}
<CollapsibleParagraph
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
history={this.state.piece.loan_history} />
history={piece.loan_history} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Notes')}
show={!!(this.state.currentUser.username
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
show={!!(currentUser.username || piece.acl.acl_edit || piece.public_note)}>
<Note
id={this.getId}
label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null}
show = {!!this.state.currentUser.username}
defaultValue={piece.private_note || null}
show = {!!currentUser.username}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece}
currentUser={this.state.currentUser}/>
currentUser={currentUser} />
<Note
id={this.getId}
label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null}
defaultValue={piece.public_note || null}
placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit}
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
editable={!!piece.acl.acl_edit}
show={!!(piece.public_note || piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece}
currentUser={this.state.currentUser}/>
currentUser={currentUser} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Further Details')}
show={this.state.piece.acl.acl_edit
|| Object.keys(this.state.piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0}
show={piece.acl.acl_edit
|| Object.keys(piece.extra_data).length > 0
|| piece.other_data.length > 0}
defaultExpanded={true}>
<FurtherDetailsType
editable={this.state.piece.acl.acl_edit}
pieceId={this.state.piece.id}
extraData={this.state.piece.extra_data}
otherData={this.state.piece.other_data}
editable={piece.acl.acl_edit}
pieceId={piece.id}
extraData={piece.extra_data}
otherData={piece.other_data}
handleSuccess={this.loadPiece} />
</CollapsibleParagraph>

7
js/components/ascribe_forms/create_editions_form.js
View File

@ -19,7 +19,7 @@ let CreateEditionsForm = React.createClass({
pieceId: React.PropTypes.number
},
getFormData(){
getFormData() {
return {
piece_id: parseInt(this.props.pieceId, 10)
};
@ -58,11 +58,12 @@ let CreateEditionsForm = React.createClass({
<input
type="number"
placeholder="(e.g. 32)"
min={1}/>
min={1}
max={100} />
</Property>
</Form>
);
}
});
export default CreateEditionsForm;
export default CreateEditionsForm;

19
js/components/ascribe_forms/form.js
View File

@ -178,20 +178,20 @@ let Form = React.createClass({
let formData = this.getFormData();
// sentry shouldn't post the user's password
if(formData.password) {
if (formData.password) {
delete formData.password;
}
console.logGlobal(err, formData);
if(this.props.isInline) {
if (this.props.isInline) {
let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
GlobalNotificationActions.appendGlobalNotification(notification);
} else {
this.setState({errors: [getLangText('Something went wrong, please try again later')]});
}
}
this.setState({submitted: false});
},
@ -205,16 +205,15 @@ let Form = React.createClass({
},
getButtons() {
if (this.state.submitted){
if (this.state.submitted) {
return this.props.spinner;
}
if (this.props.buttons){
if (this.props.buttons !== undefined) {
return this.props.buttons;
}
let buttons = null;
if (this.state.edited && !this.props.disabled){
buttons = (
if (this.state.edited && !this.props.disabled) {
return (
<div className="row" style={{margin: 0}}>
<p className="pull-right">
<Button
@ -230,9 +229,9 @@ let Form = React.createClass({
</p>
</div>
);
} else {
return null;
}
return buttons;
},
getErrors() {

8
js/components/ascribe_forms/form_consign.js
View File

@ -41,6 +41,14 @@ let ConsignForm = React.createClass({
};
},
componentWillReceiveProps(nextProps) {
if (this.props.email !== nextProps.email) {
this.setState({
email: nextProps.email
});
}
},
getFormData() {
return this.props.id;
},

19
js/components/ascribe_forms/form_create_contract.js
View File

@ -2,19 +2,20 @@
import React from 'react';
import Form from '../ascribe_forms/form';
import Property from '../ascribe_forms/property';
import ContractListActions from '../../actions/contract_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import ContractListActions from '../../actions/contract_list_actions';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import InputFineUploader from './input_fineuploader';
import Form from '../ascribe_forms/form';
import Property from '../ascribe_forms/property';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { validationTypes } from '../../constants/uploader_constants';
import { getLangText } from '../../utils/lang_utils';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
@ -78,8 +79,8 @@ let CreateContractForm = React.createClass({
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.additionalData.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
itemLimit: validationTypes.additionalData.itemLimit,
sizeLimit: validationTypes.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
areAssetsDownloadable={true}

8
js/components/ascribe_forms/form_loan.js
View File

@ -61,6 +61,14 @@ let LoanForm = React.createClass({
};
},
componentWillReceiveProps(nextProps) {
if (this.props.email !== nextProps.email) {
this.setState({
email: nextProps.email
});
}
},
onChange(state) {
this.setState(state);
},

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

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

26
js/components/ascribe_forms/form_register_piece.js
View File

@ -8,12 +8,16 @@ import UserActions from '../../actions/user_actions';
import Form from './form';
import Property from './property';
import InputFineUploader from './input_fineuploader';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import FormSubmitButton from '../ascribe_buttons/form_submit_button';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import AscribeSpinner from '../ascribe_spinner';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import AscribeSpinner from '../ascribe_spinner';
import { validationParts, validationTypes } from '../../constants/uploader_constants';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
@ -109,6 +113,11 @@ let RegisterPieceForm = React.createClass({
);
},
handleThumbnailValidationFailed(thumbnailFile) {
// If the validation fails, set the thumbnail as submittable since its optional
this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
},
isThumbnailDialogExpanded() {
const { enableSeparateThumbnail } = this.props;
const { digitalWorkFile } = this.state;
@ -175,7 +184,7 @@ let RegisterPieceForm = React.createClass({
createBlobRoutine={{
url: ApiUrls.blob_digitalworks
}}
validation={AppConstants.fineUploader.validation.registerWork}
validation={validationTypes.registerWork}
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isFineUploaderActive={isFineUploaderActive}
@ -194,15 +203,16 @@ let RegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails
}}
handleChangedFile={this.handleChangedThumbnail}
onValidationFailed={this.handleThumbnailValidationFailed}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
itemLimit: validationTypes.workThumbnail.itemLimit,
sizeLimit: validationTypes.workThumbnail.sizeLimit,
allowedExtensions: validationParts.allowedExtensions.images
}}
setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}
fileClassToUpload={{
@ -210,9 +220,7 @@ let RegisterPieceForm = React.createClass({
plural: getLangText('Select representative images')
}}
isFineUploaderActive={isFineUploaderActive}
disabled={!isFineUploaderEditable}
enableLocalHashing={enableLocalHashing}
uploadMethod={location.query.method} />
disabled={!isFineUploaderEditable} />
</Property>
<Property
name='artist_name'

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);
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
getFormData() {

9
js/components/ascribe_forms/input_fineuploader.js
View File

@ -28,11 +28,7 @@ const InputFineUploader = React.createClass({
createBlobRoutine: shape({
url: string
}),
validation: shape({
itemLimit: number,
sizeLimit: string,
allowedExtensions: arrayOf(string)
}),
validation: ReactS3FineUploader.propTypes.validation,
// isFineUploaderActive is used to lock react fine uploader in case
// a user is actually not logged in already to prevent him from droping files
@ -52,6 +48,7 @@ const InputFineUploader = React.createClass({
plural: string
}),
handleChangedFile: func,
onValidationFailed: func,
// Provided by `Property`
onChange: React.PropTypes.func
@ -107,6 +104,7 @@ const InputFineUploader = React.createClass({
isFineUploaderActive,
isReadyForFormSubmission,
keyRoutine,
onValidationFailed,
setIsUploadReady,
uploadMethod,
validation,
@ -127,6 +125,7 @@ const InputFineUploader = React.createClass({
createBlobRoutine={createBlobRoutine}
validation={validation}
submitFile={this.submitFile}
onValidationFailed={onValidationFailed}
setIsUploadReady={setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
areAssetsDownloadable={areAssetsDownloadable}

41
js/components/ascribe_forms/input_textarea_toggable.js
View File

@ -4,17 +4,20 @@ import React from 'react';
import TextareaAutosize from 'react-textarea-autosize';
import { anchorize } from '../../utils/dom_utils';
let InputTextAreaToggable = React.createClass({
propTypes: {
autoFocus: React.PropTypes.bool,
disabled: React.PropTypes.bool,
rows: React.PropTypes.number.isRequired,
required: React.PropTypes.bool,
convertLinks: React.PropTypes.bool,
defaultValue: React.PropTypes.string,
placeholder: React.PropTypes.string,
disabled: React.PropTypes.bool,
onBlur: React.PropTypes.func,
onChange: React.PropTypes.func
onChange: React.PropTypes.func,
placeholder: React.PropTypes.string,
required: React.PropTypes.bool,
rows: React.PropTypes.number.isRequired
},
getInitialState() {
@ -36,7 +39,7 @@ let InputTextAreaToggable = React.createClass({
componentDidUpdate() {
// If the initial value of state.value is null, we want to set props.defaultValue
// as a value. In all other cases TextareaAutosize.onChange is updating.handleChange already
if(this.state.value === null && this.props.defaultValue) {
if (this.state.value === null && this.props.defaultValue) {
this.setState({
value: this.props.defaultValue
});
@ -49,28 +52,26 @@ let InputTextAreaToggable = React.createClass({
},
render() {
let className = 'form-control ascribe-textarea';
let textarea = null;
const { convertLinks, disabled, onBlur, placeholder, required, rows } = this.props;
const { value } = this.state;
if(!this.props.disabled) {
className = className + ' ascribe-textarea-editable';
textarea = (
if (!disabled) {
return (
<TextareaAutosize
ref='textarea'
className={className}
value={this.state.value}
rows={this.props.rows}
className='form-control ascribe-textarea ascribe-textarea-editable'
value={value}
rows={rows}
maxRows={10}
required={this.props.required}
required={required}
onChange={this.handleChange}
onBlur={this.props.onBlur}
placeholder={this.props.placeholder} />
onBlur={onBlur}
placeholder={placeholder} />
);
} else {
textarea = <pre className="ascribe-pre">{this.state.value}</pre>;
// Can only convert links when not editable, as textarea does not support anchors
return <pre className="ascribe-pre">{convertLinks ? anchorize(value) : value}</pre>;
}
return textarea;
}
});

12
js/components/ascribe_forms/property.js
View File

@ -240,7 +240,17 @@ const Property = React.createClass({
},
handleCheckboxToggle() {
this.setExpanded(!this.state.expanded);
const expanded = !this.state.expanded;
this.setExpanded(expanded);
// Reset the value to be the initial value when the checkbox is unticked since the
// user doesn't want to specify their own value.
if (!expanded) {
this.setState({
value: this.state.initialValue
});
}
},
renderChildren(style) {

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

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

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

@ -1,19 +1,20 @@
'use strict';
import React from 'react';
import ReactAddons from 'react/addons';
import Modal from 'react-bootstrap/lib/Modal';
let ModalWrapper = React.createClass({
propTypes: {
trigger: React.PropTypes.element,
title: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element,
React.PropTypes.string
]).isRequired,
handleSuccess: React.PropTypes.func.isRequired,
handleCancel: React.PropTypes.func,
handleSuccess: React.PropTypes.func,
trigger: React.PropTypes.element,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
@ -38,15 +39,32 @@ let ModalWrapper = React.createClass({
});
},
handleCancel() {
if (typeof this.props.handleCancel === 'function') {
this.props.handleCancel();
}
this.hide();
},
handleSuccess(response) {
this.props.handleSuccess(response);
if (typeof this.props.handleSuccess === 'function') {
this.props.handleSuccess(response);
}
this.hide();
},
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
handleSuccess: this.handleSuccess
return React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {
handleSuccess: (response) => {
if (typeof child.props.handleSuccess === 'function') {
child.props.handleSuccess(response);
}
this.handleSuccess(response);
}
});
});
},
@ -54,14 +72,23 @@ let ModalWrapper = React.createClass({
render() {
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.
const clonedTrigger = React.isValidElement(trigger) ? React.cloneElement(trigger, {onClick: this.show})
: null;
const clonedTrigger = React.isValidElement(trigger) ?
React.cloneElement(trigger, {
onClick: (...params) => {
if (typeof trigger.props.onClick === 'function') {
trigger.props.onClick(...params);
}
this.show();
}
}) : null;
return (
<span>
{clonedTrigger}
<Modal show={this.state.showModal} onHide={this.hide}>
<Modal show={this.state.showModal} onHide={this.handleCancel}>
<Modal.Header closeButton>
<Modal.Title>
{title}

34
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -39,30 +39,6 @@ let PieceListToolbar = React.createClass({
])
},
getFilterWidget(){
if (this.props.filterParams){
return (
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
);
}
return null;
},
getOrderWidget(){
if (this.props.orderParams){
return (
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
);
}
return null;
},
render() {
const { className, children, searchFor, searchQuery } = this.props;
@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
{children}
</span>
<span className="pull-right">
{this.getOrderWidget()}
{this.getFilterWidget()}
<PieceListToolbarOrderWidget
orderParams={this.props.orderParams}
orderBy={this.props.orderBy}
applyOrderBy={this.props.applyOrderBy}/>
<PieceListToolbarFilterWidget
filterParams={this.props.filterParams}
filterBy={this.props.filterBy}
applyFilterBy={this.props.applyFilterBy} />
</span>
<SearchBar
className="pull-right search-bar ascribe-input-glyph"

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

@ -30,15 +30,15 @@ let PieceListToolbarFilterWidget = React.createClass({
generateFilterByStatement(param) {
const filterBy = Object.assign({}, this.props.filterBy);
if(filterBy) {
if (filterBy) {
// we need hasOwnProperty since the values are all booleans
if(filterBy.hasOwnProperty(param)) {
if (filterBy.hasOwnProperty(param)) {
filterBy[param] = !filterBy[param];
// if the parameter is false, then we want to remove it again
// from the list of queryParameters as this component is only about
// which actions *CAN* be done and not what *CANNOT*
if(!filterBy[param]) {
if (!filterBy[param]) {
delete filterBy[param];
}
@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
// We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance
if(trueValuesOnly.length > 0) {
if (trueValuesOnly.length) {
return { visibility: 'visible'};
} else {
return { visibility: 'hidden' };
@ -81,62 +81,66 @@ let PieceListToolbarFilterWidget = React.createClass({
</span>
);
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
{/* We iterate over filterParams, to receive the label and then for each
label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => {
return (
<div>
<li
style={{'textAlign': 'center'}}
key={i}>
<em>{label}:</em>
</li>
{items.map((param, j) => {
if (this.props.filterParams && this.props.filterParams.length) {
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
{/* We iterate over filterParams, to receive the label and then for each
label also iterate over its items, to get all filterable options */}
{this.props.filterParams.map(({ label, items }, i) => {
return (
<div key={label}>
<li style={{'textAlign': 'center'}}>
<em>{label}:</em>
</li>
{items.map((paramItem) => {
let itemLabel;
let param;
// As can be seen in the PropTypes, a param can either
// be a string or an object of the shape:
//
// {
// key: <String>,
// label: <String>
// }
//
// This is why we need to distinguish between both here.
if(typeof param !== 'string') {
label = param.label;
param = param.key;
} else {
param = param;
label = param.split('acl_')[1].replace(/_/g, ' ');
}
// As can be seen in the PropTypes, a param can either
// be a string or an object of the shape:
//
// {
// key: <String>,
// label: <String>
// }
//
// This is why we need to distinguish between both here.
if (typeof paramItem !== 'string') {
param = paramItem.key;
itemLabel = paramItem.label;
} else {
param = paramItem;
itemLabel = paramItem.split('acl_')[1].replace(/_/g, ' ');
}
return (
<li
key={j}
onClick={this.filterBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(label)}
</span>
<input
readOnly
type="checkbox"
checked={this.props.filterBy[param]} />
</div>
</li>
);
})}
</div>
);
})}
</DropdownButton>
);
return (
<li
key={itemLabel}
onClick={this.filterBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(itemLabel)}
</span>
<input
readOnly
type="checkbox"
checked={this.props.filterBy[param]} />
</div>
</li>
);
})}
</div>
);
})}
</DropdownButton>
);
} else {
return null;
}
}
});

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

@ -37,7 +37,7 @@ let PieceListToolbarOrderWidget = React.createClass({
isOrderActive() {
// We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance
if(this.props.orderBy.length > 0) {
if (this.props.orderBy && this.props.orderBy.length) {
return { visibility: 'visible'};
} else {
return { visibility: 'hidden' };
@ -51,18 +51,18 @@ let PieceListToolbarOrderWidget = React.createClass({
<span style={this.isOrderActive()}>&middot;</span>
</span>
);
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
<li style={{'textAlign': 'center'}}>
<em>{getLangText('Sort by')}:</em>
</li>
{this.props.orderParams.map((param) => {
return (
<div>
if (this.props.orderParams && this.props.orderParams.length) {
return (
<DropdownButton
pullRight={true}
title={filterIcon}
className="ascribe-piece-list-toolbar-filter-widget">
<li style={{'textAlign': 'center'}}>
<em>{getLangText('Sort by')}:</em>
</li>
{this.props.orderParams.map((param) => {
return (
<li
key={param}
onClick={this.orderBy(param)}
@ -77,12 +77,14 @@ let PieceListToolbarOrderWidget = React.createClass({
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>
</div>
);
})}
</DropdownButton>
);
);
})}
</DropdownButton>
);
} else {
return null;
}
}
});
export default PieceListToolbarOrderWidget;
export default PieceListToolbarOrderWidget;

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

@ -40,7 +40,7 @@ export function AuthRedirect({to, when}) {
// and redirect if `true`.
if(exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query));
window.setTimeout(() => history.replace({ query, pathname: to }));
return true;
// 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) {
delete query.redirect;
window.setTimeout(() => history.replaceState(null, '/' + redirect, query));
window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
return true;
} else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {

36
js/components/ascribe_settings/contract_settings.js
View File

@ -28,11 +28,7 @@ import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils
let ContractSettings = React.createClass({
propTypes: {
location: React.PropTypes.object
},
getInitialState(){
getInitialState() {
return mergeOptions(
ContractListStore.getState(),
UserStore.getState()
@ -64,40 +60,39 @@ let ContractSettings = React.createClass({
ContractListActions.removeContract(contract.id)
.then((response) => {
ContractListActions.fetchContractList(true);
let notification = new GlobalNotificationModel(response.notification, 'success', 4000);
const notification = new GlobalNotificationModel(response.notification, 'success', 4000);
GlobalNotificationActions.appendGlobalNotification(notification);
})
.catch((err) => {
let notification = new GlobalNotificationModel(err, 'danger', 10000);
const notification = new GlobalNotificationModel(err, 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
});
};
},
getPublicContracts(){
getPublicContracts() {
return this.state.contractList.filter((contract) => contract.is_public);
},
getPrivateContracts(){
getPrivateContracts() {
return this.state.contractList.filter((contract) => !contract.is_public);
},
render() {
let publicContracts = this.getPublicContracts();
let privateContracts = this.getPrivateContracts();
const publicContracts = this.getPublicContracts();
const privateContracts = this.getPrivateContracts();
let createPublicContractForm = null;
setDocumentTitle(getLangText('Contracts settings'));
if(publicContracts.length === 0) {
if (publicContracts.length === 0) {
createPublicContractForm = (
<CreateContractForm
isPublic={true}
fileClassToUpload={{
singular: 'new contract',
plural: 'new contracts'
}}
location={this.props.location}/>
}} />
);
}
@ -114,7 +109,7 @@ let ContractSettings = React.createClass({
{publicContracts.map((contract, i) => {
return (
<ActionPanel
key={i}
key={contract.id}
title={contract.name}
content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
buttons={
@ -123,8 +118,7 @@ let ContractSettings = React.createClass({
aclObject={this.state.whitelabel}
aclName="acl_update_public_contract">
<ContractSettingsUpdateButton
contract={contract}
location={this.props.location}/>
contract={contract} />
</AclProxy>
<a
className="btn btn-default btn-sm margin-left-2px"
@ -154,12 +148,11 @@ let ContractSettings = React.createClass({
fileClassToUpload={{
singular: getLangText('new contract'),
plural: getLangText('new contracts')
}}
location={this.props.location}/>
}} />
{privateContracts.map((contract, i) => {
return (
<ActionPanel
key={i}
key={contract.id}
title={contract.name}
content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
buttons={
@ -168,8 +161,7 @@ let ContractSettings = React.createClass({
aclObject={this.state.whitelabel}
aclName="acl_update_private_contract">
<ContractSettingsUpdateButton
contract={contract}
location={this.props.location}/>
contract={contract} />
</AclProxy>
<a
className="btn btn-default btn-sm margin-left-2px"

115
js/components/ascribe_settings/contract_settings_update_button.js
View File

@ -2,17 +2,18 @@
import React from 'react';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import AppConstants from '../../constants/application_constants';
import ApiUrls from '../../constants/api_urls';
import ContractListActions from '../../actions/contract_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import UploadButton from '../ascribe_uploader/ascribe_upload_button/upload_button';
import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { validationTypes } from '../../constants/uploader_constants';
import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
@ -24,71 +25,75 @@ let ContractSettingsUpdateButton = React.createClass({
},
submitFile(file) {
let contract = this.props.contract;
// override the blob with the key's value
contract.blob = file.key;
const contract = Object.assign(this.props.contract, { blob: file.key });
// send it to the server
ContractListActions
.changeContract(contract)
.then((res) => {
// Display feedback to the user
let notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', res.name), 'success', 5000);
const notification = new GlobalNotificationModel(getLangText('Contract %s successfully updated', contract.name), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
// and refresh the contract list to get the updated contracs
return ContractListActions.fetchContractList(true);
})
.then(() => {
// Also, reset the fineuploader component so that the user can again 'update' his contract
this.refs.fineuploader.reset();
})
.catch((err) => {
console.logGlobal(err);
let notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'success', 5000);
return ContractListActions
.fetchContractList(true)
// Also, reset the fineuploader component if fetch is successful so that the user can again 'update' his contract
.then(this.refs.fineuploader.reset)
.catch((err) => {
const notification = new GlobalNotificationModel(getLangText('Latest contract failed to load'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
return Promise.reject(err);
});
}, (err) => {
const notification = new GlobalNotificationModel(getLangText('Contract could not be updated'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
});
return Promise.reject(err);
})
.catch(console.logGlobal);
},
render() {
return (
<ReactS3FineUploader
fileInputElement={UploadButton()}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
fileClassToUpload={{
singular: getLangText('UPDATE'),
plural: getLangText('UPDATE')
}}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
submitFile={this.submitFile} />
ref='fineuploader'
fileInputElement={UploadButton({ showLabel: false })}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'contract'
}}
createBlobRoutine={{
url: ApiUrls.blob_contracts
}}
validation={{
itemLimit: validationTypes.registerWork.itemLimit,
sizeLimit: validationTypes.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
setIsUploadReady={() =>{/* So that ReactS3FineUploader is not complaining */}}
signature={{
endpoint: AppConstants.serverUrl + 's3/signature/',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
deleteFile={{
enabled: true,
method: 'DELETE',
endpoint: AppConstants.serverUrl + 's3/delete',
customHeaders: {
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
fileClassToUpload={{
singular: getLangText('UPDATE'),
plural: getLangText('UPDATE')
}}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
submitFile={this.submitFile} />
);
}
});

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

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

14
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.
nextSlide(additionalQueryParams) {
const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
let nextSlide = slideNum + 1;
this.setSlideNum(nextSlide, additionalQueryParams);
this.setSlideNum(slideNum + 1, additionalQueryParams);
},
setSlideNum(nextSlideNum, additionalQueryParams = {}) {
let queryParams = Object.assign(this.props.location.query, additionalQueryParams);
queryParams.slide_num = nextSlideNum;
this.history.pushState(null, this.props.location.pathname, queryParams);
const { location: { pathname } } = this.props;
const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
this.history.push({ pathname, query });
},
// breadcrumbs are defined as attributes of the slides.
// To extract them we have to read the DOM element's attributes
extractBreadcrumbs() {
const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
let breadcrumbs = [];
const breadcrumbs = [];
React.Children.map(this.props.children, (child, i) => {
if(child && i >= startFrom && child.props['data-slide-title']) {
@ -179,4 +179,4 @@ const SlidesContainer = React.createClass({
}
});
export default SlidesContainer;
export default SlidesContainer;

50
js/components/ascribe_social_share/facebook_share_button.js
View File

@ -2,6 +2,8 @@
import React from 'react';
import FacebookHandler from '../../third_party/facebook_handler';
import AppConstants from '../../constants/application_constants';
import { InjectInHeadUtils } from '../../utils/inject_utils';
@ -17,24 +19,40 @@ let FacebookShareButton = React.createClass({
};
},
componentDidMount() {
/**
* Ideally we would only use FB.XFBML.parse() on the component that we're
* mounting, but doing this when we first load the FB sdk causes unpredictable behaviour.
* The button sometimes doesn't get initialized, likely because FB hasn't properly
* been initialized yet.
*
* To circumvent this, we always have the sdk parse the entire DOM on the initial load
* (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
*/
InjectInHeadUtils
.inject(AppConstants.facebook.sdkUrl)
.then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
getInitialState() {
return FacebookHandler.getState();
},
shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
componentDidMount() {
FacebookHandler.listen(this.onChange);
this.loadFacebook();
},
shouldComponentUpdate(nextProps, nextState) {
// Don't update if the props haven't changed or the FB SDK loading status is still the same
return this.props.type !== nextProps.type || nextState.loaded !== this.state.loaded;
},
componentDidUpdate() {
// If the component changes, we need to reparse the share button's XFBML.
// To prevent cases where the Facebook SDK hasn't been loaded yet at this stage,
// let's make sure that it's injected before trying to reparse.
this.loadFacebook();
},
onChange(state) {
this.setState(state);
},
loadFacebook() {
InjectInHeadUtils
.inject(AppConstants.facebook.sdkUrl)
.then(() => {
if (this.state.loaded) {
FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parent)
}
});
},
render() {

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

@ -2,15 +2,15 @@
export class ColumnModel {
// 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.columnName = columnName;
this.displayName = displayName;
this.displayElement = displayElement;
this.displayType = displayType;
this.rowWidth = rowWidth;
this.canBeOrdered = canBeOrdered;
this.transition = transition;
this.className = className ? className : '';
this.className = className;
}
}
@ -28,7 +28,7 @@ export class ColumnModel {
* our selfes, using this TransitionModel.
*/
export class TransitionModel {
constructor(to, queryKey, valueKey, callback) {
constructor({ to, queryKey, valueKey, callback }) {
this.to = to;
this.queryKey = queryKey;
this.valueKey = valueKey;
@ -38,4 +38,4 @@ export class TransitionModel {
toReactRouterLink(queryValue) {
return '/' + this.to + '/' + queryValue;
}
}
}

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

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

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

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

54
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_dialog.js
View File

@ -26,7 +26,7 @@ let FileDragAndDropDialog = React.createClass({
getDragDialog(fileClass) {
if (dragAndDropAvailable) {
return [
<p>{getLangText('Drag %s here', fileClass)}</p>,
<p className="file-drag-and-drop-dialog-title">{getLangText('Drag %s here', fileClass)}</p>,
<p>{getLangText('or')}</p>
];
} else {
@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({
if (hasFiles) {
return null;
} else {
let dialogElement;
if (enableLocalHashing && !uploadMethod) {
const currentQueryParams = getCurrentQueryParams();
@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({
const queryParamsUpload = Object.assign({}, currentQueryParams);
queryParamsUpload.method = 'upload';
return (
<div className="file-drag-and-drop-dialog present-options">
<p>{getLangText('Would you rather')}</p>
dialogElement = (
<div className="present-options">
<p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
{/*
The frontend in live is hosted under /app,
Since `Link` is appending that base url, if its defined
@ -85,32 +87,40 @@ let FileDragAndDropDialog = React.createClass({
);
} else {
if (multipleFiles) {
return (
<span className="file-drag-and-drop-dialog">
{this.getDragDialog(fileClassToUpload.plural)}
<span
className="btn btn-default"
onClick={onClick}>
{getLangText('choose %s to upload', fileClassToUpload.plural)}
</span>
dialogElement = [
this.getDragDialog(fileClassToUpload.plural),
<span
className="btn btn-default"
onClick={onClick}>
{getLangText('choose %s to upload', fileClassToUpload.plural)}
</span>
);
];
} else {
const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
: getLangText('choose a %s to upload', fileClassToUpload.singular);
return (
<span className="file-drag-and-drop-dialog">
{this.getDragDialog(fileClassToUpload.singular)}
<span
className="btn btn-default"
onClick={onClick}>
{dialog}
</span>
dialogElement = [
this.getDragDialog(fileClassToUpload.singular),
<span
className="btn btn-default"
onClick={onClick}>
{dialog}
</span>
);
];
}
}
return (
<div className="file-drag-and-drop-dialog">
<div className="hidden-print">
{dialogElement}
</div>
{/* Hide the uploader and just show that there's been on files uploaded yet when printing */}
<p className="text-align-center visible-print">
{getLangText('No files uploaded')}
</p>
</div>
);
}
}
});

4
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop_preview_image.js
View File

@ -49,7 +49,7 @@ const FileDragAndDropPreviewImage = React.createClass({
};
let actionSymbol;
// only if assets are actually downloadable, there should be a download icon if the process is already at
// 100%. If not, no actionSymbol should be displayed
if(progress === 100 && areAssetsDownloadable) {
@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
return (
<div
className="file-drag-and-drop-preview-image"
className="file-drag-and-drop-preview-image hidden-print"
style={imageStyle}>
<AclProxy
show={showProgress}>

47
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -1,6 +1,7 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
import { displayValidProgressFilesFilter } from '../react_s3_fine_uploader_utils';
import { getLangText } from '../../../utils/lang_utils';
@ -9,7 +10,7 @@ import { truncateTextAtCharIndex } from '../../../utils/general_utils';
const { func, array, bool, shape, string } = React.PropTypes;
export default function UploadButton({ className = 'btn btn-default btn-sm' } = {}) {
export default function UploadButton({ className = 'btn btn-default btn-sm', showLabel = true } = {}) {
return React.createClass({
displayName: 'UploadButton',
@ -119,28 +120,28 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
},
getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if (showLabel) {
const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if(uploadingFiles.length) {
return (
<span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span>
);
} else if(uploadedFile) {
return (
<span>
<span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
</span>
);
} else {
return (
<span>{getLangText('No file chosen')}</span>
);
if (uploadingFiles.length) {
return (
<span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('cancel upload')}</a>]
</span>
);
} else if (uploadedFile) {
return (
<span>
<span className='ascribe-icon icon-ascribe-ok'/>
{' ' + truncateTextAtCharIndex(uploadedFile.name, 40) + ' '}
[<a onClick={this.onClickRemove}>{getLangText('remove')}</a>]
</span>
);
} else {
return <span>{getLangText('No file chosen')}</span>;
}
}
},
@ -158,7 +159,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
* Therefore the wrapping component needs to be an `anchor` tag instead of a `button`
*/
return (
<div className="upload-button-wrapper">
<div className={classNames('ascribe-upload-button', {'ascribe-upload-button-has-label': showLabel})}>
{/*
The button needs to be of `type="button"` as it would
otherwise submit the form its in.

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

@ -13,9 +13,9 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
import AppConstants from '../../constants/application_constants';
import { computeHashOfFile } from '../../utils/file_utils';
import { displayValidFilesFilter, transformAllowedExtensionsToInputAcceptProp } from './react_s3_fine_uploader_utils';
import { getCookie } from '../../utils/fetch_api_utils';
import { computeHashOfFile, extractFileExtensionFromString } from '../../utils/file_utils';
import { getLangText } from '../../utils/lang_utils';
@ -36,20 +36,15 @@ const ReactS3FineUploader = React.createClass({
keyRoutine: shape({
url: string,
fileClass: string,
pieceId: oneOfType([
string,
number
])
pieceId: number
}),
createBlobRoutine: shape({
url: string,
pieceId: oneOfType([
string,
number
])
pieceId: number
}),
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
onValidationFailed: func,
autoUpload: bool,
debug: bool,
objectProperties: shape({
@ -96,7 +91,7 @@ const ReactS3FineUploader = React.createClass({
}),
validation: shape({
itemLimit: number,
sizeLimit: string,
sizeLimit: number,
allowedExtensions: arrayOf(string)
}),
messages: shape({
@ -283,22 +278,6 @@ const ReactS3FineUploader = React.createClass({
this.setState(this.getInitialState());
},
// Cancel uploads and clear previously selected files on the input element
cancelUploads(id) {
typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
// Reset the file input element to clear the previously selected files so that
// the user can reselect them again.
this.clearFileSelection();
},
clearFileSelection() {
const { fileInput } = this.refs;
if (fileInput && typeof fileInput.clearSelection === 'function') {
fileInput.clearSelection();
}
},
requestKey(fileId) {
let filename = this.state.uploader.getName(fileId);
let uuid = this.state.uploader.getUuid(fileId);
@ -389,6 +368,107 @@ const ReactS3FineUploader = React.createClass({
});
},
// Cancel uploads and clear previously selected files on the input element
cancelUploads(id) {
typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
// Reset the file input element to clear the previously selected files so that
// the user can reselect them again.
this.clearFileSelection();
},
clearFileSelection() {
const { fileInput } = this.refs;
if (fileInput && typeof fileInput.clearSelection === 'function') {
fileInput.clearSelection();
}
},
getAllowedExtensions() {
const { validation: { allowedExtensions } = {} } = this.props;
if (allowedExtensions && allowedExtensions.length) {
return transformAllowedExtensionsToInputAcceptProp(allowedExtensions);
} else {
return null;
}
},
getXhrErrorComment(xhr) {
if (xhr) {
return {
response: xhr.response,
url: xhr.responseURL,
status: xhr.status,
statusText: xhr.statusText
};
}
},
isDropzoneInactive() {
const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
return true;
} else {
return false;
}
},
isFileValid(file) {
const { validation: { allowedExtensions, sizeLimit = 0 }, onValidationFailed } = this.props;
const fileExt = extractFileExtensionFromString(file.name);
if (file.size > sizeLimit) {
const fileSizeInMegaBytes = sizeLimit / 1000000;
const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof onValidationFailed === 'function') {
onValidationFailed(file);
}
return false;
} else if (allowedExtensions && !allowedExtensions.includes(fileExt)) {
const notification = new GlobalNotificationModel(getLangText(`The file you've submitted is of an invalid file format: Valid format(s): ${allowedExtensions.join(', ')}`), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
return false;
} else {
return true;
}
},
selectValidFiles(files) {
return Array.from(files).reduce((validFiles, file) => {
if (this.isFileValid(file)) {
validFiles.push(file);
}
return validFiles;
}, []);
},
// This method has been made promise-based to immediately afterwards
// call a callback function (instantly after this.setState went through)
// This is e.g. needed when showing/hiding the optional thumbnail upload
// field in the registration form
setStatusOfFile(fileId, status) {
return Q.Promise((resolve) => {
let changeSet = {};
if(status === 'deleted' || status === 'canceled') {
changeSet.progress = { $set: 0 };
}
changeSet.status = { $set: status };
let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
this.setState({ filesToUpload }, resolve);
});
},
setThumbnailForFileId(fileId, url) {
const { filesToUpload } = this.state;
@ -511,31 +591,6 @@ const ReactS3FineUploader = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notification);
},
getXhrErrorComment(xhr) {
if (xhr) {
return {
response: xhr.response,
url: xhr.responseURL,
status: xhr.status,
statusText: xhr.statusText
};
}
},
isFileValid(file) {
if(file.size > this.props.validation.sizeLimit) {
let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
return false;
} else {
return true;
}
},
onCancel(id) {
// when a upload is canceled, we need to update this components file array
this.setStatusOfFile(id, 'canceled')
@ -672,6 +727,13 @@ const ReactS3FineUploader = React.createClass({
this.cancelUploads(fileId);
},
handleCancelHashing() {
// Every progress tick of the hashing function in handleUploadFile there is a
// check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
// the hashing of all files immediately.
this.setState({ hashingProgress: -1 });
},
handlePauseFile(fileId) {
if(this.state.uploader.pauseUpload(fileId)) {
this.setStatusOfFile(fileId, 'paused');
@ -700,15 +762,8 @@ const ReactS3FineUploader = React.createClass({
return;
}
// validate each submitted file if it fits the file size
let validFiles = [];
for(let i = 0; i < files.length; i++) {
if(this.isFileValid(files[i])) {
validFiles.push(files[i]);
}
}
// override standard files list with only valid files
files = validFiles;
// Select only the submitted files that fit the file size and allowed extensions
files = this.selectValidFiles(files);
// if multiple is set to false and user drops multiple files into the dropzone,
// take the first one and notify user that only one file can be submitted
@ -819,13 +874,6 @@ const ReactS3FineUploader = React.createClass({
}
},
handleCancelHashing() {
// Every progress tick of the hashing function in handleUploadFile there is a
// check if this.state.hashingProgress is -1. If so, there is an error thrown that cancels
// the hashing of all files immediately.
this.setState({ hashingProgress: -1 });
},
// ReactFineUploader is essentially just a react layer around s3 fineuploader.
// However, since we need to display the status of a file (progress, uploading) as well as
// be able to execute actions on a currently uploading file we need to exactly sync the file list
@ -895,46 +943,6 @@ const ReactS3FineUploader = React.createClass({
});
},
// This method has been made promise-based to immediately afterwards
// call a callback function (instantly after this.setState went through)
// This is e.g. needed when showing/hiding the optional thumbnail upload
// field in the registration form
setStatusOfFile(fileId, status) {
return Q.Promise((resolve) => {
let changeSet = {};
if(status === 'deleted' || status === 'canceled') {
changeSet.progress = { $set: 0 };
}
changeSet.status = { $set: status };
let filesToUpload = React.addons.update(this.state.filesToUpload, { [fileId]: changeSet });
this.setState({ filesToUpload }, resolve);
});
},
isDropzoneInactive() {
const filesToDisplay = this.state.filesToUpload.filter((file) => file.status !== 'deleted' && file.status !== 'canceled' && file.size !== -1);
if ((this.props.enableLocalHashing && !this.props.uploadMethod) || !this.props.areAssetsEditable || !this.props.multiple && filesToDisplay.length > 0) {
return true;
} else {
return false;
}
},
getAllowedExtensions() {
let { validation } = this.props;
if(validation && validation.allowedExtensions && validation.allowedExtensions.length > 0) {
return transformAllowedExtensionsToInputAcceptProp(validation.allowedExtensions);
} else {
return null;
}
},
render() {
const {
multiple,

2
js/components/footer.js
View File

@ -7,7 +7,7 @@ import { getLangText } from '../utils/lang_utils';
let Footer = React.createClass({
render() {
return (
<div className="ascribe-footer">
<div className="ascribe-footer hidden-print">
<p className="ascribe-sub-sub-statement">
<br />
<a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |

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;

62
js/components/header.js
View File

@ -18,6 +18,8 @@ import AclProxy from './acl_proxy';
import EventActions from '../actions/event_actions';
import PieceListStore from '../stores/piece_list_store';
import UserActions from '../actions/user_actions';
import UserStore from '../stores/user_store';
@ -43,12 +45,17 @@ let Header = React.createClass({
getInitialState() {
return mergeOptions(
PieceListStore.getState(),
WhitelabelStore.getState(),
UserStore.getState()
);
},
componentDidMount() {
// Listen to the piece list store, but don't fetch immediately to avoid
// conflicts with routes that may need to wait to load the piece list
PieceListStore.listen(this.onChange);
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser.defer();
@ -75,11 +82,16 @@ let Header = React.createClass({
},
componentWillUnmount() {
PieceListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
//history.unlisten(this.onRouteChange);
},
onChange(state) {
this.setState(state);
},
getLogo() {
let { whitelabel } = this.state;
@ -93,16 +105,16 @@ let Header = React.createClass({
<img className="img-brand" src={whitelabel.logo} alt="Whitelabel brand"/>
</Link>
);
} else {
return (
<span>
<Link className="icon-ascribe-logo" to="/collection"/>
</span>
);
}
return (
<span>
<Link className="icon-ascribe-logo" to="/collection"/>
</span>
);
},
getPoweredBy(){
getPoweredBy() {
return (
<AclProxy
aclObject={this.state.whitelabel}
@ -117,10 +129,6 @@ let Header = React.createClass({
);
},
onChange(state) {
this.setState(state);
},
onMenuItemClick() {
/*
This is a hack to make the dropdown close after clicking on an item
@ -156,15 +164,17 @@ let Header = React.createClass({
},
render() {
const { currentUser, unfilteredPieceListCount } = this.state;
let account;
let signup;
let navRoutesLinks;
if (this.state.currentUser.username){
if (currentUser.username) {
account = (
<DropdownButton
ref='dropdownbutton'
eventKey="1"
title={this.state.currentUser.username}>
title={currentUser.username}>
<LinkContainer
to="/settings"
onClick={this.onMenuItemClick}>
@ -174,7 +184,7 @@ let Header = React.createClass({
</MenuItem>
</LinkContainer>
<AclProxy
aclObject={this.state.currentUser.acl}
aclObject={currentUser.acl}
aclName="acl_view_settings_contract">
<LinkContainer
to="/contract_settings"
@ -195,9 +205,21 @@ let Header = React.createClass({
</LinkContainer>
</DropdownButton>
);
navRoutesLinks = <NavRoutesLinks routes={this.props.routes} userAcl={this.state.currentUser.acl} navbar right/>;
}
else {
// Let's assume that if the piece list hasn't loaded yet (ie. when unfilteredPieceListCount === -1)
// then the user has pieces
// FIXME: this doesn't work that well as the user may not load their piece list
// until much later, so we would show the 'Collection' header as available until
// they actually click on it and get redirected to piece registration.
navRoutesLinks = (
<NavRoutesLinks
navbar
right
hasPieces={!!unfilteredPieceListCount}
routes={this.props.routes}
userAcl={currentUser.acl} />
);
} else {
account = (
<LinkContainer
to="/login">
@ -219,10 +241,11 @@ let Header = React.createClass({
return (
<div>
<Navbar
ref="navbar"
brand={this.getLogo()}
toggleNavKey={0}
fixedTop={true}
ref="navbar">
className="hidden-print">
<CollapsibleNav
eventKey={0}>
<Nav navbar left>
@ -237,6 +260,9 @@ let Header = React.createClass({
{navRoutesLinks}
</CollapsibleNav>
</Navbar>
<p className="ascribe-print-header visible-print">
<span className="icon-ascribe-logo" />
</p>
</div>
);
}

73
js/components/nav_routes_links.js
View File

@ -11,14 +11,33 @@ import AclProxy from './acl_proxy';
import { sanitizeList } from '../utils/general_utils';
const DISABLE_ENUM = ['hasPieces', 'noPieces'];
let NavRoutesLinks = React.createClass({
propTypes: {
hasPieces: React.PropTypes.bool,
routes: React.PropTypes.arrayOf(React.PropTypes.object),
userAcl: React.PropTypes.object
},
isRouteDisabled(disableOn) {
const { hasPieces } = this.props;
if (disableOn) {
if (!DISABLE_ENUM.includes(disableOn)) {
throw new Error(`"disableOn" must be one of: [${DISABLE_ENUM.join(', ')}] got "${disableOn}" instead`);
}
if (disableOn === 'hasPieces') {
return hasPieces;
} else if (disableOn === 'noPieces') {
return !hasPieces;
}
}
},
/**
* This method generales a bunch of react-bootstrap specific links
* This method generates a bunch of react-bootstrap specific links
* from the routes we defined in one of the specific routes.js file
*
* We can define a headerTitle as well as a aclName and according to that the
@ -29,48 +48,50 @@ let NavRoutesLinks = React.createClass({
* @return {Array} Array of ReactElements that can be displayed to the user
*/
extractLinksFromRoutes(node, userAcl, i) {
if(!node) {
if (!node) {
return;
}
let links = node.childRoutes.map((child, j) => {
let childrenFn = null;
let { aclName, headerTitle, path, childRoutes } = child;
// If the node has children that could be rendered, then we want
// to execute this function again with the child as the root
//
// Otherwise we'll just pass childrenFn as false
if(child.childRoutes && child.childRoutes.length > 0) {
childrenFn = this.extractLinksFromRoutes(child, userAcl, i++);
}
const links = node.childRoutes.map((child, j) => {
const { aclName, disableOn, headerTitle, path, childRoutes } = child;
// We validate if the user has set the title correctly,
// otherwise we're not going to render his route
if(headerTitle && typeof headerTitle === 'string') {
if (headerTitle && typeof headerTitle === 'string') {
let nestedChildren = null;
// If the node has children that could be rendered, then we want
// to execute this function again with the child as the root
//
// Otherwise we'll just pass nestedChildren as false
if (child.childRoutes && child.childRoutes.length) {
nestedChildren = this.extractLinksFromRoutes(child, userAcl, i++);
}
const navLinkProps = {
headerTitle,
children: nestedChildren,
depth: i,
disabled: this.isRouteDisabled(disableOn),
routePath: `/${path}`
};
// if there is an aclName present on the route definition,
// we evaluate it against the user's acl
if(aclName && typeof aclName !== 'undefined') {
if (aclName && typeof aclName !== 'undefined') {
return (
<AclProxy
key={j}
aclName={aclName}
aclObject={this.props.userAcl}>
<NavRoutesLinksLink
headerTitle={headerTitle}
routePath={'/' + path}
depth={i}
children={childrenFn}/>
<NavRoutesLinksLink {...navLinkProps} />
</AclProxy>
);
} else {
return (
<NavRoutesLinksLink
key={j}
headerTitle={headerTitle}
routePath={'/' + path}
depth={i}
children={childrenFn}/>
{...navLinkProps} />
);
}
} else {
@ -84,7 +105,7 @@ let NavRoutesLinks = React.createClass({
},
render() {
let {routes, userAcl} = this.props;
const {routes, userAcl} = this.props;
return (
<Nav {...this.props}>
@ -94,4 +115,4 @@ let NavRoutesLinks = React.createClass({
}
});
export default NavRoutesLinks;
export default NavRoutesLinks;

31
js/components/nav_routes_links_link.js
View File

@ -11,40 +11,45 @@ import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
let NavRoutesLinksLink = React.createClass({
propTypes: {
headerTitle: React.PropTypes.string,
routePath: React.PropTypes.string,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
]),
depth: React.PropTypes.number
disabled: React.PropTypes.bool,
depth: React.PropTypes.number,
headerTitle: React.PropTypes.string,
routePath: React.PropTypes.string
},
render() {
let { children, headerTitle, depth, routePath } = this.props;
const { children, headerTitle, depth, disabled, routePath } = this.props;
// if the route has children, we're returning a DropdownButton that will get filled
// with MenuItems
if(children) {
if (children) {
return (
<DropdownButton title={headerTitle}>
<DropdownButton
disabled={disabled}
title={headerTitle}>
{children}
</DropdownButton>
);
} else {
if(depth === 1) {
if (depth === 1) {
// if the node's child is actually a node of level one (a child of a node), we're
// returning a DropdownButton matching MenuItem
return (
<LinkContainer to={routePath}>
<LinkContainer
disabled={disabled}
to={routePath}>
<MenuItem>{headerTitle}</MenuItem>
</LinkContainer>
);
} else if(depth === 0) {
} else if (depth === 0) {
return (
<LinkContainer to={routePath}>
<LinkContainer
disabled={disabled}
to={routePath}>
<NavItem>{headerTitle}</NavItem>
</LinkContainer>
);
@ -55,4 +60,4 @@ let NavRoutesLinksLink = React.createClass({
}
});
export default NavRoutesLinksLink;
export default NavRoutesLinksLink;

5
js/components/password_reset_container.js
View File

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

50
js/components/piece_list.js
View File

@ -37,6 +37,7 @@ let PieceList = React.createClass({
bulkModalButtonListType: React.PropTypes.func,
canLoadPieceList: React.PropTypes.bool,
redirectTo: React.PropTypes.string,
shouldRedirect: React.PropTypes.func,
customSubmitButton: React.PropTypes.element,
customThumbnailPlaceholder: React.PropTypes.func,
filterParams: React.PropTypes.array,
@ -52,7 +53,6 @@ let PieceList = React.createClass({
accordionListItemType: AccordionListItemWallet,
bulkModalButtonListType: AclButtonList,
canLoadPieceList: true,
orderParams: ['artist_name', 'title'],
filterParams: [{
label: getLangText('Show works I can'),
items: [
@ -60,7 +60,10 @@ let PieceList = React.createClass({
'acl_consign',
'acl_create_editions'
]
}]
}],
orderParams: ['artist_name', 'title'],
redirectTo: '/register_piece',
shouldRedirect: () => true
};
},
@ -114,9 +117,13 @@ let PieceList = React.createClass({
},
componentDidUpdate() {
if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) {
const { location: { query }, redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// 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);
}
},
@ -169,15 +176,16 @@ let PieceList = React.createClass({
}
},
searchFor(searchTerm) {
this.loadPieceList({
page: 1,
search: searchTerm
});
this.history.pushState(null, this.props.location.pathname, {page: 1});
searchFor(search) {
const { location: { pathname } } = this.props;
this.loadPieceList({ search, page: 1 });
this.history.push({ pathname, query: { page: 1 } });
},
applyFilterBy(filterBy){
applyFilterBy(filterBy) {
const { location: { pathname } } = this.props;
this.setState({
isFilterDirty: true
});
@ -190,31 +198,32 @@ let PieceList = React.createClass({
this.state.pieceList
.forEach((piece) => {
// 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({
pieceId: piece.id,
filterBy
});
}
});
});
// we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces
this.history.pushState(null, this.props.location.pathname, {page: 1});
this.history.push({ pathname, query: { page: 1 } });
},
applyOrderBy(orderBy) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
const { orderAsc, pageSize } = this.state;
const orderBy = this.state.orderBy || this.props.orderBy;
return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
orderBy, this.state.orderAsc, filterBy);
return PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
fetchSelectedPieceEditionList() {
@ -240,8 +249,9 @@ let PieceList = React.createClass({
},
handleAclSuccess() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderBy, orderAsc, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.fetchSelectedPieceEditionList()
.forEach((pieceId) => {

22
js/components/register_piece.js
View File

@ -65,26 +65,21 @@ let RegisterPiece = React.createClass( {
this.setState(state);
},
handleSuccess(response){
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
handleSuccess(response) {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
// once the user was able to register a piece successfully, we need to make sure to keep
// the piece list up to date
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
this.history.pushState(null, `/pieces/${response.piece.id}`);
this.history.push(`/pieces/${response.piece.id}`);
},
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 (
<Property
name="num_editions"
@ -94,7 +89,8 @@ let RegisterPiece = React.createClass( {
<input
type="number"
placeholder="(e.g. 32)"
min={0}/>
min={1}
max={100} />
</Property>
);
}

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

@ -3,24 +3,28 @@
import React from 'react';
import { History } from 'react-router';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
import InputFineuploader from '../../../../../ascribe_forms/input_fineuploader';
import UploadButton from '../../../../../ascribe_uploader/ascribe_upload_button/upload_button';
import AscribeSpinner from '../../../../../ascribe_spinner';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import AppConstants from '../../../../../../constants/application_constants';
import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants';
import { validationParts, validationTypes } from '../../../../../../constants/uploader_constants';
import requests from '../../../../../../utils/requests';
import { getLangText } from '../../../../../../utils/lang_utils';
import { getErrorNotificationMessage } from '../../../../../../utils/error_utils';
import { setCookie } from '../../../../../../utils/fetch_api_utils';
import { validateForms } from '../../../../../../utils/form_utils';
import { getLangText } from '../../../../../../utils/lang_utils';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
@ -35,7 +39,7 @@ const PRRegisterPieceForm = React.createClass({
mixins: [History],
getInitialState(){
getInitialState() {
return {
digitalWorkKeyReady: true,
thumbnailKeyReady: true,
@ -54,16 +58,16 @@ const PRRegisterPieceForm = React.createClass({
* second adding all the additional details
*/
submit() {
if(!this.validateForms()) {
if (!this.validateForms()) {
return;
} else {
// disable the submission button right after the user
// clicks on it to avoid double submission
this.setState({
submitted: true
});
}
// disable the submission button right after the user
// clicks on it to avoid double submission
this.setState({
submitted: true
});
const { currentUser } = this.props;
const { registerPieceForm,
additionalDataForm,
@ -104,12 +108,20 @@ const PRRegisterPieceForm = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notificationMessage);
});
})
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`))
.then(() => this.history.push(`/pieces/${this.state.piece.id}`))
.catch((err) => {
const notificationMessage = new GlobalNotificationModel(getLangText("Oops! We weren't able to send your submission. Contact: support@ascribe.io"), 'danger', 5000);
const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
getLangText(' Please contact support@ascribe.io');
const notificationMessage = new GlobalNotificationModel(errMessage, 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notificationMessage);
console.logGlobal(new Error('Portfolio Review piece registration failed'), err);
// Reset the submit button
this.setState({
submitted: false
});
});
},
@ -118,11 +130,7 @@ const PRRegisterPieceForm = React.createClass({
additionalDataForm,
uploadersForm } = this.refs;
const registerPieceFormValidation = registerPieceForm.validate();
const additionalDataFormValidation = additionalDataForm.validate();
const uploaderFormValidation = uploadersForm.validate();
return registerPieceFormValidation && additionalDataFormValidation && uploaderFormValidation;
return validateForms([registerPieceForm, additionalDataForm, uploadersForm], true);
},
getCreateBlobRoutine() {
@ -139,7 +147,7 @@ const PRRegisterPieceForm = React.createClass({
},
/**
* This method is overloaded so that we can track the ready-state
* These two methods are overloaded so that we can track the ready-state
* of each uploader in the component
* @param {string} uploaderKey Name of the uploader's key to track
*/
@ -151,6 +159,14 @@ const PRRegisterPieceForm = React.createClass({
};
},
handleOptionalFileValidationFailed(uploaderKey) {
return () => {
this.setState({
[uploaderKey]: true
});
};
},
getSubmitButton() {
const { digitalWorkKeyReady,
thumbnailKeyReady,
@ -179,11 +195,12 @@ const PRRegisterPieceForm = React.createClass({
render() {
const { location } = this.props;
const maxThumbnailSize = validationTypes.workThumbnail.sizeLimit / 1000000;
return (
<div className="register-piece--form">
<Form
buttons={{}}
buttons={null}
className="ascribe-form-bordered"
ref="registerPieceForm">
<Property
@ -220,7 +237,7 @@ const PRRegisterPieceForm = React.createClass({
</Property>
</Form>
<Form
buttons={{}}
buttons={null}
className="ascribe-form-bordered"
ref="additionalDataForm">
<Property
@ -272,7 +289,7 @@ const PRRegisterPieceForm = React.createClass({
</Property>
</Form>
<Form
buttons={{}}
buttons={null}
className="ascribe-form-bordered"
ref="uploadersForm">
<Property
@ -290,8 +307,8 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'digitalwork'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
itemLimit: validationTypes.registerWork.itemLimit,
sizeLimit: validationTypes.additionalData.sizeLimit,
allowedExtensions: ['pdf']
}}
location={location}
@ -303,7 +320,7 @@ const PRRegisterPieceForm = React.createClass({
</Property>
<Property
name="thumbnailKey"
label={getLangText('Featured Cover photo')}>
label={`${getLangText('Featured Cover photo')} (max ${maxThumbnailSize}MB)`}>
<InputFineuploader
fileInputElement={UploadButton()}
createBlobRoutine={{
@ -316,9 +333,9 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'thumbnail'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
itemLimit: validationTypes.workThumbnail.itemLimit,
sizeLimit: validationTypes.workThumbnail.sizeLimit,
allowedExtensions: validationParts.allowedExtensions.images
}}
location={location}
fileClassToUpload={{
@ -334,14 +351,15 @@ const PRRegisterPieceForm = React.createClass({
fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'otherdata'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit
itemLimit: validationParts.itemLimit.single,
sizeLimit: validationTypes.additionalData.sizeLimit
}}
location={location}
fileClassToUpload={{
@ -362,9 +380,9 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'otherdata'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
itemLimit: validationParts.itemLimit.single,
sizeLimit: validationTypes.additionalData.sizeLimit,
allowedExtensions: validationParts.allowedExtensions.images
}}
location={location}
fileClassToUpload={{
@ -375,7 +393,7 @@ const PRRegisterPieceForm = React.createClass({
</Property>
</Form>
<Form
buttons={{}}
buttons={null}
className="ascribe-form-bordered">
<Property
name="terms"

17
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 UserActions from '../../../../../actions/user_actions';
import { mergeOptions } from '../../../../../utils/general_utils';
import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
@ -34,15 +34,18 @@ const PRLanding = React.createClass({
componentDidMount() {
const { location } = this.props;
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeActions.fetchPrize();
if(location && location.query && location.query.redirect) {
let queryCopy = JSON.parse(JSON.stringify(location.query));
delete queryCopy.redirect;
window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy));
if (location && location.query && location.query.redirect) {
window.setTimeout(() => this.history.replace({
pathname: `/${location.query.redirect}`,
query: omitFromObject(location.query, ['redirect'])
}));
}
},
@ -125,4 +128,4 @@ const PRLanding = React.createClass({
}
});
export default PRLanding;
export default PRLanding;

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

@ -39,7 +39,7 @@ const PRRegisterPiece = React.createClass({
if(currentUser && currentUser.email) {
const submittedPieceId = getCookie(currentUser.email);
if(submittedPieceId) {
this.history.pushState(null, `/pieces/${submittedPieceId}`);
this.history.push(`/pieces/${submittedPieceId}`);
}
}
},
@ -62,7 +62,7 @@ const PRRegisterPiece = React.createClass({
<Col xs={6}>
<div className="register-piece--info">
<h1>Portfolio Review</h1>
<h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2>
<h2>{getLangText('Submission closing on %s', ' 27 Dec 2015')}</h2>
<p>For more information, visit:&nbsp;
<a href="http://www.portfolio-review.de/submission/" target="_blank">
portfolio-review.de
@ -84,4 +84,4 @@ const PRRegisterPiece = React.createClass({
}
});
export default PRRegisterPiece;
export default PRRegisterPiece;

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);
if (exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query));
window.setTimeout(() => history.replace({ query, pathname: to }));
return true;
} else {
return false;

4
js/components/whitelabel/prize/prize_routes.js
View File

@ -12,6 +12,8 @@ import SPPieceContainer from './simple_prize/components/ascribe_detail/prize_pie
import SPSettingsContainer from './simple_prize/components/prize_settings_container';
import SPApp from './simple_prize/prize_app';
import SluicePieceContainer from './sluice/components/sluice_detail/sluice_piece_container';
import PRApp from './portfolioreview/pr_app';
import PRLanding from './portfolioreview/components/pr_landing';
import PRRegisterPiece from './portfolioreview/components/pr_register_piece';
@ -53,7 +55,7 @@ const ROUTES = {
path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
headerTitle='COLLECTION'/>
<Route path='pieces/:pieceId' component={SPPieceContainer} />
<Route path='pieces/:pieceId' component={SluicePieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} />

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

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

26
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) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
@ -138,8 +139,9 @@ let AccordionListItemPrize = React.createClass({
},
refreshPieceData() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
onSelectChange(){
@ -171,23 +173,25 @@ let AccordionListItemPrize = React.createClass({
},
render() {
const { children, className, content } = this.props;
const { currentUser } = this.state;
// Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
(this.state.currentUser.is_judge && !this.props.content.selected )) ?
<span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.props.content.artist_name;
let artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ?
<span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name;
return (
<div>
<AccordionListItemPiece
className={this.props.className}
piece={this.props.content}
className={className}
piece={content}
artistName={artistName}
subsubheading={
<div>
<span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
<span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
</div>}
buttons={this.getPrizeButtons()}
badge={this.getPrizeBadge()}>
{this.props.children}
{children}
</AccordionListItemPiece>
</div>
);

344
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 { ResourceNotFoundError } from '../../../../../../models/errors';
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 PrizeActions from '../../actions/prize_actions';
import PrizeStore from '../../stores/prize_store';
import PrizeRatingActions from '../../actions/prize_rating_actions';
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 UserActions from '../../../../../../actions/user_actions';
@ -34,9 +35,7 @@ import CollapsibleParagraph from '../../../../../../components/ascribe_collapsib
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
import LoanForm from '../../../../../ascribe_forms/form_loan';
import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
@ -52,16 +51,17 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
/**
* This is the component that implements resource/data specific functionality
*/
let PieceContainer = React.createClass({
let PrizePieceContainer = React.createClass({
propTypes: {
params: React.PropTypes.object
params: React.PropTypes.object,
selectedPrizeActionButton: React.PropTypes.func
},
mixins: [ReactError],
getInitialState() {
return mergeOptions(
PieceStore.getState(),
PieceStore.getInitialState(),
UserStore.getState()
);
},
@ -70,28 +70,24 @@ let PieceContainer = React.createClass({
PieceStore.listen(this.onChange);
UserStore.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({});
PieceActions.fetchOne(this.props.params.pieceId);
UserActions.fetchCurrentUser();
this.loadPiece();
},
// 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) {
if(this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({});
PieceActions.fetchOne(nextProps.params.pieceId);
if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.flushPiece();
this.loadPiece(nextProps.params.pieceId);
}
},
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.")));
}
},
@ -101,26 +97,32 @@ let PieceContainer = React.createClass({
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
getActions() {
if (this.state.piece &&
this.state.piece.notifications &&
this.state.piece.notifications.length > 0) {
const { currentUser, piece } = this.state;
if (piece.notifications && piece.notifications.length > 0) {
return (
<ListRequestActions
pieceOrEditions={this.state.piece}
currentUser={this.state.currentUser}
pieceOrEditions={piece}
currentUser={currentUser}
handleSuccess={this.loadPiece}
notifications={this.state.piece.notifications}/>);
notifications={piece.notifications} />);
}
},
loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchPiece(pieceId);
},
render() {
if(this.state.piece && this.state.piece.id) {
const { selectedPrizeActionButton } = this.props;
const { currentUser, piece } = this.state;
if (piece.id) {
/*
This really needs a refactor!
@ -129,49 +131,48 @@ let PieceContainer = React.createClass({
*/
// Only show the artist name if you are the participant or if you are a judge and the piece is shortlisted
let artistName = ((this.state.currentUser.is_jury && !this.state.currentUser.is_judge) ||
(this.state.currentUser.is_judge && !this.state.piece.selected )) ?
null : this.state.piece.artist_name;
let artistName;
if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true" />;
setDocumentTitle(piece.title);
} else {
artistName = piece.artist_name;
setDocumentTitle(`${artistName}, ${piece.title}`);
}
// Only show the artist email if you are a judge and the piece is shortlisted
let artistEmail = (this.state.currentUser.is_judge && this.state.piece.selected ) ?
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null;
if (artistName === null) {
setDocumentTitle(this.state.piece.title);
} else {
setDocumentTitle([artistName, this.state.piece.title].join(', '));
}
if (artistName === null) {
artistName = <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/>;
}
const artistEmail = currentUser.is_judge && piece.selected ? (
<DetailProperty
label={getLangText('REGISTREE')}
value={piece.user_registered} />
) : null;
return (
<Piece
piece={this.state.piece}
loadPiece={this.loadPiece}
piece={piece}
currentUser={currentUser}
header={
<div className="ascribe-detail-header">
<NavigationHeader
piece={this.state.piece}
currentUser={this.state.currentUser}/>
piece={piece}
currentUser={currentUser} />
<h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label={getLangText('BY')} value={artistName} />
<DetailProperty label={getLangText('DATE')} value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year()} />
<DetailProperty label={getLangText('DATE')} value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
{artistEmail}
{this.getActions()}
<hr/>
<hr />
</div>
}
}
subheader={
<PrizePieceRatings
loadPiece={this.loadPiece}
piece={this.state.piece}
currentUser={this.state.currentUser}/>
piece={piece}
currentUser={currentUser}
selectedPrizeActionButton={selectedPrizeActionButton} />
}>
<PrizePieceDetails piece={this.state.piece} />
<PrizePieceDetails piece={piece} />
</Piece>
);
} else {
@ -186,16 +187,15 @@ let PieceContainer = React.createClass({
let NavigationHeader = React.createClass({
propTypes: {
piece: React.PropTypes.object,
currentUser: React.PropTypes.object
currentUser: React.PropTypes.object.isRequired,
piece: React.PropTypes.object.isRequired
},
render() {
const { currentUser, piece } = this.props;
if (currentUser && currentUser.email && currentUser.is_judge && currentUser.is_jury &&
!currentUser.is_admin && piece && piece.navigation) {
let nav = piece.navigation;
if (currentUser.email && currentUser.is_judge && currentUser.is_jury && !currentUser.is_admin && piece.navigation) {
const nav = piece.navigation;
return (
<div style={{marginBottom: '1em'}}>
@ -215,41 +215,49 @@ let NavigationHeader = React.createClass({
<hr/>
</div>
);
} else {
return null;
}
return null;
}
});
let PrizePieceRatings = React.createClass({
propTypes: {
loadPiece: React.PropTypes.func,
piece: React.PropTypes.object,
currentUser: React.PropTypes.object
currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired,
piece: React.PropTypes.object.isRequired,
selectedPrizeActionButton: React.PropTypes.func
},
getInitialState() {
return mergeOptions(
PieceListStore.getState(),
PrizeRatingStore.getState()
PrizeStore.getState(),
PrizeRatingStore.getInitialState()
);
},
componentDidMount() {
PrizeRatingStore.listen(this.onChange);
PrizeRatingActions.fetchOne(this.props.piece.id);
PrizeRatingActions.fetchAverage(this.props.piece.id);
PrizeStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
PrizeActions.fetchPrize();
this.fetchRatingsIfAuthorized();
},
componentWillReceiveProps(nextProps) {
if (nextProps.currentUser.email !== this.props.currentUser.email) {
this.fetchRatingsIfAuthorized();
}
},
componentWillUnmount() {
// Every time we're leaving the piece detail page,
// just reset the piece that is saved in the piece store
// as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PrizeRatingActions.updateRating({});
PrizeRatingStore.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
@ -257,7 +265,12 @@ let PrizePieceRatings = React.createClass({
// every mouseover be overridden, we need to set it ourselves initially to deal
// with the problem.
onChange(state) {
if (state.prize && state.prize.active_round != this.state.prize.active_round) {
this.fetchRatingsIfAuthorized(state);
}
this.setState(state);
if (this.refs.rating) {
this.refs.rating.state.ratingCache = {
pos: this.refs.rating.state.pos,
@ -268,74 +281,64 @@ let PrizePieceRatings = React.createClass({
}
},
fetchRatingsIfAuthorized(state = this.state) {
const {
currentUser: {
is_admin: isAdmin,
is_judge: isJudge,
is_jury: isJury
},
piece: { id: pieceId } } = this.props;
if (state.prize && 'active_round' in state.prize && (isAdmin || isJudge || isJury)) {
PrizeRatingActions.fetchOne(pieceId, state.prize.active_round);
PrizeRatingActions.fetchAverage(pieceId, state.prize.active_round);
}
},
onRatingClick(event, args) {
event.preventDefault();
PrizeRatingActions.createRating(this.props.piece.id, args.rating).then(
this.refreshPieceData()
);
PrizeRatingActions
.createRating(this.props.piece.id, args.rating, this.state.prize.active_round)
.then(this.refreshPieceData);
},
handleLoanRequestSuccess(message){
let notification = new GlobalNotificationModel(message, 'success', 4000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
getSelectedActionButton() {
const { currentUser, piece, selectedPrizeActionButton: SelectedPrizeActionButton } = this.props;
getLoanButton(){
let today = new Moment();
let endDate = new Moment();
endDate.add(6, 'months');
return (
<ModalWrapper
trigger={
<button className='btn btn-default btn-sm'>
{getLangText('SEND LOAN REQUEST')}
</button>
}
handleSuccess={this.handleLoanRequestSuccess}
title='REQUEST LOAN'>
<LoanForm
loanHeading={null}
message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
'Please accept the loan request to proceed.')}
id={{piece_id: this.props.piece.id}}
url={ApiUrls.ownership_loans_pieces_request}
email={this.props.currentUser.email}
gallery={this.props.piece.prize.name}
startDate={today}
endDate={endDate}
showPersonalMessage={true}
showPassword={false}
handleSuccess={this.handleLoanSuccess} />
</ModalWrapper>);
},
handleShortlistSuccess(message){
let notification = new GlobalNotificationModel(message, 'success', 2000);
GlobalNotificationActions.appendGlobalNotification(notification);
if (piece.selected && SelectedPrizeActionButton) {
return (
<span className="pull-right">
<SelectedPrizeActionButton
piece={piece}
currentUser={currentUser} />
</span>
);
}
},
refreshPieceData() {
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
this.props.loadPiece();
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
onSelectChange() {
PrizeRatingActions.toggleShortlist(this.props.piece.id)
.then(
(res) => {
PrizeRatingActions
.toggleShortlist(this.props.piece.id)
.then((res) => {
this.refreshPieceData();
return res;
})
.then(
(res) => {
this.handleShortlistSuccess(res.notification);
}
);
if (res && res.notification) {
const notification = new GlobalNotificationModel(res.notification, 'success', 2000);
GlobalNotificationActions.appendGlobalNotification(notification);
}
});
},
render(){
if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
render() {
if (this.props.piece.id && this.props.currentUser.is_judge && this.state.average) {
// Judge sees shortlisting, average and per-jury notes
return (
<div>
@ -352,9 +355,7 @@ let PrizePieceRatings = React.createClass({
</span>
</InputCheckbox>
</span>
<span className="pull-right">
{this.props.piece.selected ? this.getLoanButton() : null}
</span>
{this.getSelectedActionButton()}
</div>
<hr />
</CollapsibleParagraph>
@ -369,17 +370,23 @@ let PrizePieceRatings = React.createClass({
size='md'
step={0.5}
rating={this.state.average}
ratingAmount={5}/>
ratingAmount={5} />
</div>
<hr />
{this.state.ratings.map((item, i) => {
let note = item.note ?
let note = item.note ? (
<div className="rating-note">
note: {item.note}
</div> : null;
</div>
) : null;
return (
<div className="rating-list">
<div id="list-rating" className="row no-margin">
<div
key={item.user}
className="rating-list">
<div
id="list-rating"
className="row no-margin">
<span className="pull-right">
<StarRating
ref={'rating' + i}
@ -388,7 +395,7 @@ let PrizePieceRatings = React.createClass({
size='sm'
step={0.5}
rating={item.rating}
ratingAmount={5}/>
ratingAmount={5} />
</span>
<span> {item.user}</span>
{note}
@ -399,8 +406,7 @@ let PrizePieceRatings = React.createClass({
<hr />
</CollapsibleParagraph>
</div>);
}
else if (this.props.currentUser && this.props.currentUser.is_jury) {
} else if (this.props.currentUser.is_jury) {
// Jury can set rating and note
return (
<CollapsibleParagraph
@ -418,55 +424,58 @@ let PrizePieceRatings = React.createClass({
ratingAmount={5} />
</div>
<Note
id={() => {return {'piece_id': this.props.piece.id}; }}
id={() => ({ 'piece_id': this.props.piece.id })}
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 ...')}
editable={true}
successMessage={getLangText('Jury note saved')}
url={ApiUrls.notes}
currentUser={this.props.currentUser}/>
currentUser={this.props.currentUser} />
</CollapsibleParagraph>);
} else {
return null;
}
return null;
}
});
let PrizePieceDetails = React.createClass({
propTypes: {
piece: React.PropTypes.object
piece: React.PropTypes.object.isRequired
},
render() {
const { piece } = this.props;
if (piece &&
piece.prize &&
piece.prize.name &&
Object.keys(piece.extra_data).length !== 0) {
if (piece.prize && piece.prize.name && Object.keys(piece.extra_data).length) {
return (
<CollapsibleParagraph
title={getLangText('Prize Details')}
defaultExpanded={true}>
<Form ref='form'>
{Object.keys(piece.extra_data).sort().map((data) => {
// Remove leading number (for sorting), if any, and underscores with spaces
let label = data.replace(/^\d-/, '').replace(/_/g, ' ');
const value = piece.extra_data[data] || 'N/A';
<Form>
{Object
.keys(piece.extra_data)
.sort()
.map((data) => {
// Remove leading number (for sorting), if any, and underscores with spaces
const label = data.replace(/^\d-/, '').replace(/_/g, ' ');
const value = piece.extra_data[data] || 'N/A';
return (
<Property
name={data}
label={label}
editable={false}
overrideForm={true}>
<InputTextAreaToggable
rows={1}
defaultValue={value}/>
</Property>
);
})}
return (
<Property
key={label}
name={data}
label={label}
editable={false}
overrideForm={true}>
<InputTextAreaToggable
rows={1}
defaultValue={value} />
</Property>
);
})
}
<FurtherDetailsFileuploader
submitFile={() => {}}
setIsUploadReady={() => {}}
@ -479,9 +488,10 @@ let PrizePieceDetails = React.createClass({
</Form>
</CollapsibleParagraph>
);
} else {
return null;
}
return null;
}
});
export default PieceContainer;
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(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
window.setTimeout(() => this.history.replace('/collection'), 0);
}
},

6
js/components/whitelabel/prize/simple_prize/components/prize_piece_list.js
View File

@ -48,9 +48,8 @@ let PrizePieceList = React.createClass({
},
getButtonSubmit() {
const { currentUser } = this.state;
if (this.state.prize && this.state.prize.active &&
!currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge){
const { currentUser, prize } = this.state;
if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
return (
<LinkContainer to="/register_piece">
<Button>
@ -76,7 +75,6 @@ let PrizePieceList = React.createClass({
<div>
<PieceList
ref="list"
redirectTo="/register_piece"
accordionListItemType={AccordionListItemPrize}
orderParams={orderParams}
orderBy={this.state.currentUser.is_jury ? 'rating' : null}

7
js/components/whitelabel/prize/simple_prize/components/prize_settings_container.js
View File

@ -135,14 +135,15 @@ let PrizeJurySettings = React.createClass({
handleCreateSuccess(response) {
PrizeJuryActions.fetchJury();
let notification = new GlobalNotificationModel(response.notification, 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.displayNotification(response);
this.refs.form.refs.email.refs.input.getDOMNode().value = null;
},
handleActivate(event) {
let email = event.target.getAttribute('data-id');
PrizeJuryActions.activateJury(email).then((response) => {
PrizeJuryActions
.activateJury(email)
.then((response) => {
PrizeJuryActions.fetchJury();
this.displayNotification(response);
});

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 = {
fetchAverage(pieceId) {
return requests.get('rating_average', {'piece_id': pieceId});
fetchAverage(pieceId, round) {
const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating_average', params);
},
fetchOne(pieceId) {
return requests.get('rating', {'piece_id': pieceId});
fetchOne(pieceId, round) {
const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating', params);
},
rate(pieceId, rating) {
return requests.post('ratings', {body: {'piece_id': pieceId, 'note': rating}});
rate(pieceId, rating, round) {
const body = {
'piece_id': pieceId,
'note': rating
};
if (typeof round === 'number') {
body['prize_round'] = round;
}
return requests.post('ratings', { body });
},
select(pieceId) {

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

@ -32,7 +32,7 @@ let PrizeApp = React.createClass({
if (!path || history.isActive('/login') || history.isActive('/signup')) {
header = <Hero />;
} else {
header = <Header showAddWork={false} routes={routes}/>;
header = <Header routes={routes}/>;
}
return (

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

@ -6,10 +6,24 @@ import PrizeRatingActions from '../actions/prize_rating_actions';
class PrizeRatingStore {
constructor() {
this.getInitialState();
this.bindActions(PrizeRatingActions);
this.exportPublicMethods({
getInitialState: this.getInitialState.bind(this)
});
}
getInitialState() {
this.ratings = [];
this.currentRating = null;
this.average = null;
this.bindActions(PrizeRatingActions);
return {
ratings: this.ratings,
currentRating: this.currentRating,
average: this.average
};
}
onUpdatePrizeRatings(ratings) {
@ -24,6 +38,10 @@ class PrizeRatingStore {
this.average = data.average;
this.ratings = data.ratings;
}
onResetPrizeRatings() {
this.getInitialState();
}
}
export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');
export default alt.createStore(PrizeRatingStore, 'PrizeRatingStore');

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

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

70
js/components/whitelabel/prize/sluice/components/sluice_buttons/sluice_selected_prize_action_button.js Normal file
View File

@ -0,0 +1,70 @@
'use strict'
import React from 'react';
import Moment from 'moment';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import LoanForm from '../../../../../ascribe_forms/form_loan';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import ApiUrls from '../../../../../../constants/api_urls';
import { getLangText } from '../../../../../../utils/lang_utils';
const SluiceSelectedPrizeActionButton = React.createClass({
propTypes: {
piece: React.PropTypes.object,
currentUser: React.PropTypes.object,
startLoanDate: React.PropTypes.object,
endLoanDate: React.PropTypes.object,
className: React.PropTypes.string,
handleSuccess: React.PropTypes.func
},
handleSuccess(res) {
const notification = new GlobalNotificationModel(res && res.notification || getLangText('You have successfully requested the loan, pending their confirmation.'), 'success', 4000);
GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof this.props.handleSuccess === 'function') {
this.props.handleSuccess(res);
}
},
render() {
const { currentUser, piece } = this.props;
// Can't use default props since those are only created once
const startLoanDate = this.props.startLoanDate || new Moment();
const endLoanDate = this.props.endLoanDate || (new Moment()).add(6, 'months');
return (
<ModalWrapper
trigger={
<button className='btn btn-default btn-sm'>
{getLangText('SEND LOAN REQUEST')}
</button>
}
handleSuccess={this.handleSuccess}
title={getLangText('REQUEST LOAN')}>
<LoanForm
loanHeading={null}
message={getLangText('Congratulations,\nYou have been selected for the prize.\n' +
'Please accept the loan request to proceed.')}
id={{ piece_id: piece.id }}
url={ApiUrls.ownership_loans_pieces_request}
email={currentUser.email}
gallery={piece.prize.name}
startDate={startLoanDate}
endDate={endLoanDate}
showPersonalMessage={true}
showPassword={false} />
</ModalWrapper>
);
}
});
export default SluiceSelectedPrizeActionButton;

23
js/components/whitelabel/prize/sluice/components/sluice_detail/sluice_piece_container.js Normal file
View File

@ -0,0 +1,23 @@
'use strict';
import React from 'react';
import SluiceSelectedPrizeActionButton from '../sluice_buttons/sluice_selected_prize_action_button';
import PrizePieceContainer from '../../../simple_prize/components/ascribe_detail/prize_piece_container';
const SluicePieceContainer = React.createClass({
propTypes: {
params: React.PropTypes.object
},
render() {
return (
<PrizePieceContainer
{...this.props}
selectedPrizeActionButton={SluiceSelectedPrizeActionButton} />
);
}
});
export default SluicePieceContainer;

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

@ -25,63 +25,72 @@ let WalletPieceContainer = React.createClass({
currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired,
handleDeleteSuccess: React.PropTypes.func.isRequired,
submitButtonType: React.PropTypes.func.isRequired
submitButtonType: React.PropTypes.func.isRequired,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
])
},
render() {
if(this.props.piece && this.props.piece.id) {
const {
children,
currentUser,
handleDeleteSuccess,
loadPiece,
piece,
submitButtonType } = this.props;
if (piece && piece.id) {
return (
<Piece
piece={this.props.piece}
loadPiece={this.props.loadPiece}
piece={piece}
currentUser={currentUser}
header={
<div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/>
<h1 className="ascribe-detail-title">{this.props.piece.title}</h1>
<DetailProperty label="BY" value={this.props.piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.piece.date_created, 'YYYY-MM-DD').year()} />
<h1 className="ascribe-detail-title">{piece.title}</h1>
<DetailProperty label="BY" value={piece.artist_name} />
<DetailProperty label="DATE" value={Moment(piece.date_created, 'YYYY-MM-DD').year()} />
<hr/>
</div>
}
subheader={
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} />
<hr/>
</div>
}>
<div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ piece.bitcoin_id } ellipsis={true} />
<hr/>
</div>
}>
<WalletActionPanel
piece={this.props.piece}
currentUser={this.props.currentUser}
loadPiece={this.props.loadPiece}
handleDeleteSuccess={this.props.handleDeleteSuccess}
submitButtonType={this.props.submitButtonType}/>
piece={piece}
currentUser={currentUser}
loadPiece={loadPiece}
handleDeleteSuccess={handleDeleteSuccess}
submitButtonType={submitButtonType}/>
<CollapsibleParagraph
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
history={this.props.piece.loan_history}/>
history={piece.loan_history}/>
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('Notes')}
show={!!(this.props.currentUser.username || this.props.piece.public_note)}>
show={!!(currentUser.username || piece.public_note)}>
<Note
id={() => {return {'id': this.props.piece.id}; }}
id={() => {return {'id': piece.id}; }}
label={getLangText('Personal note (private)')}
defaultValue={this.props.piece.private_note || null}
defaultValue={piece.private_note || null}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/>
currentUser={currentUser}/>
</CollapsibleParagraph>
{this.props.children}
{children}
</Piece>
);
}
else {
} else {
return (
<div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' />

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) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
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() {
return mergeOptions(
PieceStore.getState(),
PieceStore.getInitialState(),
UserStore.getState(),
PieceListStore.getState()
);
@ -51,14 +51,17 @@ let CylandPieceContainer = React.createClass({
UserStore.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();
},
// 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() {
PieceStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
@ -70,31 +73,34 @@ let CylandPieceContainer = React.createClass({
},
loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId);
PieceActions.fetchPiece(this.props.params.pieceId);
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
render() {
if(this.state.piece && this.state.piece.id) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
const { piece } = this.state;
if (piece.id) {
setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return (
<WalletPieceContainer
piece={this.state.piece}
piece={piece}
currentUser={this.state.currentUser}
loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess}
@ -103,14 +109,13 @@ let CylandPieceContainer = React.createClass({
title={getLangText('Further Details')}
defaultExpanded={true}>
<CylandAdditionalDataForm
piece={this.state.piece}
disabled={!this.state.piece.acl.acl_edit}
piece={piece}
disabled={!piece.acl.acl_edit}
isInline={true} />
</CollapsibleParagraph>
</WalletPieceContainer>
);
}
else {
} else {
return (
<div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' />

71
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({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -42,13 +43,13 @@ let CylandAdditionalDataForm = React.createClass({
},
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);
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -71,10 +72,13 @@ let CylandAdditionalDataForm = React.createClass({
},
render() {
let { piece, isInline, disabled, handleSuccess, location } = this.props;
let buttons, spinner, heading;
const { disabled, handleSuccess, isInline, piece } = this.props;
if(!isInline) {
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
@ -87,7 +91,7 @@ let CylandAdditionalDataForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -101,13 +105,15 @@ let CylandAdditionalDataForm = React.createClass({
);
}
if(piece && piece.id) {
if (piece.id) {
const { extra_data: extraData = {} } = piece;
return (
<Form
disabled={disabled}
className="ascribe-form-bordered"
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}
getFormData={this.getFormData}
buttons={buttons}
@ -116,65 +122,66 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='artist_bio'
label={getLangText('Artist Biography')}
expanded={!disabled || !!piece.extra_data.artist_bio}>
expanded={!disabled || !!extraData.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
placeholder={getLangText('Enter the artist\'s biography...')}/>
defaultValue={extraData.artist_bio}
placeholder={getLangText('Enter the artist\'s biography...')} />
</Property>
<Property
name='artist_contact_information'
label={getLangText('Artist Contact Information')}
expanded={!disabled || !!piece.extra_data.artist_contact_information}>
expanded={!disabled || !!extraData.artist_contact_information}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_contact_information}
placeholder={getLangText('Enter the artist\'s contact information...')}/>
convertLinks
defaultValue={extraData.artist_contact_information}
placeholder={getLangText('Enter the artist\'s contact information...')} />
</Property>
<Property
name='conceptual_overview'
label={getLangText('Conceptual Overview')}
expanded={!disabled || !!piece.extra_data.conceptual_overview}>
expanded={!disabled || !!extraData.conceptual_overview}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a conceptual overview...')}/>
defaultValue={extraData.conceptual_overview}
placeholder={getLangText('Enter a conceptual overview...')} />
</Property>
<Property
name='medium'
label={getLangText('Medium (technical specifications)')}
expanded={!disabled || !!piece.extra_data.medium}>
expanded={!disabled || !!extraData.medium}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.medium}
placeholder={getLangText('Enter the medium (and other technical specifications)...')}/>
defaultValue={extraData.medium}
placeholder={getLangText('Enter the medium (and other technical specifications)...')} />
</Property>
<Property
name='size_duration'
label={getLangText('Size / Duration')}
expanded={!disabled || !!piece.extra_data.size_duration}>
expanded={!disabled || !!extraData.size_duration}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.size_duration}
placeholder={getLangText('Enter the size / duration...')}/>
defaultValue={extraData.size_duration}
placeholder={getLangText('Enter the size / duration...')} />
</Property>
<Property
name='display_instructions'
label={getLangText('Display instructions')}
expanded={!disabled || !!piece.extra_data.display_instructions}>
expanded={!disabled || !!extraData.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
placeholder={getLangText('Enter the display instructions...')}/>
defaultValue={extraData.display_instructions}
placeholder={getLangText('Enter the display instructions...')} />
</Property>
<Property
name='additional_details'
label={getLangText('Additional details')}
expanded={!disabled || !!piece.extra_data.additional_details}>
expanded={!disabled || !!extraData.additional_details}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.additional_details}
placeholder={getLangText('Enter additional details...')}/>
defaultValue={extraData.additional_details}
placeholder={getLangText('Enter additional details...')} />
</Property>
<FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')}
@ -189,7 +196,7 @@ let CylandAdditionalDataForm = React.createClass({
} else {
return (
<div className="ascribe-loading-position">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</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(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0);
window.setTimeout(() => this.history.replace('/collection'), 0);
}
},

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

@ -52,7 +52,7 @@ let CylandRegisterPiece = React.createClass({
return mergeOptions(
UserStore.getState(),
PieceListStore.getState(),
PieceStore.getState(),
PieceStore.getInitialState(),
WhitelabelStore.getState(),
{
step: 0
@ -67,7 +67,7 @@ let CylandRegisterPiece = React.createClass({
UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
let queryParams = this.props.location.query;
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.
@ -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 don't care about the value.
if(queryParams && 'piece_id' in queryParams) {
PieceActions.fetchOne(queryParams.piece_id);
if ('piece_id' in queryParams) {
PieceActions.fetchPiece(queryParams.piece_id);
}
},
@ -92,64 +92,50 @@ let CylandRegisterPiece = React.createClass({
this.setState(state);
},
handleRegisterSuccess(response){
handleRegisterSuccess(response) {
this.refreshPieceList();
// also start loading the piece for the next step
if(response && response.piece) {
PieceActions.updatePiece({});
// Also load the newly registered piece for the next step
if (response && response.piece) {
PieceActions.updatePiece(response.piece);
}
this.incrementStep();
this.refs.slidesContainer.nextSlide({ piece_id: response.piece.id });
this.nextSlide({ piece_id: response.piece.id });
},
handleAdditionalDataSuccess() {
// 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.
PieceActions.fetchOne(this.state.piece.id);
PieceActions.fetchPiece(this.state.piece.id);
this.refreshPieceList();
this.incrementStep();
this.refs.slidesContainer.nextSlide();
this.nextSlide();
},
handleLoanSuccess(response) {
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id);
this.history.pushState(null, `/pieces/${this.state.piece.id}`);
this.history.push(`/pieces/${this.state.piece.id}`);
},
// 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;
nextSlide(queryParams) {
// We need to increase the step to lock the forms that are already filled out
this.setState({
step: newStep
step: this.state.step + 1
});
this.refs.slidesContainer.nextSlide(queryParams);
},
refreshPieceList() {
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
render() {
@ -157,8 +143,7 @@ let CylandRegisterPiece = React.createClass({
const { currentUser, piece, step, whitelabel } = this.state;
const today = new Moment();
const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment();
datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain.add(1000, 'years');
const datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain = new Moment().add(1000, 'years');
const loanHeading = getLangText('Loan to Cyland archive');
const loanButtons = (
@ -201,7 +186,7 @@ let CylandRegisterPiece = React.createClass({
submitMessage={getLangText('Submit')}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
location={location}/>
location={location} />
</Col>
</Row>
</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) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);

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

@ -106,28 +106,33 @@ let IkonotvContractNotifications = React.createClass({
handleConfirm() {
let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
OwnershipFetcher.confirmContractAgreement(contractAgreement).then(
() => this.handleConfirmSuccess()
);
OwnershipFetcher
.confirmContractAgreement(contractAgreement)
.then(this.handleConfirmSuccess);
},
handleConfirmSuccess() {
let notification = new GlobalNotificationModel(getLangText('You have accepted the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
// Flush contract notifications and refetch
NotificationActions.flushContractAgreementListNotifications();
NotificationActions.fetchContractAgreementListNotifications();
this.history.push('/collection');
},
handleDeny() {
let contractAgreement = this.state.contractAgreementListNotifications[0].contract_agreement;
OwnershipFetcher.denyContractAgreement(contractAgreement).then(
() => this.handleDenySuccess()
);
OwnershipFetcher
.denyContractAgreement(contractAgreement)
.then(this.handleDenySuccess);
},
handleDenySuccess() {
let notification = new GlobalNotificationModel(getLangText('You have denied the conditions'), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
getCopyrightAssociationForm(){

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

@ -41,7 +41,7 @@ let IkonotvPieceContainer = React.createClass({
getInitialState() {
return mergeOptions(
PieceStore.getState(),
PieceStore.getInitialState(),
UserStore.getState(),
PieceListStore.getState()
);
@ -52,19 +52,14 @@ let IkonotvPieceContainer = React.createClass({
UserStore.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();
},
// 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) {
if(this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({});
PieceActions.fetchOne(nextProps.params.pieceId);
if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.flushPiece();
this.loadPiece();
}
},
@ -79,25 +74,28 @@ let IkonotvPieceContainer = React.createClass({
},
loadPiece() {
PieceActions.fetchOne(this.props.params.pieceId);
PieceActions.fetchPiece(this.props.params.pieceId);
},
handleDeleteSuccess(response) {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
// since we're deleting a piece, we just need to close
// all editions dialogs and not reload them
EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success');
const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
render() {
const { piece } = this.state;
let furtherDetails = (
<CollapsibleParagraph
title={getLangText('Further Details')}
@ -106,28 +104,29 @@ let IkonotvPieceContainer = React.createClass({
</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 = (
<CollapsibleParagraph
title={getLangText('Further Details')}
defaultExpanded={true}>
<IkonotvArtistDetailsForm
piece={this.state.piece}
piece={piece}
isInline={true}
disabled={!this.state.piece.acl.acl_edit} />
disabled={!piece.acl.acl_edit} />
<IkonotvArtworkDetailsForm
piece={this.state.piece}
piece={piece}
isInline={true}
disabled={!this.state.piece.acl.acl_edit} />
disabled={!piece.acl.acl_edit} />
</CollapsibleParagraph>
);
}
if(this.state.piece && this.state.piece.id) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
if (piece.id) {
setDocumentTitle(`${piece.artist_name}, ${piece.title}`);
return (
<WalletPieceContainer
piece={this.state.piece}
piece={piece}
currentUser={this.state.currentUser}
loadPiece={this.loadPiece}
handleDeleteSuccess={this.handleDeleteSuccess}
@ -135,8 +134,7 @@ let IkonotvPieceContainer = React.createClass({
{furtherDetails}
</WalletPieceContainer>
);
}
else {
} else {
return (
<div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' />

61
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({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -35,8 +34,8 @@ let IkonotvArtistDetailsForm = React.createClass({
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -53,21 +52,23 @@ let IkonotvArtistDetailsForm = React.createClass({
},
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);
},
render() {
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
const { disabled, isInline, handleSuccess, piece } = this.props;
if(!isInline) {
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
disabled={disabled}>
{getLangText('Proceed to loan')}
</button>
);
@ -75,7 +76,7 @@ let IkonotvArtistDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</div>
);
@ -89,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 (
<Form
disabled={this.props.disabled}
disabled={disabled}
className="ascribe-form-bordered"
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}
getFormData={this.getFormData}
buttons={buttons}
@ -104,39 +107,41 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='artist_website'
label={getLangText('Artist Website')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
expanded={!disabled || !!extraData.artist_website}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.artist_website}
placeholder={getLangText('The artist\'s website if present...')}/>
convertLinks
defaultValue={extraData.artist_website}
placeholder={getLangText('The artist\'s website if present...')} />
</Property>
<Property
name='gallery_website'
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
rows={1}
defaultValue={this.props.piece.extra_data.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')}/>
convertLinks
defaultValue={extraData.gallery_website}
placeholder={getLangText('The website of any related Gallery or Museum')} />
</Property>
<Property
name='additional_websites'
label={getLangText('Additional Websites/Publications/Museums/Galleries')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
expanded={!disabled || !!extraData.additional_websites}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')}/>
convertLinks
defaultValue={extraData.additional_websites}
placeholder={getLangText('Enter additional Websites/Publications if any')} />
</Property>
<Property
name='conceptual_overview'
label={getLangText('Short text about the Artist')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
expanded={!disabled || !!extraData.conceptual_overview}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')}
/>
defaultValue={extraData.conceptual_overview}
placeholder={getLangText('Enter a short bio about the Artist')} />
</Property>
</Form>
);
@ -150,4 +155,4 @@ let IkonotvArtistDetailsForm = React.createClass({
}
});
export default IkonotvArtistDetailsForm;
export default IkonotvArtistDetailsForm;

68
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({
propTypes: {
handleSuccess: React.PropTypes.func,
piece: React.PropTypes.object.isRequired,
disabled: React.PropTypes.bool,
handleSuccess: React.PropTypes.func,
isInline: React.PropTypes.bool
},
@ -35,8 +34,8 @@ let IkonotvArtworkDetailsForm = React.createClass({
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
const extradata = {};
const formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
@ -53,20 +52,23 @@ let IkonotvArtworkDetailsForm = React.createClass({
},
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);
},
render() {
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
const { disabled, isInline, handleSuccess, piece } = this.props;
if(!isInline) {
let buttons;
let spinner;
let heading;
if (!isInline) {
buttons = (
<button
type="submit"
className="btn btn-default btn-wide"
disabled={this.props.disabled}>
disabled={disabled}>
{getLangText('Proceed to artist details')}
</button>
);
@ -74,7 +76,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
spinner = (
<div className="modal-footer">
<p className="pull-right">
<AscribeSpinner color='dark-blue' size='md'/>
<AscribeSpinner color='dark-blue' size='md' />
</p>
</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 (
<Form
disabled={this.props.disabled}
disabled={disabled}
className="ascribe-form-bordered"
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}
getFormData={this.getFormData}
buttons={buttons}
@ -103,56 +107,56 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='medium'
label={getLangText('Medium')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
expanded={!disabled || !!extraData.medium}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')}/>
defaultValue={extraData.medium}
placeholder={getLangText('The medium of the file (i.e. photo, video, other, ...)')} />
</Property>
<Property
name='size_duration'
label={getLangText('Size/Duration')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
expanded={!disabled || !!extraData.size_duration}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')}/>
defaultValue={extraData.size_duration}
placeholder={getLangText('Size in centimeters. Duration in minutes.')} />
</Property>
<Property
name='copyright'
label={getLangText('Copyright')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
expanded={!disabled || !!extraData.copyright}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.copyright}
placeholder={getLangText('Which copyright is attached to this work?')}/>
defaultValue={extraData.copyright}
placeholder={getLangText('Which copyright is attached to this work?')} />
</Property>
<Property
name='courtesy_of'
label={getLangText('Courtesy of')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
expanded={!disabled || !!extraData.courtesy_of}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of}
placeholder={getLangText('The current owner of the artwork')}/>
defaultValue={extraData.courtesy_of}
placeholder={getLangText('The current owner of the artwork')} />
</Property>
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')}/>
defaultValue={extraData.copyright_of_photography}
placeholder={getLangText('Who should be attributed for the photography?')} />
</Property>
<Property
name='additional_details'
label={getLangText('Additional Details about the artwork')}
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
expanded={!disabled || !!extraData.additional_details}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.piece.extra_data.additional_details}
placeholder={getLangText('Insert artwork overview')}/>
defaultValue={extraData.additional_details}
placeholder={getLangText('Insert artwork overview')} />
</Property>
</Form>
);
@ -166,4 +170,4 @@ let IkonotvArtworkDetailsForm = React.createClass({
}
});
export default IkonotvArtworkDetailsForm;
export default IkonotvArtworkDetailsForm;

21
js/components/whitelabel/wallet/components/ikonotv/ikonotv_piece_list.js
View File

@ -1,15 +1,18 @@
'use strict';
import React from 'react';
import PieceList from '../../../../piece_list';
import UserActions from '../../../../../actions/user_actions';
import UserStore from '../../../../../stores/user_store';
import NotificationStore from '../../../../../stores/notification_store';
import IkonotvAccordionListItem from './ikonotv_accordion_list/ikonotv_accordion_list_item';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
let IkonotvPieceList = React.createClass({
@ -18,20 +21,33 @@ let IkonotvPieceList = React.createClass({
},
getInitialState() {
return UserStore.getState();
return mergeOptions(
NotificationStore.getState(),
UserStore.getState()
);
},
componentDidMount() {
NotificationStore.listen(this.onChange);
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
NotificationStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
redirectIfNoContractNotifications() {
const { contractAgreementListNotifications } = this.state;
return contractAgreementListNotifications && !contractAgreementListNotifications.length;
},
render() {
@ -41,6 +57,7 @@ let IkonotvPieceList = React.createClass({
<div>
<PieceList
redirectTo="/register_piece?slide_num=0"
shouldRedirect={this.redirectIfNoContractNotifications}
accordionListItemType={IkonotvAccordionListItem}
filterParams={[{
label: getLangText('Show works I have'),

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

@ -49,7 +49,7 @@ let IkonotvRegisterPiece = React.createClass({
return mergeOptions(
UserStore.getState(),
PieceListStore.getState(),
PieceStore.getState(),
PieceStore.getInitialState(),
WhitelabelStore.getState(),
{
step: 0,
@ -65,11 +65,7 @@ let IkonotvRegisterPiece = React.createClass({
UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
// Before we load the new piece, we reset the piece store to delete old data that we do
// not want to display to the user.
PieceActions.updatePiece({});
let queryParams = this.props.location.query;
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.
@ -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 don't care about the value.
if (queryParams && 'piece_id' in queryParams) {
PieceActions.fetchOne(queryParams.piece_id);
if ('piece_id' in queryParams) {
PieceActions.fetchPiece(queryParams.piece_id);
}
},
@ -95,72 +91,62 @@ let IkonotvRegisterPiece = React.createClass({
},
handleRegisterSuccess(response){
handleRegisterSuccess(response) {
this.refreshPieceList();
// also start loading the piece for the next step
if(response && response.piece) {
// Also load the newly registered piece for the next step
if (response && response.piece) {
PieceActions.updatePiece(response.piece);
}
if (!this.canSubmit()) {
this.history.pushState(null, '/collection');
}
else {
this.incrementStep();
this.refs.slidesContainer.nextSlide();
this.history.push('/collection');
} else {
this.nextSlide({ piece_id: response.piece.id });
}
},
handleAdditionalDataSuccess() {
// 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
// on the browsers back button.
PieceActions.fetchOne(this.state.piece.id);
PieceActions.fetchPiece(this.state.piece.id);
this.refreshPieceList();
this.incrementStep();
this.refs.slidesContainer.nextSlide();
this.nextSlide();
},
handleLoanSuccess(response) {
this.setState({ pageExitWarning: null });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id);
this.history.pushState(null, `/pieces/${this.state.piece.id}`);
this.history.push(`/pieces/${this.state.piece.id}`);
},
// 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;
nextSlide(queryParams) {
// We need to increase the step to lock the forms that are already filled out
this.setState({
step: newStep
step: this.state.step + 1
});
this.refs.slidesContainer.nextSlide(queryParams);
},
refreshPieceList() {
PieceListActions.fetchPieceList(
this.state.page,
this.state.pageSize,
this.state.searchTerm,
this.state.orderBy,
this.state.orderAsc,
this.state.filterBy
);
const { filterBy, orderAsc, orderBy, page, pageSize, search } = this.state;
PieceListActions.fetchPieceList({ page, pageSize, search, orderBy, orderAsc, filterBy });
},
canSubmit() {
let currentUser = this.state.currentUser;
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() {
@ -171,13 +157,14 @@ let IkonotvRegisterPiece = React.createClass({
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<IkonotvArtistDetailsForm
handleSuccess={this.handleAdditionalDataSuccess}
piece={this.state.piece}/>
piece={this.state.piece} />
</Col>
</Row>
</div>
);
} else {
return null;
}
return null;
},
getSlideArtworkDetails() {
@ -188,21 +175,21 @@ let IkonotvRegisterPiece = React.createClass({
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<IkonotvArtworkDetailsForm
handleSuccess={this.handleAdditionalDataSuccess}
piece={this.state.piece}/>
piece={this.state.piece} />
</Col>
</Row>
</div>
);
} else {
return null;
}
return null;
},
getSlideLoan() {
if (this.canSubmit()) {
const { piece, whitelabel } = this.state;
let today = new Moment();
let endDate = new Moment();
endDate.add(2, 'years');
const today = new Moment();
const endDate = new Moment().add(2, 'years');
return (
<div data-slide-title={getLangText('Loan')}>
@ -225,8 +212,9 @@ let IkonotvRegisterPiece = React.createClass({
</Row>
</div>
);
} else {
return null;
}
return null;
},
render() {
@ -252,7 +240,7 @@ let IkonotvRegisterPiece = React.createClass({
submitMessage={getLangText('Register')}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
location={this.props.location}/>
location={this.props.location} />
</Col>
</Row>
</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() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
UserActions.fetchCurrentUser.defer();
},
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 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 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 AclProxy from '../../../../../acl_proxy';
import PieceActions from '../../../../../../actions/piece_actions';
import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../../stores/whitelabel_store';
import AscribeSpinner from '../../../../../ascribe_spinner';
import ApiUrls from '../../../../../../constants/api_urls';
@ -26,8 +28,9 @@ let MarketSubmitButton = React.createClass({
availableAcls: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object,
editions: React.PropTypes.array.isRequired,
handleSuccess: React.PropTypes.func.isRequired,
className: React.PropTypes.string,
handleSuccess: React.PropTypes.func
},
getInitialState() {
@ -50,22 +53,21 @@ let MarketSubmitButton = React.createClass({
canEditionBeSubmitted(edition) {
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 &&
extra_data.technology_details && extra_data.display_instructions &&
other_data.length > 0) {
return true;
}
return artistBio && displayInstructions && technologyDetails && workDescription && otherData.length;
}
return false;
},
getFormDataId() {
return getAclFormDataId(false, this.props.editions);
},
getAggregateEditionDetails() {
const { editions } = this.props;
@ -82,13 +84,20 @@ let MarketSubmitButton = React.createClass({
});
},
handleAdditionalDataSuccess(pieceId) {
// Fetch newly updated piece to update the views
PieceActions.fetchOne(pieceId);
getFormDataId() {
return getAclFormDataId(false, this.props.editions);
},
handleAdditionalDataSuccess() {
this.refs.consignModal.show();
},
refreshEdition() {
if (this.props.editions.length === 1) {
EditionActions.fetchEdition(this.props.editions[0].bitcoin_id);
}
},
render() {
const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
@ -101,6 +110,10 @@ let MarketSubmitButton = React.createClass({
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 = (
<button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
{getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
@ -126,16 +139,25 @@ let MarketSubmitButton = React.createClass({
aclName='acl_consign'>
<ModalWrapper
trigger={triggerButton}
handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
handleSuccess={this.handleAdditionalDataSuccess}
title={getLangText('Add additional information')}>
<MarketAdditionalDataForm
extraData={extraData}
otherData={otherData}
pieceId={solePieceId}
submitLabel={getLangText('Continue to consignment')} />
</ModalWrapper>
<ModalWrapper
ref="consignModal"
handleSuccess={handleSuccess}
handleCancel={this.refreshEdition}
handleSuccess={(...params) => {
if (typeof handleSuccess === 'function') {
handleSuccess(...params);
}
this.refreshEdition();
}}
title={getLangText('Consign artwork')}>
{consignForm}
</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({
propTypes: {
pieceId: React.PropTypes.number,
pieceId: React.PropTypes.number.isRequired,
editable: React.PropTypes.bool,
extraData: React.PropTypes.object,
handleSuccess: React.PropTypes.func,
otherData: React.PropTypes.arrayOf(React.PropTypes.object)
},
render() {

Some files were not shown because too many files have changed in this diff Show More