mirror of
https://github.com/ascribe/onion.git
synced 2024-12-22 17:33:14 +01:00
Merge branch 'master' into AD-1313-Attach-thumbnail-to-piece-in-register-form
Conflicts: js/components/ascribe_detail/further_details_fileuploader.js js/components/ascribe_forms/form.js js/components/ascribe_forms/form_loan.js js/components/ascribe_forms/form_register_piece.js js/components/ascribe_forms/input_fineuploader.js js/components/ascribe_forms/property.js js/components/ascribe_forms/property_collapsible.js js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js js/components/ascribe_uploader/react_s3_fine_uploader.js js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js sass/ascribe-fonts/ascribe-fonts.scss sass/whitelabel/wallet/cyland/cyland_custom_style.scss
This commit is contained in:
commit
49421e1fa1
@ -22,8 +22,7 @@ class ContractAgreementListActions {
|
|||||||
if (contractAgreementList.count > 0) {
|
if (contractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(contractAgreementList.results);
|
this.actions.updateContractAgreementList(contractAgreementList.results);
|
||||||
resolve(contractAgreementList.results);
|
resolve(contractAgreementList.results);
|
||||||
}
|
} else {
|
||||||
else{
|
|
||||||
resolve(null);
|
resolve(null);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -35,13 +34,13 @@ class ContractAgreementListActions {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
fetchAvailableContractAgreementList(issuer, createContractAgreement) {
|
fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
|
||||||
return Q.Promise((resolve, reject) => {
|
return Q.Promise((resolve, reject) => {
|
||||||
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
|
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
|
||||||
.then((acceptedContractAgreementList) => {
|
.then((acceptedContractAgreementList) => {
|
||||||
// if there is at least an accepted contract agreement, we're going to
|
// if there is at least an accepted contract agreement, we're going to
|
||||||
// use it
|
// use it
|
||||||
if(acceptedContractAgreementList.count > 0) {
|
if (acceptedContractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
|
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
|
||||||
} else {
|
} else {
|
||||||
// otherwise, we're looking for contract agreements that are still pending
|
// otherwise, we're looking for contract agreements that are still pending
|
||||||
@ -50,15 +49,13 @@ class ContractAgreementListActions {
|
|||||||
// overcomplicate the method
|
// overcomplicate the method
|
||||||
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
|
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
|
||||||
.then((pendingContractAgreementList) => {
|
.then((pendingContractAgreementList) => {
|
||||||
if(pendingContractAgreementList.count > 0) {
|
if (pendingContractAgreementList.count > 0) {
|
||||||
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
|
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
|
||||||
} else {
|
} else if (createPublicContractAgreement) {
|
||||||
// if there was neither a pending nor an active contractAgreement
|
// if there was neither a pending nor an active contractAgreement
|
||||||
// found and createContractAgreement is set to true, we create a
|
// found and createPublicContractAgreement is set to true, we create a
|
||||||
// new contract agreement
|
// new public contract agreement
|
||||||
if(createContractAgreement) {
|
this.actions.createContractAgreementFromPublicContract(issuer);
|
||||||
this.actions.createContractAgreementFromPublicContract(issuer);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
@ -81,8 +78,7 @@ class ContractAgreementListActions {
|
|||||||
// create an agreement with the public contract if there is one
|
// create an agreement with the public contract if there is one
|
||||||
if (publicContract && publicContract.length > 0) {
|
if (publicContract && publicContract.length > 0) {
|
||||||
return this.actions.createContractAgreement(null, publicContract[0]);
|
return this.actions.createContractAgreement(null, publicContract[0]);
|
||||||
}
|
} else {
|
||||||
else {
|
|
||||||
/*
|
/*
|
||||||
contractAgreementList in the store is already set to null;
|
contractAgreementList in the store is already set to null;
|
||||||
*/
|
*/
|
||||||
@ -91,21 +87,17 @@ class ContractAgreementListActions {
|
|||||||
if (publicContracAgreement) {
|
if (publicContracAgreement) {
|
||||||
this.actions.updateContractAgreementList([publicContracAgreement]);
|
this.actions.updateContractAgreementList([publicContracAgreement]);
|
||||||
}
|
}
|
||||||
}).catch((err) => {
|
}).catch(console.logGlobal);
|
||||||
console.logGlobal(err);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
createContractAgreement(issuer, contract){
|
createContractAgreement(issuer, contract){
|
||||||
return Q.Promise((resolve, reject) => {
|
return Q.Promise((resolve, reject) => {
|
||||||
OwnershipFetcher.createContractAgreement(issuer, contract).then(
|
OwnershipFetcher
|
||||||
(contractAgreement) => {
|
.createContractAgreement(issuer, contract).then(resolve)
|
||||||
resolve(contractAgreement);
|
.catch((err) => {
|
||||||
}
|
console.logGlobal(err);
|
||||||
).catch((err) => {
|
reject(err);
|
||||||
console.logGlobal(err);
|
});
|
||||||
reject(err);
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,7 +7,8 @@ import EditionFetcher from '../fetchers/edition_fetcher';
|
|||||||
class EditionActions {
|
class EditionActions {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'updateEdition'
|
'updateEdition',
|
||||||
|
'editionFailed'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -18,6 +19,7 @@ class EditionActions {
|
|||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.logGlobal(err);
|
console.logGlobal(err);
|
||||||
|
this.actions.editionFailed(err.json);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -8,7 +8,8 @@ class PieceActions {
|
|||||||
constructor() {
|
constructor() {
|
||||||
this.generateActions(
|
this.generateActions(
|
||||||
'updatePiece',
|
'updatePiece',
|
||||||
'updateProperty'
|
'updateProperty',
|
||||||
|
'pieceFailed'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -19,6 +20,7 @@ class PieceActions {
|
|||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.logGlobal(err);
|
console.logGlobal(err);
|
||||||
|
this.actions.pieceFailed(err.json);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
19
js/actions/webhook_actions.js
Normal file
19
js/actions/webhook_actions.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { alt } from '../alt';
|
||||||
|
|
||||||
|
|
||||||
|
class WebhookActions {
|
||||||
|
constructor() {
|
||||||
|
this.generateActions(
|
||||||
|
'fetchWebhooks',
|
||||||
|
'successFetchWebhooks',
|
||||||
|
'fetchWebhookEvents',
|
||||||
|
'successFetchWebhookEvents',
|
||||||
|
'removeWebhook',
|
||||||
|
'successRemoveWebhook'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default alt.createActions(WebhookActions);
|
@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<AscribeSpinner
|
<AscribeSpinner
|
||||||
size='sm'
|
size='sm'
|
||||||
color='white'
|
|
||||||
classNames='pull-right margin-left-2px'/>
|
classNames='pull-right margin-left-2px'/>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
@ -137,4 +136,4 @@ let AccordionListItemEditionWidget = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default AccordionListItemEditionWidget;
|
export default AccordionListItemEditionWidget;
|
||||||
|
@ -4,6 +4,7 @@ import React from 'react';
|
|||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
import AccordionListItem from './accordion_list_item';
|
import AccordionListItem from './accordion_list_item';
|
||||||
|
import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
|
||||||
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({
|
|||||||
]),
|
]),
|
||||||
subsubheading: React.PropTypes.object,
|
subsubheading: React.PropTypes.object,
|
||||||
buttons: React.PropTypes.object,
|
buttons: React.PropTypes.object,
|
||||||
badge: React.PropTypes.object
|
badge: React.PropTypes.object,
|
||||||
|
thumbnailPlaceholder: React.PropTypes.func
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getLinkData() {
|
getLinkData() {
|
||||||
@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { className, piece, artistName, buttons, badge, children, subsubheading } = this.props;
|
const {
|
||||||
|
artistName,
|
||||||
|
badge,
|
||||||
|
buttons,
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
piece,
|
||||||
|
subsubheading,
|
||||||
|
thumbnailPlaceholder: ThumbnailPlaceholder } = this.props;
|
||||||
const { url, url_safe } = piece.thumbnail;
|
const { url, url_safe } = piece.thumbnail;
|
||||||
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 (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
|
||||||
thumbnail = (
|
thumbnail = (<ThumbnailPlaceholder />);
|
||||||
<span className="ascribe-logo-circle">
|
|
||||||
<span>A</span>
|
|
||||||
</span>
|
|
||||||
);
|
|
||||||
} else {
|
} else {
|
||||||
thumbnail = (
|
thumbnail = (
|
||||||
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
|
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>
|
||||||
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
let AccordionListItemThumbnailPlaceholder = React.createClass({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span className="ascribe-logo-circle">
|
||||||
|
<span>A</span>
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default AccordionListItemThumbnailPlaceholder;
|
@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
content: React.PropTypes.object,
|
content: React.PropTypes.object,
|
||||||
|
thumbnailPlaceholder: React.PropTypes.func,
|
||||||
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
|
||||||
@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { children, className, content, thumbnailPlaceholder } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AccordionListItemPiece
|
<AccordionListItemPiece
|
||||||
className={this.props.className}
|
className={className}
|
||||||
piece={this.props.content}
|
piece={content}
|
||||||
subsubheading={
|
subsubheading={
|
||||||
<div className="pull-left">
|
<div className="pull-left">
|
||||||
<span>{Moment(this.props.content.date_created, 'YYYY-MM-DD').year()}</span>
|
<span>{Moment(content.date_created, 'YYYY-MM-DD').year()}</span>
|
||||||
{this.getLicences()}
|
{this.getLicences()}
|
||||||
</div>}
|
</div>
|
||||||
|
}
|
||||||
buttons={
|
buttons={
|
||||||
<div>
|
<div>
|
||||||
<AclProxy
|
<AclProxy
|
||||||
aclObject={this.props.content.acl}
|
aclObject={content.acl}
|
||||||
aclName="acl_view_editions">
|
aclName="acl_view_editions">
|
||||||
<AccordionListItemEditionWidget
|
<AccordionListItemEditionWidget
|
||||||
className="pull-right"
|
className="pull-right"
|
||||||
piece={this.props.content}
|
piece={content}
|
||||||
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
|
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
|
||||||
onPollingSuccess={this.onPollingSuccess}/>
|
onPollingSuccess={this.onPollingSuccess}/>
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
</div>}
|
</div>
|
||||||
badge={this.getGlyphicon()}>
|
}
|
||||||
|
badge={this.getGlyphicon()}
|
||||||
|
thumbnailPlaceholder={thumbnailPlaceholder}>
|
||||||
{this.getCreateEditionsDialog()}
|
{this.getCreateEditionsDialog()}
|
||||||
{/* this.props.children is AccordionListItemTableEditions */}
|
{/* this.props.children is AccordionListItemTableEditions */}
|
||||||
{this.props.children}
|
{children}
|
||||||
</AccordionListItemPiece>
|
</AccordionListItemPiece>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
|
|||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
UserActions.fetchCurrentUser();
|
UserActions.fetchCurrentUser.defer();
|
||||||
|
|
||||||
window.addEventListener('resize', this.handleResize);
|
window.addEventListener('resize', this.handleResize);
|
||||||
window.dispatchEvent(new Event('resize'));
|
window.dispatchEvent(new Event('resize'));
|
||||||
|
@ -26,7 +26,7 @@ export default function ({ action, displayName, title, tooltip }) {
|
|||||||
availableAcls: React.PropTypes.object.isRequired,
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
buttonAcceptName: React.PropTypes.string,
|
buttonAcceptName: React.PropTypes.string,
|
||||||
buttonAcceptClassName: React.PropTypes.string,
|
buttonAcceptClassName: React.PropTypes.string,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
currentUser: React.PropTypes.object,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
pieceOrEditions: React.PropTypes.oneOfType([
|
pieceOrEditions: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
|
@ -12,7 +12,9 @@ const CollapsibleParagraph = React.createClass({
|
|||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
]),
|
]),
|
||||||
iconName: React.PropTypes.string
|
iconName: React.PropTypes.string,
|
||||||
|
show: React.PropTypes.bool,
|
||||||
|
defaultExpanded: React.PropTypes.bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
|
@ -7,6 +7,7 @@ let DetailProperty = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
label: React.PropTypes.string,
|
label: React.PropTypes.string,
|
||||||
value: React.PropTypes.oneOfType([
|
value: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.number,
|
||||||
React.PropTypes.string,
|
React.PropTypes.string,
|
||||||
React.PropTypes.element
|
React.PropTypes.element
|
||||||
]),
|
]),
|
||||||
|
@ -41,13 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
*/
|
*/
|
||||||
let Edition = React.createClass({
|
let Edition = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
|
furtherDetailsType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
loadEdition: React.PropTypes.func,
|
loadEdition: React.PropTypes.func
|
||||||
location: React.PropTypes.object
|
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
mixins: [History],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
furtherDetailsType: FurtherDetails
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return UserStore.getState();
|
return UserStore.getState();
|
||||||
},
|
},
|
||||||
@ -75,6 +82,8 @@ let Edition = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
let FurtherDetailsType = this.props.furtherDetailsType;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={6}>
|
<Col md={6}>
|
||||||
@ -90,6 +99,7 @@ let Edition = React.createClass({
|
|||||||
<hr/>
|
<hr/>
|
||||||
</div>
|
</div>
|
||||||
<EditionSummary
|
<EditionSummary
|
||||||
|
actionPanelButtonListType={this.props.actionPanelButtonListType}
|
||||||
edition={this.props.edition}
|
edition={this.props.edition}
|
||||||
currentUser={this.state.currentUser}
|
currentUser={this.state.currentUser}
|
||||||
handleSuccess={this.props.loadEdition}/>
|
handleSuccess={this.props.loadEdition}/>
|
||||||
@ -137,7 +147,7 @@ let Edition = React.createClass({
|
|||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
<Note
|
<Note
|
||||||
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
|
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
|
||||||
label={getLangText('Edition note (public)')}
|
label={getLangText('Personal note (public)')}
|
||||||
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
|
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
|
||||||
placeholder={getLangText('Enter your comments ...')}
|
placeholder={getLangText('Enter your comments ...')}
|
||||||
editable={!!this.props.edition.acl.acl_edit}
|
editable={!!this.props.edition.acl.acl_edit}
|
||||||
@ -151,13 +161,12 @@ let Edition = React.createClass({
|
|||||||
show={this.props.edition.acl.acl_edit
|
show={this.props.edition.acl.acl_edit
|
||||||
|| Object.keys(this.props.edition.extra_data).length > 0
|
|| Object.keys(this.props.edition.extra_data).length > 0
|
||||||
|| this.props.edition.other_data.length > 0}>
|
|| this.props.edition.other_data.length > 0}>
|
||||||
<FurtherDetails
|
<FurtherDetailsType
|
||||||
editable={this.props.edition.acl.acl_edit}
|
editable={this.props.edition.acl.acl_edit}
|
||||||
pieceId={this.props.edition.parent}
|
pieceId={this.props.edition.parent}
|
||||||
extraData={this.props.edition.extra_data}
|
extraData={this.props.edition.extra_data}
|
||||||
otherData={this.props.edition.other_data}
|
otherData={this.props.edition.other_data}
|
||||||
handleSuccess={this.props.loadEdition}
|
handleSuccess={this.props.loadEdition} />
|
||||||
location={this.props.location}/>
|
|
||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
<CollapsibleParagraph
|
<CollapsibleParagraph
|
||||||
title={getLangText('SPOOL Details')}>
|
title={getLangText('SPOOL Details')}>
|
||||||
@ -173,6 +182,7 @@ let Edition = React.createClass({
|
|||||||
|
|
||||||
let EditionSummary = React.createClass({
|
let EditionSummary = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
currentUser: React.PropTypes.object,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
@ -185,7 +195,7 @@ let EditionSummary = React.createClass({
|
|||||||
getStatus(){
|
getStatus(){
|
||||||
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(/_/, ' ');
|
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
|
||||||
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
|
status = <EditionDetailProperty 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 = (
|
||||||
@ -197,7 +207,7 @@ let EditionSummary = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { edition, currentUser } = this.props;
|
let { actionPanelButtonListType, edition, currentUser } = this.props;
|
||||||
return (
|
return (
|
||||||
<div className="ascribe-detail-header">
|
<div className="ascribe-detail-header">
|
||||||
<EditionDetailProperty
|
<EditionDetailProperty
|
||||||
@ -212,10 +222,16 @@ let EditionSummary = React.createClass({
|
|||||||
value={ edition.owner } />
|
value={ edition.owner } />
|
||||||
<LicenseDetail license={edition.license_type}/>
|
<LicenseDetail license={edition.license_type}/>
|
||||||
{this.getStatus()}
|
{this.getStatus()}
|
||||||
<AclProxy show={currentUser && currentUser.email}>
|
{/*
|
||||||
|
`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 && currentUser.email && Object.keys(edition.acl).length > 1}>
|
||||||
<EditionDetailProperty
|
<EditionDetailProperty
|
||||||
label={getLangText('ACTIONS')}>
|
label={getLangText('ACTIONS')}>
|
||||||
<EditionActionPanel
|
<EditionActionPanel
|
||||||
|
actionPanelButtonListType={actionPanelButtonListType}
|
||||||
edition={edition}
|
edition={edition}
|
||||||
currentUser={currentUser}
|
currentUser={currentUser}
|
||||||
handleSuccess={this.handleSuccess} />
|
handleSuccess={this.handleSuccess} />
|
||||||
|
@ -36,6 +36,7 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
*/
|
*/
|
||||||
let EditionActionPanel = React.createClass({
|
let EditionActionPanel = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
edition: React.PropTypes.object,
|
edition: React.PropTypes.object,
|
||||||
currentUser: React.PropTypes.object,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
@ -43,6 +44,12 @@ let EditionActionPanel = React.createClass({
|
|||||||
|
|
||||||
mixins: [History],
|
mixins: [History],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
actionPanelButtonListType: AclButtonList
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return PieceListStore.getState();
|
return PieceListStore.getState();
|
||||||
},
|
},
|
||||||
@ -87,7 +94,10 @@ let EditionActionPanel = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
let {edition, currentUser} = this.props;
|
const {
|
||||||
|
actionPanelButtonListType: ActionPanelButtonListType,
|
||||||
|
edition,
|
||||||
|
currentUser } = this.props;
|
||||||
|
|
||||||
if (edition &&
|
if (edition &&
|
||||||
edition.notifications &&
|
edition.notifications &&
|
||||||
@ -104,7 +114,7 @@ let EditionActionPanel = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Row>
|
<Row>
|
||||||
<Col md={12}>
|
<Col md={12}>
|
||||||
<AclButtonList
|
<ActionPanelButtonListType
|
||||||
className="ascribe-button-list"
|
className="ascribe-button-list"
|
||||||
availableAcls={edition.acl}
|
availableAcls={edition.acl}
|
||||||
pieceOrEditions={[edition]}
|
pieceOrEditions={[edition]}
|
||||||
@ -121,8 +131,9 @@ let EditionActionPanel = React.createClass({
|
|||||||
name="bitcoin_id"
|
name="bitcoin_id"
|
||||||
expanded={false}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={edition.bitcoin_id} />
|
value={edition.bitcoin_id}
|
||||||
|
readOnly />
|
||||||
</Property>
|
</Property>
|
||||||
<Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
|
<Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
|
||||||
{getLangText('WITHDRAW TRANSFER')}
|
{getLangText('WITHDRAW TRANSFER')}
|
||||||
@ -141,8 +152,9 @@ let EditionActionPanel = React.createClass({
|
|||||||
name="bitcoin_id"
|
name="bitcoin_id"
|
||||||
expanded={false}>
|
expanded={false}>
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
value={edition.bitcoin_id} />
|
value={edition.bitcoin_id}
|
||||||
|
readOnly />
|
||||||
</Property>
|
</Property>
|
||||||
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
|
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
|
||||||
{getLangText('WITHDRAW CONSIGN')}
|
{getLangText('WITHDRAW CONSIGN')}
|
||||||
@ -164,7 +176,7 @@ let EditionActionPanel = React.createClass({
|
|||||||
aim="button"
|
aim="button"
|
||||||
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
|
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
|
||||||
aclObject={edition.acl}/>
|
aclObject={edition.acl}/>
|
||||||
</AclButtonList>
|
</ActionPanelButtonListType>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
|
@ -1,6 +1,10 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { History } from 'react-router';
|
||||||
|
|
||||||
|
import ReactError from '../../mixins/react_error';
|
||||||
|
import { ResourceNotFoundError } from '../../models/errors';
|
||||||
|
|
||||||
import EditionActions from '../../actions/edition_actions';
|
import EditionActions from '../../actions/edition_actions';
|
||||||
import EditionStore from '../../stores/edition_store';
|
import EditionStore from '../../stores/edition_store';
|
||||||
@ -9,6 +13,7 @@ import Edition from './edition';
|
|||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
import { setDocumentTitle } from '../../utils/dom_utils';
|
import { setDocumentTitle } from '../../utils/dom_utils';
|
||||||
|
|
||||||
|
|
||||||
@ -17,10 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
|
|||||||
*/
|
*/
|
||||||
let EditionContainer = React.createClass({
|
let EditionContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
params: React.PropTypes.object,
|
actionPanelButtonListType: React.PropTypes.func,
|
||||||
location: React.PropTypes.object
|
furtherDetailsType: React.PropTypes.func,
|
||||||
|
params: React.PropTypes.object
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mixins: [History, ReactError],
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return EditionStore.getState();
|
return EditionStore.getState();
|
||||||
},
|
},
|
||||||
@ -28,11 +36,11 @@ let EditionContainer = React.createClass({
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
EditionStore.listen(this.onChange);
|
EditionStore.listen(this.onChange);
|
||||||
|
|
||||||
// Every time we enter the edition detail page, just reset the edition
|
// Every time we're entering the edition detail page,
|
||||||
// store as it will otherwise display wrong/old data once the user loads
|
// just reset the edition that is saved in the edition store
|
||||||
|
// as it will otherwise display wrong/old data once the user loads
|
||||||
// the edition detail a second time
|
// the edition detail a second time
|
||||||
EditionActions.updateEdition({});
|
EditionActions.updateEdition({});
|
||||||
|
|
||||||
this.loadEdition();
|
this.loadEdition();
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -45,6 +53,14 @@ let EditionContainer = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
const { editionError } = this.state;
|
||||||
|
|
||||||
|
if(editionError && editionError.status === 404) {
|
||||||
|
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
window.clearInterval(this.state.timerId);
|
window.clearInterval(this.state.timerId);
|
||||||
EditionStore.unlisten(this.onChange);
|
EditionStore.unlisten(this.onChange);
|
||||||
@ -67,14 +83,15 @@ let EditionContainer = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if(this.state.edition && this.state.edition.title) {
|
if(this.state.edition && this.state.edition.id) {
|
||||||
setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
|
setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Edition
|
<Edition
|
||||||
|
actionPanelButtonListType={this.props.actionPanelButtonListType}
|
||||||
|
furtherDetailsType={this.props.furtherDetailsType}
|
||||||
edition={this.state.edition}
|
edition={this.state.edition}
|
||||||
loadEdition={this.loadEdition}
|
loadEdition={this.loadEdition} />
|
||||||
location={this.props.location}/>
|
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
|
@ -23,8 +23,7 @@ let FurtherDetails = React.createClass({
|
|||||||
pieceId: React.PropTypes.number,
|
pieceId: React.PropTypes.number,
|
||||||
extraData: React.PropTypes.object,
|
extraData: React.PropTypes.object,
|
||||||
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||||
handleSuccess: React.PropTypes.func,
|
handleSuccess: React.PropTypes.func
|
||||||
location: React.PropTypes.object
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
@ -86,8 +85,7 @@ let FurtherDetails = React.createClass({
|
|||||||
overrideForm={true}
|
overrideForm={true}
|
||||||
pieceId={this.props.pieceId}
|
pieceId={this.props.pieceId}
|
||||||
otherData={this.props.otherData}
|
otherData={this.props.otherData}
|
||||||
multiple={true}
|
multiple={true} />
|
||||||
location={this.props.location}/>
|
|
||||||
</Form>
|
</Form>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
@ -10,9 +10,12 @@ import ApiUrls from '../../constants/api_urls';
|
|||||||
import AppConstants from '../../constants/application_constants';
|
import AppConstants from '../../constants/application_constants';
|
||||||
|
|
||||||
import { getCookie } from '../../utils/fetch_api_utils';
|
import { getCookie } from '../../utils/fetch_api_utils';
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let FurtherDetailsFileuploader = React.createClass({
|
let FurtherDetailsFileuploader = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
label: React.PropTypes.string,
|
||||||
pieceId: React.PropTypes.number,
|
pieceId: React.PropTypes.number,
|
||||||
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
|
||||||
setIsUploadReady: React.PropTypes.func,
|
setIsUploadReady: React.PropTypes.func,
|
||||||
@ -24,6 +27,7 @@ let FurtherDetailsFileuploader = React.createClass({
|
|||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
|
label: getLangText('Additional files'),
|
||||||
multiple: false
|
multiple: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
@ -43,7 +47,7 @@ let FurtherDetailsFileuploader = React.createClass({
|
|||||||
return (
|
return (
|
||||||
<Property
|
<Property
|
||||||
name="other_data_key"
|
name="other_data_key"
|
||||||
label="Additional files">
|
label={this.props.label}>
|
||||||
<ReactS3FineUploader
|
<ReactS3FineUploader
|
||||||
keyRoutine={{
|
keyRoutine={{
|
||||||
url: AppConstants.serverUrl + 's3/key/',
|
url: AppConstants.serverUrl + 's3/key/',
|
||||||
|
@ -20,7 +20,10 @@ let Piece = React.createClass({
|
|||||||
subheader: React.PropTypes.object,
|
subheader: React.PropTypes.object,
|
||||||
buttons: React.PropTypes.object,
|
buttons: React.PropTypes.object,
|
||||||
loadPiece: React.PropTypes.func,
|
loadPiece: React.PropTypes.func,
|
||||||
children: React.PropTypes.object
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
|
React.PropTypes.element
|
||||||
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
@ -4,6 +4,9 @@ import React from 'react';
|
|||||||
import { History } from 'react-router';
|
import { History } from 'react-router';
|
||||||
import Moment from 'moment';
|
import Moment from 'moment';
|
||||||
|
|
||||||
|
import ReactError from '../../mixins/react_error';
|
||||||
|
import { ResourceNotFoundError } from '../../models/errors';
|
||||||
|
|
||||||
import PieceActions from '../../actions/piece_actions';
|
import PieceActions from '../../actions/piece_actions';
|
||||||
import PieceStore from '../../stores/piece_store';
|
import PieceStore from '../../stores/piece_store';
|
||||||
|
|
||||||
@ -50,11 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
|
|||||||
*/
|
*/
|
||||||
let PieceContainer = React.createClass({
|
let PieceContainer = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
params: React.PropTypes.object,
|
furtherDetailsType: React.PropTypes.func,
|
||||||
location: React.PropTypes.object
|
params: React.PropTypes.object
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
mixins: [History, ReactError],
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
furtherDetailsType: FurtherDetails
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
@ -70,15 +79,22 @@ let PieceContainer = React.createClass({
|
|||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
PieceListStore.listen(this.onChange);
|
PieceListStore.listen(this.onChange);
|
||||||
UserActions.fetchCurrentUser();
|
|
||||||
PieceStore.listen(this.onChange);
|
PieceStore.listen(this.onChange);
|
||||||
|
|
||||||
// Every time we enter the piece detail page, just reset the piece
|
// 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
|
// store as it will otherwise display wrong/old data once the user loads
|
||||||
// the piece detail a second time
|
// the piece detail a second time
|
||||||
PieceActions.updatePiece({});
|
PieceActions.updatePiece({});
|
||||||
|
|
||||||
this.loadPiece();
|
this.loadPiece();
|
||||||
|
UserActions.fetchCurrentUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidUpdate() {
|
||||||
|
const { pieceError } = this.state;
|
||||||
|
|
||||||
|
if(pieceError && pieceError.status === 404) {
|
||||||
|
this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
@ -89,7 +105,7 @@ let PieceContainer = React.createClass({
|
|||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
/*
|
/*
|
||||||
|
|
||||||
ATTENTION:
|
ATTENTION:
|
||||||
THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
|
THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
|
||||||
FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
|
FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
|
||||||
@ -103,7 +119,6 @@ let PieceContainer = React.createClass({
|
|||||||
|
|
||||||
let pieceState = mergeOptions({}, state.piece);
|
let pieceState = mergeOptions({}, state.piece);
|
||||||
pieceState.acl.acl_loan = false;
|
pieceState.acl.acl_loan = false;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
piece: pieceState
|
piece: pieceState
|
||||||
});
|
});
|
||||||
@ -197,7 +212,12 @@ let PieceContainer = React.createClass({
|
|||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<AclProxy
|
<AclProxy
|
||||||
show={currentUser && currentUser.email}>
|
show={currentUser && currentUser.email && Object.keys(piece.acl).length > 1}>
|
||||||
|
{/*
|
||||||
|
`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
|
||||||
|
*/}
|
||||||
<DetailProperty label={getLangText('ACTIONS')}>
|
<DetailProperty label={getLangText('ACTIONS')}>
|
||||||
<AclButtonList
|
<AclButtonList
|
||||||
className="ascribe-button-list"
|
className="ascribe-button-list"
|
||||||
@ -226,7 +246,8 @@ let PieceContainer = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if(this.state.piece && this.state.piece.title) {
|
if (this.state.piece && this.state.piece.id) {
|
||||||
|
let FurtherDetailsType = this.props.furtherDetailsType;
|
||||||
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
|
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -252,7 +273,6 @@ let PieceContainer = React.createClass({
|
|||||||
}
|
}
|
||||||
buttons={this.getActions()}>
|
buttons={this.getActions()}>
|
||||||
{this.getCreateEditionsDialog()}
|
{this.getCreateEditionsDialog()}
|
||||||
|
|
||||||
<CollapsibleParagraph
|
<CollapsibleParagraph
|
||||||
title={getLangText('Loan History')}
|
title={getLangText('Loan History')}
|
||||||
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
|
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
|
||||||
@ -261,11 +281,14 @@ let PieceContainer = React.createClass({
|
|||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
<CollapsibleParagraph
|
<CollapsibleParagraph
|
||||||
title={getLangText('Notes')}
|
title={getLangText('Notes')}
|
||||||
show={!!(this.state.currentUser.username || this.state.piece.public_note)}>
|
show={!!(this.state.currentUser.username
|
||||||
|
|| this.state.piece.acl.acl_edit
|
||||||
|
|| this.state.piece.public_note)}>
|
||||||
<Note
|
<Note
|
||||||
id={this.getId}
|
id={this.getId}
|
||||||
label={getLangText('Personal note (private)')}
|
label={getLangText('Personal note (private)')}
|
||||||
defaultValue={this.state.piece.private_note || null}
|
defaultValue={this.state.piece.private_note || null}
|
||||||
|
show = {!!this.state.currentUser.username}
|
||||||
placeholder={getLangText('Enter your comments ...')}
|
placeholder={getLangText('Enter your comments ...')}
|
||||||
editable={true}
|
editable={true}
|
||||||
successMessage={getLangText('Private note saved')}
|
successMessage={getLangText('Private note saved')}
|
||||||
@ -273,11 +296,12 @@ let PieceContainer = React.createClass({
|
|||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
<Note
|
<Note
|
||||||
id={this.getId}
|
id={this.getId}
|
||||||
label={getLangText('Piece note (public)')}
|
label={getLangText('Personal note (public)')}
|
||||||
defaultValue={this.state.piece.public_note || null}
|
defaultValue={this.state.piece.public_note || null}
|
||||||
placeholder={getLangText('Enter your comments ...')}
|
placeholder={getLangText('Enter your comments ...')}
|
||||||
editable={!!this.state.piece.acl.acl_edit}
|
editable={!!this.state.piece.acl.acl_edit}
|
||||||
successMessage={getLangText('Public piece note saved')}
|
show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
|
||||||
|
successMessage={getLangText('Public note saved')}
|
||||||
url={ApiUrls.note_public_piece}
|
url={ApiUrls.note_public_piece}
|
||||||
currentUser={this.state.currentUser}/>
|
currentUser={this.state.currentUser}/>
|
||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
@ -287,13 +311,12 @@ let PieceContainer = React.createClass({
|
|||||||
|| Object.keys(this.state.piece.extra_data).length > 0
|
|| Object.keys(this.state.piece.extra_data).length > 0
|
||||||
|| this.state.piece.other_data.length > 0}
|
|| this.state.piece.other_data.length > 0}
|
||||||
defaultExpanded={true}>
|
defaultExpanded={true}>
|
||||||
<FurtherDetails
|
<FurtherDetailsType
|
||||||
editable={this.state.piece.acl.acl_edit}
|
editable={this.state.piece.acl.acl_edit}
|
||||||
pieceId={this.state.piece.id}
|
pieceId={this.state.piece.id}
|
||||||
extraData={this.state.piece.extra_data}
|
extraData={this.state.piece.extra_data}
|
||||||
otherData={this.state.piece.other_data}
|
otherData={this.state.piece.other_data}
|
||||||
handleSuccess={this.loadPiece}
|
handleSuccess={this.loadPiece} />
|
||||||
location={this.props.location}/>
|
|
||||||
</CollapsibleParagraph>
|
</CollapsibleParagraph>
|
||||||
|
|
||||||
</Piece>
|
</Piece>
|
||||||
|
@ -20,9 +20,11 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
|
|||||||
let AclFormFactory = React.createClass({
|
let AclFormFactory = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
|
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
autoFocusProperty: React.PropTypes.string,
|
||||||
|
currentUser: React.PropTypes.object,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
|
labels: React.PropTypes.object,
|
||||||
pieceOrEditions: React.PropTypes.oneOfType([
|
pieceOrEditions: React.PropTypes.oneOfType([
|
||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
@ -53,10 +55,12 @@ let AclFormFactory = React.createClass({
|
|||||||
render() {
|
render() {
|
||||||
const {
|
const {
|
||||||
action,
|
action,
|
||||||
|
autoFocusProperty,
|
||||||
pieceOrEditions,
|
pieceOrEditions,
|
||||||
currentUser,
|
currentUser,
|
||||||
email,
|
email,
|
||||||
message,
|
message,
|
||||||
|
labels,
|
||||||
handleSuccess,
|
handleSuccess,
|
||||||
showNotification } = this.props;
|
showNotification } = this.props;
|
||||||
|
|
||||||
@ -64,14 +68,16 @@ let AclFormFactory = React.createClass({
|
|||||||
aclName: action,
|
aclName: action,
|
||||||
entities: pieceOrEditions,
|
entities: pieceOrEditions,
|
||||||
isPiece: this.isPiece(),
|
isPiece: this.isPiece(),
|
||||||
senderName: currentUser.username
|
senderName: currentUser && currentUser.username
|
||||||
});
|
});
|
||||||
|
|
||||||
if (action === 'acl_consign') {
|
if (action === 'acl_consign') {
|
||||||
return (
|
return (
|
||||||
<ConsignForm
|
<ConsignForm
|
||||||
|
autoFocusProperty={autoFocusProperty}
|
||||||
email={email}
|
email={email}
|
||||||
message={formMessage}
|
message={formMessage}
|
||||||
|
labels={labels}
|
||||||
id={this.getFormDataId()}
|
id={this.getFormDataId()}
|
||||||
url={ApiUrls.ownership_consigns}
|
url={ApiUrls.ownership_consigns}
|
||||||
handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
|
handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />
|
||||||
|
@ -124,8 +124,18 @@ let Form = React.createClass({
|
|||||||
getFormData() {
|
getFormData() {
|
||||||
let data = {};
|
let data = {};
|
||||||
|
|
||||||
for (let ref in this.refs) {
|
for (let refName in this.refs) {
|
||||||
data[this.refs[ref].props.name] = this.refs[ref].state.value;
|
const ref = this.refs[refName];
|
||||||
|
|
||||||
|
if (ref.state && 'value' in ref.state) {
|
||||||
|
// An input can also provide an `Object` as a value
|
||||||
|
// which we're going to merge with `data` (overwrites)
|
||||||
|
if(ref.state.value.constructor === Object) {
|
||||||
|
Object.assign(data, ref.state.value);
|
||||||
|
} else {
|
||||||
|
data[ref.props.name] = ref.state.value;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof this.props.getFormData === 'function') {
|
if (typeof this.props.getFormData === 'function') {
|
||||||
@ -238,7 +248,6 @@ let Form = React.createClass({
|
|||||||
renderChildren() {
|
renderChildren() {
|
||||||
return ReactAddons.Children.map(this.props.children, (child, i) => {
|
return ReactAddons.Children.map(this.props.children, (child, i) => {
|
||||||
if (child) {
|
if (child) {
|
||||||
|
|
||||||
// Since refs will be overwritten by this functions return statement,
|
// Since refs will be overwritten by this functions return statement,
|
||||||
// we still want to be able to define refs for nested `Form` or `Property`
|
// we still want to be able to define refs for nested `Form` or `Property`
|
||||||
// children, which is why we're upfront simply invoking the callback-ref-
|
// children, which is why we're upfront simply invoking the callback-ref-
|
||||||
|
@ -6,31 +6,70 @@ import Button from 'react-bootstrap/lib/Button';
|
|||||||
|
|
||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
|
|
||||||
|
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
|
||||||
import InputTextAreaToggable from './input_textarea_toggable';
|
import InputTextAreaToggable from './input_textarea_toggable';
|
||||||
|
|
||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
import { getLangText } from '../../utils/lang_utils.js';
|
|
||||||
import AclInformation from '../ascribe_buttons/acl_information';
|
import AclInformation from '../ascribe_buttons/acl_information';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils.js';
|
||||||
|
|
||||||
let ConsignForm = React.createClass({
|
let ConsignForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
url: React.PropTypes.string,
|
url: React.PropTypes.string,
|
||||||
id: React.PropTypes.object,
|
id: React.PropTypes.object,
|
||||||
|
autoFocusProperty: React.PropTypes.string,
|
||||||
|
email: React.PropTypes.string,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
|
labels: React.PropTypes.object,
|
||||||
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
getFormData(){
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
labels: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return {
|
||||||
|
email: this.props.email || ''
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getFormData() {
|
||||||
return this.props.id;
|
return this.props.id;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
handleEmailOnChange(event) {
|
||||||
|
// event.target.value is the submitted email of the consignee
|
||||||
|
this.setState({
|
||||||
|
email: event && event.target && event.target.value || ''
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { email } = this.state;
|
||||||
|
const {
|
||||||
|
autoFocusProperty,
|
||||||
|
createPublicContractAgreement,
|
||||||
|
email: defaultEmail,
|
||||||
|
handleSuccess,
|
||||||
|
id,
|
||||||
|
message,
|
||||||
|
labels,
|
||||||
|
url } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
ref='form'
|
ref='form'
|
||||||
url={this.props.url}
|
url={url}
|
||||||
getFormData={this.getFormData}
|
getFormData={this.getFormData}
|
||||||
handleSuccess={this.props.handleSuccess}
|
handleSuccess={handleSuccess}
|
||||||
buttons={
|
buttons={
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
<p className="pull-right">
|
<p className="pull-right">
|
||||||
@ -49,24 +88,39 @@ let ConsignForm = React.createClass({
|
|||||||
</div>}>
|
</div>}>
|
||||||
<AclInformation aim={'form'} verbs={['acl_consign']}/>
|
<AclInformation aim={'form'} verbs={['acl_consign']}/>
|
||||||
<Property
|
<Property
|
||||||
|
autoFocus={autoFocusProperty === 'email'}
|
||||||
name='consignee'
|
name='consignee'
|
||||||
label={getLangText('Email')}>
|
label={labels.email || getLangText('Email')}
|
||||||
|
editable={!defaultEmail}
|
||||||
|
onChange={this.handleEmailOnChange}
|
||||||
|
overrideForm={!!defaultEmail}>
|
||||||
<input
|
<input
|
||||||
type="email"
|
type="email"
|
||||||
|
value={email}
|
||||||
placeholder={getLangText('Email of the consignee')}
|
placeholder={getLangText('Email of the consignee')}
|
||||||
required/>
|
required/>
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
|
autoFocus={autoFocusProperty === 'message'}
|
||||||
name='consign_message'
|
name='consign_message'
|
||||||
label={getLangText('Personal Message')}
|
label={labels.message || getLangText('Personal Message')}
|
||||||
editable={true}
|
editable
|
||||||
overrideForm={true}>
|
overrideForm>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required />
|
required />
|
||||||
</Property>
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='contract_agreement'
|
||||||
|
label={getLangText('Consign Contract')}
|
||||||
|
className="ascribe-property-collapsible-toggle"
|
||||||
|
style={{paddingBottom: 0}}>
|
||||||
|
<InputContractAgreementCheckbox
|
||||||
|
createPublicContractAgreement={createPublicContractAgreement}
|
||||||
|
email={email} />
|
||||||
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='password'
|
name='password'
|
||||||
label={getLangText('Password')}>
|
label={getLangText('Password')}>
|
||||||
|
@ -1,33 +1,34 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
|
|
||||||
import Button from 'react-bootstrap/lib/Button';
|
import Button from 'react-bootstrap/lib/Button';
|
||||||
|
|
||||||
|
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
||||||
|
|
||||||
import Form from './form';
|
import Form from './form';
|
||||||
import Property from './property';
|
import Property from './property';
|
||||||
import InputTextAreaToggable from './input_textarea_toggable';
|
|
||||||
import InputDate from './input_date';
|
|
||||||
import InputCheckbox from './input_checkbox';
|
|
||||||
|
|
||||||
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
import InputDate from './input_date';
|
||||||
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
|
import InputTextAreaToggable from './input_textarea_toggable';
|
||||||
|
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
|
||||||
|
|
||||||
import AscribeSpinner from '../ascribe_spinner';
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
|
||||||
import { getLangText } from '../../utils/lang_utils';
|
|
||||||
import AclInformation from '../ascribe_buttons/acl_information';
|
import AclInformation from '../ascribe_buttons/acl_information';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
|
|
||||||
let LoanForm = React.createClass({
|
let LoanForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
loanHeading: React.PropTypes.string,
|
loanHeading: React.PropTypes.string,
|
||||||
email: React.PropTypes.string,
|
email: React.PropTypes.string,
|
||||||
gallery: React.PropTypes.string,
|
gallery: React.PropTypes.string,
|
||||||
startdate: React.PropTypes.object,
|
startDate: React.PropTypes.object,
|
||||||
enddate: React.PropTypes.object,
|
endDate: React.PropTypes.object,
|
||||||
showPersonalMessage: React.PropTypes.bool,
|
showPersonalMessage: React.PropTypes.bool,
|
||||||
showEndDate: React.PropTypes.bool,
|
showEndDate: React.PropTypes.bool,
|
||||||
showStartDate: React.PropTypes.bool,
|
showStartDate: React.PropTypes.bool,
|
||||||
@ -36,7 +37,11 @@ let LoanForm = React.createClass({
|
|||||||
id: React.PropTypes.object,
|
id: React.PropTypes.object,
|
||||||
message: React.PropTypes.string,
|
message: React.PropTypes.string,
|
||||||
createPublicContractAgreement: React.PropTypes.bool,
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func,
|
||||||
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.object,
|
||||||
|
React.PropTypes.array
|
||||||
|
])
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
@ -45,148 +50,33 @@ let LoanForm = React.createClass({
|
|||||||
showPersonalMessage: true,
|
showPersonalMessage: true,
|
||||||
showEndDate: true,
|
showEndDate: true,
|
||||||
showStartDate: true,
|
showStartDate: true,
|
||||||
showPassword: true,
|
showPassword: true
|
||||||
createPublicContractAgreement: true
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return ContractAgreementListStore.getState();
|
return {
|
||||||
},
|
email: this.props.email || ''
|
||||||
|
};
|
||||||
componentDidMount() {
|
|
||||||
ContractAgreementListStore.listen(this.onChange);
|
|
||||||
this.getContractAgreementsOrCreatePublic(this.props.email);
|
|
||||||
},
|
|
||||||
|
|
||||||
/**
|
|
||||||
* This method needs to be in form_loan as some whitelabel pages (Cyland) load
|
|
||||||
* the loanee's email async!
|
|
||||||
*
|
|
||||||
* SO LEAVE IT IN!
|
|
||||||
*/
|
|
||||||
componentWillReceiveProps(nextProps) {
|
|
||||||
if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
|
|
||||||
this.getContractAgreementsOrCreatePublic(nextProps.email);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
ContractAgreementListStore.unlisten(this.onChange);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractAgreementsOrCreatePublic(email){
|
handleEmailOnChange(event) {
|
||||||
ContractAgreementListActions.flushContractAgreementList.defer();
|
|
||||||
if (email) {
|
|
||||||
// fetch the available contractagreements (pending/accepted)
|
|
||||||
ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getFormData(){
|
|
||||||
return mergeOptions(
|
|
||||||
this.props.id,
|
|
||||||
this.getContractAgreementId()
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
handleOnChange(event) {
|
|
||||||
// event.target.value is the submitted email of the loanee
|
// event.target.value is the submitted email of the loanee
|
||||||
if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
|
this.setState({
|
||||||
this.getContractAgreementsOrCreatePublic(event.target.value);
|
email: event && event.target && event.target.value || ''
|
||||||
} else {
|
});
|
||||||
ContractAgreementListActions.flushContractAgreementList();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractAgreementId() {
|
handleReset() {
|
||||||
if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
this.handleEmailOnChange();
|
||||||
return {'contract_agreement_id': this.state.contractAgreementList[0].id};
|
|
||||||
}
|
|
||||||
return {};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getContractCheckbox() {
|
getFormData() {
|
||||||
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
return this.props.id;
|
||||||
// we need to define a key on the InputCheckboxes as otherwise
|
|
||||||
// react is not rerendering them on a store switch and is keeping
|
|
||||||
// the default value of the component (which is in that case true)
|
|
||||||
let contractAgreement = this.state.contractAgreementList[0];
|
|
||||||
let contract = contractAgreement.contract;
|
|
||||||
|
|
||||||
if(contractAgreement.datetime_accepted) {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
label={getLangText('Loan Contract')}
|
|
||||||
expanded={true}
|
|
||||||
className="notification-contract-pdf">
|
|
||||||
<embed
|
|
||||||
className="loan-form"
|
|
||||||
src={contract.blob.url_safe}
|
|
||||||
alt="pdf"
|
|
||||||
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
|
|
||||||
<a href={contract.blob.url_safe} target="_blank">
|
|
||||||
<span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
|
|
||||||
</a>
|
|
||||||
{/* We still need to send the server information that we're accepting */}
|
|
||||||
<InputCheckbox
|
|
||||||
style={{'display': 'none'}}
|
|
||||||
key="terms_implicitly"
|
|
||||||
defaultChecked={true} />
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
className="ascribe-property-collapsible-toggle"
|
|
||||||
style={{paddingBottom: 0}}>
|
|
||||||
<InputCheckbox
|
|
||||||
key="terms_explicitly"
|
|
||||||
defaultChecked={false}>
|
|
||||||
<span>
|
|
||||||
{getLangText('I agree to the')}
|
|
||||||
<a href={contract.blob.url_safe} target="_blank">
|
|
||||||
{getLangText('terms of ')} {contract.issuer}
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</InputCheckbox>
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name="terms"
|
|
||||||
style={{paddingBottom: 0}}
|
|
||||||
expanded={false}>
|
|
||||||
<InputCheckbox
|
|
||||||
key="terms_implicitly"
|
|
||||||
defaultChecked={true} />
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getAppendix() {
|
|
||||||
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
|
|
||||||
let appendix = this.state.contractAgreementList[0].appendix;
|
|
||||||
if (appendix && appendix.default) {
|
|
||||||
return (
|
|
||||||
<Property
|
|
||||||
name='appendix'
|
|
||||||
label={getLangText('Appendix')}>
|
|
||||||
<pre className="ascribe-pre">{appendix.default}</pre>
|
|
||||||
</Property>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getButtons() {
|
getButtons() {
|
||||||
@ -214,14 +104,31 @@ let LoanForm = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { email } = this.state;
|
||||||
|
const {
|
||||||
|
children,
|
||||||
|
createPublicContractAgreement,
|
||||||
|
email: defaultEmail,
|
||||||
|
handleSuccess,
|
||||||
|
gallery,
|
||||||
|
loanHeading,
|
||||||
|
message,
|
||||||
|
showPersonalMessage,
|
||||||
|
endDate,
|
||||||
|
startDate,
|
||||||
|
showEndDate,
|
||||||
|
showStartDate,
|
||||||
|
showPassword,
|
||||||
|
url } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form
|
<Form
|
||||||
className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
|
className={classnames({'ascribe-form-bordered': loanHeading})}
|
||||||
ref='form'
|
ref='form'
|
||||||
url={this.props.url}
|
url={url}
|
||||||
getFormData={this.getFormData}
|
getFormData={this.getFormData}
|
||||||
onReset={this.handleOnChange}
|
onReset={this.handleReset}
|
||||||
handleSuccess={this.props.handleSuccess}
|
handleSuccess={handleSuccess}
|
||||||
buttons={this.getButtons()}
|
buttons={this.getButtons()}
|
||||||
spinner={
|
spinner={
|
||||||
<div className="modal-footer">
|
<div className="modal-footer">
|
||||||
@ -229,18 +136,18 @@ let LoanForm = React.createClass({
|
|||||||
<AscribeSpinner color='dark-blue' size='md'/>
|
<AscribeSpinner color='dark-blue' size='md'/>
|
||||||
</p>
|
</p>
|
||||||
</div>}>
|
</div>}>
|
||||||
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
|
<div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
|
||||||
<h3>{this.props.loanHeading}</h3>
|
<h3>{loanHeading}</h3>
|
||||||
</div>
|
</div>
|
||||||
<AclInformation aim={'form'} verbs={['acl_loan']}/>
|
<AclInformation aim={'form'} verbs={['acl_loan']}/>
|
||||||
<Property
|
<Property
|
||||||
name='loanee'
|
name='loanee'
|
||||||
label={getLangText('Loanee Email')}
|
label={getLangText('Loanee Email')}
|
||||||
editable={!this.props.email}
|
editable={!defaultEmail}
|
||||||
onChange={this.handleOnChange}
|
onChange={this.handleEmailOnChange}
|
||||||
overrideForm={!!this.props.email}>
|
overrideForm={!!defaultEmail}>
|
||||||
<input
|
<input
|
||||||
value={this.props.email}
|
value={email}
|
||||||
type="email"
|
type="email"
|
||||||
placeholder={getLangText('Email of the loanee')}
|
placeholder={getLangText('Email of the loanee')}
|
||||||
required/>
|
required/>
|
||||||
@ -248,31 +155,31 @@ let LoanForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='gallery'
|
name='gallery'
|
||||||
label={getLangText('Gallery/exhibition (optional)')}
|
label={getLangText('Gallery/exhibition (optional)')}
|
||||||
editable={!this.props.gallery}
|
editable={!gallery}
|
||||||
overrideForm={!!this.props.gallery}>
|
overrideForm={!!gallery}>
|
||||||
<input
|
<input
|
||||||
value={this.props.gallery}
|
value={gallery}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
placeholder={getLangText('Gallery/exhibition (optional)')}/>
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='startdate'
|
name='startdate'
|
||||||
label={getLangText('Start date')}
|
label={getLangText('Start date')}
|
||||||
editable={!this.props.startdate}
|
editable={!startDate}
|
||||||
overrideForm={!!this.props.startdate}
|
overrideForm={!!startDate}
|
||||||
expanded={this.props.showStartDate}>
|
expanded={showStartDate}>
|
||||||
<InputDate
|
<InputDate
|
||||||
defaultValue={this.props.startdate}
|
defaultValue={startDate}
|
||||||
placeholderText={getLangText('Loan start date')} />
|
placeholderText={getLangText('Loan start date')} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='enddate'
|
name='enddate'
|
||||||
editable={!this.props.enddate}
|
editable={!endDate}
|
||||||
overrideForm={!!this.props.enddate}
|
overrideForm={!!endDate}
|
||||||
label={getLangText('End date')}
|
label={getLangText('End date')}
|
||||||
expanded={this.props.showEndDate}>
|
expanded={showEndDate}>
|
||||||
<InputDate
|
<InputDate
|
||||||
defaultValue={this.props.enddate}
|
defaultValue={endDate}
|
||||||
placeholderText={getLangText('Loan end date')} />
|
placeholderText={getLangText('Loan end date')} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
@ -280,25 +187,32 @@ let LoanForm = React.createClass({
|
|||||||
label={getLangText('Personal Message')}
|
label={getLangText('Personal Message')}
|
||||||
editable={true}
|
editable={true}
|
||||||
overrideForm={true}
|
overrideForm={true}
|
||||||
expanded={this.props.showPersonalMessage}>
|
expanded={showPersonalMessage}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required={this.props.showPersonalMessage}/>
|
required={showPersonalMessage}/>
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='contract_agreement'
|
||||||
|
label={getLangText('Loan Contract')}
|
||||||
|
className="ascribe-property-collapsible-toggle"
|
||||||
|
style={{paddingBottom: 0}}>
|
||||||
|
<InputContractAgreementCheckbox
|
||||||
|
createPublicContractAgreement={createPublicContractAgreement}
|
||||||
|
email={email} />
|
||||||
</Property>
|
</Property>
|
||||||
{this.getContractCheckbox()}
|
|
||||||
{this.getAppendix()}
|
|
||||||
<Property
|
<Property
|
||||||
name='password'
|
name='password'
|
||||||
label={getLangText('Password')}
|
label={getLangText('Password')}
|
||||||
expanded={this.props.showPassword}>
|
expanded={showPassword}>
|
||||||
<input
|
<input
|
||||||
type="password"
|
type="password"
|
||||||
placeholder={getLangText('Enter your password')}
|
placeholder={getLangText('Enter your password')}
|
||||||
required={this.props.showPassword ? 'required' : ''}/>
|
required={showPassword}/>
|
||||||
</Property>
|
</Property>
|
||||||
{this.props.children}
|
{children}
|
||||||
</Form>
|
</Form>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -65,8 +65,8 @@ let LoanRequestAnswerForm = React.createClass({
|
|||||||
url={this.props.url}
|
url={this.props.url}
|
||||||
email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
|
email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
|
||||||
gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
|
gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
|
||||||
startdate={startDate}
|
startDate={startDate}
|
||||||
enddate={endDate}
|
endDate={endDate}
|
||||||
showPassword={true}
|
showPassword={true}
|
||||||
showPersonalMessage={false}
|
showPersonalMessage={false}
|
||||||
handleSuccess={this.props.handleSuccess}/>
|
handleSuccess={this.props.handleSuccess}/>
|
||||||
@ -76,4 +76,4 @@ let LoanRequestAnswerForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default LoanRequestAnswerForm;
|
export default LoanRequestAnswerForm;
|
||||||
|
@ -30,7 +30,6 @@ let RegisterPieceForm = React.createClass({
|
|||||||
isFineUploaderActive: React.PropTypes.bool,
|
isFineUploaderActive: React.PropTypes.bool,
|
||||||
isFineUploaderEditable: React.PropTypes.bool,
|
isFineUploaderEditable: React.PropTypes.bool,
|
||||||
enableLocalHashing: React.PropTypes.bool,
|
enableLocalHashing: React.PropTypes.bool,
|
||||||
onLoggedOut: React.PropTypes.func,
|
|
||||||
|
|
||||||
// For this form to work with SlideContainer, we sometimes have to disable it
|
// For this form to work with SlideContainer, we sometimes have to disable it
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
@ -124,7 +123,6 @@ let RegisterPieceForm = React.createClass({
|
|||||||
submitMessage,
|
submitMessage,
|
||||||
headerMessage,
|
headerMessage,
|
||||||
isFineUploaderActive,
|
isFineUploaderActive,
|
||||||
onLoggedOut,
|
|
||||||
isFineUploaderEditable,
|
isFineUploaderEditable,
|
||||||
location,
|
location,
|
||||||
children,
|
children,
|
||||||
@ -175,7 +173,6 @@ let RegisterPieceForm = React.createClass({
|
|||||||
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
|
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
isFineUploaderActive={isFineUploaderActive}
|
isFineUploaderActive={isFineUploaderActive}
|
||||||
onLoggedOut={onLoggedOut}
|
|
||||||
disabled={!isFineUploaderEditable}
|
disabled={!isFineUploaderEditable}
|
||||||
enableLocalHashing={hashLocally}
|
enableLocalHashing={hashLocally}
|
||||||
uploadMethod={location.query.method}
|
uploadMethod={location.query.method}
|
||||||
@ -207,6 +204,10 @@ let RegisterPieceForm = React.createClass({
|
|||||||
singular: getLangText('Select representative image'),
|
singular: getLangText('Select representative image'),
|
||||||
plural: getLangText('Select representative images')
|
plural: getLangText('Select representative images')
|
||||||
}}/>
|
}}/>
|
||||||
|
isFineUploaderActive={isFineUploaderActive}
|
||||||
|
disabled={!isFineUploaderEditable}
|
||||||
|
enableLocalHashing={enableLocalHashing}
|
||||||
|
uploadMethod={location.query.method} />
|
||||||
</Property>
|
</Property>
|
||||||
<Property
|
<Property
|
||||||
name='artist_name'
|
name='artist_name'
|
||||||
|
@ -20,7 +20,7 @@ import { getLangText } from '../../utils/lang_utils';
|
|||||||
import { mergeOptions } from '../../utils/general_utils';
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
|
|
||||||
let ContractAgreementForm = React.createClass({
|
let SendContractAgreementForm = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
handleSuccess: React.PropTypes.func
|
handleSuccess: React.PropTypes.func
|
||||||
},
|
},
|
||||||
@ -54,7 +54,7 @@ let ContractAgreementForm = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleSubmitSuccess() {
|
handleSubmitSuccess() {
|
||||||
let notification = 'Contract agreement send';
|
let notification = 'Contract agreement sent';
|
||||||
notification = new GlobalNotificationModel(notification, 'success', 10000);
|
notification = new GlobalNotificationModel(notification, 'success', 10000);
|
||||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
|
||||||
@ -148,4 +148,4 @@ let ContractAgreementForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ContractAgreementForm;
|
export default SendContractAgreementForm;
|
@ -57,7 +57,7 @@ let UnConsignRequestForm = React.createClass({
|
|||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.message}
|
defaultValue={this.props.message}
|
||||||
placeholder={getLangText('Enter a message...')}
|
placeholder={getLangText('Enter a message...')}
|
||||||
required="required"/>
|
required />
|
||||||
</Property>
|
</Property>
|
||||||
<hr />
|
<hr />
|
||||||
</Form>
|
</Form>
|
||||||
@ -65,4 +65,4 @@ let UnConsignRequestForm = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default UnConsignRequestForm;
|
export default UnConsignRequestForm;
|
||||||
|
206
js/components/ascribe_forms/input_contract_agreement_checkbox.js
Normal file
206
js/components/ascribe_forms/input_contract_agreement_checkbox.js
Normal file
@ -0,0 +1,206 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react/addons';
|
||||||
|
|
||||||
|
import InputCheckbox from './input_checkbox';
|
||||||
|
|
||||||
|
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
|
||||||
|
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
import { isEmail } from '../../utils/regex_utils';
|
||||||
|
|
||||||
|
|
||||||
|
const InputContractAgreementCheckbox = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
createPublicContractAgreement: React.PropTypes.bool,
|
||||||
|
email: React.PropTypes.string,
|
||||||
|
|
||||||
|
required: React.PropTypes.bool,
|
||||||
|
|
||||||
|
// provided by Property
|
||||||
|
disabled: React.PropTypes.bool,
|
||||||
|
onChange: React.PropTypes.func,
|
||||||
|
name: React.PropTypes.string,
|
||||||
|
setExpanded: React.PropTypes.func,
|
||||||
|
|
||||||
|
// can be used to style the component from the outside
|
||||||
|
style: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
createPublicContractAgreement: true
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return mergeOptions(
|
||||||
|
ContractAgreementListStore.getState(),
|
||||||
|
{
|
||||||
|
value: {
|
||||||
|
terms: null,
|
||||||
|
contract_agreement_id: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
ContractAgreementListStore.listen(this.onStoreChange);
|
||||||
|
this.getContractAgreementsOrCreatePublic(this.props.email);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps({ email: nextEmail }) {
|
||||||
|
if (this.props.email !== nextEmail) {
|
||||||
|
if (isEmail(nextEmail)) {
|
||||||
|
this.getContractAgreementsOrCreatePublic(nextEmail);
|
||||||
|
} else if (this.getContractAgreement()) {
|
||||||
|
ContractAgreementListActions.flushContractAgreementList();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
ContractAgreementListStore.unlisten(this.onStoreChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onStoreChange(state) {
|
||||||
|
const contractAgreement = this.getContractAgreement(state.contractAgreementList);
|
||||||
|
|
||||||
|
// If there is no contract available, hide this `Property` from the user
|
||||||
|
this.props.setExpanded(!!contractAgreement);
|
||||||
|
|
||||||
|
state = mergeOptions(state, {
|
||||||
|
value: {
|
||||||
|
// If `email` is defined in this component, `getContractAgreementsOrCreatePublic`
|
||||||
|
// is either:
|
||||||
|
//
|
||||||
|
// - fetching a already existing contract agreement; or
|
||||||
|
// - trying to create a contract agreement
|
||||||
|
//
|
||||||
|
// If both attempts result in `contractAgreement` being not defined,
|
||||||
|
// it means that the receiver hasn't defined a contract, which means
|
||||||
|
// a contract agreement cannot be created, which means we don't have to
|
||||||
|
// specify `contract_agreement_id` when sending a request to the server.
|
||||||
|
contract_agreement_id: contractAgreement ? contractAgreement.id : null,
|
||||||
|
// If the receiver hasn't set a contract or the contract was
|
||||||
|
// previously accepted, we set the terms to `true`
|
||||||
|
// as we always need to at least give a boolean value for `terms`
|
||||||
|
// to the API endpoint
|
||||||
|
terms: !contractAgreement || !!contractAgreement.datetime_accepted
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(event) {
|
||||||
|
// Sync the value between our `InputCheckbox` and this component's `terms`
|
||||||
|
// so the parent `Property` is able to get the correct value of this component
|
||||||
|
// when the `Form` queries it.
|
||||||
|
this.setState({
|
||||||
|
value: React.addons.update(this.state.value, {
|
||||||
|
terms: { $set: event.target.value }
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
// Propagate change events from the checkbox up to the parent `Property`
|
||||||
|
this.props.onChange(event);
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractAgreement(contractAgreementList = this.state.contractAgreementList) {
|
||||||
|
if (contractAgreementList && contractAgreementList.length) {
|
||||||
|
return contractAgreementList[0];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractAgreementsOrCreatePublic(email) {
|
||||||
|
ContractAgreementListActions.flushContractAgreementList.defer();
|
||||||
|
|
||||||
|
if (email) {
|
||||||
|
// fetch the available contractagreements (pending/accepted)
|
||||||
|
ContractAgreementListActions.fetchAvailableContractAgreementList(email, this.props.createPublicContractAgreement);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getAppendix() {
|
||||||
|
const contractAgreement = this.getContractAgreement();
|
||||||
|
|
||||||
|
if (contractAgreement &&
|
||||||
|
contractAgreement.appendix &&
|
||||||
|
contractAgreement.appendix.default) {
|
||||||
|
return (
|
||||||
|
<div className="ascribe-property contract-appendix-form">
|
||||||
|
<p><span>{getLangText('Appendix')}</span></p>
|
||||||
|
<pre className="ascribe-pre">{contractAgreement.appendix.default}</pre>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getContractCheckbox() {
|
||||||
|
const contractAgreement = this.getContractAgreement();
|
||||||
|
|
||||||
|
if(contractAgreement) {
|
||||||
|
const {
|
||||||
|
datetime_accepted: datetimeAccepted,
|
||||||
|
contract: {
|
||||||
|
issuer: contractIssuer,
|
||||||
|
blob: { url_safe: contractUrl }
|
||||||
|
}
|
||||||
|
} = contractAgreement;
|
||||||
|
|
||||||
|
if(datetimeAccepted) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="notification-contract-pdf"
|
||||||
|
style={{paddingBottom: '1em'}}>
|
||||||
|
<embed
|
||||||
|
className="embed-form"
|
||||||
|
src={contractUrl}
|
||||||
|
alt="pdf"
|
||||||
|
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
|
||||||
|
<a href={contractUrl} target="_blank">
|
||||||
|
<span className="glyphicon glyphicon-download" aria-hidden="true" /> {getLangText('Download contract')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
disabled,
|
||||||
|
style } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<InputCheckbox
|
||||||
|
name={name}
|
||||||
|
disabled={disabled}
|
||||||
|
style={style}
|
||||||
|
onChange={this.onChange}
|
||||||
|
key="terms_explicitly"
|
||||||
|
defaultChecked={false}>
|
||||||
|
<span>
|
||||||
|
{getLangText('I agree to the')}
|
||||||
|
<a href={contractUrl} target="_blank">
|
||||||
|
{getLangText('terms of ')} {contractIssuer}
|
||||||
|
</a>
|
||||||
|
</span>
|
||||||
|
</InputCheckbox>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{this.getContractCheckbox()}
|
||||||
|
{this.getAppendix()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default InputContractAgreementCheckbox;
|
@ -38,7 +38,6 @@ const InputFineUploader = React.createClass({
|
|||||||
// a user is actually not logged in already to prevent him from droping files
|
// a user is actually not logged in already to prevent him from droping files
|
||||||
// before login in
|
// before login in
|
||||||
isFineUploaderActive: bool,
|
isFineUploaderActive: bool,
|
||||||
onLoggedOut: func,
|
|
||||||
|
|
||||||
enableLocalHashing: bool,
|
enableLocalHashing: bool,
|
||||||
uploadMethod: string,
|
uploadMethod: string,
|
||||||
@ -52,7 +51,10 @@ const InputFineUploader = React.createClass({
|
|||||||
singular: string,
|
singular: string,
|
||||||
plural: string
|
plural: string
|
||||||
}),
|
}),
|
||||||
handleChangedFile: func
|
handleChangedFile: func,
|
||||||
|
|
||||||
|
// Provided by `Property`
|
||||||
|
onChange: React.PropTypes.func
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
@ -95,24 +97,26 @@ const InputFineUploader = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { fileInputElement,
|
const {
|
||||||
keyRoutine,
|
areAssetsDownloadable,
|
||||||
createBlobRoutine,
|
enableLocalHashing,
|
||||||
validation,
|
createBlobRoutine,
|
||||||
setIsUploadReady,
|
disabled,
|
||||||
isReadyForFormSubmission,
|
fileClassToUpload,
|
||||||
areAssetsDownloadable,
|
fileInputElement,
|
||||||
onLoggedOut,
|
isFineUploaderActive,
|
||||||
enableLocalHashing,
|
isReadyForFormSubmission,
|
||||||
fileClassToUpload,
|
keyRoutine,
|
||||||
uploadMethod,
|
setIsUploadReady,
|
||||||
handleChangedFile } = this.props;
|
uploadMethod,
|
||||||
let editable = this.props.isFineUploaderActive;
|
validation,
|
||||||
|
handleChangedFile } = this.props;
|
||||||
|
let editable = isFineUploaderActive;
|
||||||
|
|
||||||
// if disabled is actually set by property, we want to override
|
// if disabled is actually set by property, we want to override
|
||||||
// isFineUploaderActive
|
// isFineUploaderActive
|
||||||
if(typeof this.props.disabled !== 'undefined') {
|
if(typeof disabled !== 'undefined') {
|
||||||
editable = !this.props.disabled;
|
editable = !disabled;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -141,7 +145,6 @@ const InputFineUploader = React.createClass({
|
|||||||
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
'X-CSRFToken': getCookie(AppConstants.csrftoken)
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onInactive={onLoggedOut}
|
|
||||||
enableLocalHashing={enableLocalHashing}
|
enableLocalHashing={enableLocalHashing}
|
||||||
uploadMethod={uploadMethod}
|
uploadMethod={uploadMethod}
|
||||||
fileClassToUpload={fileClassToUpload}
|
fileClassToUpload={fileClassToUpload}
|
||||||
|
@ -7,6 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
|
|||||||
|
|
||||||
let InputTextAreaToggable = React.createClass({
|
let InputTextAreaToggable = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
|
autoFocus: React.PropTypes.bool,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
rows: React.PropTypes.number.isRequired,
|
rows: React.PropTypes.number.isRequired,
|
||||||
required: React.PropTypes.bool,
|
required: React.PropTypes.bool,
|
||||||
@ -23,6 +24,10 @@ let InputTextAreaToggable = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
if (this.props.autoFocus) {
|
||||||
|
this.refs.textarea.focus();
|
||||||
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
value: this.props.defaultValue
|
value: this.props.defaultValue
|
||||||
});
|
});
|
||||||
@ -51,6 +56,7 @@ let InputTextAreaToggable = React.createClass({
|
|||||||
className = className + ' ascribe-textarea-editable';
|
className = className + ' ascribe-textarea-editable';
|
||||||
textarea = (
|
textarea = (
|
||||||
<TextareaAutosize
|
<TextareaAutosize
|
||||||
|
ref='textarea'
|
||||||
className={className}
|
className={className}
|
||||||
value={this.state.value}
|
value={this.state.value}
|
||||||
rows={this.props.rows}
|
rows={this.props.rows}
|
||||||
|
@ -10,7 +10,7 @@ let ListRequestActions = React.createClass({
|
|||||||
React.PropTypes.object,
|
React.PropTypes.object,
|
||||||
React.PropTypes.array
|
React.PropTypes.array
|
||||||
]).isRequired,
|
]).isRequired,
|
||||||
currentUser: React.PropTypes.object.isRequired,
|
currentUser: React.PropTypes.object,
|
||||||
handleSuccess: React.PropTypes.func.isRequired,
|
handleSuccess: React.PropTypes.func.isRequired,
|
||||||
notifications: React.PropTypes.array.isRequired
|
notifications: React.PropTypes.array.isRequired
|
||||||
},
|
},
|
||||||
@ -33,4 +33,4 @@ let ListRequestActions = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default ListRequestActions;
|
export default ListRequestActions;
|
||||||
|
@ -42,7 +42,8 @@ const Property = React.createClass({
|
|||||||
]),
|
]),
|
||||||
style: object,
|
style: object,
|
||||||
expanded: bool,
|
expanded: bool,
|
||||||
checkboxLabel: string
|
checkboxLabel: string,
|
||||||
|
autoFocus: bool
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
@ -75,16 +76,24 @@ const Property = React.createClass({
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if(this.props.autoFocus) {
|
||||||
|
this.handleFocus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
componentWillReceiveProps(nextProps) {
|
componentWillReceiveProps(nextProps) {
|
||||||
let childInput = this.refs.input;
|
let childInput = this.refs.input;
|
||||||
|
|
||||||
// For expanded there are actually two use cases:
|
// For expanded there are actually three use cases:
|
||||||
//
|
//
|
||||||
// 1. Control its value from the outside completely (do not define `checkboxLabel`)
|
// 1. Control its value from the outside completely (do not define `checkboxLabel`)
|
||||||
// 2. Let it be controlled from the inside (default value can be set though via `expanded`)
|
// 2. Let it be controlled from the inside (default value can be set though via `expanded`)
|
||||||
|
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
|
||||||
|
// set from the outside as a prop then(!!!))
|
||||||
//
|
//
|
||||||
// This handles case 1.
|
// This handles case 1. and 3.
|
||||||
if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
|
if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
|
||||||
this.setState({ expanded: nextProps.expanded });
|
this.setState({ expanded: nextProps.expanded });
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -226,6 +235,14 @@ const Property = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
setExpanded(expanded) {
|
||||||
|
this.setState({ expanded });
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCheckboxToggle() {
|
||||||
|
this.setExpanded(!this.state.expanded);
|
||||||
|
},
|
||||||
|
|
||||||
renderChildren(style) {
|
renderChildren(style) {
|
||||||
// Input's props should only be cloned and propagated down the tree,
|
// Input's props should only be cloned and propagated down the tree,
|
||||||
// if the component is actually being shown (!== 'expanded === false')
|
// if the component is actually being shown (!== 'expanded === false')
|
||||||
@ -247,7 +264,8 @@ const Property = React.createClass({
|
|||||||
onBlur: this.handleBlur,
|
onBlur: this.handleBlur,
|
||||||
disabled: !this.props.editable,
|
disabled: !this.props.editable,
|
||||||
ref: 'input',
|
ref: 'input',
|
||||||
name: this.props.name
|
name: this.props.name,
|
||||||
|
setExpanded: this.setExpanded
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
@ -293,13 +311,14 @@ const Property = React.createClass({
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
let footer = null;
|
let footer = null;
|
||||||
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
|
let style = Object.assign({}, this.props.style);
|
||||||
|
|
||||||
if(this.props.footer){
|
if(this.props.footer){
|
||||||
footer = (
|
footer = (
|
||||||
<div className="ascribe-property-footer">
|
<div className="ascribe-property-footer">
|
||||||
{this.props.footer}
|
{this.props.footer}
|
||||||
</div>);
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
style.paddingBottom = !this.state.expanded ? 0 : null;
|
style.paddingBottom = !this.state.expanded ? 0 : null;
|
||||||
|
@ -4,77 +4,24 @@ import React from 'react';
|
|||||||
|
|
||||||
import { mergeOptions } from '../../utils/general_utils';
|
import { mergeOptions } from '../../utils/general_utils';
|
||||||
|
|
||||||
import EditionListStore from '../../stores/edition_list_store';
|
|
||||||
import EditionListActions from '../../actions/edition_list_actions';
|
import EditionListActions from '../../actions/edition_list_actions';
|
||||||
|
|
||||||
import UserStore from '../../stores/user_store';
|
|
||||||
import UserActions from '../../actions/user_actions';
|
|
||||||
|
|
||||||
import PieceListStore from '../../stores/piece_list_store';
|
|
||||||
import PieceListActions from '../../actions/piece_list_actions';
|
|
||||||
|
|
||||||
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
|
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
|
||||||
import AclButtonList from '../ascribe_buttons/acl_button_list';
|
|
||||||
import DeleteButton from '../ascribe_buttons/delete_button';
|
|
||||||
|
|
||||||
import { getAvailableAcls } from '../../utils/acl_utils';
|
|
||||||
import { getLangText } from '../../utils/lang_utils.js';
|
import { getLangText } from '../../utils/lang_utils.js';
|
||||||
|
|
||||||
let PieceListBulkModal = React.createClass({
|
let PieceListBulkModal = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
className: React.PropTypes.string
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
},
|
className: React.PropTypes.string,
|
||||||
|
selectedEditions: React.PropTypes.oneOfType([
|
||||||
getInitialState() {
|
React.PropTypes.object,
|
||||||
return mergeOptions(
|
React.PropTypes.array
|
||||||
EditionListStore.getState(),
|
]),
|
||||||
UserStore.getState(),
|
children: React.PropTypes.oneOfType([
|
||||||
PieceListStore.getState()
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
);
|
React.PropTypes.element
|
||||||
},
|
])
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
EditionListStore.listen(this.onChange);
|
|
||||||
UserStore.listen(this.onChange);
|
|
||||||
PieceListStore.listen(this.onChange);
|
|
||||||
|
|
||||||
UserActions.fetchCurrentUser();
|
|
||||||
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
|
||||||
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
EditionListStore.unlisten(this.onChange);
|
|
||||||
PieceListStore.unlisten(this.onChange);
|
|
||||||
UserStore.unlisten(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(state) {
|
|
||||||
this.setState(state);
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchSelectedPieceEditionList() {
|
|
||||||
let filteredPieceIdList = Object.keys(this.state.editionList)
|
|
||||||
.filter((pieceId) => {
|
|
||||||
return this.state.editionList[pieceId]
|
|
||||||
.filter((edition) => edition.selected).length > 0;
|
|
||||||
});
|
|
||||||
return filteredPieceIdList;
|
|
||||||
},
|
|
||||||
|
|
||||||
fetchSelectedEditionList() {
|
|
||||||
let selectedEditionList = [];
|
|
||||||
|
|
||||||
Object
|
|
||||||
.keys(this.state.editionList)
|
|
||||||
.forEach((pieceId) => {
|
|
||||||
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
|
|
||||||
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
|
|
||||||
});
|
|
||||||
|
|
||||||
return selectedEditionList;
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clearAllSelections() {
|
clearAllSelections() {
|
||||||
@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
|
|||||||
EditionListActions.closeAllEditionLists();
|
EditionListActions.closeAllEditionLists();
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSuccess() {
|
|
||||||
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
|
||||||
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
|
||||||
|
|
||||||
this.fetchSelectedPieceEditionList()
|
|
||||||
.forEach((pieceId) => {
|
|
||||||
EditionListActions.refreshEditionList({pieceId, filterBy: {}});
|
|
||||||
});
|
|
||||||
EditionListActions.clearAllEditionSelections();
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let selectedEditions = this.fetchSelectedEditionList();
|
if (Object.keys(this.props.availableAcls).length) {
|
||||||
let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
|
|
||||||
|
|
||||||
if(Object.keys(availableAcls).length > 0) {
|
|
||||||
return (
|
return (
|
||||||
<div className={this.props.className}>
|
<div className={this.props.className}>
|
||||||
<div className="row no-margin">
|
<div className="row no-margin">
|
||||||
@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
|
|||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="text-center">
|
<div className="text-center">
|
||||||
<PieceListBulkModalSelectedEditionsWidget
|
<PieceListBulkModalSelectedEditionsWidget
|
||||||
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
|
numberOfSelectedEditions={this.props.selectedEditions.length} />
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="piece-list-bulk-modal-clear-all"
|
className="piece-list-bulk-modal-clear-all"
|
||||||
@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
|
|||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<div className="row-fluid">
|
<div className="row-fluid">
|
||||||
<AclButtonList
|
{this.props.children}
|
||||||
availableAcls={availableAcls}
|
|
||||||
pieceOrEditions={selectedEditions}
|
|
||||||
handleSuccess={this.handleSuccess}
|
|
||||||
className="text-center ascribe-button-list collapse-group">
|
|
||||||
<DeleteButton
|
|
||||||
handleSuccess={this.handleSuccess}
|
|
||||||
editions={selectedEditions}/>
|
|
||||||
</AclButtonList>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
|
|||||||
} else {
|
} else {
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
generateFilterByStatement(param) {
|
generateFilterByStatement(param) {
|
||||||
let filterBy = 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
|
||||||
@ -56,13 +56,13 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
*/
|
*/
|
||||||
filterBy(param) {
|
filterBy(param) {
|
||||||
return () => {
|
return () => {
|
||||||
let filterBy = this.generateFilterByStatement(param);
|
const filterBy = this.generateFilterByStatement(param);
|
||||||
this.props.applyFilterBy(filterBy);
|
this.props.applyFilterBy(filterBy);
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
isFilterActive() {
|
isFilterActive() {
|
||||||
let trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
|
const trueValuesOnly = Object.keys(this.props.filterBy).filter((acl) => acl);
|
||||||
|
|
||||||
// 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
|
||||||
@ -74,7 +74,7 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let filterIcon = (
|
const filterIcon = (
|
||||||
<span>
|
<span>
|
||||||
<span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
|
<span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
|
||||||
<span style={this.isFilterActive()}>*</span>
|
<span style={this.isFilterActive()}>*</span>
|
||||||
@ -140,4 +140,4 @@ let PieceListToolbarFilterWidget = React.createClass({
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
export default PieceListToolbarFilterWidget;
|
export default PieceListToolbarFilterWidget;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { History } from 'react-router';
|
import { History, RouteContext } from 'react-router';
|
||||||
|
|
||||||
import UserStore from '../../../stores/user_store';
|
import UserStore from '../../../stores/user_store';
|
||||||
import UserActions from '../../../actions/user_actions';
|
import UserActions from '../../../actions/user_actions';
|
||||||
@ -37,7 +37,9 @@ export default function AuthProxyHandler({to, when}) {
|
|||||||
location: object
|
location: object
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
// We need insert `RouteContext` here in order to be able
|
||||||
|
// to use the `Lifecycle` widget in further down nested components
|
||||||
|
mixins: [History, RouteContext],
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return UserStore.getState();
|
return UserStore.getState();
|
||||||
|
@ -11,6 +11,7 @@ import WhitelabelActions from '../../actions/whitelabel_actions';
|
|||||||
import AccountSettings from './account_settings';
|
import AccountSettings from './account_settings';
|
||||||
import BitcoinWalletSettings from './bitcoin_wallet_settings';
|
import BitcoinWalletSettings from './bitcoin_wallet_settings';
|
||||||
import APISettings from './api_settings';
|
import APISettings from './api_settings';
|
||||||
|
import WebhookSettings from './webhook_settings';
|
||||||
|
|
||||||
import AclProxy from '../acl_proxy';
|
import AclProxy from '../acl_proxy';
|
||||||
|
|
||||||
@ -70,6 +71,7 @@ let SettingsContainer = React.createClass({
|
|||||||
aclName="acl_view_settings_api">
|
aclName="acl_view_settings_api">
|
||||||
<APISettings />
|
<APISettings />
|
||||||
</AclProxy>
|
</AclProxy>
|
||||||
|
<WebhookSettings />
|
||||||
<AclProxy
|
<AclProxy
|
||||||
aclObject={this.state.whitelabel}
|
aclObject={this.state.whitelabel}
|
||||||
aclName="acl_view_settings_bitcoin">
|
aclName="acl_view_settings_bitcoin">
|
||||||
|
165
js/components/ascribe_settings/webhook_settings.js
Normal file
165
js/components/ascribe_settings/webhook_settings.js
Normal file
@ -0,0 +1,165 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import WebhookStore from '../../stores/webhook_store';
|
||||||
|
import WebhookActions from '../../actions/webhook_actions';
|
||||||
|
|
||||||
|
import GlobalNotificationModel from '../../models/global_notification_model';
|
||||||
|
import GlobalNotificationActions from '../../actions/global_notification_actions';
|
||||||
|
|
||||||
|
import Form from '../ascribe_forms/form';
|
||||||
|
import Property from '../ascribe_forms/property';
|
||||||
|
|
||||||
|
import AclProxy from '../acl_proxy';
|
||||||
|
|
||||||
|
import ActionPanel from '../ascribe_panel/action_panel';
|
||||||
|
import CollapsibleParagraph from '../ascribe_collapsible/collapsible_paragraph';
|
||||||
|
|
||||||
|
import ApiUrls from '../../constants/api_urls';
|
||||||
|
import AscribeSpinner from '../ascribe_spinner';
|
||||||
|
|
||||||
|
import { getLangText } from '../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
|
let WebhookSettings = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
defaultExpanded: React.PropTypes.bool
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return WebhookStore.getState();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
WebhookStore.listen(this.onChange);
|
||||||
|
WebhookActions.fetchWebhooks();
|
||||||
|
WebhookActions.fetchWebhookEvents();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
WebhookStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
onRemoveWebhook(webhookId) {
|
||||||
|
return (event) => {
|
||||||
|
WebhookActions.removeWebhook(webhookId);
|
||||||
|
|
||||||
|
let notification = new GlobalNotificationModel(getLangText('Webhook deleted'), 'success', 2000);
|
||||||
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCreateSuccess() {
|
||||||
|
this.refs.webhookCreateForm.reset();
|
||||||
|
WebhookActions.fetchWebhooks(true);
|
||||||
|
let notification = new GlobalNotificationModel(getLangText('Webhook successfully created'), 'success', 5000);
|
||||||
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
},
|
||||||
|
|
||||||
|
getWebhooks(){
|
||||||
|
let content = <AscribeSpinner color='dark-blue' size='lg'/>;
|
||||||
|
|
||||||
|
if (this.state.webhooks) {
|
||||||
|
content = this.state.webhooks.map(function(webhook, i) {
|
||||||
|
const event = webhook.event.split('.')[0];
|
||||||
|
return (
|
||||||
|
<ActionPanel
|
||||||
|
name={webhook.event}
|
||||||
|
key={i}
|
||||||
|
content={
|
||||||
|
<div>
|
||||||
|
<div className='ascribe-panel-title'>
|
||||||
|
{event.toUpperCase()}
|
||||||
|
</div>
|
||||||
|
<div className="ascribe-panel-subtitle">
|
||||||
|
{webhook.target}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
buttons={
|
||||||
|
<div className="pull-right">
|
||||||
|
<div className="pull-right">
|
||||||
|
<button
|
||||||
|
className="pull-right btn btn-tertiary btn-sm"
|
||||||
|
onClick={this.onRemoveWebhook(webhook.id)}>
|
||||||
|
{getLangText('DELETE')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}/>
|
||||||
|
);
|
||||||
|
}, this);
|
||||||
|
}
|
||||||
|
return content;
|
||||||
|
},
|
||||||
|
|
||||||
|
getEvents() {
|
||||||
|
if (this.state.webhookEvents && this.state.webhookEvents.length) {
|
||||||
|
return (
|
||||||
|
<Property
|
||||||
|
name='event'
|
||||||
|
label={getLangText('Select the event to trigger a webhook', '...')}>
|
||||||
|
<select name="events">
|
||||||
|
{this.state.webhookEvents.map((event, i) => {
|
||||||
|
return (
|
||||||
|
<option
|
||||||
|
name={i}
|
||||||
|
key={i}
|
||||||
|
value={ event + '.webhook' }>
|
||||||
|
{ event.toUpperCase() }
|
||||||
|
</option>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</select>
|
||||||
|
</Property>);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<CollapsibleParagraph
|
||||||
|
title={getLangText('Webhooks')}
|
||||||
|
defaultExpanded={this.props.defaultExpanded}>
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
Webhooks allow external services to receive notifications from ascribe.
|
||||||
|
Currently we support webhook notifications when someone transfers, consigns, loans or shares
|
||||||
|
(by email) a work to you.
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
To get started, simply choose the prefered action that you want to be notified upon and supply
|
||||||
|
a target url.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<AclProxy
|
||||||
|
show={this.state.webhookEvents && this.state.webhookEvents.length}>
|
||||||
|
<Form
|
||||||
|
ref="webhookCreateForm"
|
||||||
|
url={ApiUrls.webhooks}
|
||||||
|
handleSuccess={this.handleCreateSuccess}>
|
||||||
|
{ this.getEvents() }
|
||||||
|
<Property
|
||||||
|
name='target'
|
||||||
|
label={getLangText('Redirect Url')}>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={getLangText('Enter the url to be triggered')}
|
||||||
|
required/>
|
||||||
|
</Property>
|
||||||
|
<hr />
|
||||||
|
</Form>
|
||||||
|
</AclProxy>
|
||||||
|
{this.getWebhooks()}
|
||||||
|
</CollapsibleParagraph>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default WebhookSettings;
|
@ -1,7 +1,7 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react/addons';
|
import React from 'react/addons';
|
||||||
import { History } from 'react-router';
|
import { History, Lifecycle } from 'react-router';
|
||||||
|
|
||||||
import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
|
import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
|
||||||
|
|
||||||
@ -17,14 +17,16 @@ const SlidesContainer = React.createClass({
|
|||||||
pending: string,
|
pending: string,
|
||||||
complete: string
|
complete: string
|
||||||
}),
|
}),
|
||||||
location: object
|
location: object,
|
||||||
|
pageExitWarning: string
|
||||||
},
|
},
|
||||||
|
|
||||||
mixins: [History],
|
mixins: [History, Lifecycle],
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return {
|
return {
|
||||||
containerWidth: 0
|
containerWidth: 0,
|
||||||
|
pageExitWarning: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -41,6 +43,10 @@ const SlidesContainer = React.createClass({
|
|||||||
window.removeEventListener('resize', this.handleContainerResize);
|
window.removeEventListener('resize', this.handleContainerResize);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
routerWillLeave() {
|
||||||
|
return this.props.pageExitWarning;
|
||||||
|
},
|
||||||
|
|
||||||
handleContainerResize() {
|
handleContainerResize() {
|
||||||
this.setState({
|
this.setState({
|
||||||
// +30 to get rid of the padding of the container which is 15px + 15px left and right
|
// +30 to get rid of the padding of the container which is 15px + 15px left and right
|
||||||
|
@ -8,7 +8,6 @@ import { InjectInHeadUtils } from '../../utils/inject_utils';
|
|||||||
|
|
||||||
let FacebookShareButton = React.createClass({
|
let FacebookShareButton = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
url: React.PropTypes.string,
|
|
||||||
type: React.PropTypes.string
|
type: React.PropTypes.string
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -28,12 +27,14 @@ let FacebookShareButton = React.createClass({
|
|||||||
* To circumvent this, we always have the sdk parse the entire DOM on the initial load
|
* To circumvent this, we always have the sdk parse the entire DOM on the initial load
|
||||||
* (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
|
* (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
|
||||||
*/
|
*/
|
||||||
if (!InjectInHeadUtils.isPresent('script', AppConstants.facebook.sdkUrl)) {
|
|
||||||
InjectInHeadUtils.inject(AppConstants.facebook.sdkUrl);
|
InjectInHeadUtils
|
||||||
} else {
|
.inject(AppConstants.facebook.sdkUrl)
|
||||||
// Parse() searches the children of the element we give it, not the element itself.
|
.then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
|
||||||
FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement);
|
},
|
||||||
}
|
|
||||||
|
shouldComponentUpdate(nextProps) {
|
||||||
|
return this.props.type !== nextProps.type;
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
@ -41,7 +42,6 @@ let FacebookShareButton = React.createClass({
|
|||||||
<span
|
<span
|
||||||
ref="fbShareButton"
|
ref="fbShareButton"
|
||||||
className="fb-share-button btn btn-ascribe-social"
|
className="fb-share-button btn btn-ascribe-social"
|
||||||
data-href={this.props.url}
|
|
||||||
data-layout={this.props.type}>
|
data-layout={this.props.type}>
|
||||||
</span>
|
</span>
|
||||||
);
|
);
|
||||||
|
@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
|
|||||||
propTypes: {
|
propTypes: {
|
||||||
classNames: React.PropTypes.string,
|
classNames: React.PropTypes.string,
|
||||||
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
|
size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
|
||||||
color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop'])
|
color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
|
||||||
},
|
},
|
||||||
|
|
||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
inline: false,
|
inline: false,
|
||||||
size: 'md',
|
size: 'md'
|
||||||
color: 'loop'
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { classNames: classes, color, size } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={
|
className={classNames('spinner-wrapper-' + size,
|
||||||
classNames('spinner-wrapper-' + this.props.size,
|
color ? 'spinner-wrapper-' + color : null,
|
||||||
'spinner-wrapper-' + this.props.color,
|
classes)}>
|
||||||
this.props.classNames)}>
|
<div className='spinner-circle' />
|
||||||
<div className={classNames('spinner-circle')}></div>
|
<div className='spinner-inner'>A</div>
|
||||||
<div className={classNames('spinner-inner')}>A</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -15,7 +15,6 @@ let FileDragAndDrop = React.createClass({
|
|||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
onDrop: React.PropTypes.func.isRequired,
|
onDrop: React.PropTypes.func.isRequired,
|
||||||
onDragOver: React.PropTypes.func,
|
onDragOver: React.PropTypes.func,
|
||||||
onInactive: React.PropTypes.func,
|
|
||||||
filesToUpload: React.PropTypes.array,
|
filesToUpload: React.PropTypes.array,
|
||||||
handleDeleteFile: React.PropTypes.func,
|
handleDeleteFile: React.PropTypes.func,
|
||||||
handleCancelFile: React.PropTypes.func,
|
handleCancelFile: React.PropTypes.func,
|
||||||
@ -60,28 +59,21 @@ let FileDragAndDrop = React.createClass({
|
|||||||
handleDrop(event) {
|
handleDrop(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
let files;
|
|
||||||
|
|
||||||
if(this.props.dropzoneInactive) {
|
if (!this.props.dropzoneInactive) {
|
||||||
// if there is a handle function for doing stuff
|
let files;
|
||||||
// when the dropzone is inactive, then call it
|
|
||||||
if(this.props.onInactive) {
|
// handle Drag and Drop
|
||||||
this.props.onInactive();
|
if(event.dataTransfer && event.dataTransfer.files.length > 0) {
|
||||||
|
files = event.dataTransfer.files;
|
||||||
|
} else if(event.target.files) { // handle input type file
|
||||||
|
files = event.target.files;
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// handle Drag and Drop
|
if(typeof this.props.onDrop === 'function' && files) {
|
||||||
if(event.dataTransfer && event.dataTransfer.files.length > 0) {
|
this.props.onDrop(files);
|
||||||
files = event.dataTransfer.files;
|
}
|
||||||
} else if(event.target.files) { // handle input type file
|
|
||||||
files = event.target.files;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(typeof this.props.onDrop === 'function' && files) {
|
|
||||||
this.props.onDrop(files);
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleDeleteFile(fileId) {
|
handleDeleteFile(fileId) {
|
||||||
@ -113,31 +105,25 @@ let FileDragAndDrop = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleOnClick() {
|
handleOnClick() {
|
||||||
let evt;
|
// do not propagate event if the drop zone's inactive,
|
||||||
// when multiple is set to false and the user already uploaded a piece,
|
// for example when multiple is set to false and the user already uploaded a piece
|
||||||
// do not propagate event
|
if (!this.props.dropzoneInactive) {
|
||||||
if(this.props.dropzoneInactive) {
|
let evt;
|
||||||
// if there is a handle function for doing stuff
|
|
||||||
// when the dropzone is inactive, then call it
|
try {
|
||||||
if(this.props.onInactive) {
|
evt = new MouseEvent('click', {
|
||||||
this.props.onInactive();
|
view: window,
|
||||||
|
bubbles: true,
|
||||||
|
cancelable: true
|
||||||
|
});
|
||||||
|
} catch(e) {
|
||||||
|
// For browsers that do not support the new MouseEvent syntax
|
||||||
|
evt = document.createEvent('MouseEvents');
|
||||||
|
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
||||||
}
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
||||||
evt = new MouseEvent('click', {
|
|
||||||
view: window,
|
|
||||||
bubbles: true,
|
|
||||||
cancelable: true
|
|
||||||
});
|
|
||||||
} catch(e) {
|
|
||||||
// For browsers that do not support the new MouseEvent syntax
|
|
||||||
evt = document.createEvent('MouseEvents');
|
|
||||||
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
@ -112,7 +112,6 @@ const ReactS3FineUploader = React.createClass({
|
|||||||
areAssetsDownloadable: bool,
|
areAssetsDownloadable: bool,
|
||||||
areAssetsEditable: bool,
|
areAssetsEditable: bool,
|
||||||
defaultErrorMessage: string,
|
defaultErrorMessage: string,
|
||||||
onInactive: func,
|
|
||||||
|
|
||||||
// We encountered some cases where people had difficulties to upload their
|
// We encountered some cases where people had difficulties to upload their
|
||||||
// works to ascribe due to a slow internet connection.
|
// works to ascribe due to a slow internet connection.
|
||||||
@ -940,7 +939,6 @@ const ReactS3FineUploader = React.createClass({
|
|||||||
multiple,
|
multiple,
|
||||||
areAssetsDownloadable,
|
areAssetsDownloadable,
|
||||||
areAssetsEditable,
|
areAssetsEditable,
|
||||||
onInactive,
|
|
||||||
enableLocalHashing,
|
enableLocalHashing,
|
||||||
fileClassToUpload,
|
fileClassToUpload,
|
||||||
fileInputElement: FileInputElement,
|
fileInputElement: FileInputElement,
|
||||||
@ -950,7 +948,6 @@ const ReactS3FineUploader = React.createClass({
|
|||||||
multiple,
|
multiple,
|
||||||
areAssetsDownloadable,
|
areAssetsDownloadable,
|
||||||
areAssetsEditable,
|
areAssetsEditable,
|
||||||
onInactive,
|
|
||||||
enableLocalHashing,
|
enableLocalHashing,
|
||||||
uploadMethod,
|
uploadMethod,
|
||||||
fileClassToUpload,
|
fileClassToUpload,
|
||||||
|
@ -1,36 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import NotificationStore from '../stores/notification_store';
|
|
||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
|
||||||
|
|
||||||
let ContractNotification = React.createClass({
|
|
||||||
getInitialState() {
|
|
||||||
return mergeOptions(
|
|
||||||
NotificationStore.getState()
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
NotificationStore.listen(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
NotificationStore.unlisten(this.onChange);
|
|
||||||
},
|
|
||||||
|
|
||||||
onChange(state) {
|
|
||||||
this.setState(state);
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
|
|
||||||
return (
|
|
||||||
null
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default ContractNotification;
|
|
@ -6,6 +6,16 @@ import { getLangText } from '../utils/lang_utils';
|
|||||||
|
|
||||||
|
|
||||||
let ErrorNotFoundPage = React.createClass({
|
let ErrorNotFoundPage = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
message: React.PropTypes.string
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
message: getLangText("Oops, the page you are looking for doesn't exist.")
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
@ -13,7 +23,7 @@ let ErrorNotFoundPage = React.createClass({
|
|||||||
<div className="error-wrapper">
|
<div className="error-wrapper">
|
||||||
<h1>404</h1>
|
<h1>404</h1>
|
||||||
<p>
|
<p>
|
||||||
{getLangText('Ups, the page you are looking for does not exist.')}
|
{this.props.message}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { Link } from 'react-router';
|
import { Link } from 'react-router';
|
||||||
|
|
||||||
|
import history from '../history';
|
||||||
|
|
||||||
import Nav from 'react-bootstrap/lib/Nav';
|
import Nav from 'react-bootstrap/lib/Nav';
|
||||||
import Navbar from 'react-bootstrap/lib/Navbar';
|
import Navbar from 'react-bootstrap/lib/Navbar';
|
||||||
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
|
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
|
||||||
@ -58,11 +59,17 @@ let Header = React.createClass({
|
|||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
WhitelabelActions.fetchWhitelabel();
|
WhitelabelActions.fetchWhitelabel();
|
||||||
WhitelabelStore.listen(this.onChange);
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
|
||||||
|
// react-bootstrap 0.25.1 has a bug in which it doesn't
|
||||||
|
// close the mobile expanded navigation after a click by itself.
|
||||||
|
// To get rid of this, we set the state of the component ourselves.
|
||||||
|
history.listen(this.onRouteChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
UserStore.unlisten(this.onChange);
|
UserStore.unlisten(this.onChange);
|
||||||
WhitelabelStore.unlisten(this.onChange);
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
history.unlisten(this.onRouteChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
getLogo() {
|
getLogo() {
|
||||||
@ -135,6 +142,13 @@ let Header = React.createClass({
|
|||||||
this.refs.dropdownbutton.setDropdownState(false);
|
this.refs.dropdownbutton.setDropdownState(false);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
// On route change, close expanded navbar again since react-bootstrap doesn't close
|
||||||
|
// the collapsibleNav by itself on click. setState() isn't available on a ref so
|
||||||
|
// doing this explicitly is the only way for now.
|
||||||
|
onRouteChange() {
|
||||||
|
this.refs.navbar.state.navExpanded = false;
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let account;
|
let account;
|
||||||
let signup;
|
let signup;
|
||||||
@ -201,8 +215,10 @@ let Header = React.createClass({
|
|||||||
<Navbar
|
<Navbar
|
||||||
brand={this.getLogo()}
|
brand={this.getLogo()}
|
||||||
toggleNavKey={0}
|
toggleNavKey={0}
|
||||||
fixedTop={true}>
|
fixedTop={true}
|
||||||
<CollapsibleNav eventKey={0}>
|
ref="navbar">
|
||||||
|
<CollapsibleNav
|
||||||
|
eventKey={0}>
|
||||||
<Nav navbar left>
|
<Nav navbar left>
|
||||||
{this.getPoweredBy()}
|
{this.getPoweredBy()}
|
||||||
</Nav>
|
</Nav>
|
||||||
|
@ -13,6 +13,9 @@ import AccordionList from './ascribe_accordion_list/accordion_list';
|
|||||||
import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
|
import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
|
||||||
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
|
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
|
||||||
|
|
||||||
|
import AclButtonList from './ascribe_buttons/acl_button_list.js';
|
||||||
|
import DeleteButton from './ascribe_buttons/delete_button';
|
||||||
|
|
||||||
import Pagination from './ascribe_pagination/pagination';
|
import Pagination from './ascribe_pagination/pagination';
|
||||||
|
|
||||||
import PieceListFilterDisplay from './piece_list_filter_display';
|
import PieceListFilterDisplay from './piece_list_filter_display';
|
||||||
@ -22,7 +25,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
|
|||||||
|
|
||||||
import AscribeSpinner from './ascribe_spinner';
|
import AscribeSpinner from './ascribe_spinner';
|
||||||
|
|
||||||
import { mergeOptions } from '../utils/general_utils';
|
import { getAvailableAcls } from '../utils/acl_utils';
|
||||||
|
import { mergeOptions, isShallowEqual } from '../utils/general_utils';
|
||||||
import { getLangText } from '../utils/lang_utils';
|
import { getLangText } from '../utils/lang_utils';
|
||||||
import { setDocumentTitle } from '../utils/dom_utils';
|
import { setDocumentTitle } from '../utils/dom_utils';
|
||||||
|
|
||||||
@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
|
|||||||
let PieceList = React.createClass({
|
let PieceList = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
accordionListItemType: React.PropTypes.func,
|
accordionListItemType: React.PropTypes.func,
|
||||||
|
bulkModalButtonListType: React.PropTypes.func,
|
||||||
|
canLoadPieceList: React.PropTypes.bool,
|
||||||
redirectTo: React.PropTypes.string,
|
redirectTo: React.PropTypes.string,
|
||||||
customSubmitButton: React.PropTypes.element,
|
customSubmitButton: React.PropTypes.element,
|
||||||
|
customThumbnailPlaceholder: React.PropTypes.func,
|
||||||
filterParams: React.PropTypes.array,
|
filterParams: React.PropTypes.array,
|
||||||
orderParams: React.PropTypes.array,
|
orderParams: React.PropTypes.array,
|
||||||
orderBy: React.PropTypes.string,
|
orderBy: React.PropTypes.string,
|
||||||
@ -43,6 +50,8 @@ let PieceList = React.createClass({
|
|||||||
getDefaultProps() {
|
getDefaultProps() {
|
||||||
return {
|
return {
|
||||||
accordionListItemType: AccordionListItemWallet,
|
accordionListItemType: AccordionListItemWallet,
|
||||||
|
bulkModalButtonListType: AclButtonList,
|
||||||
|
canLoadPieceList: true,
|
||||||
orderParams: ['artist_name', 'title'],
|
orderParams: ['artist_name', 'title'],
|
||||||
filterParams: [{
|
filterParams: [{
|
||||||
label: getLangText('Show works I can'),
|
label: getLangText('Show works I can'),
|
||||||
@ -54,23 +63,53 @@ let PieceList = React.createClass({
|
|||||||
}]
|
}]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
getInitialState() {
|
getInitialState() {
|
||||||
return mergeOptions(
|
const pieceListStore = PieceListStore.getState();
|
||||||
PieceListStore.getState(),
|
const stores = mergeOptions(
|
||||||
EditionListStore.getState()
|
pieceListStore,
|
||||||
|
EditionListStore.getState(),
|
||||||
|
{
|
||||||
|
isFilterDirty: false
|
||||||
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Use the default filters but use the pieceListStore's settings if they're available
|
||||||
|
stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
|
||||||
|
|
||||||
|
return stores;
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
let page = this.props.location.query.page || 1;
|
|
||||||
|
|
||||||
PieceListStore.listen(this.onChange);
|
PieceListStore.listen(this.onChange);
|
||||||
EditionListStore.listen(this.onChange);
|
EditionListStore.listen(this.onChange);
|
||||||
|
|
||||||
let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
|
let page = this.props.location.query.page || 1;
|
||||||
if (this.state.pieceList.length === 0 || this.state.page !== page){
|
if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
|
||||||
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
|
this.loadPieceList({ page });
|
||||||
orderBy, this.state.orderAsc, this.state.filterBy);
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillReceiveProps(nextProps) {
|
||||||
|
let filterBy;
|
||||||
|
let page = this.props.location.query.page || 1;
|
||||||
|
|
||||||
|
// If the user hasn't changed the filter and the new default filter is different
|
||||||
|
// than the current filter, apply the new default filter
|
||||||
|
if (!this.state.isFilterDirty) {
|
||||||
|
const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
|
||||||
|
|
||||||
|
// Only need to check shallowly since the filterBy shouldn't be nested
|
||||||
|
if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
|
||||||
|
filterBy = newDefaultFilterBy;
|
||||||
|
page = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Only load if we are applying a new filter or if it's the first time we can
|
||||||
|
// load the piece list
|
||||||
|
if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
|
||||||
|
this.loadPieceList({ page, filterBy });
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -90,14 +129,29 @@ let PieceList = React.createClass({
|
|||||||
this.setState(state);
|
this.setState(state);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
getDefaultFilterBy(props = this.props) {
|
||||||
|
const { filterParams } = props;
|
||||||
|
const defaultFilterBy = {};
|
||||||
|
|
||||||
|
if (filterParams && typeof filterParams.forEach === 'function') {
|
||||||
|
filterParams.forEach(({ items }) => {
|
||||||
|
items.forEach((item) => {
|
||||||
|
if (typeof item === 'object' && item.defaultValue) {
|
||||||
|
defaultFilterBy[item.key] = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return defaultFilterBy;
|
||||||
|
},
|
||||||
|
|
||||||
paginationGoToPage(page) {
|
paginationGoToPage(page) {
|
||||||
return () => {
|
return () => {
|
||||||
// if the users clicks a pager of the pagination,
|
// if the users clicks a pager of the pagination,
|
||||||
// the site should go to the top
|
// the site should go to the top
|
||||||
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
document.body.scrollTop = document.documentElement.scrollTop = 0;
|
||||||
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
|
this.loadPieceList({ page });
|
||||||
this.state.orderBy, this.state.orderAsc,
|
|
||||||
this.state.filterBy);
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -116,29 +170,35 @@ let PieceList = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
searchFor(searchTerm) {
|
searchFor(searchTerm) {
|
||||||
PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
|
this.loadPieceList({
|
||||||
this.state.orderAsc, this.state.filterBy);
|
page: 1,
|
||||||
this.history.pushState(null, this.props.location.pathname, {page: 1});
|
search: searchTerm
|
||||||
|
});
|
||||||
|
this.history.pushState(null, this.props.location.pathname, {page: 1});
|
||||||
},
|
},
|
||||||
|
|
||||||
applyFilterBy(filterBy){
|
applyFilterBy(filterBy){
|
||||||
// first we need to apply the filter on the piece list
|
this.setState({
|
||||||
PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
|
isFilterDirty: true
|
||||||
this.state.orderBy, this.state.orderAsc, filterBy)
|
});
|
||||||
.then(() => {
|
|
||||||
// but also, we need to filter all the open edition lists
|
|
||||||
this.state.pieceList
|
|
||||||
.forEach((piece) => {
|
|
||||||
// but only if they're actually open
|
|
||||||
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
|
|
||||||
EditionListActions.refreshEditionList({
|
|
||||||
pieceId: piece.id,
|
|
||||||
filterBy
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
});
|
// first we need to apply the filter on the piece list
|
||||||
});
|
this
|
||||||
|
.loadPieceList({ page: 1, filterBy })
|
||||||
|
.then(() => {
|
||||||
|
// but also, we need to filter all the open edition lists
|
||||||
|
this.state.pieceList
|
||||||
|
.forEach((piece) => {
|
||||||
|
// but only if they're actually open
|
||||||
|
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
|
||||||
|
EditionListActions.refreshEditionList({
|
||||||
|
pieceId: piece.id,
|
||||||
|
filterBy
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// we have to redirect the user always to page one as it could be that there is no page two
|
// 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
|
||||||
@ -150,35 +210,97 @@ let PieceList = React.createClass({
|
|||||||
orderBy, this.state.orderAsc, this.state.filterBy);
|
orderBy, this.state.orderAsc, this.state.filterBy);
|
||||||
},
|
},
|
||||||
|
|
||||||
|
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
|
||||||
|
const orderBy = this.state.orderBy || this.props.orderBy;
|
||||||
|
|
||||||
|
return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
|
||||||
|
orderBy, this.state.orderAsc, filterBy);
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchSelectedPieceEditionList() {
|
||||||
|
let filteredPieceIdList = Object.keys(this.state.editionList)
|
||||||
|
.filter((pieceId) => {
|
||||||
|
return this.state.editionList[pieceId]
|
||||||
|
.filter((edition) => edition.selected).length > 0;
|
||||||
|
});
|
||||||
|
return filteredPieceIdList;
|
||||||
|
},
|
||||||
|
|
||||||
|
fetchSelectedEditionList() {
|
||||||
|
let selectedEditionList = [];
|
||||||
|
|
||||||
|
Object
|
||||||
|
.keys(this.state.editionList)
|
||||||
|
.forEach((pieceId) => {
|
||||||
|
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
|
||||||
|
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
|
||||||
|
});
|
||||||
|
|
||||||
|
return selectedEditionList;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAclSuccess() {
|
||||||
|
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
|
||||||
|
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
|
||||||
|
|
||||||
|
this.fetchSelectedPieceEditionList()
|
||||||
|
.forEach((pieceId) => {
|
||||||
|
EditionListActions.refreshEditionList({pieceId});
|
||||||
|
});
|
||||||
|
EditionListActions.clearAllEditionSelections();
|
||||||
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
|
const {
|
||||||
let AccordionListItemType = this.props.accordionListItemType;
|
accordionListItemType: AccordionListItemType,
|
||||||
|
bulkModalButtonListType: BulkModalButtonListType,
|
||||||
|
customSubmitButton,
|
||||||
|
customThumbnailPlaceholder,
|
||||||
|
filterParams,
|
||||||
|
orderParams } = this.props;
|
||||||
|
|
||||||
|
const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
|
||||||
|
|
||||||
|
const selectedEditions = this.fetchSelectedEditionList();
|
||||||
|
const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
|
||||||
|
|
||||||
setDocumentTitle(getLangText('Collection'));
|
setDocumentTitle(getLangText('Collection'));
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<PieceListToolbar
|
<PieceListToolbar
|
||||||
className="ascribe-piece-list-toolbar"
|
className="ascribe-piece-list-toolbar"
|
||||||
searchFor={this.searchFor}
|
searchFor={this.searchFor}
|
||||||
searchQuery={this.state.search}
|
searchQuery={this.state.search}
|
||||||
filterParams={this.props.filterParams}
|
filterParams={filterParams}
|
||||||
orderParams={this.props.orderParams}
|
orderParams={orderParams}
|
||||||
filterBy={this.state.filterBy}
|
filterBy={this.state.filterBy}
|
||||||
orderBy={this.state.orderBy}
|
orderBy={this.state.orderBy}
|
||||||
applyFilterBy={this.applyFilterBy}
|
applyFilterBy={this.applyFilterBy}
|
||||||
applyOrderBy={this.applyOrderBy}>
|
applyOrderBy={this.applyOrderBy}>
|
||||||
{this.props.customSubmitButton ?
|
{customSubmitButton ?
|
||||||
this.props.customSubmitButton :
|
customSubmitButton :
|
||||||
<button className="btn btn-default btn-ascribe-add">
|
<button className="btn btn-default btn-ascribe-add">
|
||||||
<span className="icon-ascribe icon-ascribe-add" />
|
<span className="icon-ascribe icon-ascribe-add" />
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
</PieceListToolbar>
|
</PieceListToolbar>
|
||||||
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" />
|
<PieceListBulkModal
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
selectedEditions={selectedEditions}
|
||||||
|
className="ascribe-piece-list-bulk-modal">
|
||||||
|
<BulkModalButtonListType
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
pieceOrEditions={selectedEditions}
|
||||||
|
handleSuccess={this.handleAclSuccess}
|
||||||
|
className="text-center ascribe-button-list collapse-group">
|
||||||
|
<DeleteButton
|
||||||
|
handleSuccess={this.handleAclSuccess}
|
||||||
|
editions={selectedEditions}/>
|
||||||
|
</BulkModalButtonListType>
|
||||||
|
</PieceListBulkModal>
|
||||||
<PieceListFilterDisplay
|
<PieceListFilterDisplay
|
||||||
filterBy={this.state.filterBy}
|
filterBy={this.state.filterBy}
|
||||||
filterParams={this.props.filterParams}/>
|
filterParams={filterParams}/>
|
||||||
<AccordionList
|
<AccordionList
|
||||||
className="ascribe-accordion-list"
|
className="ascribe-accordion-list"
|
||||||
changeOrder={this.accordionChangeOrder}
|
changeOrder={this.accordionChangeOrder}
|
||||||
@ -196,6 +318,7 @@ let PieceList = React.createClass({
|
|||||||
<AccordionListItemType
|
<AccordionListItemType
|
||||||
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
|
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
|
||||||
content={piece}
|
content={piece}
|
||||||
|
thumbnailPlaceholder={customThumbnailPlaceholder}
|
||||||
key={i}>
|
key={i}>
|
||||||
<AccordionListItemTableEditions
|
<AccordionListItemTableEditions
|
||||||
className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
|
className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"
|
||||||
|
@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
|
|||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { filterBy } = this.props;
|
let { filterBy } = this.props;
|
||||||
let filtersWithLabel = this.transformFilterParamsItemsToBools();
|
|
||||||
|
|
||||||
// do not show the FilterDisplay if there are no filters applied
|
// do not show the FilterDisplay if there are no filters applied
|
||||||
if(filterBy && Object.keys(filterBy).length === 0) {
|
if(filterBy && Object.keys(filterBy).length === 0) {
|
||||||
return null;
|
return null;
|
||||||
} else {
|
} else {
|
||||||
|
const filtersWithLabel = this.transformFilterParamsItemsToBools();
|
||||||
return (
|
return (
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
<div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">
|
||||||
|
@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
|
|||||||
return mergeOptions(
|
return mergeOptions(
|
||||||
UserStore.getState(),
|
UserStore.getState(),
|
||||||
WhitelabelStore.getState(),
|
WhitelabelStore.getState(),
|
||||||
PieceListStore.getState(),
|
PieceListStore.getState()
|
||||||
{
|
);
|
||||||
selectedLicense: 0,
|
|
||||||
isFineUploaderActive: false
|
|
||||||
});
|
|
||||||
},
|
},
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
|
|||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
|
|
||||||
if(this.state.currentUser && this.state.currentUser.email) {
|
|
||||||
// we should also make the fineuploader component editable again
|
|
||||||
this.setState({
|
|
||||||
isFineUploaderActive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSuccess(response){
|
handleSuccess(response){
|
||||||
@ -118,7 +108,7 @@ let RegisterPiece = React.createClass( {
|
|||||||
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
<RegisterPieceForm
|
<RegisterPieceForm
|
||||||
{...this.props}
|
{...this.props}
|
||||||
isFineUploaderActive={this.state.isFineUploaderActive}
|
isFineUploaderActive={true}
|
||||||
handleSuccess={this.handleSuccess}
|
handleSuccess={this.handleSuccess}
|
||||||
location={this.props.location}>
|
location={this.props.location}>
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
@ -292,8 +292,8 @@ let PrizePieceRatings = React.createClass({
|
|||||||
url={ApiUrls.ownership_loans_pieces_request}
|
url={ApiUrls.ownership_loans_pieces_request}
|
||||||
email={this.props.currentUser.email}
|
email={this.props.currentUser.email}
|
||||||
gallery={this.props.piece.prize.name}
|
gallery={this.props.piece.prize.name}
|
||||||
startdate={today}
|
startDate={today}
|
||||||
enddate={endDate}
|
endDate={endDate}
|
||||||
showPersonalMessage={true}
|
showPersonalMessage={true}
|
||||||
showPassword={false}
|
showPassword={false}
|
||||||
handleSuccess={this.handleLoanSuccess} />
|
handleSuccess={this.handleLoanSuccess} />
|
||||||
|
@ -0,0 +1,15 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
let Vivi23AccordionListItemThumbnailPlaceholder = React.createClass({
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<span className="ascribe-thumbnail-placeholder">
|
||||||
|
23
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Vivi23AccordionListItemThumbnailPlaceholder;
|
@ -0,0 +1,78 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Button from 'react-bootstrap/lib/Button';
|
||||||
|
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
|
||||||
|
|
||||||
|
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
|
import { mergeOptions } from '../../../../../utils/general_utils';
|
||||||
|
import { getLangText } from '../../../../../utils/lang_utils';
|
||||||
|
import { setDocumentTitle } from '../../../../../utils/dom_utils';
|
||||||
|
|
||||||
|
let Vivi23Landing = React.createClass({
|
||||||
|
getInitialState() {
|
||||||
|
return WhitelabelStore.getState();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
setDocumentTitle('23vivi Marketplace');
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="container ascribe-form-wrapper vivi23-landing">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-xs-12">
|
||||||
|
<div className="row vivi23-landing--header">
|
||||||
|
<img className="vivi23-landing--header-logo" src={this.state.whitelabel.logo} />
|
||||||
|
<div>
|
||||||
|
{getLangText('Artwork from the 23vivi Marketplace is powered by') + ' '}
|
||||||
|
<span className="icon-ascribe-logo" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row vivi23-landing--content">
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<p>
|
||||||
|
{getLangText('Existing ascribe user?')}
|
||||||
|
</p>
|
||||||
|
<LinkContainer to="/login">
|
||||||
|
<Button>
|
||||||
|
{getLangText('Log in')}
|
||||||
|
</Button>
|
||||||
|
</LinkContainer>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<p>
|
||||||
|
{getLangText('Do you need an account?')}
|
||||||
|
</p>
|
||||||
|
<LinkContainer to="/signup">
|
||||||
|
<Button>
|
||||||
|
{getLangText('Sign up')}
|
||||||
|
</Button>
|
||||||
|
</LinkContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Vivi23Landing;
|
@ -0,0 +1,24 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Vivi23AccordionListItemThumbnailPlaceholder from './23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder';
|
||||||
|
|
||||||
|
import MarketPieceList from '../market/market_piece_list';
|
||||||
|
|
||||||
|
let Vivi23PieceList = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
location: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<MarketPieceList
|
||||||
|
customThumbnailPlaceholder={Vivi23AccordionListItemThumbnailPlaceholder}
|
||||||
|
location={this.props.location} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
export default Vivi23PieceList;
|
@ -116,7 +116,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='artist_bio'
|
name='artist_bio'
|
||||||
label={getLangText('Artist Biography')}
|
label={getLangText('Artist Biography')}
|
||||||
expanded={!disabled && piece.extra_data.artist_bio}>
|
expanded={!disabled || !!piece.extra_data.artist_bio}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.artist_bio}
|
defaultValue={piece.extra_data.artist_bio}
|
||||||
@ -125,7 +125,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='artist_contact_information'
|
name='artist_contact_information'
|
||||||
label={getLangText('Artist Contact Information')}
|
label={getLangText('Artist Contact Information')}
|
||||||
expanded={!disabled && piece.extra_data.artist_contact_information}>
|
expanded={!disabled || !!piece.extra_data.artist_contact_information}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.artist_contact_information}
|
defaultValue={piece.extra_data.artist_contact_information}
|
||||||
@ -134,7 +134,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='conceptual_overview'
|
name='conceptual_overview'
|
||||||
label={getLangText('Conceptual Overview')}
|
label={getLangText('Conceptual Overview')}
|
||||||
expanded={!disabled && piece.extra_data.conceptual_overview}>
|
expanded={!disabled || !!piece.extra_data.conceptual_overview}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.conceptual_overview}
|
defaultValue={piece.extra_data.conceptual_overview}
|
||||||
@ -143,7 +143,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='medium'
|
name='medium'
|
||||||
label={getLangText('Medium (technical specifications)')}
|
label={getLangText('Medium (technical specifications)')}
|
||||||
expanded={!disabled && piece.extra_data.medium}>
|
expanded={!disabled || !!piece.extra_data.medium}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.medium}
|
defaultValue={piece.extra_data.medium}
|
||||||
@ -152,7 +152,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='size_duration'
|
name='size_duration'
|
||||||
label={getLangText('Size / Duration')}
|
label={getLangText('Size / Duration')}
|
||||||
expanded={!disabled && piece.extra_data.size_duration}>
|
expanded={!disabled || !!piece.extra_data.size_duration}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.size_duration}
|
defaultValue={piece.extra_data.size_duration}
|
||||||
@ -161,7 +161,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='display_instructions'
|
name='display_instructions'
|
||||||
label={getLangText('Display instructions')}
|
label={getLangText('Display instructions')}
|
||||||
expanded={!disabled && piece.extra_data.display_instructions}>
|
expanded={!disabled || !!piece.extra_data.display_instructions}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.display_instructions}
|
defaultValue={piece.extra_data.display_instructions}
|
||||||
@ -170,7 +170,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='additional_details'
|
name='additional_details'
|
||||||
label={getLangText('Additional details')}
|
label={getLangText('Additional details')}
|
||||||
expanded={!disabled && piece.extra_data.additional_details}>
|
expanded={!disabled || !!piece.extra_data.additional_details}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={piece.extra_data.additional_details}
|
defaultValue={piece.extra_data.additional_details}
|
||||||
@ -178,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
|
|||||||
</Property>
|
</Property>
|
||||||
<FurtherDetailsFileuploader
|
<FurtherDetailsFileuploader
|
||||||
label={getLangText('Additional files (e.g. still images, pdf)')}
|
label={getLangText('Additional files (e.g. still images, pdf)')}
|
||||||
submitFile={this.submitFile}
|
submitFile={function () {}}
|
||||||
setIsUploadReady={this.setIsUploadReady}
|
setIsUploadReady={this.setIsUploadReady}
|
||||||
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
|
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
|
||||||
pieceId={piece.id}
|
pieceId={piece.id}
|
||||||
|
@ -57,9 +57,9 @@ let CylandLanding = React.createClass({
|
|||||||
setDocumentTitle('CYLAND MediaArtLab');
|
setDocumentTitle('CYLAND MediaArtLab');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container ascribe-form-wrapper">
|
<div className="container ascribe-form-wrapper cyland-landing">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col-xs-12 wp-landing-wrapper">
|
<div className="col-xs-12">
|
||||||
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
|
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
|
||||||
<img src={this.state.whitelabel.logo} width="400px"/>
|
<img src={this.state.whitelabel.logo} width="400px"/>
|
||||||
<div style={{marginTop: '1em'}}>
|
<div style={{marginTop: '1em'}}>
|
||||||
|
@ -53,8 +53,6 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
PieceStore.getState(),
|
PieceStore.getState(),
|
||||||
WhitelabelStore.getState(),
|
WhitelabelStore.getState(),
|
||||||
{
|
{
|
||||||
selectedLicense: 0,
|
|
||||||
isFineUploaderActive: false,
|
|
||||||
step: 0
|
step: 0
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
@ -90,13 +88,6 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
|
|
||||||
if(this.state.currentUser && this.state.currentUser.email) {
|
|
||||||
// we should also make the fineuploader component editable again
|
|
||||||
this.setState({
|
|
||||||
isFineUploaderActive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleRegisterSuccess(response){
|
handleRegisterSuccess(response){
|
||||||
@ -167,11 +158,6 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
// basically redirects to the second slide (index: 1), when the user is not logged in
|
|
||||||
onLoggedOut() {
|
|
||||||
this.history.pushState(null, '/login');
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
||||||
let today = new Moment();
|
let today = new Moment();
|
||||||
@ -197,9 +183,8 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
enableLocalHashing={false}
|
enableLocalHashing={false}
|
||||||
headerMessage={getLangText('Submit to Cyland Archive')}
|
headerMessage={getLangText('Submit to Cyland Archive')}
|
||||||
submitMessage={getLangText('Submit')}
|
submitMessage={getLangText('Submit')}
|
||||||
isFineUploaderActive={this.state.isFineUploaderActive}
|
isFineUploaderActive={true}
|
||||||
handleSuccess={this.handleRegisterSuccess}
|
handleSuccess={this.handleRegisterSuccess}
|
||||||
onLoggedOut={this.onLoggedOut}
|
|
||||||
location={this.props.location}/>
|
location={this.props.location}/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -229,8 +214,8 @@ let CylandRegisterPiece = React.createClass({
|
|||||||
url={ApiUrls.ownership_loans_pieces}
|
url={ApiUrls.ownership_loans_pieces}
|
||||||
email={this.state.whitelabel.user}
|
email={this.state.whitelabel.user}
|
||||||
gallery="Cyland Archive"
|
gallery="Cyland Archive"
|
||||||
startdate={today}
|
startDate={today}
|
||||||
enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
|
endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
|
||||||
showStartDate={false}
|
showStartDate={false}
|
||||||
showEndDate={false}
|
showEndDate={false}
|
||||||
showPersonalMessage={false}
|
showPersonalMessage={false}
|
||||||
|
@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='artist_website'
|
name='artist_website'
|
||||||
label={getLangText('Artist Website')}
|
label={getLangText('Artist Website')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.artist_website}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.artist_website}
|
defaultValue={this.props.piece.extra_data.artist_website}
|
||||||
@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='gallery_website'
|
name='gallery_website'
|
||||||
label={getLangText('Website of related Gallery, Museum, etc.')}
|
label={getLangText('Website of related Gallery, Museum, etc.')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.gallery_website}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.gallery_website}
|
defaultValue={this.props.piece.extra_data.gallery_website}
|
||||||
@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='additional_websites'
|
name='additional_websites'
|
||||||
label={getLangText('Additional Websites/Publications/Museums/Galleries')}
|
label={getLangText('Additional Websites/Publications/Museums/Galleries')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.additional_websites}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.additional_websites}
|
defaultValue={this.props.piece.extra_data.additional_websites}
|
||||||
@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='conceptual_overview'
|
name='conceptual_overview'
|
||||||
label={getLangText('Short text about the Artist')}
|
label={getLangText('Short text about the Artist')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.conceptual_overview}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.conceptual_overview}
|
defaultValue={this.props.piece.extra_data.conceptual_overview}
|
||||||
|
@ -103,7 +103,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='medium'
|
name='medium'
|
||||||
label={getLangText('Medium')}
|
label={getLangText('Medium')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.medium}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.medium}
|
defaultValue={this.props.piece.extra_data.medium}
|
||||||
@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='size_duration'
|
name='size_duration'
|
||||||
label={getLangText('Size/Duration')}
|
label={getLangText('Size/Duration')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.size_duration}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.size_duration}
|
defaultValue={this.props.piece.extra_data.size_duration}
|
||||||
@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='copyright'
|
name='copyright'
|
||||||
label={getLangText('Copyright')}
|
label={getLangText('Copyright')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.copyright}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.copyright}
|
defaultValue={this.props.piece.extra_data.copyright}
|
||||||
@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='courtesy_of'
|
name='courtesy_of'
|
||||||
label={getLangText('Courtesy of')}
|
label={getLangText('Courtesy of')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.courtesy_of}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.courtesy_of}
|
defaultValue={this.props.piece.extra_data.courtesy_of}
|
||||||
@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='copyright_of_photography'
|
name='copyright_of_photography'
|
||||||
label={getLangText('Copyright of Photography')}
|
label={getLangText('Copyright of Photography')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.copyright_of_photography}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.copyright_of_photography}
|
defaultValue={this.props.piece.extra_data.copyright_of_photography}
|
||||||
@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
|
|||||||
<Property
|
<Property
|
||||||
name='additional_details'
|
name='additional_details'
|
||||||
label={getLangText('Additional Details about the artwork')}
|
label={getLangText('Additional Details about the artwork')}
|
||||||
expanded={!this.props.disabled && this.props.piece.extra_data.additional_details}>
|
expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
|
||||||
<InputTextAreaToggable
|
<InputTextAreaToggable
|
||||||
rows={1}
|
rows={1}
|
||||||
defaultValue={this.props.piece.extra_data.additional_details}
|
defaultValue={this.props.piece.extra_data.additional_details}
|
||||||
|
@ -16,6 +16,9 @@ import UserActions from '../../../../../actions/user_actions';
|
|||||||
import PieceStore from '../../../../../stores/piece_store';
|
import PieceStore from '../../../../../stores/piece_store';
|
||||||
import PieceActions from '../../../../../actions/piece_actions';
|
import PieceActions from '../../../../../actions/piece_actions';
|
||||||
|
|
||||||
|
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
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';
|
||||||
|
|
||||||
@ -32,6 +35,7 @@ import ApiUrls from '../../../../../constants/api_urls';
|
|||||||
import { mergeOptions } from '../../../../../utils/general_utils';
|
import { mergeOptions } from '../../../../../utils/general_utils';
|
||||||
import { getLangText } from '../../../../../utils/lang_utils';
|
import { getLangText } from '../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
let IkonotvRegisterPiece = React.createClass({
|
let IkonotvRegisterPiece = React.createClass({
|
||||||
propTypes: {
|
propTypes: {
|
||||||
handleSuccess: React.PropTypes.func,
|
handleSuccess: React.PropTypes.func,
|
||||||
@ -46,8 +50,10 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
UserStore.getState(),
|
UserStore.getState(),
|
||||||
PieceListStore.getState(),
|
PieceListStore.getState(),
|
||||||
PieceStore.getState(),
|
PieceStore.getState(),
|
||||||
|
WhitelabelStore.getState(),
|
||||||
{
|
{
|
||||||
step: 0
|
step: 0,
|
||||||
|
pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -55,7 +61,9 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
PieceListStore.listen(this.onChange);
|
PieceListStore.listen(this.onChange);
|
||||||
UserStore.listen(this.onChange);
|
UserStore.listen(this.onChange);
|
||||||
PieceStore.listen(this.onChange);
|
PieceStore.listen(this.onChange);
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
UserActions.fetchCurrentUser();
|
UserActions.fetchCurrentUser();
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
|
||||||
// Before we load the new piece, we reset the piece store to delete old data that we do
|
// Before we load the new piece, we reset the piece store to delete old data that we do
|
||||||
// not want to display to the user.
|
// not want to display to the user.
|
||||||
@ -79,22 +87,15 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
PieceListStore.unlisten(this.onChange);
|
PieceListStore.unlisten(this.onChange);
|
||||||
UserStore.unlisten(this.onChange);
|
UserStore.unlisten(this.onChange);
|
||||||
PieceStore.unlisten(this.onChange);
|
PieceStore.unlisten(this.onChange);
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
},
|
},
|
||||||
|
|
||||||
onChange(state) {
|
onChange(state) {
|
||||||
this.setState(state);
|
this.setState(state);
|
||||||
|
|
||||||
if(this.state.currentUser && this.state.currentUser.email) {
|
|
||||||
// we should also make the fineuploader component editable again
|
|
||||||
this.setState({
|
|
||||||
isFineUploaderActive: true
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
handleRegisterSuccess(response){
|
handleRegisterSuccess(response){
|
||||||
|
|
||||||
this.refreshPieceList();
|
this.refreshPieceList();
|
||||||
|
|
||||||
// also start loading the piece for the next step
|
// also start loading the piece for the next step
|
||||||
@ -108,7 +109,6 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
this.incrementStep();
|
this.incrementStep();
|
||||||
this.refs.slidesContainer.nextSlide();
|
this.refs.slidesContainer.nextSlide();
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
handleAdditionalDataSuccess() {
|
handleAdditionalDataSuccess() {
|
||||||
@ -126,6 +126,8 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
handleLoanSuccess(response) {
|
handleLoanSuccess(response) {
|
||||||
|
this.setState({ pageExitWarning: null });
|
||||||
|
|
||||||
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
|
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
|
||||||
GlobalNotificationActions.appendGlobalNotification(notification);
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
|
||||||
@ -155,22 +157,10 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
||||||
changeSlide() {
|
|
||||||
// only transition to the login store, if user is not logged in
|
|
||||||
// ergo the currentUser object is not properly defined
|
|
||||||
if(this.state.currentUser && !this.state.currentUser.email) {
|
|
||||||
this.onLoggedOut();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// basically redirects to the second slide (index: 1), when the user is not logged in
|
|
||||||
onLoggedOut() {
|
|
||||||
this.history.pushState(null, '/login');
|
|
||||||
},
|
|
||||||
|
|
||||||
canSubmit() {
|
canSubmit() {
|
||||||
let currentUser = this.state.currentUser;
|
let currentUser = this.state.currentUser;
|
||||||
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit;
|
let whitelabel = this.state.whitelabel;
|
||||||
|
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
|
||||||
},
|
},
|
||||||
|
|
||||||
getSlideArtistDetails() {
|
getSlideArtistDetails() {
|
||||||
@ -209,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
|
|
||||||
getSlideLoan() {
|
getSlideLoan() {
|
||||||
if (this.canSubmit()) {
|
if (this.canSubmit()) {
|
||||||
|
const { piece, whitelabel } = this.state;
|
||||||
let today = new Moment();
|
let today = new Moment();
|
||||||
let enddate = new Moment();
|
let endDate = new Moment();
|
||||||
enddate.add(2, 'years');
|
endDate.add(2, 'years');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div data-slide-title={getLangText('Loan')}>
|
<div data-slide-title={getLangText('Loan')}>
|
||||||
<Row className="no-margin">
|
<Row className="no-margin">
|
||||||
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
<LoanForm
|
<LoanForm
|
||||||
loanHeading={getLangText('Loan to IkonoTV archive')}
|
loanHeading={getLangText('Loan to IkonoTV archive')}
|
||||||
id={{piece_id: this.state.piece.id}}
|
id={{piece_id: piece.id}}
|
||||||
url={ApiUrls.ownership_loans_pieces}
|
url={ApiUrls.ownership_loans_pieces}
|
||||||
email="submissions@ikono.org"
|
email={whitelabel.user}
|
||||||
startdate={today}
|
startDate={today}
|
||||||
enddate={enddate}
|
endDate={endDate}
|
||||||
showStartDate={false}
|
showStartDate={false}
|
||||||
showEndDate={false}
|
showEndDate={false}
|
||||||
gallery="IkonoTV archive"
|
gallery="IkonoTV archive"
|
||||||
@ -238,6 +230,8 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { pageExitWarning } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SlidesContainer
|
<SlidesContainer
|
||||||
ref="slidesContainer"
|
ref="slidesContainer"
|
||||||
@ -246,7 +240,8 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
pending: 'glyphicon glyphicon-chevron-right',
|
pending: 'glyphicon glyphicon-chevron-right',
|
||||||
completed: 'glyphicon glyphicon-lock'
|
completed: 'glyphicon glyphicon-lock'
|
||||||
}}
|
}}
|
||||||
location={this.props.location}>
|
location={this.props.location}
|
||||||
|
pageExitWarning={pageExitWarning}>
|
||||||
<div data-slide-title={getLangText('Register work')}>
|
<div data-slide-title={getLangText('Register work')}>
|
||||||
<Row className="no-margin">
|
<Row className="no-margin">
|
||||||
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
@ -255,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
|
|||||||
enableLocalHashing={false}
|
enableLocalHashing={false}
|
||||||
headerMessage={getLangText('Register work')}
|
headerMessage={getLangText('Register work')}
|
||||||
submitMessage={getLangText('Register')}
|
submitMessage={getLangText('Register')}
|
||||||
isFineUploaderActive={this.state.isFineUploaderActive}
|
isFineUploaderActive={true}
|
||||||
handleSuccess={this.handleRegisterSuccess}
|
handleSuccess={this.handleRegisterSuccess}
|
||||||
onLoggedOut={this.onLoggedOut}
|
|
||||||
location={this.props.location}/>
|
location={this.props.location}/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
@ -0,0 +1,84 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Button from 'react-bootstrap/lib/Button';
|
||||||
|
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
|
||||||
|
|
||||||
|
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
|
import { mergeOptions } from '../../../../../utils/general_utils';
|
||||||
|
import { getLangText } from '../../../../../utils/lang_utils';
|
||||||
|
import { setDocumentTitle } from '../../../../../utils/dom_utils';
|
||||||
|
|
||||||
|
|
||||||
|
let LumenusLanding = React.createClass({
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return mergeOptions(
|
||||||
|
WhitelabelStore.getState()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
setDocumentTitle('Lumenus Marketplace');
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<div className="container ascribe-form-wrapper">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-xs-12 wp-landing-wrapper">
|
||||||
|
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
|
||||||
|
<img src={this.state.whitelabel.logo} width="150px"/>
|
||||||
|
<div style={{marginTop: '1em'}}>
|
||||||
|
{getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
|
||||||
|
<span>
|
||||||
|
<span className="icon-ascribe-logo"></span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<p>
|
||||||
|
{getLangText('Existing ascribe user?')}
|
||||||
|
</p>
|
||||||
|
<LinkContainer to="/login">
|
||||||
|
<Button>
|
||||||
|
{getLangText('Log in')}
|
||||||
|
</Button>
|
||||||
|
</LinkContainer>
|
||||||
|
</div>
|
||||||
|
<div className="col-sm-6">
|
||||||
|
<p>
|
||||||
|
{getLangText('Do you need an account?')}
|
||||||
|
</p>
|
||||||
|
<LinkContainer to="/signup">
|
||||||
|
<Button>
|
||||||
|
{getLangText('Sign up')}
|
||||||
|
</Button>
|
||||||
|
</LinkContainer>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default LumenusLanding;
|
@ -0,0 +1,74 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import MarketSubmitButton from './market_submit_button';
|
||||||
|
|
||||||
|
import DeleteButton from '../../../../../ascribe_buttons/delete_button';
|
||||||
|
import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
|
||||||
|
import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
|
||||||
|
import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
|
||||||
|
|
||||||
|
import UserActions from '../../../../../../actions/user_actions';
|
||||||
|
import UserStore from '../../../../../../stores/user_store';
|
||||||
|
|
||||||
|
let MarketAclButtonList = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
pieceOrEditions: React.PropTypes.array,
|
||||||
|
handleSuccess: React.PropTypes.func,
|
||||||
|
children: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.arrayOf(React.PropTypes.element),
|
||||||
|
React.PropTypes.element
|
||||||
|
])
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return UserStore.getState();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
UserStore.listen(this.onChange);
|
||||||
|
UserActions.fetchCurrentUser();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
UserStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
|
||||||
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
<MarketSubmitButton
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
currentUser={this.state.currentUser}
|
||||||
|
editions={pieceOrEditions}
|
||||||
|
handleSuccess={handleSuccess} />
|
||||||
|
<EmailButton
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
currentUser={this.state.currentUser}
|
||||||
|
pieceOrEditions={pieceOrEditions}
|
||||||
|
handleSuccess={handleSuccess} />
|
||||||
|
<TransferButton
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
currentUser={this.state.currentUser}
|
||||||
|
pieceOrEditions={pieceOrEditions}
|
||||||
|
handleSuccess={handleSuccess} />
|
||||||
|
<UnconsignButton
|
||||||
|
availableAcls={availableAcls}
|
||||||
|
currentUser={this.state.currentUser}
|
||||||
|
pieceOrEditions={pieceOrEditions}
|
||||||
|
handleSuccess={handleSuccess} />
|
||||||
|
{this.props.children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketAclButtonList;
|
@ -0,0 +1,160 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
|
||||||
|
|
||||||
|
import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
|
||||||
|
import ConsignForm from '../../../../../ascribe_forms/form_consign';
|
||||||
|
|
||||||
|
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
|
||||||
|
|
||||||
|
import AclProxy from '../../../../../acl_proxy';
|
||||||
|
|
||||||
|
import PieceActions from '../../../../../../actions/piece_actions';
|
||||||
|
import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
|
import ApiUrls from '../../../../../../constants/api_urls';
|
||||||
|
|
||||||
|
import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
|
||||||
|
import { getLangText } from '../../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
let MarketSubmitButton = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
availableAcls: React.PropTypes.object.isRequired,
|
||||||
|
currentUser: React.PropTypes.object,
|
||||||
|
editions: React.PropTypes.array.isRequired,
|
||||||
|
handleSuccess: React.PropTypes.func.isRequired,
|
||||||
|
className: React.PropTypes.string,
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return WhitelabelStore.getState();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
canEditionBeSubmitted(edition) {
|
||||||
|
if (edition && edition.extra_data && edition.other_data) {
|
||||||
|
const { extra_data, other_data } = edition;
|
||||||
|
|
||||||
|
if (extra_data.artist_bio && extra_data.work_description &&
|
||||||
|
extra_data.technology_details && extra_data.display_instructions &&
|
||||||
|
other_data.length > 0) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
getFormDataId() {
|
||||||
|
return getAclFormDataId(false, this.props.editions);
|
||||||
|
},
|
||||||
|
|
||||||
|
getAggregateEditionDetails() {
|
||||||
|
const { editions } = this.props;
|
||||||
|
|
||||||
|
// Currently, we only care if all the given editions are from the same parent piece
|
||||||
|
// and if they can be submitted
|
||||||
|
return editions.reduce((details, curEdition) => {
|
||||||
|
return {
|
||||||
|
solePieceId: details.solePieceId === curEdition.parent ? details.solePieceId : null,
|
||||||
|
canSubmit: details.canSubmit && this.canEditionBeSubmitted(curEdition)
|
||||||
|
};
|
||||||
|
}, {
|
||||||
|
solePieceId: editions.length > 0 ? editions[0].parent : null,
|
||||||
|
canSubmit: this.canEditionBeSubmitted(editions[0])
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAdditionalDataSuccess(pieceId) {
|
||||||
|
// Fetch newly updated piece to update the views
|
||||||
|
PieceActions.fetchOne(pieceId);
|
||||||
|
|
||||||
|
this.refs.consignModal.show();
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
|
||||||
|
const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
|
||||||
|
const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
|
||||||
|
const message = getAclFormMessage({
|
||||||
|
aclName: 'acl_consign',
|
||||||
|
entities: editions,
|
||||||
|
isPiece: false,
|
||||||
|
additionalMessage: getLangText('Suggested price:'),
|
||||||
|
senderName: currentUser.username
|
||||||
|
});
|
||||||
|
|
||||||
|
const triggerButton = (
|
||||||
|
<button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
|
||||||
|
{getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
const consignForm = (
|
||||||
|
<AclFormFactory
|
||||||
|
action='acl_consign'
|
||||||
|
autoFocusProperty='message'
|
||||||
|
email={whitelabelAdminEmail}
|
||||||
|
message={message}
|
||||||
|
labels={{
|
||||||
|
'message': getLangText('Message (also suggest a sales price if necessary)')
|
||||||
|
}}
|
||||||
|
pieceOrEditions={editions}
|
||||||
|
showNotification />
|
||||||
|
);
|
||||||
|
|
||||||
|
if (solePieceId && !canSubmit) {
|
||||||
|
return (
|
||||||
|
<AclProxy
|
||||||
|
aclObject={availableAcls}
|
||||||
|
aclName='acl_consign'>
|
||||||
|
<ModalWrapper
|
||||||
|
trigger={triggerButton}
|
||||||
|
handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
|
||||||
|
title={getLangText('Add additional information')}>
|
||||||
|
<MarketAdditionalDataForm
|
||||||
|
pieceId={solePieceId}
|
||||||
|
submitLabel={getLangText('Continue to consignment')} />
|
||||||
|
</ModalWrapper>
|
||||||
|
|
||||||
|
<ModalWrapper
|
||||||
|
ref="consignModal"
|
||||||
|
handleSuccess={handleSuccess}
|
||||||
|
title={getLangText('Consign artwork')}>
|
||||||
|
{consignForm}
|
||||||
|
</ModalWrapper>
|
||||||
|
</AclProxy>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<AclProxy
|
||||||
|
show={availableAcls.acl_consign && canSubmit}>
|
||||||
|
<ModalWrapper
|
||||||
|
trigger={triggerButton}
|
||||||
|
handleSuccess={handleSuccess}
|
||||||
|
title={getLangText('Consign artwork to %s', whitelabelName)}>
|
||||||
|
{consignForm}
|
||||||
|
</ModalWrapper>
|
||||||
|
</AclProxy>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketSubmitButton;
|
@ -0,0 +1,24 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import MarketFurtherDetails from './market_further_details';
|
||||||
|
|
||||||
|
import MarketAclButtonList from '../market_buttons/market_acl_button_list';
|
||||||
|
|
||||||
|
import EditionContainer from '../../../../../ascribe_detail/edition_container';
|
||||||
|
|
||||||
|
let MarketEditionContainer = React.createClass({
|
||||||
|
propTypes: EditionContainer.propTypes,
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<EditionContainer
|
||||||
|
{...this.props}
|
||||||
|
actionPanelButtonListType={MarketAclButtonList}
|
||||||
|
furtherDetailsType={MarketFurtherDetails} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketEditionContainer;
|
@ -0,0 +1,23 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'
|
||||||
|
|
||||||
|
let MarketFurtherDetails = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
pieceId: React.PropTypes.number,
|
||||||
|
handleSuccess: React.PropTypes.func,
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<MarketAdditionalDataForm
|
||||||
|
{...this.props}
|
||||||
|
isInline
|
||||||
|
showNotification />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketFurtherDetails;
|
@ -0,0 +1,21 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import MarketFurtherDetails from './market_further_details';
|
||||||
|
|
||||||
|
import PieceContainer from '../../../../../ascribe_detail/piece_container';
|
||||||
|
|
||||||
|
let MarketPieceContainer = React.createClass({
|
||||||
|
propTypes: PieceContainer.propTypes,
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<PieceContainer
|
||||||
|
{...this.props}
|
||||||
|
furtherDetailsType={MarketFurtherDetails} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketPieceContainer;
|
@ -0,0 +1,242 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import Form from '../../../../../ascribe_forms/form';
|
||||||
|
import Property from '../../../../../ascribe_forms/property';
|
||||||
|
|
||||||
|
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
|
||||||
|
|
||||||
|
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
|
||||||
|
import AscribeSpinner from '../../../../../ascribe_spinner';
|
||||||
|
|
||||||
|
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
|
||||||
|
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
|
||||||
|
|
||||||
|
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
|
||||||
|
|
||||||
|
import PieceActions from '../../../../../../actions/piece_actions';
|
||||||
|
import PieceStore from '../../../../../../stores/piece_store';
|
||||||
|
|
||||||
|
import ApiUrls from '../../../../../../constants/api_urls';
|
||||||
|
import AppConstants from '../../../../../../constants/application_constants';
|
||||||
|
|
||||||
|
import requests from '../../../../../../utils/requests';
|
||||||
|
import { mergeOptions } from '../../../../../../utils/general_utils';
|
||||||
|
import { getLangText } from '../../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
|
||||||
|
let MarketAdditionalDataForm = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
pieceId: React.PropTypes.oneOfType([
|
||||||
|
React.PropTypes.number,
|
||||||
|
React.PropTypes.string
|
||||||
|
]),
|
||||||
|
editable: React.PropTypes.bool,
|
||||||
|
isInline: React.PropTypes.bool,
|
||||||
|
showHeading: React.PropTypes.bool,
|
||||||
|
showNotification: React.PropTypes.bool,
|
||||||
|
submitLabel: React.PropTypes.string,
|
||||||
|
handleSuccess: React.PropTypes.func
|
||||||
|
},
|
||||||
|
|
||||||
|
getDefaultProps() {
|
||||||
|
return {
|
||||||
|
editable: true,
|
||||||
|
submitLabel: getLangText('Register work')
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
const pieceStore = PieceStore.getState();
|
||||||
|
|
||||||
|
return mergeOptions(
|
||||||
|
pieceStore,
|
||||||
|
{
|
||||||
|
// Allow the form to be submitted if there's already an additional image uploaded
|
||||||
|
isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
|
||||||
|
forceUpdateKey: 0
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
PieceStore.listen(this.onChange);
|
||||||
|
|
||||||
|
if (this.props.pieceId) {
|
||||||
|
PieceActions.fetchOne(this.props.pieceId);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
PieceStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
Object.assign({}, state, {
|
||||||
|
// Allow the form to be submitted if the updated piece already has an additional image uploaded
|
||||||
|
isUploadReady: this.isUploadReadyOnChange(state.piece),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Increment the forceUpdateKey to force the form to rerender on each change
|
||||||
|
*
|
||||||
|
* THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
|
||||||
|
* BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
|
||||||
|
* InputTextAreaToggable).
|
||||||
|
*/
|
||||||
|
forceUpdateKey: this.state.forceUpdateKey + 1
|
||||||
|
});
|
||||||
|
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
getFormData() {
|
||||||
|
let extradata = {};
|
||||||
|
let formRefs = this.refs.form.refs;
|
||||||
|
|
||||||
|
// Put additional fields in extra data object
|
||||||
|
Object
|
||||||
|
.keys(formRefs)
|
||||||
|
.forEach((fieldName) => {
|
||||||
|
extradata[fieldName] = formRefs[fieldName].state.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
extradata: extradata,
|
||||||
|
piece_id: this.state.piece.id
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
isUploadReadyOnChange(piece) {
|
||||||
|
return piece && piece.other_data && piece.other_data.length > 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSuccessWithNotification() {
|
||||||
|
if (typeof this.props.handleSuccess === 'function') {
|
||||||
|
this.props.handleSuccess();
|
||||||
|
}
|
||||||
|
|
||||||
|
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
|
||||||
|
GlobalNotificationActions.appendGlobalNotification(notification);
|
||||||
|
},
|
||||||
|
|
||||||
|
uploadStarted() {
|
||||||
|
this.setState({
|
||||||
|
isUploadReady: false
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
setIsUploadReady(isReady) {
|
||||||
|
this.setState({
|
||||||
|
isUploadReady: isReady
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
|
||||||
|
const { piece } = this.state;
|
||||||
|
let buttons, heading;
|
||||||
|
|
||||||
|
let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
|
||||||
|
|
||||||
|
if (!isInline) {
|
||||||
|
buttons = (
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="btn btn-default btn-wide"
|
||||||
|
disabled={!this.state.isUploadReady}>
|
||||||
|
{submitLabel}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
|
||||||
|
spinner = (
|
||||||
|
<div className="modal-footer">
|
||||||
|
<p className="pull-right">
|
||||||
|
{spinner}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
heading = showHeading ? (
|
||||||
|
<div className="ascribe-form-header">
|
||||||
|
<h3>
|
||||||
|
{getLangText('Provide additional details')}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (piece && piece.id) {
|
||||||
|
return (
|
||||||
|
<Form
|
||||||
|
className="ascribe-form-bordered"
|
||||||
|
ref='form'
|
||||||
|
key={this.state.forceUpdateKey}
|
||||||
|
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
|
||||||
|
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
|
||||||
|
getFormData={this.getFormData}
|
||||||
|
buttons={buttons}
|
||||||
|
spinner={spinner}
|
||||||
|
disabled={!this.props.editable || !piece.acl.acl_edit}>
|
||||||
|
{heading}
|
||||||
|
<FurtherDetailsFileuploader
|
||||||
|
label={getLangText('Marketplace Thumbnail Image')}
|
||||||
|
uploadStarted={this.uploadStarted}
|
||||||
|
submitFile={function () {}}
|
||||||
|
setIsUploadReady={this.setIsUploadReady}
|
||||||
|
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
|
||||||
|
pieceId={piece.id}
|
||||||
|
otherData={piece.other_data}
|
||||||
|
editable={editable} />
|
||||||
|
<Property
|
||||||
|
name='artist_bio'
|
||||||
|
label={getLangText('Artist Bio')}
|
||||||
|
expanded={editable || !!piece.extra_data.artist_bio}>
|
||||||
|
<InputTextAreaToggable
|
||||||
|
rows={1}
|
||||||
|
defaultValue={piece.extra_data.artist_bio}
|
||||||
|
placeholder={getLangText('Enter a biography of the artist...')}
|
||||||
|
required />
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='work_description'
|
||||||
|
label={getLangText('Work Description')}
|
||||||
|
expanded={editable || !!piece.extra_data.work_description}>
|
||||||
|
<InputTextAreaToggable
|
||||||
|
rows={1}
|
||||||
|
defaultValue={piece.extra_data.work_description}
|
||||||
|
placeholder={getLangText('Enter a description of the work...')}
|
||||||
|
required />
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='technology_details'
|
||||||
|
label={getLangText('Technology Details')}
|
||||||
|
expanded={editable || !!piece.extra_data.technology_details}>
|
||||||
|
<InputTextAreaToggable
|
||||||
|
rows={1}
|
||||||
|
defaultValue={piece.extra_data.technology_details}
|
||||||
|
placeholder={getLangText('Enter technological details about the work...')}
|
||||||
|
required />
|
||||||
|
</Property>
|
||||||
|
<Property
|
||||||
|
name='display_instructions'
|
||||||
|
label={getLangText('Display Instructions')}
|
||||||
|
expanded={editable || !!piece.extra_data.display_instructions}>
|
||||||
|
<InputTextAreaToggable
|
||||||
|
rows={1}
|
||||||
|
defaultValue={piece.extra_data.display_instructions}
|
||||||
|
placeholder={getLangText('Enter instructions on how to best display the work...')}
|
||||||
|
required />
|
||||||
|
</Property>
|
||||||
|
</Form>
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<div className="ascribe-loading-position">
|
||||||
|
{spinner}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketAdditionalDataForm;
|
@ -0,0 +1,90 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import MarketAclButtonList from './market_buttons/market_acl_button_list';
|
||||||
|
|
||||||
|
import PieceList from '../../../../piece_list';
|
||||||
|
|
||||||
|
import UserActions from '../../../../../actions/user_actions';
|
||||||
|
import UserStore from '../../../../../stores/user_store';
|
||||||
|
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
|
import { setDocumentTitle } from '../../../../../utils/dom_utils';
|
||||||
|
import { mergeOptions } from '../../../../../utils/general_utils';
|
||||||
|
import { getLangText } from '../../../../../utils/lang_utils';
|
||||||
|
|
||||||
|
let MarketPieceList = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
customThumbnailPlaceholder: React.PropTypes.func,
|
||||||
|
location: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
getInitialState() {
|
||||||
|
return mergeOptions(
|
||||||
|
UserStore.getState(),
|
||||||
|
WhitelabelStore.getState()
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillMount() {
|
||||||
|
setDocumentTitle(getLangText('Collection'));
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
UserStore.listen(this.onChange);
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
|
||||||
|
UserActions.fetchCurrentUser();
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
UserStore.unlisten(this.onChange);
|
||||||
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { customThumbnailPlaceholder, location } = this.props;
|
||||||
|
const {
|
||||||
|
currentUser: { email: userEmail },
|
||||||
|
whitelabel: {
|
||||||
|
name: whitelabelName = 'Market',
|
||||||
|
user: whitelabelAdminEmail
|
||||||
|
} } = this.state;
|
||||||
|
|
||||||
|
let filterParams = null;
|
||||||
|
let canLoadPieceList = false;
|
||||||
|
|
||||||
|
if (userEmail && whitelabelAdminEmail) {
|
||||||
|
canLoadPieceList = true;
|
||||||
|
const isUserAdmin = userEmail === whitelabelAdminEmail;
|
||||||
|
|
||||||
|
filterParams = [{
|
||||||
|
label: getLangText('Show works I can'),
|
||||||
|
items: [{
|
||||||
|
key: isUserAdmin ? 'acl_transfer' : 'acl_consign',
|
||||||
|
label: getLangText(isUserAdmin ? 'transfer' : 'consign to %s', whitelabelName),
|
||||||
|
defaultValue: true
|
||||||
|
}]
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PieceList
|
||||||
|
canLoadPieceList={canLoadPieceList}
|
||||||
|
redirectTo="/register_piece?slide_num=0"
|
||||||
|
bulkModalButtonListType={MarketAclButtonList}
|
||||||
|
customThumbnailPlaceholder={customThumbnailPlaceholder}
|
||||||
|
filterParams={filterParams}
|
||||||
|
location={location} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketPieceList;
|
@ -0,0 +1,174 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { History } from 'react-router';
|
||||||
|
|
||||||
|
import Col from 'react-bootstrap/lib/Col';
|
||||||
|
import Row from 'react-bootstrap/lib/Row';
|
||||||
|
|
||||||
|
import MarketAdditionalDataForm from './market_forms/market_additional_data_form';
|
||||||
|
|
||||||
|
import Property from '../../../../ascribe_forms/property';
|
||||||
|
import RegisterPieceForm from '../../../../ascribe_forms/form_register_piece';
|
||||||
|
|
||||||
|
import PieceActions from '../../../../../actions/piece_actions';
|
||||||
|
import PieceListStore from '../../../../../stores/piece_list_store';
|
||||||
|
import PieceListActions from '../../../../../actions/piece_list_actions';
|
||||||
|
import UserStore from '../../../../../stores/user_store';
|
||||||
|
import UserActions from '../../../../../actions/user_actions';
|
||||||
|
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
|
||||||
|
import WhitelabelStore from '../../../../../stores/whitelabel_store';
|
||||||
|
|
||||||
|
import SlidesContainer from '../../../../ascribe_slides_container/slides_container';
|
||||||
|
|
||||||
|
import { getLangText } from '../../../../../utils/lang_utils';
|
||||||
|
import { setDocumentTitle } from '../../../../../utils/dom_utils';
|
||||||
|
import { mergeOptions } from '../../../../../utils/general_utils';
|
||||||
|
|
||||||
|
let MarketRegisterPiece = React.createClass({
|
||||||
|
propTypes: {
|
||||||
|
location: React.PropTypes.object
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [History],
|
||||||
|
|
||||||
|
getInitialState(){
|
||||||
|
return mergeOptions(
|
||||||
|
PieceListStore.getState(),
|
||||||
|
UserStore.getState(),
|
||||||
|
WhitelabelStore.getState(),
|
||||||
|
{
|
||||||
|
step: 0
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
PieceListStore.listen(this.onChange);
|
||||||
|
UserStore.listen(this.onChange);
|
||||||
|
WhitelabelStore.listen(this.onChange);
|
||||||
|
|
||||||
|
UserActions.fetchCurrentUser();
|
||||||
|
WhitelabelActions.fetchWhitelabel();
|
||||||
|
|
||||||
|
// Reset the piece store to make sure that we don't display old data
|
||||||
|
// if the user repeatedly registers works
|
||||||
|
PieceActions.updatePiece({});
|
||||||
|
},
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
PieceListStore.unlisten(this.onChange);
|
||||||
|
UserStore.unlisten(this.onChange);
|
||||||
|
WhitelabelStore.unlisten(this.onChange);
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(state) {
|
||||||
|
this.setState(state);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleRegisterSuccess(response) {
|
||||||
|
this.refreshPieceList();
|
||||||
|
|
||||||
|
// Use the response's piece for the next step if available
|
||||||
|
let pieceId = null;
|
||||||
|
if (response && response.piece) {
|
||||||
|
pieceId = response.piece.id;
|
||||||
|
PieceActions.updatePiece(response.piece);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.incrementStep();
|
||||||
|
this.refs.slidesContainer.nextSlide({ piece_id: pieceId });
|
||||||
|
},
|
||||||
|
|
||||||
|
handleAdditionalDataSuccess() {
|
||||||
|
this.refreshPieceList();
|
||||||
|
|
||||||
|
this.history.pushState(null, '/collection');
|
||||||
|
},
|
||||||
|
|
||||||
|
// We need to increase the step to lock the forms that are already filled out
|
||||||
|
incrementStep() {
|
||||||
|
this.setState({
|
||||||
|
step: this.state.step + 1
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
getPieceFromQueryParam() {
|
||||||
|
const queryParams = this.props.location.query;
|
||||||
|
|
||||||
|
// Since every step of this register process is atomic,
|
||||||
|
// we may need to enter the process at step 1 or 2.
|
||||||
|
// If this is the case, we'll need the piece number to complete submission.
|
||||||
|
// It is encoded in the URL as a queryParam and we're checking for it here.
|
||||||
|
return queryParams && queryParams.piece_id;
|
||||||
|
},
|
||||||
|
|
||||||
|
refreshPieceList() {
|
||||||
|
PieceListActions.fetchPieceList(
|
||||||
|
this.state.page,
|
||||||
|
this.state.pageSize,
|
||||||
|
this.state.searchTerm,
|
||||||
|
this.state.orderBy,
|
||||||
|
this.state.orderAsc,
|
||||||
|
this.state.filterBy
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
isFineUploaderActive,
|
||||||
|
step,
|
||||||
|
whitelabel: {
|
||||||
|
name: whitelabelName = 'Market'
|
||||||
|
} } = this.state;
|
||||||
|
|
||||||
|
setDocumentTitle(getLangText('Register a new piece'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SlidesContainer
|
||||||
|
ref="slidesContainer"
|
||||||
|
forwardProcess={true}
|
||||||
|
glyphiconClassNames={{
|
||||||
|
pending: 'glyphicon glyphicon-chevron-right',
|
||||||
|
completed: 'glyphicon glyphicon-lock'
|
||||||
|
}}
|
||||||
|
location={this.props.location}>
|
||||||
|
<div data-slide-title={getLangText('Register work')}>
|
||||||
|
<Row className="no-margin">
|
||||||
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
|
<RegisterPieceForm
|
||||||
|
disabled={step > 0}
|
||||||
|
enableLocalHashing={false}
|
||||||
|
headerMessage={getLangText('Consign to %s', whitelabelName)}
|
||||||
|
submitMessage={getLangText('Proceed to additional details')}
|
||||||
|
isFineUploaderActive={true}
|
||||||
|
handleSuccess={this.handleRegisterSuccess}
|
||||||
|
location={this.props.location}>
|
||||||
|
<Property
|
||||||
|
name="num_editions"
|
||||||
|
label={getLangText('Specify editions')}>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
placeholder="(e.g. 32)"
|
||||||
|
min={0}
|
||||||
|
required />
|
||||||
|
</Property>
|
||||||
|
</RegisterPieceForm>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
<div data-slide-title={getLangText('Additional details')}>
|
||||||
|
<Row className="no-margin">
|
||||||
|
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
|
||||||
|
<MarketAdditionalDataForm
|
||||||
|
handleSuccess={this.handleAdditionalDataSuccess}
|
||||||
|
pieceId={this.getPieceFromQueryParam()}
|
||||||
|
showHeading />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</SlidesContainer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
export default MarketRegisterPiece;
|
@ -4,22 +4,30 @@ import walletConstants from './wallet_application_constants';
|
|||||||
|
|
||||||
// gets subdomain as a parameter
|
// gets subdomain as a parameter
|
||||||
function getWalletApiUrls(subdomain) {
|
function getWalletApiUrls(subdomain) {
|
||||||
if (subdomain === 'cyland'){
|
if (subdomain === 'cyland') {
|
||||||
return {
|
return {
|
||||||
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
|
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
|
||||||
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
|
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
|
||||||
'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
|
'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
|
||||||
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
|
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
|
||||||
};
|
};
|
||||||
}
|
} else if (subdomain === 'ikonotv') {
|
||||||
else if (subdomain === 'ikonotv'){
|
|
||||||
return {
|
return {
|
||||||
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
|
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
|
||||||
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
|
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
|
||||||
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
|
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
|
||||||
};
|
};
|
||||||
|
} else if (subdomain === 'lumenus' || subdomain === '23vivi') {
|
||||||
|
return {
|
||||||
|
'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
|
||||||
|
'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',
|
||||||
|
'pieces_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/',
|
||||||
|
'piece': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/',
|
||||||
|
'piece_extradata': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/extradata/',
|
||||||
|
'user': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/users/'
|
||||||
|
};
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
|
|
||||||
export default getWalletApiUrls;
|
export default getWalletApiUrls;
|
||||||
|
@ -32,7 +32,7 @@ let WalletApp = React.createClass({
|
|||||||
|
|
||||||
// if the path of the current activeRoute is not defined, then this is the IndexRoute
|
// if the path of the current activeRoute is not defined, then this is the IndexRoute
|
||||||
if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
|
if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
|
||||||
&& (['ikonotv']).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 showAddWork={true} routes={routes} />;
|
||||||
|
@ -16,6 +16,8 @@ import SettingsContainer from '../../../components/ascribe_settings/settings_con
|
|||||||
import ContractSettings from '../../../components/ascribe_settings/contract_settings';
|
import ContractSettings from '../../../components/ascribe_settings/contract_settings';
|
||||||
import ErrorNotFoundPage from '../../../components/error_not_found_page';
|
import ErrorNotFoundPage from '../../../components/error_not_found_page';
|
||||||
|
|
||||||
|
import CCRegisterPiece from './components/cc/cc_register_piece';
|
||||||
|
|
||||||
import CylandLanding from './components/cyland/cyland_landing';
|
import CylandLanding from './components/cyland/cyland_landing';
|
||||||
import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
|
import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
|
||||||
import CylandRegisterPiece from './components/cyland/cyland_register_piece';
|
import CylandRegisterPiece from './components/cyland/cyland_register_piece';
|
||||||
@ -23,12 +25,20 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
|
|||||||
|
|
||||||
import IkonotvLanding from './components/ikonotv/ikonotv_landing';
|
import IkonotvLanding from './components/ikonotv/ikonotv_landing';
|
||||||
import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
|
import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
|
||||||
import ContractAgreementForm from '../../../components/ascribe_forms/form_contract_agreement';
|
import SendContractAgreementForm from '../../../components/ascribe_forms/form_send_contract_agreement';
|
||||||
import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
|
import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
|
||||||
import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
|
import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
|
||||||
import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
|
import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
|
||||||
|
|
||||||
import CCRegisterPiece from './components/cc/cc_register_piece';
|
import MarketPieceList from './components/market/market_piece_list';
|
||||||
|
import MarketRegisterPiece from './components/market/market_register_piece';
|
||||||
|
import MarketPieceContainer from './components/market/market_detail/market_piece_container';
|
||||||
|
import MarketEditionContainer from './components/market/market_detail/market_edition_container';
|
||||||
|
|
||||||
|
import LumenusLanding from './components/lumenus/lumenus_landing';
|
||||||
|
|
||||||
|
import Vivi23Landing from './components/23vivi/23vivi_landing';
|
||||||
|
import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
|
||||||
|
|
||||||
import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler';
|
import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler';
|
||||||
|
|
||||||
@ -128,7 +138,7 @@ let ROUTES = {
|
|||||||
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
|
||||||
<Route
|
<Route
|
||||||
path='request_loan'
|
path='request_loan'
|
||||||
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractAgreementForm)}
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)}
|
||||||
headerTitle='SEND NEW CONTRACT'
|
headerTitle='SEND NEW CONTRACT'
|
||||||
aclName='acl_create_contractagreement'/>
|
aclName='acl_create_contractagreement'/>
|
||||||
<Route
|
<Route
|
||||||
@ -148,10 +158,80 @@ let ROUTES = {
|
|||||||
<Route path='verify' component={CoaVerifyContainer} />
|
<Route path='verify' component={CoaVerifyContainer} />
|
||||||
<Route path='*' component={ErrorNotFoundPage} />
|
<Route path='*' component={ErrorNotFoundPage} />
|
||||||
</Route>
|
</Route>
|
||||||
|
),
|
||||||
|
'lumenus': (
|
||||||
|
<Route path='/' component={WalletApp}>
|
||||||
|
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} />
|
||||||
|
<Route
|
||||||
|
path='login'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
|
||||||
|
<Route
|
||||||
|
path='logout'
|
||||||
|
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
|
||||||
|
<Route
|
||||||
|
path='signup'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
|
||||||
|
<Route
|
||||||
|
path='password_reset'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
|
||||||
|
<Route
|
||||||
|
path='settings'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
|
||||||
|
<Route
|
||||||
|
path='contract_settings'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
|
||||||
|
<Route
|
||||||
|
path='register_piece'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
|
||||||
|
headerTitle='+ NEW WORK'/>
|
||||||
|
<Route
|
||||||
|
path='collection'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)}
|
||||||
|
headerTitle='COLLECTION'/>
|
||||||
|
<Route path='pieces/:pieceId' component={MarketPieceContainer} />
|
||||||
|
<Route path='editions/:editionId' component={MarketEditionContainer} />
|
||||||
|
<Route path='verify' component={CoaVerifyContainer} />
|
||||||
|
<Route path='*' component={ErrorNotFoundPage} />
|
||||||
|
</Route>
|
||||||
|
),
|
||||||
|
'23vivi': (
|
||||||
|
<Route path='/' component={WalletApp}>
|
||||||
|
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} />
|
||||||
|
<Route
|
||||||
|
path='login'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
|
||||||
|
<Route
|
||||||
|
path='logout'
|
||||||
|
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
|
||||||
|
<Route
|
||||||
|
path='signup'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
|
||||||
|
<Route
|
||||||
|
path='password_reset'
|
||||||
|
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
|
||||||
|
<Route
|
||||||
|
path='settings'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
|
||||||
|
<Route
|
||||||
|
path='contract_settings'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
|
||||||
|
<Route
|
||||||
|
path='register_piece'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
|
||||||
|
headerTitle='+ NEW WORK'
|
||||||
|
aclName='acl_wallet_submit'/>
|
||||||
|
<Route
|
||||||
|
path='collection'
|
||||||
|
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)}
|
||||||
|
headerTitle='COLLECTION'/>
|
||||||
|
<Route path='pieces/:pieceId' component={MarketPieceContainer} />
|
||||||
|
<Route path='editions/:editionId' component={MarketEditionContainer} />
|
||||||
|
<Route path='verify' component={CoaVerifyContainer} />
|
||||||
|
<Route path='*' component={ErrorNotFoundPage} />
|
||||||
|
</Route>
|
||||||
)
|
)
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
function getRoutes(commonRoutes, subdomain) {
|
function getRoutes(commonRoutes, subdomain) {
|
||||||
if(subdomain in ROUTES) {
|
if(subdomain in ROUTES) {
|
||||||
return ROUTES[subdomain];
|
return ROUTES[subdomain];
|
||||||
@ -160,5 +240,4 @@ function getRoutes(commonRoutes, subdomain) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default getRoutes;
|
export default getRoutes;
|
||||||
|
@ -72,6 +72,9 @@ let ApiUrls = {
|
|||||||
'users_username': AppConstants.apiEndpoint + 'users/username/',
|
'users_username': AppConstants.apiEndpoint + 'users/username/',
|
||||||
'users_profile': AppConstants.apiEndpoint + 'users/profile/',
|
'users_profile': AppConstants.apiEndpoint + 'users/profile/',
|
||||||
'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
|
'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
|
||||||
|
'webhook': AppConstants.apiEndpoint + 'webhooks/${webhook_id}/',
|
||||||
|
'webhooks': AppConstants.apiEndpoint + 'webhooks/',
|
||||||
|
'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
|
||||||
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
|
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
|
||||||
'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
|
'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
|
||||||
'prize_list': AppConstants.apiEndpoint + 'prize/'
|
'prize_list': AppConstants.apiEndpoint + 'prize/'
|
||||||
|
@ -51,6 +51,20 @@ const constants = {
|
|||||||
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
|
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
|
||||||
'type': 'wallet'
|
'type': 'wallet'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
'subdomain': 'lumenus',
|
||||||
|
'name': 'Lumenus',
|
||||||
|
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
|
||||||
|
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
|
||||||
|
'type': 'wallet'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'subdomain': '23vivi',
|
||||||
|
'name': '23vivi',
|
||||||
|
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
|
||||||
|
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
|
||||||
|
'type': 'wallet'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
'subdomain': 'portfolioreview',
|
'subdomain': 'portfolioreview',
|
||||||
'name': 'Portfolio Review',
|
'name': 'Portfolio Review',
|
||||||
@ -124,7 +138,12 @@ const constants = {
|
|||||||
},
|
},
|
||||||
'twitter': {
|
'twitter': {
|
||||||
'sdkUrl': 'https://platform.twitter.com/widgets.js'
|
'sdkUrl': 'https://platform.twitter.com/widgets.js'
|
||||||
}
|
},
|
||||||
|
|
||||||
|
'errorMessagesToIgnore': [
|
||||||
|
'Authentication credentials were not provided.',
|
||||||
|
'Informations d\'authentification non fournies.'
|
||||||
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
export default constants;
|
export default constants;
|
||||||
|
16
js/mixins/react_error.js
Normal file
16
js/mixins/react_error.js
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import invariant from 'invariant';
|
||||||
|
|
||||||
|
const ReactError = {
|
||||||
|
throws(err) {
|
||||||
|
if(!err.handler) {
|
||||||
|
invariant(err.handler, 'Error thrown to ReactError did not have a `handler` function');
|
||||||
|
console.logGlobal('Error thrown to ReactError did not have a `handler` function');
|
||||||
|
} else {
|
||||||
|
err.handler(this, err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReactError;
|
31
js/models/errors.js
Normal file
31
js/models/errors.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import ErrorNotFoundPage from '../components/error_not_found_page';
|
||||||
|
|
||||||
|
|
||||||
|
export class ResourceNotFoundError extends Error {
|
||||||
|
constructor(message) {
|
||||||
|
super(message);
|
||||||
|
this.name = this.constructor.name;
|
||||||
|
this.message = message;
|
||||||
|
|
||||||
|
// `captureStackTrace` might not be available in IE:
|
||||||
|
// - http://stackoverflow.com/a/8460753/1263876
|
||||||
|
if(Error.captureStackTrace) {
|
||||||
|
Error.captureStackTrace(this, this.constructor.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handler(component, err) {
|
||||||
|
const monkeyPatchedKey = `_${this.name}MonkeyPatched`;
|
||||||
|
|
||||||
|
if(!component.state[monkeyPatchedKey]) {
|
||||||
|
component.render = () => <ErrorNotFoundPage message={err.message} />;
|
||||||
|
component.setState({
|
||||||
|
[monkeyPatchedKey]: true
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
46
js/sources/webhook_source.js
Normal file
46
js/sources/webhook_source.js
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import requests from '../utils/requests';
|
||||||
|
|
||||||
|
import WebhookActions from '../actions/webhook_actions';
|
||||||
|
|
||||||
|
|
||||||
|
const WebhookSource = {
|
||||||
|
lookupWebhooks: {
|
||||||
|
remote() {
|
||||||
|
return requests.get('webhooks');
|
||||||
|
},
|
||||||
|
local(state) {
|
||||||
|
return state.webhooks && !Object.keys(state.webhooks).length ? state : {};
|
||||||
|
},
|
||||||
|
success: WebhookActions.successFetchWebhooks,
|
||||||
|
error: WebhookActions.errorWebhooks,
|
||||||
|
shouldFetch(state) {
|
||||||
|
return state.webhookMeta.invalidateCache || state.webhooks && !Object.keys(state.webhooks).length;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
lookupWebhookEvents: {
|
||||||
|
remote() {
|
||||||
|
return requests.get('webhooks_events');
|
||||||
|
},
|
||||||
|
local(state) {
|
||||||
|
return state.webhookEvents && !Object.keys(state.webhookEvents).length ? state : {};
|
||||||
|
},
|
||||||
|
success: WebhookActions.successFetchWebhookEvents,
|
||||||
|
error: WebhookActions.errorWebhookEvents,
|
||||||
|
shouldFetch(state) {
|
||||||
|
return state.webhookEventsMeta.invalidateCache || state.webhookEvents && !Object.keys(state.webhookEvents).length;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
performRemoveWebhook: {
|
||||||
|
remote(state) {
|
||||||
|
return requests.delete('webhook', {'webhook_id': state.webhookMeta.idToDelete });
|
||||||
|
},
|
||||||
|
success: WebhookActions.successRemoveWebhook,
|
||||||
|
error: WebhookActions.errorWebhooks
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WebhookSource;
|
@ -60,7 +60,7 @@ class EditionListStore {
|
|||||||
* We often just have to refresh the edition list for a certain pieceId,
|
* We often just have to refresh the edition list for a certain pieceId,
|
||||||
* this method provides exactly that functionality without any side effects
|
* this method provides exactly that functionality without any side effects
|
||||||
*/
|
*/
|
||||||
onRefreshEditionList({pieceId, filterBy}) {
|
onRefreshEditionList({pieceId, filterBy = {}}) {
|
||||||
// It may happen that the user enters the site logged in already
|
// It may happen that the user enters the site logged in already
|
||||||
// through /editions
|
// through /editions
|
||||||
// If he then tries to delete a piece/edition and this method is called,
|
// If he then tries to delete a piece/edition and this method is called,
|
||||||
|
@ -7,11 +7,17 @@ import EditionActions from '../actions/edition_actions';
|
|||||||
class EditionStore {
|
class EditionStore {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.edition = {};
|
this.edition = {};
|
||||||
|
this.editionError = null;
|
||||||
this.bindActions(EditionActions);
|
this.bindActions(EditionActions);
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdateEdition(edition) {
|
onUpdateEdition(edition) {
|
||||||
this.edition = edition;
|
this.edition = edition;
|
||||||
|
this.editionError = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
onEditionFailed(error) {
|
||||||
|
this.editionError = error;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -7,11 +7,13 @@ import PieceActions from '../actions/piece_actions';
|
|||||||
class PieceStore {
|
class PieceStore {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.piece = {};
|
this.piece = {};
|
||||||
|
this.pieceError = null;
|
||||||
this.bindActions(PieceActions);
|
this.bindActions(PieceActions);
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdatePiece(piece) {
|
onUpdatePiece(piece) {
|
||||||
this.piece = piece;
|
this.piece = piece;
|
||||||
|
this.pieceError = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
onUpdateProperty({key, value}) {
|
onUpdateProperty({key, value}) {
|
||||||
@ -21,6 +23,10 @@ class PieceStore {
|
|||||||
throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
|
throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onPieceFailed(err) {
|
||||||
|
this.pieceError = err;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default alt.createStore(PieceStore, 'PieceStore');
|
export default alt.createStore(PieceStore, 'PieceStore');
|
||||||
|
88
js/stores/webhook_store.js
Normal file
88
js/stores/webhook_store.js
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
'use strict';
|
||||||
|
|
||||||
|
import { alt } from '../alt';
|
||||||
|
import WebhookActions from '../actions/webhook_actions';
|
||||||
|
|
||||||
|
import WebhookSource from '../sources/webhook_source';
|
||||||
|
|
||||||
|
class WebhookStore {
|
||||||
|
constructor() {
|
||||||
|
this.webhooks = [];
|
||||||
|
this.webhookEvents = [];
|
||||||
|
this.webhookMeta = {
|
||||||
|
invalidateCache: false,
|
||||||
|
err: null,
|
||||||
|
idToDelete: null
|
||||||
|
};
|
||||||
|
this.webhookEventsMeta = {
|
||||||
|
invalidateCache: false,
|
||||||
|
err: null
|
||||||
|
};
|
||||||
|
|
||||||
|
this.bindActions(WebhookActions);
|
||||||
|
this.registerAsync(WebhookSource);
|
||||||
|
}
|
||||||
|
|
||||||
|
onFetchWebhooks(invalidateCache) {
|
||||||
|
this.webhookMeta.invalidateCache = invalidateCache;
|
||||||
|
this.getInstance().lookupWebhooks();
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccessFetchWebhooks({ webhooks }) {
|
||||||
|
this.webhookMeta.invalidateCache = false;
|
||||||
|
this.webhookMeta.err = null;
|
||||||
|
this.webhooks = webhooks;
|
||||||
|
|
||||||
|
this.webhookEventsMeta.invalidateCache = true;
|
||||||
|
this.getInstance().lookupWebhookEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
onFetchWebhookEvents(invalidateCache) {
|
||||||
|
this.webhookEventsMeta.invalidateCache = invalidateCache;
|
||||||
|
this.getInstance().lookupWebhookEvents();
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccessFetchWebhookEvents({ events }) {
|
||||||
|
this.webhookEventsMeta.invalidateCache = false;
|
||||||
|
this.webhookEventsMeta.err = null;
|
||||||
|
|
||||||
|
// remove all events that have already been used.
|
||||||
|
const usedEvents = this.webhooks
|
||||||
|
.reduce((tempUsedEvents, webhook) => {
|
||||||
|
tempUsedEvents.push(webhook.event.split('.')[0]);
|
||||||
|
return tempUsedEvents;
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
this.webhookEvents = events.filter((event) => {
|
||||||
|
return usedEvents.indexOf(event) === -1;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onRemoveWebhook(id) {
|
||||||
|
this.webhookMeta.invalidateCache = true;
|
||||||
|
this.webhookMeta.idToDelete = id;
|
||||||
|
|
||||||
|
if(!this.getInstance().isLoading()) {
|
||||||
|
this.getInstance().performRemoveWebhook();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onSuccessRemoveWebhook() {
|
||||||
|
this.webhookMeta.idToDelete = null;
|
||||||
|
if(!this.getInstance().isLoading()) {
|
||||||
|
this.getInstance().lookupWebhooks();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onErrorWebhooks(err) {
|
||||||
|
console.logGlobal(err);
|
||||||
|
this.webhookMeta.err = err;
|
||||||
|
}
|
||||||
|
|
||||||
|
onErrorWebhookEvents(err) {
|
||||||
|
console.logGlobal(err);
|
||||||
|
this.webhookEventsMeta.err = err;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default alt.createStore(WebhookStore, 'WebhookStore');
|
@ -4,7 +4,7 @@ import { sanitize, intersectLists } from './general_utils';
|
|||||||
|
|
||||||
export function getAvailableAcls(editions, filterFn) {
|
export function getAvailableAcls(editions, filterFn) {
|
||||||
let availableAcls = [];
|
let availableAcls = [];
|
||||||
if (!editions || editions.constructor !== Array){
|
if (!editions || editions.constructor !== Array) {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
// if you copy a javascript array of objects using slice, then
|
// if you copy a javascript array of objects using slice, then
|
||||||
@ -33,23 +33,23 @@ export function getAvailableAcls(editions, filterFn) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
// If no edition has been selected, availableActions is empty
|
// If no edition has been selected, availableActions is empty
|
||||||
// If only one edition has been selected, their actions are available
|
// If only one edition has been selected, its actions are available
|
||||||
// If more than one editions have been selected, their acl properties are intersected
|
// If more than one editions have been selected, intersect all their acl properties
|
||||||
if(editionsCopy.length >= 1) {
|
if (editionsCopy.length >= 1) {
|
||||||
availableAcls = editionsCopy[0].acl;
|
availableAcls = editionsCopy[0].acl;
|
||||||
}
|
|
||||||
if(editionsCopy.length >= 2) {
|
if (editionsCopy.length >= 2) {
|
||||||
for(let i = 1; i < editionsCopy.length; i++) {
|
for (let i = 1; i < editionsCopy.length; i++) {
|
||||||
availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
|
availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// convert acls back to key-value object
|
// convert acls back to key-value object
|
||||||
let availableAclsObj = {};
|
let availableAclsObj = {};
|
||||||
for(let i = 0; i < availableAcls.length; i++) {
|
for (let i = 0; i < availableAcls.length; i++) {
|
||||||
availableAclsObj[availableAcls[i]] = true;
|
availableAclsObj[availableAcls[i]] = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return availableAclsObj;
|
return availableAclsObj;
|
||||||
}
|
}
|
||||||
|
@ -13,8 +13,8 @@ import AppConstants from '../constants/application_constants';
|
|||||||
* @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
|
* @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
|
||||||
* @param {string} comment Will also be submitted to Sentry, but will not be logged
|
* @param {string} comment Will also be submitted to Sentry, but will not be logged
|
||||||
*/
|
*/
|
||||||
function logGlobal(error, ignoreSentry, comment) {
|
function logGlobal(error, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1,
|
||||||
|
comment) {
|
||||||
console.error(error);
|
console.error(error);
|
||||||
|
|
||||||
if(!ignoreSentry) {
|
if(!ignoreSentry) {
|
||||||
|
@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
import { getLangText } from './lang_utils';
|
import { getLangText } from './lang_utils';
|
||||||
|
|
||||||
|
import AppConstants from '../constants/application_constants';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 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)
|
||||||
@ -70,6 +72,10 @@ export function getAclFormMessage(options) {
|
|||||||
throw new Error('Your specified aclName did not match a an acl class.');
|
throw new Error('Your specified aclName did not match a an acl class.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (options.additionalMessage) {
|
||||||
|
message += '\n\n' + options.additionalMessage;
|
||||||
|
}
|
||||||
|
|
||||||
if (options.senderName) {
|
if (options.senderName) {
|
||||||
message += '\n\n';
|
message += '\n\n';
|
||||||
message += getLangText('Truly yours,');
|
message += getLangText('Truly yours,');
|
||||||
|
@ -1,5 +1,11 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks shallow equality
|
||||||
|
* Re-export of shallow from shallow-equals
|
||||||
|
*/
|
||||||
|
export { default as isShallowEqual } from 'shallow-equals';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Takes an object and returns a shallow copy without any keys
|
* Takes an object and returns a shallow copy without any keys
|
||||||
* that fail the passed in filter function.
|
* that fail the passed in filter function.
|
||||||
@ -109,7 +115,7 @@ function _doesObjectListHaveDuplicates(l) {
|
|||||||
export function mergeOptions(...l) {
|
export function mergeOptions(...l) {
|
||||||
// If the objects submitted in the list have duplicates,in their key names,
|
// If the objects submitted in the list have duplicates,in their key names,
|
||||||
// abort the merge and tell the function's user to check his objects.
|
// abort the merge and tell the function's user to check his objects.
|
||||||
if(_doesObjectListHaveDuplicates(l)) {
|
if (_doesObjectListHaveDuplicates(l)) {
|
||||||
throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
|
throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,16 +12,16 @@ let mapTag = {
|
|||||||
css: 'link'
|
css: 'link'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let tags = {};
|
||||||
|
|
||||||
function injectTag(tag, src) {
|
function injectTag(tag, src) {
|
||||||
return Q.Promise((resolve, reject) => {
|
if(!tags[src]) {
|
||||||
if (isPresent(tag, src)) {
|
tags[src] = Q.Promise((resolve, reject) => {
|
||||||
resolve();
|
|
||||||
} else {
|
|
||||||
let attr = mapAttr[tag];
|
let attr = mapAttr[tag];
|
||||||
let element = document.createElement(tag);
|
let element = document.createElement(tag);
|
||||||
if (tag === 'script') {
|
if (tag === 'script') {
|
||||||
element.onload = () => resolve();
|
element.onload = resolve;
|
||||||
element.onerror = () => reject();
|
element.onerror = reject;
|
||||||
} else {
|
} else {
|
||||||
resolve();
|
resolve();
|
||||||
}
|
}
|
||||||
@ -30,14 +30,10 @@ function injectTag(tag, src) {
|
|||||||
if (tag === 'link') {
|
if (tag === 'link') {
|
||||||
element.rel = 'stylesheet';
|
element.rel = 'stylesheet';
|
||||||
}
|
}
|
||||||
}
|
});
|
||||||
});
|
}
|
||||||
}
|
|
||||||
|
|
||||||
function isPresent(tag, src) {
|
return tags[src];
|
||||||
let attr = mapAttr[tag];
|
|
||||||
let query = `head > ${tag}[${attr}="${src}"]`;
|
|
||||||
return document.querySelector(query);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function injectStylesheet(src) {
|
function injectStylesheet(src) {
|
||||||
@ -65,7 +61,6 @@ export const InjectInHeadUtils = {
|
|||||||
* you don't want to embed everything inside the build file.
|
* you don't want to embed everything inside the build file.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
isPresent,
|
|
||||||
injectStylesheet,
|
injectStylesheet,
|
||||||
injectScript,
|
injectScript,
|
||||||
inject
|
inject
|
||||||
|
7
js/utils/regex_utils.js
Normal file
7
js/utils/regex_utils.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
'use strict'
|
||||||
|
|
||||||
|
export function isEmail(string) {
|
||||||
|
// This is a bit of a weak test for an email, but you really can't win them all
|
||||||
|
// http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
|
||||||
|
return !!string && string.match(/.*@.*\..*/);
|
||||||
|
}
|
@ -30,6 +30,15 @@ class Requests {
|
|||||||
reject(error);
|
reject(error);
|
||||||
} else if(body && body.detail) {
|
} else if(body && body.detail) {
|
||||||
reject(new Error(body.detail));
|
reject(new Error(body.detail));
|
||||||
|
} else if(!body.success) {
|
||||||
|
let error = new Error('Client Request Error');
|
||||||
|
error.json = {
|
||||||
|
status: response.status,
|
||||||
|
statusText: response.statusText,
|
||||||
|
type: response.type,
|
||||||
|
url: response.url
|
||||||
|
};
|
||||||
|
reject(error);
|
||||||
} else {
|
} else {
|
||||||
resolve(body);
|
resolve(body);
|
||||||
}
|
}
|
||||||
@ -100,8 +109,7 @@ class Requests {
|
|||||||
return newUrl;
|
return newUrl;
|
||||||
}
|
}
|
||||||
|
|
||||||
request(verb, url, options) {
|
request(verb, url, options = {}) {
|
||||||
options = options || {};
|
|
||||||
let merged = Object.assign({}, this.httpOptions, options);
|
let merged = Object.assign({}, this.httpOptions, options);
|
||||||
let csrftoken = getCookie(AppConstants.csrftoken);
|
let csrftoken = getCookie(AppConstants.csrftoken);
|
||||||
if (csrftoken) {
|
if (csrftoken) {
|
||||||
@ -129,13 +137,10 @@ class Requests {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_putOrPost(url, paramsAndBody, method) {
|
_putOrPost(url, paramsAndBody, method) {
|
||||||
let paramsCopy = Object.assign({}, paramsAndBody);
|
|
||||||
let params = omitFromObject(paramsAndBody, ['body']);
|
let params = omitFromObject(paramsAndBody, ['body']);
|
||||||
let newUrl = this.prepareUrl(url, params);
|
let newUrl = this.prepareUrl(url, params);
|
||||||
let body = null;
|
let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
|
||||||
if (paramsCopy && paramsCopy.body) {
|
: null;
|
||||||
body = JSON.stringify(paramsCopy.body);
|
|
||||||
}
|
|
||||||
return this.request(method, newUrl, { body });
|
return this.request(method, newUrl, { body });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -66,7 +66,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.11.1",
|
"history": "^1.13.1",
|
||||||
"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",
|
||||||
@ -80,11 +80,12 @@
|
|||||||
"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-rc3",
|
"react-router": "1.0.0",
|
||||||
"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",
|
||||||
"reactify": "^1.1.0",
|
"reactify": "^1.1.0",
|
||||||
|
"shallow-equals": "0.0.0",
|
||||||
"shmui": "^0.1.0",
|
"shmui": "^0.1.0",
|
||||||
"spark-md5": "~1.0.0",
|
"spark-md5": "~1.0.0",
|
||||||
"uglifyjs": "^2.4.10",
|
"uglifyjs": "^2.4.10",
|
||||||
|
@ -89,26 +89,4 @@
|
|||||||
.btn-glyph-ascribe {
|
.btn-glyph-ascribe {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 4px 12px 0 10px
|
padding: 4px 12px 0 10px
|
||||||
}
|
|
||||||
|
|
||||||
.ascribe-logo-circle {
|
|
||||||
border: 6px solid #F6F6F6;
|
|
||||||
border-radius: 10em;
|
|
||||||
position: relative;
|
|
||||||
top: 10%;
|
|
||||||
left: 10%;
|
|
||||||
|
|
||||||
display: block;
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
|
|
||||||
> span {
|
|
||||||
color: #F6F6F6;
|
|
||||||
position: absolute;
|
|
||||||
top: -.29em;
|
|
||||||
left: .16em;
|
|
||||||
|
|
||||||
font-size: 5em;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
}
|
}
|
@ -60,6 +60,34 @@ $ascribe-accordion-list-item-height: 100px;
|
|||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ascribe-logo-circle {
|
||||||
|
border: 6px solid #F6F6F6;
|
||||||
|
border-radius: 10em;
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
left: 10%;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
width: 80%;
|
||||||
|
height: 80%;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
color: #F6F6F6;
|
||||||
|
position: absolute;
|
||||||
|
top: -.29em;
|
||||||
|
left: .16em;
|
||||||
|
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-thumbnail-placeholder {
|
||||||
|
color: #F6F6F6;
|
||||||
|
font-size: 5em;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
//&::before {
|
//&::before {
|
||||||
// content: ' ';
|
// content: ' ';
|
||||||
// display: inline-block;
|
// display: inline-block;
|
||||||
@ -211,10 +239,6 @@ $ascribe-accordion-list-item-height: 100px;
|
|||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: $ascribe-dark-blue;
|
|
||||||
}
|
|
||||||
|
|
||||||
.glyphicon {
|
.glyphicon {
|
||||||
font-size: .8em;
|
font-size: .8em;
|
||||||
top: 1px !important;
|
top: 1px !important;
|
||||||
|
@ -22,4 +22,4 @@
|
|||||||
.example {
|
.example {
|
||||||
color: #616161;
|
color: #616161;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -68,10 +68,15 @@ hr {
|
|||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
background-color: $ascribe--nav-bg-color;
|
background-color: $ascribe--nav-bg-color;
|
||||||
}
|
}
|
||||||
|
.navbar-nav > li > .dropdown-menu {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-menu > li > a {
|
.dropdown-menu > li > a {
|
||||||
color: $ascribe--nav-fg-prim-color;
|
color: $ascribe--nav-fg-prim-color;
|
||||||
font-weight: $ascribe--font-weight-light;
|
font-weight: $ascribe--font-weight-light;
|
||||||
|
padding-bottom: 9px;
|
||||||
|
padding-top: 9px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-menu > li > a:hover,
|
.dropdown-menu > li > a:hover,
|
||||||
@ -79,6 +84,10 @@ hr {
|
|||||||
background-color: rgba($ascribe--button-default-color, .05);
|
background-color: rgba($ascribe--button-default-color, .05);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu > .divider {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.notification-menu {
|
.notification-menu {
|
||||||
.dropdown-menu {
|
.dropdown-menu {
|
||||||
background-color: white;
|
background-color: white;
|
||||||
|
@ -2,8 +2,9 @@ $break-small: 764px;
|
|||||||
$break-medium: 991px;
|
$break-medium: 991px;
|
||||||
$break-medium: 1200px;
|
$break-medium: 1200px;
|
||||||
|
|
||||||
.notification-header,.notification-wrapper {
|
.notification-header, .notification-wrapper {
|
||||||
width: 350px;
|
min-width: 350px;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notification-header {
|
.notification-header {
|
||||||
@ -81,4 +82,4 @@ $break-medium: 1200px;
|
|||||||
border: 1px solid #cccccc;
|
border: 1px solid #cccccc;
|
||||||
background-color: white;
|
background-color: white;
|
||||||
margin-top: 1px;
|
margin-top: 1px;
|
||||||
}
|
}
|
||||||
|
@ -31,16 +31,11 @@
|
|||||||
margin-top: .5em;
|
margin-top: .5em;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
|
|
||||||
.loan-form {
|
&.embed-form {
|
||||||
margin-top: .5em;
|
|
||||||
height: 45vh;
|
height: 45vh;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loan-form {
|
|
||||||
height: 40vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
.notification-contract-pdf-download {
|
.notification-contract-pdf-download {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
margin-left: 1em;
|
margin-left: 1em;
|
||||||
@ -69,4 +64,8 @@
|
|||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-property.contract-appendix-form {
|
||||||
|
padding-left: 0;
|
||||||
}
|
}
|
@ -31,7 +31,7 @@
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
||||||
&:first-child {
|
&:first-child {
|
||||||
word-break: break-all;
|
word-break: break-word;
|
||||||
font-size: .9em;
|
font-size: .9em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -81,4 +81,8 @@
|
|||||||
top: 2px;
|
top: 2px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
min-width: 170px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.spinner-wrapper-white {
|
||||||
|
color: $ascribe-white;
|
||||||
|
.spinner-circle {
|
||||||
|
border-color: $ascribe-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.spinner-wrapper-lg {
|
.spinner-wrapper-lg {
|
||||||
width: $ascribe--spinner-size-lg;
|
width: $ascribe--spinner-size-lg;
|
||||||
height: $ascribe--spinner-size-lg;
|
height: $ascribe--spinner-size-lg;
|
||||||
@ -146,4 +153,4 @@ $ascribe--spinner-size-sm: 15px;
|
|||||||
40% { color: $ascribe-blue; }
|
40% { color: $ascribe-blue; }
|
||||||
60% { color: $ascribe-light-blue; }
|
60% { color: $ascribe-light-blue; }
|
||||||
80% { color: $ascribe-pink; }
|
80% { color: $ascribe-pink; }
|
||||||
}
|
}
|
||||||
|
@ -350,7 +350,7 @@ hr {
|
|||||||
|
|
||||||
> span {
|
> span {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: 600;
|
font-weight: normal;
|
||||||
color: #616161;
|
color: #616161;
|
||||||
|
|
||||||
padding-left: .3em;
|
padding-left: .3em;
|
||||||
|
363
sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
Normal file
363
sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss
Normal file
@ -0,0 +1,363 @@
|
|||||||
|
/** Sass cannot use a number as the first character of a variable, so we'll have to settle with vivi23 **/
|
||||||
|
$vivi23--fg-color: black;
|
||||||
|
$vivi23--bg-color: white;
|
||||||
|
$vivi23--nav-fg-prim-color: $vivi23--fg-color;
|
||||||
|
$vivi23--nav-fg-sec-color: #3a3a3a;
|
||||||
|
$vivi23--nav-bg-color: $vivi23--bg-color;
|
||||||
|
$vivi23--nav-highlight-color: #f8f8f8;
|
||||||
|
$vivi23--button-default-color: $vivi23--fg-color;
|
||||||
|
$vivi23--highlight-color: #de2600;
|
||||||
|
|
||||||
|
|
||||||
|
.client--23vivi {
|
||||||
|
/** Landing page **/
|
||||||
|
.route--landing {
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
> .container {
|
||||||
|
display: table-cell;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vivi23-landing {
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vivi23-landing--header {
|
||||||
|
background-color: $vivi23--fg-color;
|
||||||
|
border: 1px solid $vivi23--fg-color;
|
||||||
|
color: $vivi23--bg-color;
|
||||||
|
padding: 2em;
|
||||||
|
|
||||||
|
.vivi23-landing--header-logo {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
height: 75px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.vivi23-landing--content {
|
||||||
|
border: 1px solid darken($vivi23--bg-color, 20%);
|
||||||
|
border-top: none;
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Navbar **/
|
||||||
|
.navbar-default {
|
||||||
|
background-color: $vivi23--nav-fg-prim-color;
|
||||||
|
|
||||||
|
.navbar-brand .icon-ascribe-logo {
|
||||||
|
color: $vivi23--bg-color;
|
||||||
|
&:hover {
|
||||||
|
color: darken($vivi23--bg-color, 20%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav > li > a,
|
||||||
|
.navbar-nav > li > a:focus,
|
||||||
|
.navbar-nav > li > .active a,
|
||||||
|
.navbar-nav > li > .active a:focus {
|
||||||
|
color: $vivi23--nav-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav > li > a:hover {
|
||||||
|
color: darken($vivi23--nav-bg-color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav > .active a,
|
||||||
|
.navbar-nav > .active a:hover,
|
||||||
|
.navbar-nav > .active a:focus {
|
||||||
|
background-color: $vivi23--nav-fg-prim-color;
|
||||||
|
border-bottom-color: $vivi23--nav-bg-color;
|
||||||
|
color: $vivi23--nav-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav > .open > a,
|
||||||
|
.dropdown-menu > .active > a,
|
||||||
|
.dropdown-menu > li > a {
|
||||||
|
color: $vivi23--nav-fg-prim-color;
|
||||||
|
background-color: $vivi23--nav-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-nav > .open > a:hover,
|
||||||
|
.navbar-nav > .open > a:focus,
|
||||||
|
.dropdown-menu > .active > a:hover,
|
||||||
|
.dropdown-menu > .active > a:focus,
|
||||||
|
.dropdown-menu > li > a:hover,
|
||||||
|
.dropdown-menu > li > a:focus {
|
||||||
|
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||||
|
background-color: $vivi23--nav-highlight-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.collapsing,
|
||||||
|
.navbar-collapse.collapse.in {
|
||||||
|
background-color: $vivi23--nav-bg-color;
|
||||||
|
|
||||||
|
.navbar-nav > .open > a,
|
||||||
|
.navbar-nav > .active > a {
|
||||||
|
background-color: $vivi23--nav-highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-collapse.collapsing li a,
|
||||||
|
.navbar-collapse.collapse.in li a {
|
||||||
|
color: $vivi23--nav-fg-prim-color;
|
||||||
|
}
|
||||||
|
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
|
||||||
|
color: lighten($vivi23--nav-fg-prim-color, 20%);
|
||||||
|
background-color: $vivi23--nav-highlight-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle {
|
||||||
|
border-color: $vivi23--highlight-color;
|
||||||
|
|
||||||
|
.icon-bar {
|
||||||
|
background-color: $vivi23--highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-toggle:hover,
|
||||||
|
.navbar-toggle:focus {
|
||||||
|
border-color: lighten($vivi23--highlight-color, 10%);
|
||||||
|
background-color: $vivi23--nav-fg-prim-color;
|
||||||
|
|
||||||
|
.icon-bar {
|
||||||
|
background-color: lighten($vivi23--highlight-color, 10%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-menu {
|
||||||
|
.dropdown-menu {
|
||||||
|
background-color: $vivi23--nav-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-header {
|
||||||
|
background-color: $vivi23--nav-fg-sec-color;
|
||||||
|
border-top-width: 0;
|
||||||
|
color: $vivi23--nav-bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.notification-action {
|
||||||
|
color: $vivi23--highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Buttons **/
|
||||||
|
// reset disabled button styling for btn-default
|
||||||
|
.btn-default.disabled,
|
||||||
|
.btn-default.disabled:hover,
|
||||||
|
.btn-default.disabled:focus,
|
||||||
|
.btn-default.disabled.focus,
|
||||||
|
.btn-default.disabled:active,
|
||||||
|
.btn-default.disabled.active,
|
||||||
|
.btn-default[disabled],
|
||||||
|
.btn-default[disabled]:hover,
|
||||||
|
.btn-default[disabled]:focus,
|
||||||
|
.btn-default[disabled].focus,
|
||||||
|
.btn-default[disabled]:active,
|
||||||
|
.btn-default[disabled].active,
|
||||||
|
fieldset[disabled] .btn-default,
|
||||||
|
fieldset[disabled] .btn-default:hover,
|
||||||
|
fieldset[disabled] .btn-default:focus,
|
||||||
|
fieldset[disabled] .btn-default.focus,
|
||||||
|
fieldset[disabled] .btn-default:active,
|
||||||
|
fieldset[disabled] .btn-default.active {
|
||||||
|
background-color: lighten($vivi23--button-default-color, 30%);
|
||||||
|
border-color: lighten($vivi23--button-default-color, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
background-color: $vivi23--button-default-color;
|
||||||
|
border-color: $vivi23--button-default-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:active:hover,
|
||||||
|
&:active:focus,
|
||||||
|
&:active.focus,
|
||||||
|
&.active:hover,
|
||||||
|
&.active:focus,
|
||||||
|
&.active.focus {
|
||||||
|
background-color: lighten($vivi23--button-default-color, 30%);
|
||||||
|
border-color: lighten($vivi23--button-default-color, 30%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// disabled buttons
|
||||||
|
.btn-secondary.disabled,
|
||||||
|
.btn-secondary.disabled:hover,
|
||||||
|
.btn-secondary.disabled:focus,
|
||||||
|
.btn-secondary.disabled.focus,
|
||||||
|
.btn-secondary.disabled:active,
|
||||||
|
.btn-secondary.disabled.active,
|
||||||
|
.btn-secondary[disabled],
|
||||||
|
.btn-secondary[disabled]:hover,
|
||||||
|
.btn-secondary[disabled]:focus,
|
||||||
|
.btn-secondary[disabled].focus,
|
||||||
|
.btn-secondary[disabled]:active,
|
||||||
|
.btn-secondary[disabled].active,
|
||||||
|
fieldset[disabled] .btn-secondary,
|
||||||
|
fieldset[disabled] .btn-secondary:hover,
|
||||||
|
fieldset[disabled] .btn-secondary:focus,
|
||||||
|
fieldset[disabled] .btn-secondary.focus,
|
||||||
|
fieldset[disabled] .btn-secondary:active,
|
||||||
|
fieldset[disabled] .btn-secondary.active {
|
||||||
|
background-color: darken($vivi23--bg-color, 20%);
|
||||||
|
border-color: $vivi23--button-default-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
border-color: $vivi23--button-default-color;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:active:hover,
|
||||||
|
&:active:focus,
|
||||||
|
&:active.focus,
|
||||||
|
&.active:hover,
|
||||||
|
&.active:focus,
|
||||||
|
&.active.focus {
|
||||||
|
background-color: $vivi23--button-default-color;
|
||||||
|
border-color: $vivi23--button-default-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-tertiary {
|
||||||
|
&:hover,
|
||||||
|
&:active,
|
||||||
|
&ctive:hover,
|
||||||
|
&.active:hover{
|
||||||
|
background-color: $vivi23--highlight-color;
|
||||||
|
border-color: $vivi23--highlight-color;
|
||||||
|
color: $vivi23--highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Other components **/
|
||||||
|
.ascribe-piece-list-toolbar .btn-ascribe-add {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-accordion-list-table-toggle:hover {
|
||||||
|
color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.request-action-badge {
|
||||||
|
color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.acl-information-dropdown-list .title {
|
||||||
|
color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// filter widget
|
||||||
|
.ascribe-piece-list-toolbar-filter-widget button {
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
color: $vivi23--button-default-color !important;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:active {
|
||||||
|
background-color: $vivi23--button-default-color !important;
|
||||||
|
border-color: $vivi23--button-default-color !important;
|
||||||
|
color: $vivi23--bg-color !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-ascribe-search {
|
||||||
|
color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// forms
|
||||||
|
.ascribe-property-wrapper:hover {
|
||||||
|
border-left-color: rgba($vivi23--fg-color, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-property textarea,
|
||||||
|
.ascribe-property input,
|
||||||
|
.search-bar > .form-group > .input-group input {
|
||||||
|
&::-webkit-input-placeholder {
|
||||||
|
color: rgba($vivi23--fg-color, 0.5);
|
||||||
|
}
|
||||||
|
&::-moz-placeholder {
|
||||||
|
color: rgba($vivi23--fg-color, 0.5);
|
||||||
|
}
|
||||||
|
&:-ms-input-placeholder {
|
||||||
|
color: rgba($vivi23--fg-color, 0.5);
|
||||||
|
}
|
||||||
|
&:-moz-placeholder {
|
||||||
|
color: rgba($vivi23--fg-color, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ascribe-property {
|
||||||
|
> div,
|
||||||
|
> input,
|
||||||
|
> pre,
|
||||||
|
> select,
|
||||||
|
> span:not(.glyphicon),
|
||||||
|
> p,
|
||||||
|
> p > span,
|
||||||
|
> textarea {
|
||||||
|
color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// global notification
|
||||||
|
.ascribe-global-notification-success {
|
||||||
|
background-color: lighten($vivi23--fg-color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// uploader progress
|
||||||
|
.ascribe-progress-bar > .progress-bar {
|
||||||
|
background-color: lighten($vivi23--fg-color, 20%);
|
||||||
|
}
|
||||||
|
|
||||||
|
// spinner
|
||||||
|
.spinner-circle {
|
||||||
|
border-color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
.spinner-inner {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btn-secondary .spinner-circle {
|
||||||
|
border-color: $vivi23--bg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// video player
|
||||||
|
.ascribe-media-player .vjs-default-skin {
|
||||||
|
.vjs-play-progress,
|
||||||
|
.vjs-volume-level {
|
||||||
|
background-color: $vivi23--highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// pager
|
||||||
|
.pager li > a,
|
||||||
|
.pager li > span {
|
||||||
|
background-color: $vivi23--fg-color;
|
||||||
|
border-color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
.pager .disabled > a,
|
||||||
|
.pager .disabled > span {
|
||||||
|
background-color: $vivi23--fg-color !important;
|
||||||
|
border-color: $vivi23--fg-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
// intercom
|
||||||
|
#intercom-container .intercom-launcher-button {
|
||||||
|
background-color: $vivi23--button-default-color !important;
|
||||||
|
border-color: $vivi23--button-default-color !important;
|
||||||
|
}
|
||||||
|
}
|
@ -59,8 +59,12 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
.client--cyland .icon-ascribe-search {
|
.client--cyland .icon-ascribe-search {
|
||||||
|
=======
|
||||||
|
.client--cyland .icon-ascribe-search{
|
||||||
|
>>>>>>> master
|
||||||
color: $cyland--button-color;
|
color: $cyland--button-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -143,6 +147,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
<<<<<<< HEAD
|
||||||
// disabled buttons
|
// disabled buttons
|
||||||
.client--cyland {
|
.client--cyland {
|
||||||
.btn-default.disabled,
|
.btn-default.disabled,
|
||||||
@ -165,6 +170,23 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
|
|||||||
fieldset[disabled] .btn-default.active {
|
fieldset[disabled] .btn-default.active {
|
||||||
background-color: darken($cyland--button-color, 20%);
|
background-color: darken($cyland--button-color, 20%);
|
||||||
border-color: darken($cyland--button-color, 20%);
|
border-color: darken($cyland--button-color, 20%);
|
||||||
|
=======
|
||||||
|
// landing page
|
||||||
|
.client--cyland {
|
||||||
|
.route--landing {
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
> .container {
|
||||||
|
display: table-cell;
|
||||||
|
padding-bottom: 100px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cyland-landing {
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
>>>>>>> master
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -203,6 +225,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
|
|||||||
.client--cyland .acl-information-dropdown-list .title {
|
.client--cyland .acl-information-dropdown-list .title {
|
||||||
color: $cyland--button-color;
|
color: $cyland--button-color;
|
||||||
}
|
}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
|
||||||
.client--cyland .action-file.icon-ascribe-ok,
|
.client--cyland .action-file.icon-ascribe-ok,
|
||||||
.client--cyland .action-file.icon-ascribe-ok:hover {
|
.client--cyland .action-file.icon-ascribe-ok:hover {
|
||||||
@ -218,4 +241,6 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
|
|||||||
|
|
||||||
.client--cyland .upload-button-wrapper > span {
|
.client--cyland .upload-button-wrapper > span {
|
||||||
color: $cyland--button-color;
|
color: $cyland--button-color;
|
||||||
}
|
}
|
||||||
|
=======
|
||||||
|
>>>>>>> master
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user