mirror of https://github.com/ascribe/onion.git
356 lines
14 KiB
JavaScript
356 lines
14 KiB
JavaScript
'use strict';
|
|
|
|
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import Moment from 'moment';
|
|
|
|
import Row from 'react-bootstrap/lib/Row';
|
|
import Col from 'react-bootstrap/lib/Col';
|
|
import Glyphicon from 'react-bootstrap/lib/Glyphicon';
|
|
|
|
import EditionActions from '../../actions/edition_actions';
|
|
|
|
import DetailProperty from './detail_property';
|
|
import EditionActionPanel from './edition_action_panel';
|
|
import FurtherDetails from './further_details';
|
|
import HistoryIterator from './history_iterator';
|
|
import LicenseDetail from './license_detail';
|
|
import MediaContainer from './media_container';
|
|
import Note from './note';
|
|
|
|
import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
|
|
|
|
import Form from '../ascribe_forms/form';
|
|
import Property from '../ascribe_forms/property';
|
|
|
|
import AclProxy from '../acl_proxy';
|
|
|
|
import ApiUrls from '../../constants/api_urls';
|
|
import AscribeSpinner from '../ascribe_spinner';
|
|
|
|
import { getLangText } from '../../utils/lang_utils';
|
|
|
|
|
|
/**
|
|
* This is the component that implements display-specific functionality
|
|
*/
|
|
let Edition = React.createClass({
|
|
propTypes: {
|
|
currentUser: React.PropTypes.object.isRequired,
|
|
edition: React.PropTypes.object.isRequired,
|
|
whitelabel: React.PropTypes.object.isRequired,
|
|
|
|
actionPanelButtonListType: React.PropTypes.func,
|
|
coaError: React.PropTypes.object,
|
|
furtherDetailsType: React.PropTypes.func,
|
|
loadEdition: React.PropTypes.func
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
furtherDetailsType: FurtherDetails
|
|
};
|
|
},
|
|
|
|
render() {
|
|
const { actionPanelButtonListType,
|
|
coaError,
|
|
currentUser,
|
|
edition,
|
|
furtherDetailsType: FurtherDetailsType,
|
|
loadEdition,
|
|
whitelabel } = this.props;
|
|
|
|
return (
|
|
<Row>
|
|
<Col md={6} className="ascribe-print-col-left">
|
|
<MediaContainer
|
|
content={edition}
|
|
currentUser={currentUser}
|
|
refreshObject={loadEdition} />
|
|
</Col>
|
|
<Col md={6} className="ascribe-edition-details ascribe-print-col-right">
|
|
<div className="ascribe-detail-header">
|
|
<hr className="hidden-print" style={{marginTop: 0}} />
|
|
<h1 className="ascribe-detail-title">{edition.title}</h1>
|
|
<DetailProperty label="CREATED BY" value={edition.artist_name} />
|
|
<DetailProperty
|
|
label="YEAR OF CREATION"
|
|
value={Moment(edition.date_created, 'YYYY-MM-DD').year()} />
|
|
<hr />
|
|
</div>
|
|
<EditionSummary
|
|
actionPanelButtonListType={actionPanelButtonListType}
|
|
edition={edition}
|
|
currentUser={currentUser}
|
|
handleSuccess={loadEdition}
|
|
whitelabel={whitelabel} />
|
|
<CollapsibleParagraph
|
|
title={getLangText('Certificate of Authenticity')}
|
|
show={edition.acl.acl_coa === true}>
|
|
<CoaDetails
|
|
coa={edition.coa}
|
|
coaError={coaError}
|
|
editionId={edition.bitcoin_id} />
|
|
</CollapsibleParagraph>
|
|
|
|
<CollapsibleParagraph
|
|
title={getLangText('Provenance/Ownership History')}
|
|
show={!!(edition.ownership_history && edition.ownership_history.length)}>
|
|
<HistoryIterator history={edition.ownership_history} />
|
|
</CollapsibleParagraph>
|
|
|
|
<CollapsibleParagraph
|
|
title={getLangText('Consignment History')}
|
|
show={!!(edition.consign_history && edition.consign_history.length)}>
|
|
<HistoryIterator history={edition.consign_history} />
|
|
</CollapsibleParagraph>
|
|
|
|
<CollapsibleParagraph
|
|
title={getLangText('Loan History')}
|
|
show={!!(edition.loan_history && edition.loan_history.length)}>
|
|
<HistoryIterator history={edition.loan_history} />
|
|
</CollapsibleParagraph>
|
|
|
|
<CollapsibleParagraph
|
|
title={getLangText('Notes')}
|
|
show={!!(currentUser.username || edition.acl.acl_edit || edition.public_note)}>
|
|
<Note
|
|
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
|
|
label={getLangText('Personal note (private)')}
|
|
defaultValue={edition.private_note ? edition.private_note : null}
|
|
placeholder={getLangText('Enter your comments ...')}
|
|
editable={true}
|
|
successMessage={getLangText('Private note saved')}
|
|
url={ApiUrls.note_private_edition}
|
|
currentUser={currentUser} />
|
|
<Note
|
|
id={() => {return {'bitcoin_id': edition.bitcoin_id}; }}
|
|
label={getLangText('Personal note (public)')}
|
|
defaultValue={edition.public_note ? edition.public_note : null}
|
|
placeholder={getLangText('Enter your comments ...')}
|
|
editable={!!edition.acl.acl_edit}
|
|
show={!!(edition.public_note || edition.acl.acl_edit)}
|
|
successMessage={getLangText('Public edition note saved')}
|
|
url={ApiUrls.note_public_edition}
|
|
currentUser={currentUser} />
|
|
</CollapsibleParagraph>
|
|
<CollapsibleParagraph
|
|
title={getLangText('Further Details')}
|
|
show={!!(edition.acl.acl_edit || Object.keys(edition.extra_data).length || edition.other_data.length)}>
|
|
<FurtherDetailsType
|
|
editable={edition.acl.acl_edit}
|
|
pieceId={edition.parent}
|
|
extraData={edition.extra_data}
|
|
otherData={edition.other_data}
|
|
handleSuccess={loadEdition} />
|
|
</CollapsibleParagraph>
|
|
<CollapsibleParagraph title={getLangText('SPOOL Details')}>
|
|
<SpoolDetails edition={edition} />
|
|
</CollapsibleParagraph>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
});
|
|
|
|
|
|
let EditionSummary = React.createClass({
|
|
propTypes: {
|
|
currentUser: React.PropTypes.object.isRequired,
|
|
edition: React.PropTypes.object.isRequired,
|
|
whitelabel: React.PropTypes.object.isRequired,
|
|
|
|
actionPanelButtonListType: React.PropTypes.func,
|
|
handleSuccess: React.PropTypes.func
|
|
},
|
|
|
|
getStatus() {
|
|
const { status } = this.props.edition;
|
|
|
|
return status.length ? (
|
|
<DetailProperty
|
|
label="STATUS"
|
|
value={status.join(', ').replace(/_/g, ' ')} />
|
|
) : null;
|
|
},
|
|
|
|
render() {
|
|
const { actionPanelButtonListType, currentUser, edition, handleSuccess, whitelabel } = this.props;
|
|
|
|
return (
|
|
<div className="ascribe-detail-header">
|
|
<DetailProperty
|
|
label={getLangText('EDITION')}
|
|
value={edition.edition_number + ' ' + getLangText('of') + ' ' + edition.num_editions} />
|
|
<DetailProperty
|
|
label={getLangText('ID')}
|
|
value={edition.bitcoin_id}
|
|
ellipsis={true} />
|
|
<DetailProperty
|
|
label="DATE OF TIMESTAMPING"
|
|
value={Moment(edition.datetime_registered).format('MMM. DD, YYYY, h:mm:ss')} />
|
|
<DetailProperty
|
|
label={getLangText('OWNER')}
|
|
value={edition.owner} />
|
|
<LicenseDetail license={edition.license_type} />
|
|
{this.getStatus()}
|
|
{/*
|
|
`acl_view` is always available in `edition.acl`, therefore if it has
|
|
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
|
|
`AclInformation` would show up
|
|
*/}
|
|
<AclProxy show={currentUser.email && Object.keys(edition.acl).length > 1}>
|
|
<DetailProperty
|
|
label={getLangText('ACTIONS')}
|
|
className="hidden-print">
|
|
<EditionActionPanel
|
|
actionPanelButtonListType={actionPanelButtonListType}
|
|
currentUser={currentUser}
|
|
edition={edition}
|
|
handleSuccess={handleSuccess}
|
|
whitelabel={whitelabel} />
|
|
</DetailProperty>
|
|
</AclProxy>
|
|
<hr/>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
|
|
let CoaDetails = React.createClass({
|
|
propTypes: {
|
|
editionId: React.PropTypes.string,
|
|
coa: React.PropTypes.oneOfType([
|
|
React.PropTypes.number,
|
|
React.PropTypes.string,
|
|
React.PropTypes.object
|
|
]),
|
|
coaError: React.PropTypes.object
|
|
},
|
|
|
|
render() {
|
|
const { coa, coaError } = this.props;
|
|
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' }} href="mailto:support@ascribe.io">{getLangText('contact us')}</a>.
|
|
</p>
|
|
];
|
|
} else if (coa && coa.url_safe) {
|
|
coaDetailElement = [
|
|
<div
|
|
className="notification-contract-pdf"
|
|
style={{paddingBottom: '1em'}}>
|
|
<embed
|
|
className="embed-form"
|
|
src={coa.url_safe}
|
|
alt="pdf"
|
|
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
|
|
</div>,
|
|
<div className="text-center ascribe-button-list">
|
|
<a href={coa.url_safe} target="_blank">
|
|
<button className="btn btn-default btn-xs">
|
|
{getLangText('Download')} <Glyphicon glyph="cloud-download"/>
|
|
</button>
|
|
</a>
|
|
<Link to="/coa_verify">
|
|
<button className="btn btn-default btn-xs">
|
|
{getLangText('Verify')} <Glyphicon glyph="check"/>
|
|
</button>
|
|
</Link>
|
|
</div>
|
|
];
|
|
} else if (typeof coa === 'string') {
|
|
coaDetailElement = coa;
|
|
} else {
|
|
coaDetailElement = [
|
|
<AscribeSpinner color='dark-blue' size='md'/>,
|
|
<p>{getLangText("Just a sec, we're generating your COA")}</p>,
|
|
<p>{getLangText('(you may leave the page)')}</p>
|
|
];
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<div className="text-center hidden-print">
|
|
{coaDetailElement}
|
|
</div>
|
|
{/* Hide the COA and just show that it's a seperate document when printing */}
|
|
<div className="visible-print ascribe-coa-print-placeholder">
|
|
{getLangText('The COA is available as a seperate document')}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
let SpoolDetails = React.createClass({
|
|
propTypes: {
|
|
edition: React.PropTypes.object
|
|
},
|
|
|
|
render() {
|
|
const { edition: {
|
|
bitcoin_id: bitcoinId,
|
|
hash_as_address: hashAsAddress,
|
|
btc_owner_address_noprefix: bitcoinOwnerAddress
|
|
} } = this.props;
|
|
|
|
const bitcoinIdValue = (
|
|
<a className="anchor-no-expand-print"
|
|
target="_blank"
|
|
href={'https://www.blocktrail.com/BTC/address/' + bitcoinId}>
|
|
{bitcoinId}
|
|
</a>
|
|
);
|
|
|
|
const hashOfArtwork = (
|
|
<a className="anchor-no-expand-print"
|
|
target="_blank"
|
|
href={'https://www.blocktrail.com/BTC/address/' + hashAsAddress}>
|
|
{hashAsAddress}
|
|
</a>
|
|
);
|
|
|
|
const ownerAddress = (
|
|
<a className="anchor-no-expand-print"
|
|
target="_blank"
|
|
href={'https://www.blocktrail.com/BTC/address/' + bitcoinOwnerAddress}>
|
|
{bitcoinOwnerAddress}
|
|
</a>
|
|
);
|
|
|
|
return (
|
|
<Form >
|
|
<Property
|
|
name='artwork_id'
|
|
label={getLangText('Artwork ID')}
|
|
editable={false}>
|
|
<pre className="ascribe-pre">{bitcoinIdValue}</pre>
|
|
</Property>
|
|
<Property
|
|
name='hash_of_artwork'
|
|
label={getLangText('Hash of Artwork, title, etc')}
|
|
editable={false}>
|
|
<pre className="ascribe-pre">{hashOfArtwork}</pre>
|
|
</Property>
|
|
<Property
|
|
name='owner_address'
|
|
label={getLangText('Owned by SPOOL address')}
|
|
editable={false}>
|
|
<pre className="ascribe-pre">{ownerAddress}</pre>
|
|
</Property>
|
|
<hr />
|
|
</Form>);
|
|
|
|
}
|
|
});
|
|
|
|
export default Edition;
|