ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 16:48:04 +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({ let AccordionListItemPiece = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string, className: React.PropTypes.string,
artistName: React.PropTypes.string, artistName: React.PropTypes.oneOfType([
piece: React.PropTypes.object, React.PropTypes.string,
React.PropTypes.element
]),
piece: React.PropTypes.object.isRequired,
children: React.PropTypes.oneOfType([ children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element), React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element React.PropTypes.element
@ -51,17 +54,21 @@ let AccordionListItemPiece = React.createClass({
piece, piece,
subsubheading, subsubheading,
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props; 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; let thumbnail;
// Since we're going to refactor the thumbnail generation anyway at one point, // 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 // 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. // 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 />); thumbnail = (<ThumbnailPlaceholder />);
} else { } else {
thumbnail = ( thumbnail = (
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/> <div style={{backgroundImage: 'url("' + thumbnailDisplayUrl + '")'}} />
); );
} }
@ -79,8 +86,7 @@ let AccordionListItemPiece = React.createClass({
subsubheading={subsubheading} subsubheading={subsubheading}
buttons={buttons} buttons={buttons}
badge={badge} badge={badge}
linkData={this.getLinkData()} linkData={this.getLinkData()}>
>
{children} {children}
</AccordionListItem> </AccordionListItem>
); );

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

@ -1,9 +1,10 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classNames from 'classnames';
let DetailProperty = React.createClass({ const DetailProperty = React.createClass({
propTypes: { propTypes: {
label: React.PropTypes.string, label: React.PropTypes.string,
value: React.PropTypes.oneOfType([ value: React.PropTypes.oneOfType([
@ -12,6 +13,7 @@ let DetailProperty = React.createClass({
React.PropTypes.element React.PropTypes.element
]), ]),
separator: React.PropTypes.string, separator: React.PropTypes.string,
className: React.PropTypes.string,
labelClassName: React.PropTypes.string, labelClassName: React.PropTypes.string,
valueClassName: React.PropTypes.string, valueClassName: React.PropTypes.string,
ellipsis: React.PropTypes.bool, ellipsis: React.PropTypes.bool,
@ -30,31 +32,23 @@ let DetailProperty = React.createClass({
}, },
render() { render() {
let styles = {}; const {
const { labelClassName, children,
label, className,
separator, ellipsis,
valueClassName, label,
children, labelClassName,
value } = this.props; separator,
valueClassName,
if(this.props.ellipsis) { value } = this.props;
styles = {
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis'
};
}
return ( return (
<div className="row ascribe-detail-property"> <div className={classNames('row ascribe-detail-property', className)}>
<div className="row-same-height"> <div className="row-same-height">
<div className={labelClassName}> <div className={labelClassName}>
{label} {separator} {label} {separator}
</div> </div>
<div <div className={classNames(valueClassName, {'add-overflow-ellipsis': ellipsis})}>
className={valueClassName}
style={styles}>
{children || value} {children || value}
</div> </div>
</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 Form from './../ascribe_forms/form';
import Property from './../ascribe_forms/property'; import Property from './../ascribe_forms/property';
import EditionDetailProperty from './detail_property'; import DetailProperty from './detail_property';
import LicenseDetail from './license_detail'; import LicenseDetail from './license_detail';
import FurtherDetails from './further_details'; import FurtherDetails from './further_details';
@ -57,16 +57,16 @@ let Edition = React.createClass({
return ( return (
<Row> <Row>
<Col md={6}> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
content={this.props.edition}/> content={this.props.edition}/>
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
<div className="ascribe-detail-header"> <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> <h1 className="ascribe-detail-title">{this.props.edition.title}</h1>
<EditionDetailProperty label="BY" value={this.props.edition.artist_name} /> <DetailProperty label="BY" value={this.props.edition.artist_name} />
<EditionDetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} /> <DetailProperty label="DATE" value={Moment(this.props.edition.date_created, 'YYYY-MM-DD').year()} />
<hr/> <hr/>
</div> </div>
<EditionSummary <EditionSummary
@ -169,10 +169,10 @@ let EditionSummary = React.createClass({
let status = null; let status = null;
if (this.props.edition.status.length > 0){ if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' '); 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){ if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = ( 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; let { actionPanelButtonListType, edition, currentUser } = this.props;
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<EditionDetailProperty <DetailProperty
label={getLangText('EDITION')} label={getLangText('EDITION')}
value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} /> value={ edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
<EditionDetailProperty <DetailProperty
label={getLangText('ID')} label={getLangText('ID')}
value={ edition.bitcoin_id } value={ edition.bitcoin_id }
ellipsis={true} /> ellipsis={true} />
<EditionDetailProperty <DetailProperty
label={getLangText('OWNER')} label={getLangText('OWNER')}
value={ edition.owner } /> value={ edition.owner } />
<LicenseDetail license={edition.license_type}/> <LicenseDetail license={edition.license_type}/>
@ -201,14 +201,15 @@ let EditionSummary = React.createClass({
`AclInformation` would show up `AclInformation` would show up
*/} */}
<AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}> <AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
<EditionDetailProperty <DetailProperty
label={getLangText('ACTIONS')}> label={getLangText('ACTIONS')}
className="hidden-print">
<EditionActionPanel <EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType} actionPanelButtonListType={actionPanelButtonListType}
edition={edition} edition={edition}
currentUser={currentUser} currentUser={currentUser}
handleSuccess={this.handleSuccess} /> handleSuccess={this.handleSuccess} />
</EditionDetailProperty> </DetailProperty>
</AclProxy> </AclProxy>
<hr/> <hr/>
</div> </div>
@ -225,61 +226,67 @@ let CoaDetails = React.createClass({
}, },
contactOnIntercom() { contactOnIntercom() {
window.Intercom('showNewMessage', `Hi, I'm having problems generating a Certificate of Authenticity for Edition: ${this.props.editionId}`); const { coaError, editionId } = this.props;
console.logGlobal(new Error(`Coa couldn't be created for edition: ${this.props.editionId}`), this.props.coaError);
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() { render() {
if(this.props.coaError) { const { coa, coaError } = this.props;
return ( let coaDetailElement;
<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>
</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> </div>
); ];
} else if(typeof this.props.coa === 'string'){ } else if (typeof coa === 'string') {
return ( coaDetailElement = coa;
<div className="text-center"> } else {
{this.props.coa} coaDetailElement = [
</div> <AscribeSpinner color='dark-blue' size='md'/>,
); <p>{getLangText("Just a sec, we're generating your COA")}</p>,
}
return (
<div className="text-center">
<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> <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> </div>
); );
} }
@ -291,16 +298,34 @@ let SpoolDetails = React.createClass({
}, },
render() { render() {
let bitcoinIdValue = ( const { edition: {
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.bitcoin_id}>{this.props.edition.bitcoin_id}</a> 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 = ( const hashOfArtwork = (
<a target="_blank" href={'https://www.blocktrail.com/BTC/address/' + this.props.edition.hash_as_address}>{this.props.edition.hash_as_address}</a> <a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
{hashAsAddress}
</a>
); );
let ownerAddress = ( const 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> <a className="anchor-no-expand-print"
target="_blank"
href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
{bitcoinOwnerAddress}
</a>
); );
return ( return (

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

@ -72,10 +72,10 @@ let EditionActionPanel = React.createClass({
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
EditionListActions.clearAllEditionSelections(); EditionListActions.clearAllEditionSelections();
let notification = new GlobalNotificationModel(response.notification, 'success'); const notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
refreshCollection() { refreshCollection() {
@ -84,7 +84,7 @@ let EditionActionPanel = React.createClass({
EditionListActions.refreshEditionList({pieceId: this.props.edition.parent}); EditionListActions.refreshEditionList({pieceId: this.props.edition.parent});
}, },
handleSuccess(response){ handleSuccess(response) {
this.refreshCollection(); this.refreshCollection();
this.props.handleSuccess(); this.props.handleSuccess();
if (response){ if (response){
@ -93,7 +93,7 @@ let EditionActionPanel = React.createClass({
} }
}, },
render(){ render() {
const { const {
actionPanelButtonListType: ActionPanelButtonListType, actionPanelButtonListType: ActionPanelButtonListType,
edition, 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), otherData: React.PropTypes.arrayOf(React.PropTypes.object),
setIsUploadReady: React.PropTypes.func, setIsUploadReady: React.PropTypes.func,
submitFile: React.PropTypes.func, submitFile: React.PropTypes.func,
onValidationFailed: React.PropTypes.func,
isReadyForFormSubmission: React.PropTypes.func, isReadyForFormSubmission: React.PropTypes.func,
editable: React.PropTypes.bool, editable: React.PropTypes.bool,
multiple: React.PropTypes.bool multiple: React.PropTypes.bool
@ -60,6 +61,7 @@ let FurtherDetailsFileuploader = React.createClass({
}} }}
validation={AppConstants.fineUploader.validation.additionalData} validation={AppConstants.fineUploader.validation.additionalData}
submitFile={this.props.submitFile} submitFile={this.props.submitFile}
onValidationFailed={this.props.onValidationFailed}
setIsUploadReady={this.props.setIsUploadReady} setIsUploadReady={this.props.setIsUploadReady}
isReadyForFormSubmission={this.props.isReadyForFormSubmission} isReadyForFormSubmission={this.props.isReadyForFormSubmission}
session={{ session={{

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

@ -22,7 +22,11 @@ let HistoryIterator = React.createClass({
return ( return (
<span> <span>
{historicalEventDescription} {historicalEventDescription}
<a href={historicalEvent[2]} target="_blank">{contractName}</a> <a className="anchor-no-expand-print"
target="_blank"
href={historicalEvent[2]}>
{contractName}
</a>
</span> </span>
); );
} else if(historicalEvent.length === 2) { } 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} url={content.digital_work.url}
extraData={extraData} extraData={extraData}
encodingStatus={content.digital_work.isEncoding} /> encodingStatus={content.digital_work.isEncoding} />
<p className="text-center"> <p className="text-center hidden-print">
<span className="ascribe-social-button-list"> <span className="ascribe-social-button-list">
<FacebookShareButton /> <FacebookShareButton />
<TwitterShareButton <TwitterShareButton

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

@ -34,12 +34,12 @@ let Piece = React.createClass({
render() { render() {
return ( return (
<Row> <Row>
<Col md={6}> <Col md={6} className="ascribe-print-col-left">
<MediaContainer <MediaContainer
refreshObject={this.updateObject} refreshObject={this.updateObject}
content={this.props.piece}/> content={this.props.piece}/>
</Col> </Col>
<Col md={6} className="ascribe-edition-details"> <Col md={6} className="ascribe-edition-details ascribe-print-col-right">
{this.props.header} {this.props.header}
{this.props.subheader} {this.props.subheader}
{this.props.buttons} {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'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getCreateEditionsDialog() { getCreateEditionsDialog() {
@ -219,7 +219,9 @@ let PieceContainer = React.createClass({
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
`AclInformation` would show up `AclInformation` would show up
*/} */}
<DetailProperty label={getLangText('ACTIONS')}> <DetailProperty
label={getLangText('ACTIONS')}
className="hidden-print">
<AclButtonList <AclButtonList
className="ascribe-button-list" className="ascribe-button-list"
availableAcls={piece.acl} availableAcls={piece.acl}
@ -257,7 +259,7 @@ let PieceContainer = React.createClass({
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
header={ header={
<div className="ascribe-detail-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> <h1 className="ascribe-detail-title">{this.state.piece.title}</h1>
<DetailProperty label="BY" value={this.state.piece.artist_name} /> <DetailProperty label="BY" value={this.state.piece.artist_name} />
<DetailProperty label="DATE" value={Moment(this.state.piece.date_created, 'YYYY-MM-DD').year() } /> <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(); let formData = this.getFormData();
// sentry shouldn't post the user's password // sentry shouldn't post the user's password
if(formData.password) { if (formData.password) {
delete formData.password; delete formData.password;
} }
console.logGlobal(err, formData); 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'); let notification = new GlobalNotificationModel(getLangText('Something went wrong, please try again later'), 'danger');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
} else { } else {
this.setState({errors: [getLangText('Something went wrong, please try again later')]}); this.setState({errors: [getLangText('Something went wrong, please try again later')]});
} }
} }
this.setState({submitted: false}); 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() { isThumbnailDialogExpanded() {
const { enableSeparateThumbnail } = this.props; const { enableSeparateThumbnail } = this.props;
const { digitalWorkFile } = this.state; const { digitalWorkFile } = this.state;
@ -194,14 +199,15 @@ let RegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails url: ApiUrls.blob_thumbnails
}} }}
handleChangedFile={this.handleChangedThumbnail} handleChangedFile={this.handleChangedThumbnail}
onValidationFailed={this.handleThumbnailValidationFailed}
isReadyForFormSubmission={formSubmissionValidation.fileOptional} isReadyForFormSubmission={formSubmissionValidation.fileOptional}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail' fileClass: 'thumbnail'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}} }}
setIsUploadReady={this.setIsUploadReady('thumbnailKeyReady')} 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); notification = new GlobalNotificationModel(notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
getFormData() { getFormData() {

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

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

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

@ -46,7 +46,13 @@ let ModalWrapper = React.createClass({
renderChildren() { renderChildren() {
return ReactAddons.Children.map(this.props.children, (child) => { return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(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() { render() {
const { className, children, searchFor, searchQuery } = this.props; const { className, children, searchFor, searchQuery } = this.props;
@ -75,8 +51,14 @@ let PieceListToolbar = React.createClass({
{children} {children}
</span> </span>
<span className="pull-right"> <span className="pull-right">
{this.getOrderWidget()} <PieceListToolbarOrderWidget
{this.getFilterWidget()} 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> </span>
<SearchBar <SearchBar
className="pull-right search-bar ascribe-input-glyph" 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) { generateFilterByStatement(param) {
const filterBy = Object.assign({}, this.props.filterBy); const filterBy = Object.assign({}, this.props.filterBy);
if(filterBy) { if (filterBy) {
// we need hasOwnProperty since the values are all booleans // we need hasOwnProperty since the values are all booleans
if(filterBy.hasOwnProperty(param)) { if (filterBy.hasOwnProperty(param)) {
filterBy[param] = !filterBy[param]; filterBy[param] = !filterBy[param];
// if the parameter is false, then we want to remove it again // if the parameter is false, then we want to remove it again
// from the list of queryParameters as this component is only about // from the list of queryParameters as this component is only about
// which actions *CAN* be done and not what *CANNOT* // which actions *CAN* be done and not what *CANNOT*
if(!filterBy[param]) { if (!filterBy[param]) {
delete filterBy[param]; delete filterBy[param];
} }
@ -66,7 +66,7 @@ let PieceListToolbarFilterWidget = React.createClass({
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // the surrounding button is not resized up on appearance
if(trueValuesOnly.length > 0) { if (trueValuesOnly.length) {
return { visibility: 'visible'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -81,60 +81,64 @@ let PieceListToolbarFilterWidget = React.createClass({
</span> </span>
); );
return ( if (this.props.filterParams && this.props.filterParams.length) {
<DropdownButton return (
pullRight={true} <DropdownButton
title={filterIcon} pullRight={true}
className="ascribe-piece-list-toolbar-filter-widget"> title={filterIcon}
{/* We iterate over filterParams, to receive the label and then for each className="ascribe-piece-list-toolbar-filter-widget">
label also iterate over its items, to get all filterable options */} {/* We iterate over filterParams, to receive the label and then for each
{this.props.filterParams.map(({ label, items }, i) => { label also iterate over its items, to get all filterable options */}
return ( {this.props.filterParams.map(({ label, items }, i) => {
<div key={label}> return (
<li style={{'textAlign': 'center'}}> <div key={label}>
<em>{label}:</em> <li style={{'textAlign': 'center'}}>
</li> <em>{label}:</em>
{items.map((param, j) => { </li>
{items.map((param, j) => {
// As can be seen in the PropTypes, a param can either // As can be seen in the PropTypes, a param can either
// be a string or an object of the shape: // be a string or an object of the shape:
// //
// { // {
// key: <String>, // key: <String>,
// label: <String> // label: <String>
// } // }
// //
// This is why we need to distinguish between both here. // This is why we need to distinguish between both here.
if(typeof param !== 'string') { if (typeof param !== 'string') {
label = param.label; label = param.label;
param = param.key; param = param.key;
} else { } else {
param = param; param = param;
label = param.split('acl_')[1].replace(/_/g, ' '); label = param.split('acl_')[1].replace(/_/g, ' ');
} }
return ( return (
<li <li
key={param} key={j}
onClick={this.filterBy(param)} onClick={this.filterBy(param)}
className="filter-widget-item"> className="filter-widget-item">
<div className="checkbox-line"> <div className="checkbox-line">
<span> <span>
{getLangText(label)} {getLangText(label)}
</span> </span>
<input <input
readOnly readOnly
type="checkbox" type="checkbox"
checked={this.props.filterBy[param]} /> checked={this.props.filterBy[param]} />
</div> </div>
</li> </li>
); );
})} })}
</div> </div>
); );
})} })}
</DropdownButton> </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() { isOrderActive() {
// We're hiding the star in that complicated matter so that, // We're hiding the star in that complicated matter so that,
// the surrounding button is not resized up on appearance // 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'}; return { visibility: 'visible'};
} else { } else {
return { visibility: 'hidden' }; return { visibility: 'hidden' };
@ -51,36 +51,40 @@ let PieceListToolbarOrderWidget = React.createClass({
<span style={this.isOrderActive()}>&middot;</span> <span style={this.isOrderActive()}>&middot;</span>
</span> </span>
); );
return (
<DropdownButton if (this.props.orderParams && this.props.orderParams.length) {
pullRight={true} return (
title={filterIcon} <DropdownButton
className="ascribe-piece-list-toolbar-filter-widget"> pullRight={true}
<li style={{'textAlign': 'center'}}> title={filterIcon}
<em>{getLangText('Sort by')}:</em> className="ascribe-piece-list-toolbar-filter-widget">
</li> <li style={{'textAlign': 'center'}}>
{this.props.orderParams.map((param) => { <em>{getLangText('Sort by')}:</em>
return ( </li>
<div key={param}> {this.props.orderParams.map((param) => {
<li return (
onClick={this.orderBy(param)} <div key={param}>
className="filter-widget-item"> <li
<div className="checkbox-line"> onClick={this.orderBy(param)}
<span> className="filter-widget-item">
{getLangText(param.replace('_', ' '))} <div className="checkbox-line">
</span> <span>
<input {getLangText(param.replace('_', ' '))}
readOnly </span>
type="radio" <input
checked={param.indexOf(this.props.orderBy) > -1} /> readOnly
</div> type="radio"
</li> checked={param.indexOf(this.props.orderBy) > -1} />
</div> </div>
); </li>
})} </div>
</DropdownButton> );
); })}
</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`. // and redirect if `true`.
if(exprToValidate) { if(exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
// Otherwise there can also be the case that the backend // Otherwise there can also be the case that the backend
@ -48,7 +48,7 @@ export function AuthRedirect({to, when}) {
} else if(!exprToValidate && when === 'loggedIn' && redirect) { } else if(!exprToValidate && when === 'loggedIn' && redirect) {
delete query.redirect; delete query.redirect;
window.setTimeout(() => history.replaceState(null, '/' + redirect, query)); window.setTimeout(() => history.replace({ query, pathname: '/' + redirect }));
return true; return true;
} else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) { } else if(!exprToValidate && when === 'loggedOut' && redirectAuthenticated) {

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. // When the start_from parameter is used, this.setSlideNum can not simply be used anymore.
nextSlide(additionalQueryParams) { nextSlide(additionalQueryParams) {
const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0; const slideNum = parseInt(this.props.location.query.slide_num, 10) || 0;
let nextSlide = slideNum + 1; this.setSlideNum(slideNum + 1, additionalQueryParams);
this.setSlideNum(nextSlide, additionalQueryParams);
}, },
setSlideNum(nextSlideNum, additionalQueryParams = {}) { setSlideNum(nextSlideNum, additionalQueryParams = {}) {
let queryParams = Object.assign(this.props.location.query, additionalQueryParams); const { location: { pathname } } = this.props;
queryParams.slide_num = nextSlideNum; const query = Object.assign({}, this.props.location.query, additionalQueryParams, { slide_num: nextSlideNum });
this.history.pushState(null, this.props.location.pathname, queryParams);
this.history.push({ pathname, query });
}, },
// breadcrumbs are defined as attributes of the slides. // breadcrumbs are defined as attributes of the slides.
// To extract them we have to read the DOM element's attributes // To extract them we have to read the DOM element's attributes
extractBreadcrumbs() { extractBreadcrumbs() {
const startFrom = parseInt(this.props.location.query.start_from, 10) || -1; const startFrom = parseInt(this.props.location.query.start_from, 10) || -1;
let breadcrumbs = []; const breadcrumbs = [];
React.Children.map(this.props.children, (child, i) => { React.Children.map(this.props.children, (child, i) => {
if(child && i >= startFrom && child.props['data-slide-title']) { if(child && i >= startFrom && child.props['data-slide-title']) {
@ -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) { getDragDialog(fileClass) {
if (dragAndDropAvailable) { if (dragAndDropAvailable) {
return [ 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> <p>{getLangText('or')}</p>
]; ];
} else { } else {
@ -46,6 +46,8 @@ let FileDragAndDropDialog = React.createClass({
if (hasFiles) { if (hasFiles) {
return null; return null;
} else { } else {
let dialogElement;
if (enableLocalHashing && !uploadMethod) { if (enableLocalHashing && !uploadMethod) {
const currentQueryParams = getCurrentQueryParams(); const currentQueryParams = getCurrentQueryParams();
@ -55,9 +57,9 @@ let FileDragAndDropDialog = React.createClass({
const queryParamsUpload = Object.assign({}, currentQueryParams); const queryParamsUpload = Object.assign({}, currentQueryParams);
queryParamsUpload.method = 'upload'; queryParamsUpload.method = 'upload';
return ( dialogElement = (
<div className="file-drag-and-drop-dialog present-options"> <div className="present-options">
<p>{getLangText('Would you rather')}</p> <p className="file-drag-and-drop-dialog-title">{getLangText('Would you rather')}</p>
{/* {/*
The frontend in live is hosted under /app, The frontend in live is hosted under /app,
Since `Link` is appending that base url, if its defined Since `Link` is appending that base url, if its defined
@ -85,32 +87,40 @@ let FileDragAndDropDialog = React.createClass({
); );
} else { } else {
if (multipleFiles) { if (multipleFiles) {
return ( dialogElement = [
<span className="file-drag-and-drop-dialog"> this.getDragDialog(fileClassToUpload.plural),
{this.getDragDialog(fileClassToUpload.plural)} <span
<span className="btn btn-default"
className="btn btn-default" onClick={onClick}>
onClick={onClick}> {getLangText('choose %s to upload', fileClassToUpload.plural)}
{getLangText('choose %s to upload', fileClassToUpload.plural)}
</span>
</span> </span>
); ];
} else { } else {
const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular) const dialog = uploadMethod === 'hash' ? getLangText('choose a %s to hash', fileClassToUpload.singular)
: getLangText('choose a %s to upload', fileClassToUpload.singular); : getLangText('choose a %s to upload', fileClassToUpload.singular);
return ( dialogElement = [
<span className="file-drag-and-drop-dialog"> this.getDragDialog(fileClassToUpload.singular),
{this.getDragDialog(fileClassToUpload.singular)} <span
<span className="btn btn-default"
className="btn btn-default" onClick={onClick}>
onClick={onClick}> {dialog}
{dialog}
</span>
</span> </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; let actionSymbol;
// only if assets are actually downloadable, there should be a download icon if the process is already at // 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 // 100%. If not, no actionSymbol should be displayed
if(progress === 100 && areAssetsDownloadable) { if(progress === 100 && areAssetsDownloadable) {
@ -68,7 +68,7 @@ const FileDragAndDropPreviewImage = React.createClass({
return ( return (
<div <div
className="file-drag-and-drop-preview-image" className="file-drag-and-drop-preview-image hidden-print"
style={imageStyle}> style={imageStyle}>
<AclProxy <AclProxy
show={showProgress}> 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 handleChangedFile: func, // is for when a file is dropped or selected
submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile submitFile: func, // is for when a file has been successfully uploaded, TODO: rename to handleSubmitFile
onValidationFailed: func,
autoUpload: bool, autoUpload: bool,
debug: bool, debug: bool,
objectProperties: shape({ objectProperties: shape({
@ -523,13 +524,16 @@ const ReactS3FineUploader = React.createClass({
}, },
isFileValid(file) { 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; const notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
let notification = new GlobalNotificationModel(getLangText('A file you submitted is bigger than ' + fileSizeInMegaBytes + 'MB.'), 'danger', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
if (typeof this.props.onValidationFailed === 'function') {
this.props.onValidationFailed(file);
}
return false; return false;
} else { } else {
return true; return true;

2
js/components/footer.js
View File

@ -7,7 +7,7 @@ import { getLangText } from '../utils/lang_utils';
let Footer = React.createClass({ let Footer = React.createClass({
render() { render() {
return ( return (
<div className="ascribe-footer"> <div className="ascribe-footer hidden-print">
<p className="ascribe-sub-sub-statement"> <p className="ascribe-sub-sub-statement">
<br /> <br />
<a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> | <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 ( return (
<div> <div>
<Navbar <Navbar
ref="navbar"
brand={this.getLogo()} brand={this.getLogo()}
toggleNavKey={0} toggleNavKey={0}
fixedTop={true} fixedTop={true}
ref="navbar"> className="hidden-print">
<CollapsibleNav <CollapsibleNav
eventKey={0}> eventKey={0}>
<Nav navbar left> <Nav navbar left>
@ -237,6 +238,9 @@ let Header = React.createClass({
{navRoutesLinks} {navRoutesLinks}
</CollapsibleNav> </CollapsibleNav>
</Navbar> </Navbar>
<p className="ascribe-print-header visible-print">
<span className="icon-ascribe-logo" />
</p>
</div> </div>
); );
} }

5
js/components/password_reset_container.js
View File

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

21
js/components/piece_list.js
View File

@ -115,13 +115,13 @@ let PieceList = React.createClass({
}, },
componentDidUpdate() { componentDidUpdate() {
const { redirectTo, shouldRedirect } = this.props; const { location: { query }, redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state; const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 && if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) { (typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.pushState(null, this.props.redirectTo, this.props.location.query), 0); window.setTimeout(() => this.history.push({ query, pathname: redirectTo }), 0);
} }
}, },
@ -174,15 +174,16 @@ let PieceList = React.createClass({
} }
}, },
searchFor(searchTerm) { searchFor(search) {
this.loadPieceList({ const { location: { pathname } } = this.props;
page: 1,
search: searchTerm this.loadPieceList({ search, page: 1 });
}); this.history.push({ pathname, query: { page: 1 } });
this.history.pushState(null, this.props.location.pathname, {page: 1});
}, },
applyFilterBy(filterBy){ applyFilterBy(filterBy) {
const { location: { pathname } } = this.props;
this.setState({ this.setState({
isFilterDirty: true isFilterDirty: true
}); });
@ -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 // we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces // for filtered pieces
this.history.pushState(null, this.props.location.pathname, {page: 1}); this.history.push({ pathname, query: { page: 1 } });
}, },
applyOrderBy(orderBy) { applyOrderBy(orderBy) {

4
js/components/register_piece.js
View File

@ -66,7 +66,7 @@ let RegisterPiece = React.createClass( {
}, },
handleSuccess(response){ handleSuccess(response){
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); const notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
// once the user was able to register a piece successfully, we need to make sure to keep // once the user was able to register a piece successfully, we need to make sure to keep
@ -80,7 +80,7 @@ let RegisterPiece = React.createClass( {
this.state.filterBy this.state.filterBy
); );
this.history.pushState(null, `/pieces/${response.piece.id}`); this.history.push(`/pieces/${response.piece.id}`);
}, },
getSpecifyEditions() { 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 requests from '../../../../../../utils/requests';
import { getLangText } from '../../../../../../utils/lang_utils'; import { getErrorNotificationMessage } from '../../../../../../utils/error_utils';
import { setCookie } from '../../../../../../utils/fetch_api_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'; import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
@ -35,7 +37,7 @@ const PRRegisterPieceForm = React.createClass({
mixins: [History], mixins: [History],
getInitialState(){ getInitialState() {
return { return {
digitalWorkKeyReady: true, digitalWorkKeyReady: true,
thumbnailKeyReady: true, thumbnailKeyReady: true,
@ -54,16 +56,16 @@ const PRRegisterPieceForm = React.createClass({
* second adding all the additional details * second adding all the additional details
*/ */
submit() { submit() {
if(!this.validateForms()) { if (!this.validateForms()) {
return; 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 { currentUser } = this.props;
const { registerPieceForm, const { registerPieceForm,
additionalDataForm, additionalDataForm,
@ -104,12 +106,20 @@ const PRRegisterPieceForm = React.createClass({
GlobalNotificationActions.appendGlobalNotification(notificationMessage); GlobalNotificationActions.appendGlobalNotification(notificationMessage);
}); });
}) })
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .then(() => this.history.push(`/pieces/${this.state.piece.id}`))
.catch((err) => { .catch((err) => {
const 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); GlobalNotificationActions.appendGlobalNotification(notificationMessage);
console.logGlobal(new Error('Portfolio Review piece registration failed'), err); 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, additionalDataForm,
uploadersForm } = this.refs; uploadersForm } = this.refs;
const registerPieceFormValidation = registerPieceForm.validate(); return validateForms([registerPieceForm, additionalDataForm, uploadersForm], true);
const additionalDataFormValidation = additionalDataForm.validate();
const uploaderFormValidation = uploadersForm.validate();
return registerPieceFormValidation && additionalDataFormValidation && uploaderFormValidation;
}, },
getCreateBlobRoutine() { 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 * of each uploader in the component
* @param {string} uploaderKey Name of the uploader's key to track * @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() { getSubmitButton() {
const { digitalWorkKeyReady, const { digitalWorkKeyReady,
thumbnailKeyReady, thumbnailKeyReady,
@ -303,7 +317,7 @@ const PRRegisterPieceForm = React.createClass({
</Property> </Property>
<Property <Property
name="thumbnailKey" name="thumbnailKey"
label={getLangText('Featured Cover photo')}> label={getLangText('Featured Cover photo (max 5MB)')}>
<InputFineuploader <InputFineuploader
fileInputElement={UploadButton()} fileInputElement={UploadButton()}
createBlobRoutine={{ createBlobRoutine={{
@ -316,8 +330,8 @@ const PRRegisterPieceForm = React.createClass({
fileClass: 'thumbnail' fileClass: 'thumbnail'
}} }}
validation={{ validation={{
itemLimit: AppConstants.fineUploader.validation.registerWork.itemLimit, itemLimit: AppConstants.fineUploader.validation.workThumbnail.itemLimit,
sizeLimit: AppConstants.fineUploader.validation.additionalData.sizeLimit, sizeLimit: AppConstants.fineUploader.validation.workThumbnail.sizeLimit,
allowedExtensions: ['png', 'jpg', 'jpeg', 'gif'] allowedExtensions: ['png', 'jpg', 'jpeg', 'gif']
}} }}
location={location} location={location}
@ -334,6 +348,7 @@ const PRRegisterPieceForm = React.createClass({
fileInputElement={UploadButton()} fileInputElement={UploadButton()}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')} setIsUploadReady={this.setIsUploadReady('supportingMaterialsReady')}
onValidationFailed={this.handleOptionalFileValidationFailed('supportingMaterialsReady')}
createBlobRoutine={this.getCreateBlobRoutine()} createBlobRoutine={this.getCreateBlobRoutine()}
keyRoutine={{ keyRoutine={{
url: AppConstants.serverUrl + 's3/key/', 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 UserStore from '../../../../../stores/user_store';
import UserActions from '../../../../../actions/user_actions'; import UserActions from '../../../../../actions/user_actions';
import { mergeOptions } from '../../../../../utils/general_utils'; import { mergeOptions, omitFromObject } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
@ -34,15 +34,18 @@ const PRLanding = React.createClass({
componentDidMount() { componentDidMount() {
const { location } = this.props; const { location } = this.props;
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeStore.listen(this.onChange); PrizeStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PrizeActions.fetchPrize(); PrizeActions.fetchPrize();
if(location && location.query && location.query.redirect) { if (location && location.query && location.query.redirect) {
let queryCopy = JSON.parse(JSON.stringify(location.query)); window.setTimeout(() => this.history.replace({
delete queryCopy.redirect; pathname: `/${location.query.redirect}`,
window.setTimeout(() => this.history.replaceState(null, `/${location.query.redirect}`, queryCopy)); query: omitFromObject(location.query, ['redirect'])
}));
} }
}, },
@ -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) { if(currentUser && currentUser.email) {
const submittedPieceId = getCookie(currentUser.email); const submittedPieceId = getCookie(currentUser.email);
if(submittedPieceId) { if(submittedPieceId) {
this.history.pushState(null, `/pieces/${submittedPieceId}`); this.history.push(`/pieces/${submittedPieceId}`);
} }
} }
}, },
@ -62,7 +62,7 @@ const PRRegisterPiece = React.createClass({
<Col xs={6}> <Col xs={6}>
<div className="register-piece--info"> <div className="register-piece--info">
<h1>Portfolio Review</h1> <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; <p>For more information, visit:&nbsp;
<a href="http://www.portfolio-review.de/submission/" target="_blank"> <a href="http://www.portfolio-review.de/submission/" target="_blank">
portfolio-review.de 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); .reduce((a, b) => a || b);
if (exprToValidate) { if (exprToValidate) {
window.setTimeout(() => history.replaceState(null, to, query)); window.setTimeout(() => history.replace({ query, pathname: to }));
return true; return true;
} else { } else {
return false; return false;

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 SPSettingsContainer from './simple_prize/components/prize_settings_container';
import SPApp from './simple_prize/prize_app'; import SPApp from './simple_prize/prize_app';
import SluicePieceContainer from './sluice/components/sluice_detail/sluice_piece_container';
import PRApp from './portfolioreview/pr_app'; import PRApp from './portfolioreview/pr_app';
import PRLanding from './portfolioreview/components/pr_landing'; import PRLanding from './portfolioreview/components/pr_landing';
import PRRegisterPiece from './portfolioreview/components/pr_register_piece'; import PRRegisterPiece from './portfolioreview/components/pr_register_piece';
@ -53,7 +55,7 @@ const ROUTES = {
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SPPieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION'/>
<Route path='pieces/:pieceId' component={SPPieceContainer} /> <Route path='pieces/:pieceId' component={SluicePieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} /> <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( this.generateActions(
'updatePrizeRatings', 'updatePrizeRatings',
'updatePrizeRatingAverage', 'updatePrizeRatingAverage',
'updatePrizeRating' 'updatePrizeRating',
'resetPrizeRatings'
); );
} }
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchAverage(pieceId) .fetchAverage(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRatingAverage(res.data); this.actions.updatePrizeRatingAverage(res.data);
resolve(res); resolve(res);
@ -29,10 +30,10 @@ class PrizeRatingActions {
}); });
} }
fetchOne(pieceId) { fetchOne(pieceId, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.fetchOne(pieceId) .fetchOne(pieceId, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -43,10 +44,10 @@ class PrizeRatingActions {
}); });
} }
createRating(pieceId, rating) { createRating(pieceId, rating, round) {
return Q.Promise((resolve, reject) => { return Q.Promise((resolve, reject) => {
PrizeRatingFetcher PrizeRatingFetcher
.rate(pieceId, rating) .rate(pieceId, rating, round)
.then((res) => { .then((res) => {
this.actions.updatePrizeRating(res.rating.rating); this.actions.updatePrizeRating(res.rating.rating);
resolve(res); resolve(res);
@ -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() { 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 // 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) || let artistName = ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !content.selected )) ?
(this.state.currentUser.is_judge && !this.props.content.selected )) ? <span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : content.artist_name;
<span className="glyphicon glyphicon-eye-close" aria-hidden="true"/> : this.props.content.artist_name;
return ( return (
<div> <div>
<AccordionListItemPiece <AccordionListItemPiece
className={this.props.className} className={className}
piece={this.props.content} piece={content}
artistName={artistName} artistName={artistName}
subsubheading={ subsubheading={
<div> <div>
<span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span> <span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
</div>} </div>}
buttons={this.getPrizeButtons()} buttons={this.getPrizeButtons()}
badge={this.getPrizeBadge()}> badge={this.getPrizeBadge()}>
{this.props.children} {children}
</AccordionListItemPiece> </AccordionListItemPiece>
</div> </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 ReactError from '../../../../../../mixins/react_error';
import { ResourceNotFoundError } from '../../../../../../models/errors'; import { ResourceNotFoundError } from '../../../../../../models/errors';
import PieceActions from '../../../../../../actions/piece_actions'; import PrizeActions from '../../actions/prize_actions';
import PieceStore from '../../../../../../stores/piece_store'; import PrizeStore from '../../stores/prize_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import PrizeRatingActions from '../../actions/prize_rating_actions'; import PrizeRatingActions from '../../actions/prize_rating_actions';
import PrizeRatingStore from '../../stores/prize_rating_store'; import PrizeRatingStore from '../../stores/prize_rating_store';
import PieceActions from '../../../../../../actions/piece_actions';
import PieceStore from '../../../../../../stores/piece_store';
import PieceListStore from '../../../../../../stores/piece_list_store';
import PieceListActions from '../../../../../../actions/piece_list_actions';
import UserStore from '../../../../../../stores/user_store'; import UserStore from '../../../../../../stores/user_store';
import UserActions from '../../../../../../actions/user_actions'; import UserActions from '../../../../../../actions/user_actions';
@ -34,9 +35,7 @@ import CollapsibleParagraph from '../../../../../../components/ascribe_collapsib
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader'; import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import InputCheckbox from '../../../../../ascribe_forms/input_checkbox'; import InputCheckbox from '../../../../../ascribe_forms/input_checkbox';
import LoanForm from '../../../../../ascribe_forms/form_loan';
import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions'; import ListRequestActions from '../../../../../ascribe_forms/list_form_request_actions';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import GlobalNotificationModel from '../../../../../../models/global_notification_model'; import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
@ -52,39 +51,41 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
/** /**
* This is the component that implements resource/data specific functionality * This is the component that implements resource/data specific functionality
*/ */
let PieceContainer = React.createClass({ let PrizePieceContainer = React.createClass({
propTypes: { propTypes: {
params: React.PropTypes.object params: React.PropTypes.object,
selectedPrizeActionButton: React.PropTypes.func
}, },
mixins: [ReactError], mixins: [ReactError],
getInitialState() { getInitialState() {
return mergeOptions( //FIXME: this component uses the PieceStore, but we avoid using the getState() here since it may contain stale data
PieceStore.getState(), // It should instead use something like getInitialState() where that call also resets the state.
UserStore.getState() 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() { componentDidMount() {
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
UserStore.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(); UserActions.fetchCurrentUser();
this.loadPiece();
}, },
// This is done to update the container when the user clicks on the prev or next // This is done to update the container when the user clicks on the prev or next
// button to update the URL parameter (and therefore to switch pieces) // button to update the URL parameter (and therefore to switch pieces)
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if(this.props.params.pieceId !== nextProps.params.pieceId) { if (this.props.params.pieceId !== nextProps.params.pieceId) {
PieceActions.updatePiece({}); PieceActions.updatePiece({});
PieceActions.fetchOne(nextProps.params.pieceId); this.loadPiece(nextProps.params.pieceId);
} }
}, },
@ -101,26 +102,32 @@ let PieceContainer = React.createClass({
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
}, },
getActions() { getActions() {
if (this.state.piece && const { currentUser, piece } = this.state;
this.state.piece.notifications &&
this.state.piece.notifications.length > 0) { if (piece && piece.notifications && piece.notifications.length > 0) {
return ( return (
<ListRequestActions <ListRequestActions
pieceOrEditions={this.state.piece} pieceOrEditions={piece}
currentUser={this.state.currentUser} currentUser={currentUser}
handleSuccess={this.loadPiece} handleSuccess={this.loadPiece}
notifications={this.state.piece.notifications}/>); notifications={piece.notifications}/>);
} }
}, },
loadPiece(pieceId = this.props.params.pieceId) {
PieceActions.fetchOne(pieceId);
},
render() { 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! 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 // 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) || let artistName;
(this.state.currentUser.is_judge && !this.state.piece.selected )) ? if ((currentUser.is_jury && !currentUser.is_judge) || (currentUser.is_judge && !piece.selected )) {
null : this.state.piece.artist_name; 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 // 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 ) ? const artistEmail = (currentUser.is_judge && piece.selected ) ?
<DetailProperty label={getLangText('REGISTREE')} value={ this.state.piece.user_registered } /> : null; <DetailProperty label={getLangText('REGISTREE')} value={ 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"/>;
}
return ( return (
<Piece <Piece
piece={this.state.piece} piece={piece}
loadPiece={this.loadPiece} currentUser={currentUser}
header={ header={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<NavigationHeader <NavigationHeader
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser}/> 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('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} {artistEmail}
{this.getActions()} {this.getActions()}
<hr/> <hr/>
@ -168,10 +170,11 @@ let PieceContainer = React.createClass({
subheader={ subheader={
<PrizePieceRatings <PrizePieceRatings
loadPiece={this.loadPiece} loadPiece={this.loadPiece}
piece={this.state.piece} piece={piece}
currentUser={this.state.currentUser}/> currentUser={currentUser}
selectedPrizeActionButton={selectedPrizeActionButton} />
}> }>
<PrizePieceDetails piece={this.state.piece} /> <PrizePieceDetails piece={piece} />
</Piece> </Piece>
); );
} else { } else {
@ -225,31 +228,31 @@ let PrizePieceRatings = React.createClass({
propTypes: { propTypes: {
loadPiece: React.PropTypes.func, loadPiece: React.PropTypes.func,
piece: React.PropTypes.object, piece: React.PropTypes.object,
currentUser: React.PropTypes.object currentUser: React.PropTypes.object,
selectedPrizeActionButton: React.PropTypes.func
}, },
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
PieceListStore.getState(), PieceListStore.getState(),
PrizeRatingStore.getState() PrizeStore.getState(),
PrizeRatingStore.getInitialState()
); );
}, },
componentDidMount() { componentDidMount() {
PrizeRatingStore.listen(this.onChange);
PrizeRatingActions.fetchOne(this.props.piece.id);
PrizeRatingActions.fetchAverage(this.props.piece.id);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
PrizeStore.listen(this.onChange);
PrizeRatingStore.listen(this.onChange);
PrizeActions.fetchPrize();
this.fetchPrizeRatings();
}, },
componentWillUnmount() { 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); PieceListStore.unlisten(this.onChange);
PrizeStore.unlisten(this.onChange);
PrizeRatingStore.unlisten(this.onChange);
}, },
// The StarRating component does not have a property that lets us set // The StarRating component does not have a property that lets us set
@ -257,7 +260,12 @@ let PrizePieceRatings = React.createClass({
// every mouseover be overridden, we need to set it ourselves initially to deal // every mouseover be overridden, we need to set it ourselves initially to deal
// with the problem. // with the problem.
onChange(state) { onChange(state) {
if (state.prize && state.prize.active_round != this.state.prize.active_round) {
this.fetchPrizeRatings(state);
}
this.setState(state); this.setState(state);
if (this.refs.rating) { if (this.refs.rating) {
this.refs.rating.state.ratingCache = { this.refs.rating.state.ratingCache = {
pos: this.refs.rating.state.pos, pos: this.refs.rating.state.pos,
@ -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) { onRatingClick(event, args) {
event.preventDefault(); event.preventDefault();
PrizeRatingActions.createRating(this.props.piece.id, args.rating).then( PrizeRatingActions
this.refreshPieceData() .createRating(this.props.piece.id, args.rating, this.state.prize.active_round)
); .then(this.refreshPieceData);
}, },
handleLoanRequestSuccess(message){ getSelectedActionButton() {
let notification = new GlobalNotificationModel(message, 'success', 4000); const { currentUser, piece, selectedPrizeActionButton: SelectedPrizeActionButton } = this.props;
GlobalNotificationActions.appendGlobalNotification(notification);
},
getLoanButton(){ if (piece.selected && SelectedPrizeActionButton) {
let today = new Moment(); return (
let endDate = new Moment(); <span className="pull-right">
endDate.add(6, 'months'); <SelectedPrizeActionButton
return ( piece={piece}
<ModalWrapper currentUser={currentUser} />
trigger={ </span>
<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);
}, },
refreshPieceData() { refreshPieceData() {
@ -321,20 +309,19 @@ let PrizePieceRatings = React.createClass({
}, },
onSelectChange() { onSelectChange() {
PrizeRatingActions.toggleShortlist(this.props.piece.id) PrizeRatingActions
.then( .toggleShortlist(this.props.piece.id)
(res) => { .then((res) => {
this.refreshPieceData(); this.refreshPieceData();
return res;
}) if (res && res.notification) {
.then( const notification = new GlobalNotificationModel(res.notification, 'success', 2000);
(res) => { GlobalNotificationActions.appendGlobalNotification(notification);
this.handleShortlistSuccess(res.notification); }
} });
);
}, },
render(){ render() {
if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) { if (this.props.piece && this.props.currentUser && this.props.currentUser.is_judge && this.state.average) {
// Judge sees shortlisting, average and per-jury notes // Judge sees shortlisting, average and per-jury notes
return ( return (
@ -352,9 +339,7 @@ let PrizePieceRatings = React.createClass({
</span> </span>
</InputCheckbox> </InputCheckbox>
</span> </span>
<span className="pull-right"> {this.getSelectedActionButton()}
{this.props.piece.selected ? this.getLoanButton() : null}
</span>
</div> </div>
<hr /> <hr />
</CollapsibleParagraph> </CollapsibleParagraph>
@ -373,13 +358,19 @@ let PrizePieceRatings = React.createClass({
</div> </div>
<hr /> <hr />
{this.state.ratings.map((item, i) => { {this.state.ratings.map((item, i) => {
let note = item.note ? let note = item.note ? (
<div className="rating-note"> <div className="rating-note">
note: {item.note} note: {item.note}
</div> : null; </div>
) : null;
return ( return (
<div className="rating-list"> <div
<div id="list-rating" className="row no-margin"> key={item.user}
className="rating-list">
<div
id="list-rating"
className="row no-margin">
<span className="pull-right"> <span className="pull-right">
<StarRating <StarRating
ref={'rating' + i} ref={'rating' + i}
@ -399,8 +390,7 @@ let PrizePieceRatings = React.createClass({
<hr /> <hr />
</CollapsibleParagraph> </CollapsibleParagraph>
</div>); </div>);
} } else if (this.props.currentUser && this.props.currentUser.is_jury) {
else if (this.props.currentUser && this.props.currentUser.is_jury) {
// Jury can set rating and note // Jury can set rating and note
return ( return (
<CollapsibleParagraph <CollapsibleParagraph
@ -427,8 +417,9 @@ let PrizePieceRatings = React.createClass({
url={ApiUrls.notes} url={ApiUrls.notes}
currentUser={this.props.currentUser}/> currentUser={this.props.currentUser}/>
</CollapsibleParagraph>); </CollapsibleParagraph>);
} else {
return null;
} }
return null;
} }
}); });
@ -457,6 +448,7 @@ let PrizePieceDetails = React.createClass({
return ( return (
<Property <Property
key={label}
name={data} name={data}
label={label} label={label}
editable={false} 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 user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },

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

@ -48,9 +48,8 @@ let PrizePieceList = React.createClass({
}, },
getButtonSubmit() { getButtonSubmit() {
const { currentUser } = this.state; const { currentUser, prize } = this.state;
if (this.state.prize && this.state.prize.active && if (prize && prize.active && !currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge) {
!currentUser.is_jury && !currentUser.is_admin && !currentUser.is_judge){
return ( return (
<LinkContainer to="/register_piece"> <LinkContainer to="/register_piece">
<Button> <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) { handleCreateSuccess(response) {
PrizeJuryActions.fetchJury(); PrizeJuryActions.fetchJury();
let notification = new GlobalNotificationModel(response.notification, 'success', 5000); this.displayNotification(response);
GlobalNotificationActions.appendGlobalNotification(notification);
this.refs.form.refs.email.refs.input.getDOMNode().value = null; this.refs.form.refs.email.refs.input.getDOMNode().value = null;
}, },
handleActivate(event) { handleActivate(event) {
let email = event.target.getAttribute('data-id'); let email = event.target.getAttribute('data-id');
PrizeJuryActions.activateJury(email).then((response) => { PrizeJuryActions
.activateJury(email)
.then((response) => {
PrizeJuryActions.fetchJury(); PrizeJuryActions.fetchJury();
this.displayNotification(response); 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 = { let PrizeRatingFetcher = {
fetchAverage(pieceId) { fetchAverage(pieceId, round) {
return requests.get('rating_average', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating_average', params);
}, },
fetchOne(pieceId) { fetchOne(pieceId, round) {
return requests.get('rating', {'piece_id': pieceId}); const params = {
'piece_id': pieceId
};
if (typeof round === 'number') {
params['prize_round'] = round;
}
return requests.get('rating', params);
}, },
rate(pieceId, rating) { rate(pieceId, rating, round) {
return requests.post('ratings', {body: {'piece_id': pieceId, 'note': rating}}); const body = {
'piece_id': pieceId,
'note': rating
};
if (typeof round === 'number') {
body['prize_round'] = round;
}
return requests.post('ratings', { body });
}, },
select(pieceId) { select(pieceId) {

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

@ -6,10 +6,12 @@ import PrizeRatingActions from '../actions/prize_rating_actions';
class PrizeRatingStore { class PrizeRatingStore {
constructor() { constructor() {
this.ratings = []; this.getInitialState();
this.currentRating = null;
this.average = null;
this.bindActions(PrizeRatingActions); this.bindActions(PrizeRatingActions);
this.exportPublicMethods({
getInitialState: this.getInitialState.bind(this)
});
} }
onUpdatePrizeRatings(ratings) { onUpdatePrizeRatings(ratings) {
@ -24,6 +26,22 @@ class PrizeRatingStore {
this.average = data.average; this.average = data.average;
this.ratings = data.ratings; 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'); 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 { class PrizeStore {
constructor() { constructor() {
this.prize = []; this.prize = {};
this.bindActions(PrizeActions); 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, currentUser: React.PropTypes.object.isRequired,
loadPiece: React.PropTypes.func.isRequired, loadPiece: React.PropTypes.func.isRequired,
handleDeleteSuccess: 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() { render() {
if(this.props.piece && this.props.piece.id) { if (this.props.piece && this.props.piece.id) {
return ( return (
<Piece <Piece
piece={this.props.piece} piece={this.props.piece}
@ -45,12 +49,12 @@ let WalletPieceContainer = React.createClass({
</div> </div>
} }
subheader={ subheader={
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } /> <DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
<DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} /> <DetailProperty label={getLangText('ID')} value={ this.props.piece.bitcoin_id } ellipsis={true} />
<hr/> <hr/>
</div> </div>
}> }>
<WalletActionPanel <WalletActionPanel
piece={this.props.piece} piece={this.props.piece}
currentUser={this.props.currentUser} currentUser={this.props.currentUser}
@ -76,12 +80,10 @@ let WalletPieceContainer = React.createClass({
url={ApiUrls.note_private_piece} url={ApiUrls.note_private_piece}
currentUser={this.props.currentUser}/> currentUser={this.props.currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
{this.props.children} {this.props.children}
</Piece> </Piece>
); );
} } else {
else {
return ( return (
<div className="fullpage-spinner"> <div className="fullpage-spinner">
<AscribeSpinner color='dark-blue' size='lg' /> <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'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { 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 user is already logged in, redirect him to piece list
if(this.state.currentUser && this.state.currentUser.email) { if(this.state.currentUser && this.state.currentUser.email) {
// FIXME: hack to redirect out of the dispatch cycle // FIXME: hack to redirect out of the dispatch cycle
window.setTimeout(() => this.history.replaceState(null, '/collection'), 0); window.setTimeout(() => this.history.replace('/collection'), 0);
} }
}, },

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

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'); let notification = new GlobalNotificationModel(response.notification, 'success');
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
this.history.pushState(null, '/collection'); this.history.push('/collection');
}, },
render() { 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() { render() {
let buttons, spinner, heading; let buttons, spinner, heading;
let { isInline, handleSuccess } = this.props; let { isInline, handleSuccess } = this.props;
if(!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" 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 ( return (
<Form <Form
disabled={this.props.disabled} 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 buttons, spinner, heading;
let { isInline, handleSuccess } = this.props; let { isInline, handleSuccess } = this.props;
if(!isInline) { if (!isInline) {
buttons = ( buttons = (
<button <button
type="submit" 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 ( return (
<Form <Form
disabled={this.props.disabled} 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); PieceActions.updatePiece(response.piece);
} }
if (!this.canSubmit()) { if (!this.canSubmit()) {
this.history.pushState(null, '/collection'); this.history.push('/collection');
} }
else { else {
this.incrementStep(); this.incrementStep();
@ -134,7 +134,7 @@ let IkonotvRegisterPiece = React.createClass({
this.refreshPieceList(); this.refreshPieceList();
PieceActions.fetchOne(this.state.piece.id); 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 // 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() { handleAdditionalDataSuccess() {
this.refreshPieceList(); 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 // 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': { 'registerWork': {
'itemLimit': 1, 'itemLimit': 1,
'sizeLimit': '25000000000' 'sizeLimit': '25000000000'
},
'workThumbnail': {
'itemLimit': 1,
'sizeLimit': '5000000'
} }
} }
}, },

3
js/history.js
View File

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

4
js/third_party/notifications.js vendored
View File

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

28
js/utils/error_utils.js
View File

@ -35,3 +35,31 @@ export function initLogging() {
console.logGlobal = logGlobal; 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 { getLangText } from './lang_utils';
import GlobalNotificationActions from '../actions/global_notification_actions';
import GlobalNotificationModel from '../models/global_notification_model';
import AppConstants from '../constants/application_constants'; 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. * Get the data ids of the given piece or editions.
* @param {boolean} isPiece Is the given entities parameter a piece? (False: array of 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 * Checks a list of objects for key duplicates and returns a boolean
*/ */
function _doesObjectListHaveDuplicates(l) { function _doesObjectListHaveDuplicates(l) {
let mergedList = [];
l = l.map((obj) => { l = l.map((obj) => {
if(!obj) { if(!obj) {
throw new Error('The object you are trying to merge is null instead of an empty object'); 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); 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. // How to flatten an array of arrays in javascript.
// If two objects contain the same key, then these two keys // If two objects contain the same key, then these two keys
// will actually be represented in the merged array // 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 // Taken from: http://stackoverflow.com/a/7376645/1263876
// By casting the array to a set, and then checking if the size of the array // 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 camelCase from 'camelcase';
import decamelize from 'decamelize'; import decamelize from 'decamelize';
import qs from 'qs'; import queryString from 'query-string';
import { sanitize } from './general_utils'; import { sanitize } from './general_utils';
@ -36,8 +36,7 @@ export function argsToQueryParams(obj) {
queryParamObj[decamelize(key)] = sanitizedObj[key]; queryParamObj[decamelize(key)] = sanitizedObj[key];
}); });
// Use bracket arrayFormat as history.js and react-router use it return '?' + queryString.stringify(queryParamObj);
return '?' + qs.stringify(queryParamObj, { arrayFormat: 'brackets' });
} }
/** /**
@ -56,13 +55,13 @@ export function getCurrentQueryParams() {
* @return {object} Query params dictionary * @return {object} Query params dictionary
*/ */
export function queryParamsToArgs(queryParamString) { export function queryParamsToArgs(queryParamString) {
const qsQueryParamObj = qs.parse(queryParamString); const queryParamObj = queryString.parse(queryParamString);
const camelCaseParamObj = {}; const camelCaseParamObj = {};
Object Object
.keys(qsQueryParamObj) .keys(queryParamObj)
.forEach((key) => { .forEach((key) => {
camelCaseParamObj[camelCase(key)] = qsQueryParamObj[key]; camelCaseParamObj[camelCase(key)] = queryParamObj[key];
}); });
return camelCaseParamObj; return camelCaseParamObj;

7
package.json
View File

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

1
sass/ascribe_footer.scss
View File

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

8
sass/main.scss
View File

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

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

@ -7,3 +7,9 @@
padding-top: 70px; padding-top: 70px;
padding-bottom: 10px; 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-top: 70px;
padding-bottom: 10px; padding-bottom: 10px;
} }
@media print {
.ascribe-wallet-app {
padding: 0 !important;
}
}