ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-26 03:06:28 +02:00
Code Issues Releases Wiki Activity

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2016-01-11 11:36:50 +01:00
commit 455232049d
67 changed files with 924 additions and 531 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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>
);

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>

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

@ -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';
@ -57,16 +57,16 @@ let Edition = React.createClass({
return (
<Row>
<Col md={6}>
<Col md={6} className="ascribe-print-col-left">
<MediaContainer
content={this.props.edition}/>
</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}}/>
<hr className="hidden-print" 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()} />
<DetailProperty label="BY" value={this.props.edition.artist_name} />
<DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
<hr/>
</div>
<EditionSummary
@ -169,10 +169,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 +183,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 +201,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>
@ -225,61 +226,67 @@ let CoaDetails = React.createClass({
},
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}`), this.props.coaError);
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 +298,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 (

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

@ -72,10 +72,10 @@ 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() {
@ -84,7 +84,7 @@ let EditionActionPanel = React.createClass({
EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
},
handleSuccess(response){
handleSuccess(response) {
this.refreshCollection();
this.props.handleSuccess();
if (response){
@ -93,7 +93,7 @@ let EditionActionPanel = React.createClass({
}
},
render(){
render() {
const {
actionPanelButtonListType: ActionPanelButtonListType,
edition,

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

@ -20,6 +20,7 @@ let FurtherDetailsFileuploader = React.createClass({
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
setIsUploadReady: React.PropTypes.func,
submitFile: React.PropTypes.func,
onValidationFailed: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func,
editable: React.PropTypes.bool,
multiple: React.PropTypes.bool
@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
}}
validation={AppConstants.fineUploader.validation.additionalData}
submitFile={this.props.submitFile}
onValidationFailed={this.props.onValidationFailed}
setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{

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) {

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

@ -114,7 +114,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

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

@ -34,12 +34,12 @@ let Piece = React.createClass({
render() {
return (
<Row>
<Col md={6}>
<Col md={6} className="ascribe-print-col-left">
<MediaContainer
refreshObject={this.updateObject}
content={this.props.piece}/>
</Col>
<Col md={6} className="ascribe-edition-details">
<Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header}
{this.props.subheader}
{this.props.buttons}

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

@ -159,7 +159,7 @@ let PieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
getCreateEditionsDialog() {
@ -219,7 +219,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}
@ -257,7 +259,7 @@ let PieceContainer = React.createClass({
loadPiece={this.loadPiece}
header={
<div className="ascribe-detail-header">
<hr style={{marginTop: 0}}/>
<hr className="hidden-print" 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() } />

6
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});
},

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

@ -109,6 +109,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;
@ -194,14 +199,15 @@ 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,
itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}}
setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')}

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() {

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

@ -52,6 +52,7 @@ const InputFineUploader = React.createClass({
plural: string
}),
handleChangedFile: func,
onValidationFailed: func,
// Provided by `Property`
onChange: React.PropTypes.func
@ -107,6 +108,7 @@ const InputFineUploader = React.createClass({
isFineUploaderActive,
isReadyForFormSubmission,
keyRoutine,
onValidationFailed,
setIsUploadReady,
uploadMethod,
validation,
@ -127,6 +129,7 @@ const InputFineUploader = React.createClass({
createBlobRoutine={createBlobRoutine}
validation={validation}
submitFile={this.submitFile}
onValidationFailed={onValidationFailed}
setIsUploadReady={setIsUploadReady}
isReadyForFormSubmission={isReadyForFormSubmission}
areAssetsDownloadable={areAssetsDownloadable}

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

@ -46,7 +46,13 @@ let ModalWrapper = React.createClass({
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
handleSuccess: this.handleSuccess
handleSuccess: (response) => {
if (typeof child.props.handleSuccess === 'function') {
child.props.handleSuccess(response);
}
this.handleSuccess(response);
}
});
});
},

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"

116
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,60 +81,64 @@ 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 key={label}>
<li style={{'textAlign': 'center'}}>
<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((param, j) => {
// 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 param !== 'string') {
label = param.label;
param = param.key;
} else {
param = param;
label = param.split('acl_')[1].replace(/_/g, ' ');
}
return (
<li
key={param}
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={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>
);
} else {
return null;
}
}
});

64
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,36 +51,40 @@ 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 key={param}>
<li
onClick={this.orderBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(param.replace('_', ' '))}
</span>
<input
readOnly
type="radio"
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>
</div>
);
})}
</DropdownButton>
);
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 (
<div key={param}>
<li
onClick={this.orderBy(param)}
className="filter-widget-item">
<div className="checkbox-line">
<span>
{getLangText(param.replace('_', ' '))}
</span>
<input
readOnly
type="radio"
checked={param.indexOf(this.props.orderBy) > -1} />
</div>
</li>
</div>
);
})}
</DropdownButton>
);
} else {
return null;
}
}
});

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) {

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;

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}>

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

@ -50,6 +50,7 @@ const ReactS3FineUploader = React.createClass({
}),
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({
@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({
},
isFileValid(file) {
if(file.size > this.props.validation.sizeLimit) {
if (file.size > this.props.validation.sizeLimit) {
const fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
let fileSizeInMegaBytes = this.props.validation.sizeLimit / 1000000;
let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof this.props.onValidationFailed === 'function') {
this.props.onValidationFailed(file);
}
return false;
} else {
return true;

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> |

6
js/components/header.js
View File

@ -219,10 +219,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 +238,9 @@ let Header = React.createClass({
{navRoutesLinks}
</CollapsibleNav>
</Navbar>
<p className="ascribe-print-header visible-print">
<span className="icon-ascribe-logo" />
</p>
</div>
);
}

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);
},

21
js/components/piece_list.js
View File

@ -115,13 +115,13 @@ let PieceList = React.createClass({
},
componentDidUpdate() {
const { redirectTo, shouldRedirect } = this.props;
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);
}
},
@ -174,15 +174,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
});
@ -207,7 +208,7 @@ let PieceList = React.createClass({
// 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) {

4
js/components/register_piece.js
View File

@ -66,7 +66,7 @@ let RegisterPiece = React.createClass( {
},
handleSuccess(response){
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
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
@ -80,7 +80,7 @@ let RegisterPiece = React.createClass( {
this.state.filterBy
);
this.history.pushState(null, `/pieces/${response.piece.id}`);
this.history.push(`/pieces/${response.piece.id}`);
},
getSpecifyEditions() {

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

@ -19,8 +19,10 @@ import ApiUrls from '../../../../../../constants/api_urls';
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 +37,7 @@ const PRRegisterPieceForm = React.createClass({
mixins: [History],
getInitialState(){
getInitialState() {
return {
digitalWorkKeyReady: true,
thumbnailKeyReady: true,
@ -54,16 +56,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 +106,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 +128,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 +145,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 +157,14 @@ const PRRegisterPieceForm = React.createClass({
};
},
handleOptionalFileValidationFailed(uploaderKey) {
return () => {
this.setState({
[uploaderKey]: true
});
};
},
getSubmitButton() {
const { digitalWorkKeyReady,
thumbnailKeyReady,
@ -303,7 +317,7 @@ const PRRegisterPieceForm = React.createClass({
</Property>
<Property
name="thumbnailKey"
label={getLangText('Featured Cover photo')}>
label={getLangText('Featured Cover photo (max 5MB)')}>
<InputFineuploader
fileInputElement={UploadButton()}
createBlobRoutine={{
@ -316,8 +330,8 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'thumbnail'
}}
validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit,
itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}}
location={location}
@ -334,6 +348,7 @@ 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/',

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);

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

@ -171,23 +171,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>
);

244
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,39 +51,41 @@ 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(),
UserStore.getState()
);
//FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
// It should instead use something like getInitialState() where that call also resets the state.
return UserStore.getState();
},
componentWillMount() {
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
},
componentDidMount() {
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)
componentWillReceiveProps(nextProps) {
if(this.props.params.pieceId !== nextProps.params.pieceId) {
if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({});
PieceActions.fetchOne(nextProps.params.pieceId);
this.loadPiece(nextProps.params.pieceId);
}
},
@ -101,26 +102,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 && 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.fetchOne(pieceId);
},
render() {
if(this.state.piece && this.state.piece.id) {
const { selectedPrizeActionButton } = this.props;
const { currentUser, piece } = this.state;
if (piece && piece.id) {
/*
This really needs a refactor!
@ -129,37 +136,32 @@ 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].join(', '));
}
// 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/>
@ -168,10 +170,11 @@ let PieceContainer = React.createClass({
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 {
@ -225,31 +228,31 @@ let PrizePieceRatings = React.createClass({
propTypes: {
loadPiece: React.PropTypes.func,
piece: React.PropTypes.object,
currentUser: React.PropTypes.object
currentUser: React.PropTypes.object,
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);
PieceListStore.listen(this.onChange);
PrizeStore.listen(this.onChange);
PrizeRatingStore.listen(this.onChange);
PrizeActions.fetchPrize();
this.fetchPrizeRatings();
},
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 +260,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.fetchPrizeRatings(state);
}
this.setState(state);
if (this.refs.rating) {
this.refs.rating.state.ratingCache = {
pos: this.refs.rating.state.pos,
@ -268,50 +276,30 @@ let PrizePieceRatings = React.createClass({
}
},
fetchPrizeRatings(state = this.state) {
PrizeRatingActions.fetchOne(this.props.piece.id, state.prize.active_round);
PrizeRatingActions.fetchAverage(this.props.piece.id, state.prize.active_round);
},
onRatingClick(event, args) {
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() {
@ -321,20 +309,19 @@ let PrizePieceRatings = React.createClass({
},
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(){
render() {
if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
// Judge sees shortlisting, average and per-jury notes
return (
@ -352,9 +339,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>
@ -373,13 +358,19 @@ let PrizePieceRatings = React.createClass({
</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}
@ -399,8 +390,7 @@ let PrizePieceRatings = React.createClass({
<hr />
</CollapsibleParagraph>
</div>);
}
else if (this.props.currentUser && this.props.currentUser.is_jury) {
} else if (this.props.currentUser && this.props.currentUser.is_jury) {
// Jury can set rating and note
return (
<CollapsibleParagraph
@ -427,8 +417,9 @@ let PrizePieceRatings = React.createClass({
url={ApiUrls.notes}
currentUser={this.props.currentUser}/>
</CollapsibleParagraph>);
} else {
return null;
}
return null;
}
});
@ -457,6 +448,7 @@ let PrizePieceDetails = React.createClass({
return (
<Property
key={label}
name={data}
label={label}
editable={false}
@ -484,4 +476,4 @@ let PrizePieceDetails = React.createClass({
}
});
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);
}
},

5
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>

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) {

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

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

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;

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

@ -25,12 +25,16 @@ 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) {
if (this.props.piece && this.props.piece.id) {
return (
<Piece
piece={this.props.piece}
@ -45,12 +49,12 @@ let WalletPieceContainer = React.createClass({
</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={ this.props.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} />
<hr/>
</div>
}>
<WalletActionPanel
piece={this.props.piece}
currentUser={this.props.currentUser}
@ -76,12 +80,10 @@ let WalletPieceContainer = React.createClass({
url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/>
</CollapsibleParagraph>
{this.props.children}
</Piece>
);
}
else {
} else {
return (
<div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' />

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

@ -85,7 +85,7 @@ let CylandPieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
render() {

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);
}
},

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

@ -129,7 +129,7 @@ let CylandRegisterPiece = React.createClass({
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

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

@ -119,7 +119,7 @@ let IkonotvContractNotifications = React.createClass({
NotificationActions.flushContractAgreementListNotifications();
NotificationActions.fetchContractAgreementListNotifications();
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
handleDeny() {
@ -132,7 +132,7 @@ let IkonotvContractNotifications = React.createClass({
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(){

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

@ -94,7 +94,7 @@ let IkonotvPieceContainer = React.createClass({
let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
render() {

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

@ -60,9 +60,8 @@ let IkonotvArtistDetailsForm = React.createClass({
render() {
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
if(!isInline) {
if (!isInline) {
buttons = (
<button
type="submit"
@ -89,7 +88,7 @@ let IkonotvArtistDetailsForm = React.createClass({
);
}
if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
return (
<Form
disabled={this.props.disabled}
@ -150,4 +149,4 @@ let IkonotvArtistDetailsForm = React.createClass({
}
});
export default IkonotvArtistDetailsForm;
export default IkonotvArtistDetailsForm;

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

@ -61,7 +61,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props;
if(!isInline) {
if (!isInline) {
buttons = (
<button
type="submit"
@ -88,7 +88,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
);
}
if(this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
if (this.props.piece && this.props.piece.id && this.props.piece.extra_data) {
return (
<Form
disabled={this.props.disabled}
@ -166,4 +166,4 @@ let IkonotvArtworkDetailsForm = React.createClass({
}
});
export default IkonotvArtworkDetailsForm;
export default IkonotvArtworkDetailsForm;

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

@ -103,7 +103,7 @@ let IkonotvRegisterPiece = React.createClass({
PieceActions.updatePiece(response.piece);
}
if (!this.canSubmit()) {
this.history.pushState(null, '/collection');
this.history.push('/collection');
}
else {
this.incrementStep();
@ -134,7 +134,7 @@ let IkonotvRegisterPiece = React.createClass({
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

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

@ -82,7 +82,7 @@ let MarketRegisterPiece = React.createClass({
handleAdditionalDataSuccess() {
this.refreshPieceList();
this.history.pushState(null, '/collection');
this.history.push('/collection');
},
// We need to increase the step to lock the forms that are already filled out

4
js/constants/application_constants.js
View File

@ -91,6 +91,10 @@ const constants = {
'registerWork': {
'itemLimit': 1,
'sizeLimit': '25000000000'
},
'workThumbnail': {
'itemLimit': 1,
'sizeLimit': '5000000'
}
}
},

3
js/history.js
View File

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

4
js/third_party/notifications.js vendored
View File

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

28
js/utils/error_utils.js
View File

@ -35,3 +35,31 @@ export function initLogging() {
console.logGlobal = logGlobal;
}
/*
* Gets the json errors from the error as an array
* @param {Error} error A Javascript error
* @return {Array} List of json errors
*/
export function getJsonErrorsAsArray(error) {
const { json: { errors = {} } = {} } = error;
const errorArrays = Object
.keys(errors)
.map((errorKey) => {
return errors[errorKey];
});
// Collapse each errorKey's errors into a flat array
return [].concat(...errorArrays);
}
/*
* Tries to get an error message from the error, either by using its notification
* property or first json error (if any)
* @param {Error} error A Javascript error
* @return {string} Error message string
*/
export function getErrorNotificationMessage(error) {
return (error && error.notification) || getJsonErrorsAsArray(error)[0] || '';
}

26
js/utils/form_utils.js
View File

@ -2,8 +2,34 @@
import { getLangText } from './lang_utils';
import GlobalNotificationActions from '../actions/global_notification_actions';
import GlobalNotificationModel from '../models/global_notification_model';
import AppConstants from '../constants/application_constants';
/**
* Validates a given list of forms
* @param {Form} forms List of forms, each of which should have a `validate` method available
* @param {boolean} showFailureNotification Show global notification if there are validation failures
* @return {boolean} True if validation did *NOT* catch any errors
*/
export function validateForms(forms, showFailureNotification) {
const validationSuccessful = forms.reduce((result, form) => {
if (form && typeof form.validate === 'function') {
return form.validate() && result;
} else {
throw new Error('Form given for validation does not have a `validate` method');
}
}, true);
if (!validationSuccessful && showFailureNotification) {
const notification = new GlobalNotificationModel(getLangText('Oops, there may be missing or invalid fields. Please check your inputs again.'), 'danger');
GlobalNotificationActions.appendGlobalNotification(notification);
}
return validationSuccessful;
}
/**
* Get the data ids of the given piece or editions.
* @param {boolean} isPiece Is the given entities parameter a piece? (False: array of editions)

6
js/utils/general_utils.js
View File

@ -84,8 +84,6 @@ export function formatText() {
* Checks a list of objects for key duplicates and returns a boolean
*/
function _doesObjectListHaveDuplicates(l) {
let mergedList = [];
l = l.map((obj) => {
if(!obj) {
throw new Error('The object you are trying to merge is null instead of an empty object');
@ -94,11 +92,11 @@ function _doesObjectListHaveDuplicates(l) {
return Object.keys(obj);
});
// Taken from: http://stackoverflow.com/a/10865042
// Taken from: http://stackoverflow.com/a/10865042 (but even better with rest)
// How to flatten an array of arrays in javascript.
// If two objects contain the same key, then these two keys
// will actually be represented in the merged array
mergedList = mergedList.concat.apply(mergedList, l);
let mergedList = [].concat(...l);
// Taken from: http://stackoverflow.com/a/7376645/1263876
// By casting the array to a set, and then checking if the size of the array

11
js/utils/url_utils.js
View File

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

7
package.json
View File

@ -35,6 +35,7 @@
"devDependencies": {
"babel-eslint": "^3.1.11",
"babel-jest": "^5.2.0",
"gulp-sass": "^2.1.1",
"jest-cli": "^0.4.0"
},
"dependencies": {
@ -66,7 +67,7 @@
"gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4",
"harmonize": "^1.4.2",
"history": "^1.13.1",
"history": "1.17.0",
"invariant": "^2.1.1",
"isomorphic-fetch": "^2.0.2",
"jest-cli": "^0.4.0",
@ -75,12 +76,12 @@
"object-assign": "^2.0.0",
"opn": "^3.0.2",
"q": "^1.4.1",
"qs": "^4.0.0",
"query-string": "^3.0.0",
"raven-js": "^1.1.19",
"react": "0.13.2",
"react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0",
"react-router": "1.0.0",
"react-router": "1.0.3",
"react-router-bootstrap": "^0.19.0",
"react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2",

1
sass/ascribe_footer.scss
View File

@ -1,4 +1,3 @@
.ascribe-footer {
text-align: center;
margin-top: 5em;

118
sass/ascribe_print.scss Normal file
View File

@ -0,0 +1,118 @@
@media print {
@page {
margin: 1.2cm;
}
.ascribe-default-app {
padding: 0 !important;
}
// Utility class to not automatically expand an anchor href after the text
.anchor-no-expand-print:after {
content: '' !important;
}
// Replace navbar header with ascribe logo
.ascribe-print-header {
border-bottom: 1px solid rgba(0, 60, 105, 0.1);
font-size: 1.2em;
margin: 0.5em 0;
text-align: center;
}
// Force left and right columns
.ascribe-print-col-left {
width: 50% !important;
float: left !important;
}
.ascribe-print-col-right {
width: 50% !important;
float: right !important;
}
// Restyle file uploader dialogs
.file-drag-and-drop {
padding-top: 0;
outline-width: 0;
text-align: left;
}
.file-drag-and-drop-position {
margin: 0;
}
// Restyle COA
.ascribe-coa-print-placeholder {
padding: 0 1.5em 1em 1.5em;
margin: 0;
}
// Force collapsible properties to be expanded
.ascribe-collapsible-content .collapse {
display: block;
}
// Decrease property spacing
.ascribe-property-wrapper {
padding-bottom: 0.5em;
}
.ascribe-property {
padding-top: 0.5em;
> div,
> input,
> p,
> pre,
> select,
> span:not(.glyphicon),
> textarea {
margin: 0;
}
}
.ascribe-collapsible-wrapper {
margin-bottom: 5px;
> div:first-child {
margin-top: 0;
padding-bottom: 5px;
}
}
.ascribe-form hr {
margin-bottom: 3px;
}
// Hide placeholder text
input::-webkit-input-placeholder {
opacity: 0;
}
textarea::-webkit-input-placeholder {
opacity: 0;
}
/* firefox 18- */
input:-moz-placeholder {
opacity: 0;
}
textarea:-moz-placeholder {
opacity: 0;
}
/* firefox 19+ */
input::-moz-placeholder {
opacity: 0;
}
textarea::-moz-placeholder {
opacity: 0;
}
/* ie */
input:-ms-input-placeholder {
opacity: 0;
}
textarea:-ms-input-placeholder {
opacity: 0;
}
}

17
sass/ascribe_uploader.scss
View File

@ -28,9 +28,9 @@
}
.file-drag-and-drop-dialog {
margin: 1.5em 0 1.5em 0;
> p:first-child {
margin: 0 0 1.5em 0;
.file-drag-and-drop-dialog-title {
font-size: 1.5em !important;
margin-bottom: 0;
margin-top: 0;
@ -47,14 +47,6 @@
margin: 1.5em 0 0 0;
}
.file-drag-and-drop .file-drag-and-drop-dialog > p:first-child {
font-size: 1.5em !important;
margin-top: 0;
margin-bottom: 0;
padding-bottom: 0;
}
.file-drag-and-drop-position {
display: inline-block;
margin-left: .7em;
@ -138,6 +130,7 @@
text-align: center;
width: 104px;
// REFACTOR TO USE TABLE CELL
.action-file, .spinner-file, .icon-ascribe-ok {
margin-top: 1em;
line-height: 1.3;
@ -200,4 +193,4 @@
span + .btn {
margin-left: 1em;
}
}
}

8
sass/main.scss
View File

@ -44,6 +44,8 @@ $BASE_URL: '<%= BASE_URL %>';
@import 'whitelabel/index';
@import 'ascribe_print';
html,
body {
@ -106,6 +108,12 @@ hr {
color: $ascribe-dark-blue;
}
.add-overflow-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ascribe-subheader {
padding-bottom: 10px;
margin-top: -10px;

6
sass/whitelabel/prize/index.scss
View File

@ -7,3 +7,9 @@
padding-top: 70px;
padding-bottom: 10px;
}
@media print {
.ascribe-prize-app {
padding: 0 !important;
}
}

6
sass/whitelabel/wallet/index.scss
View File

@ -9,3 +9,9 @@
padding-top: 70px;
padding-bottom: 10px;
}
@media print {
.ascribe-wallet-app {
padding: 0 !important;
}
}