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

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2015-12-23 13:17:08 +01:00
commit 39730ec637
42 changed files with 641 additions and 347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/actions/notification_actions.js
View File

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

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

@ -16,7 +16,7 @@ let AccordionListItemPiece = React.createClass({
React.PropTypes.string, React.PropTypes.string,
React.PropTypes.element React.PropTypes.element
]), ]),
piece: React.PropTypes.object, 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
@ -54,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 + '")'}} />
); );
} }
@ -82,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}`));
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 (
<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> let coaDetailElement;
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.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 (

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}

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

@ -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')}

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}

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"

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

@ -30,15 +30,15 @@ let PieceListToolbarFilterWidget = React.createClass({
generateFilterByStatement(param) { 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,62 +81,66 @@ 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> return (
<li <div>
style={{'textAlign': 'center'}} <li
key={i}> style={{'textAlign': 'center'}}
<em>{label}:</em> key={i}>
</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={j} 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;
}
} }
}); });

66
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,37 +51,41 @@ 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> {this.props.orderParams.map((param) => {
<li return (
key={param} <div>
onClick={this.orderBy(param)} <li
className="filter-widget-item"> key={param}
<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;
}
} }
}); });

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

7
js/components/piece_list.js
View File

@ -37,6 +37,7 @@ let PieceList = React.createClass({
bulkModalButtonListType: React.PropTypes.func, bulkModalButtonListType: React.PropTypes.func,
canLoadPieceList: React.PropTypes.bool, canLoadPieceList: React.PropTypes.bool,
redirectTo: React.PropTypes.string, redirectTo: React.PropTypes.string,
shouldRedirect: React.PropTypes.func,
customSubmitButton: React.PropTypes.element, customSubmitButton: React.PropTypes.element,
customThumbnailPlaceholder: React.PropTypes.func, customThumbnailPlaceholder: React.PropTypes.func,
filterParams: React.PropTypes.array, filterParams: React.PropTypes.array,
@ -114,7 +115,11 @@ let PieceList = React.createClass({
}, },
componentDidUpdate() { componentDidUpdate() {
if (this.props.redirectTo && this.state.unfilteredPieceListCount === 0) { const { redirectTo, shouldRedirect } = this.props;
const { unfilteredPieceListCount } = this.state;
if (redirectTo && unfilteredPieceListCount === 0 &&
(typeof shouldRedirect === 'function' && shouldRedirect(unfilteredPieceListCount))) {
// FIXME: hack to redirect out of the dispatch cycle // 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.pushState(null, this.props.redirectTo, this.props.location.query), 0);
} }

53
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,
@ -106,10 +108,18 @@ const PRRegisterPieceForm = React.createClass({
}) })
.then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`)) .then(() => this.history.pushState(null, `/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/',

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

@ -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/simple_prize/prize_app.js
View File

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

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

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

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

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;

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

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

2
js/components/whitelabel/wallet/wallet_app.js
View File

@ -35,7 +35,7 @@ let WalletApp = React.createClass({
&& (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) { && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = <Header showAddWork={true} routes={routes} />; header = <Header routes={routes} />;
} }
// In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however, // In react-router 1.0, Routes have no 'name' property anymore. To keep functionality however,

56
js/components/whitelabel/wallet/wallet_routes.js
View File

@ -54,7 +54,7 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@ -63,18 +63,19 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'
aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CylandPieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION' />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
<Route path='pieces/:pieceId' component={CylandPieceContainer} /> <Route path='pieces/:pieceId' component={CylandPieceContainer} />
@ -88,7 +89,7 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@ -97,18 +98,18 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(CCRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK' />
<Route <Route
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(PieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={PieceContainer} /> <Route path='pieces/:pieceId' component={PieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
@ -123,7 +124,7 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@ -132,27 +133,27 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='request_loan' path='request_loan'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SendContractAgreementForm)}
headerTitle='SEND NEW CONTRACT' headerTitle='SEND NEW CONTRACT'
aclName='acl_create_contractagreement'/> aclName='acl_create_contractagreement' />
<Route <Route
path='register_piece' path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvRegisterPiece)}
headerTitle='+ NEW WORK' headerTitle='+ NEW WORK'
aclName='acl_create_piece'/> aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvPieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION' />
<Route <Route
path='contract_notifications' path='contract_notifications'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(IkonotvContractNotifications)} />
<Route path='pieces/:pieceId' component={IkonotvPieceContainer} /> <Route path='pieces/:pieceId' component={IkonotvPieceContainer} />
<Route path='editions/:editionId' component={EditionContainer} /> <Route path='editions/:editionId' component={EditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
@ -167,7 +168,7 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@ -176,18 +177,19 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
headerTitle='+ NEW WORK'/> headerTitle='+ NEW WORK'
aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketPieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={MarketPieceContainer} /> <Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} /> <Route path='editions/:editionId' component={MarketEditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
@ -202,7 +204,7 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(LoginContainer)} />
<Route <Route
path='logout' path='logout'
component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)}/> component={ProxyHandler(AuthRedirect({to: '/', when: 'loggedOut'}))(LogoutContainer)} />
<Route <Route
path='signup' path='signup'
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(SignupContainer)} />
@ -211,19 +213,19 @@ let ROUTES = {
component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} /> component={ProxyHandler(AuthRedirect({to: '/collection', when: 'loggedIn'}))(PasswordResetContainer)} />
<Route <Route
path='settings' path='settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(SettingsContainer)} />
<Route <Route
path='contract_settings' path='contract_settings'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)}/> component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(ContractSettings)} />
<Route <Route
path='register_piece' path='register_piece'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(MarketRegisterPiece)}
headerTitle='+ NEW WORK' headerTitle='+ NEW WORK'
aclName='acl_wallet_submit'/> aclName='acl_wallet_submit' />
<Route <Route
path='collection' path='collection'
component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)} component={ProxyHandler(AuthRedirect({to: '/login', when: 'loggedOut'}))(Vivi23PieceList)}
headerTitle='COLLECTION'/> headerTitle='COLLECTION' />
<Route path='pieces/:pieceId' component={MarketPieceContainer} /> <Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} /> <Route path='editions/:editionId' component={MarketEditionContainer} />
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />

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

13
js/stores/notification_store.js
View File

@ -10,6 +10,8 @@ class NotificationStore {
constructor() { constructor() {
this.pieceListNotifications = {}; this.pieceListNotifications = {};
this.editionListNotifications = {}; this.editionListNotifications = {};
// Need to determine if contract agreement notifications have been loaded or not,
// so we use null here instead of an empty array
this.contractAgreementListNotifications = null; this.contractAgreementListNotifications = null;
this.editionNotifications = null; this.editionNotifications = null;
this.pieceNotifications = null; this.pieceNotifications = null;
@ -20,6 +22,10 @@ class NotificationStore {
this.pieceListNotifications = res.notifications; this.pieceListNotifications = res.notifications;
} }
onFlushPieceListNotifications() {
this.pieceListNotifications = [];
}
onUpdatePieceNotifications(res) { onUpdatePieceNotifications(res) {
this.pieceNotifications = res.notification; this.pieceNotifications = res.notification;
} }
@ -28,6 +34,10 @@ class NotificationStore {
this.editionListNotifications = res.notifications; this.editionListNotifications = res.notifications;
} }
onFlushPieceListNotifications() {
this.editionListNotifications = [];
}
onUpdateEditionNotifications(res) { onUpdateEditionNotifications(res) {
this.editionNotifications = res.notification; this.editionNotifications = res.notification;
} }
@ -36,6 +46,9 @@ class NotificationStore {
this.contractAgreementListNotifications = res.notifications; this.contractAgreementListNotifications = res.notifications;
} }
onFlushContractAgreementListNotifications() {
this.contractAgreementListNotifications = null;
}
} }
export default alt.createStore(NotificationStore, 'NotificationStore'); export default alt.createStore(NotificationStore, 'NotificationStore');

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

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