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

Merge with master

Browse Source
This commit is contained in:
Brett Sun 2015-12-08 20:55:13 +01:00
parent edeec39548
commit e0b35e0a24
122 changed files with 3342 additions and 949 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -31,6 +31,7 @@ Additionally, to work on the white labeling functionality, you need to edit your
127.0.0.1 sluice.localhost.com
127.0.0.1 lumenus.localhost.com
127.0.0.1 portfolioreview.localhost.com
127.0.0.1 23vivi.localhost.com
```

BIN
fonts/ascribe-font.eot Executable file
View File

Binary file not shown.

7
fonts/ascribe-logo.svg → fonts/ascribe-font.svg Normal file → Executable file
View File

@ -3,7 +3,7 @@
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font id="ascribe-font" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@ -12,9 +12,10 @@
<glyph unicode="&#xe802;" glyph-name="search" d="M1021.1-36.711l-305.914 305.583c67.615 73.406 108.95 171.391 108.95 279.060 0 227.579-184.49 412.068-412.068 412.068s-412.068-184.489-412.068-412.068c0-227.578 184.489-412.068 412.068-412.068 107.625 0 205.576 41.3 278.972 108.866l305.927-305.597 24.133 24.156zM412.068 169.997c-208.394 0-377.935 169.541-377.935 377.935s169.541 377.935 377.935 377.935 377.935-169.54 377.935-377.935c0-208.394-169.541-377.935-377.935-377.935z" />
<glyph unicode="&#xe803;" glyph-name="filter" d="M0 960l384.89-534.756 8.722-489.244 184.119 174.521 0.324 314.724 445.947 534.756h-1024zM551.839 447.106c-5.109-6.126-7.91-13.849-7.919-21.826l-0.308-300.068-117.253-111.141-7.341 411.782c-0.124 6.948-2.365 13.692-6.424 19.331l-345.97 480.683h884.467l-399.251-478.761z" />
<glyph unicode="&#xe804;" glyph-name="add-white" d="M510.103 923.822c263.415 0 477.719-214.304 477.719-477.719s-214.303-477.718-477.719-477.718c-263.415 0-477.718 214.304-477.718 477.718s214.303 477.719 477.718 477.719zM510.103 957.955c-282.688 0-511.851-229.164-511.851-511.852s229.163-511.851 511.851-511.851 511.852 229.164 511.852 511.851-229.164 511.852-511.852 511.852v0zM796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe805;" glyph-name="uniE805" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
<glyph unicode="&#xe806;" glyph-name="uniE806" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe805;" glyph-name="add-blue" d="M512.148 959.852c-282.688 0-511.851-229.164-511.851-511.852s229.164-511.851 511.851-511.851 511.852 229.163 511.852 511.851-229.164 511.852-511.852 511.852z" />
<glyph unicode="&#xe806;" glyph-name="add-blue2" d="M796.444 459.378h-273.067v273.067h-34.133v-273.067h-261.689v-34.133h261.689v-261.689h34.133v261.689h273.067z" />
<glyph unicode="&#xe807;" glyph-name="icon" d="M550.306 782.458h-75.373l-249.184-613.64h90.453l62.951 159.627h262.477l62.974-159.627h95.755l-250.053 613.64zM403.098 400.255l107.305 274.897 107.28-274.897h-214.586zM1024 448c0 286.204-225.796 512-511.999 512s-512.001-225.796-512.001-512c0-286.204 225.797-512 512.001-512s511.999 225.797 511.999 512v0zM962.165 448c0-245.94-204.249-450.164-450.164-450.164-245.941 0-450.161 204.224-450.161 450.164s204.221 450.164 450.161 450.164c245.915 0 450.164-204.224 450.164-450.164v0z" />
<glyph unicode="&#xe808;" glyph-name="logo" horiz-adv-x="4195" d="M499.718 326.19c0 109.528-24.641 157.448-61.607 198.517-38.336 41.077-95.832 71.191-191.673 71.191-95.832 0-171.135-36.957-212.212-64.34l27.382-52.031c13.695 10.954 88.998 54.764 187.571 54.764 99.943 0 177.978-57.505 177.978-173.876v-34.225l-173.876-6.843c-171.135-6.852-253.281-82.146-253.281-191.673s88.989-191.674 212.212-191.674c123.214 0 191.674 75.294 214.944 102.676v-88.989h72.562v376.503zM427.156 113.978c-30.114-47.92-98.573-116.371-201.258-116.371-102.676 0-154.707 61.607-154.707 130.066 0 68.45 42.448 125.955 175.246 132.798l180.719 10.955v-157.448zM1063.784 123.562c0 120.482-119.12 161.551-198.525 188.933-78.035 27.382-146.494 56.134-146.494 121.853s50.661 101.314 121.853 101.314c71.191 0 115.001-24.641 158.819-72.561l43.809 43.809c-49.291 56.134-106.795 88.989-199.887 88.989-93.1 0-193.044-54.764-193.044-169.765s119.112-156.078 173.876-175.246c54.764-19.168 168.394-47.92 168.394-130.066s-69.821-120.482-149.226-120.482c-79.413 0-142.391 39.707-183.46 99.952l-50.661-41.077c39.707-65.718 113.639-123.215 231.38-123.215s223.166 68.451 223.166 187.562v0zM1679.873 93.44c0 0-68.451-93.1-212.212-93.1-143.753 0-242.326 113.639-242.326 271.087s112.268 260.132 239.594 260.132c125.955 0 180.719-61.616 208.101-93.1l45.18 47.912c-13.687 17.798-82.146 109.528-250.548 109.528-167.024 0-317.628-132.798-317.628-328.583 0-194.406 139.65-331.315 310.785-331.315s236.853 82.146 260.133 109.528l-41.077 47.912zM2142.607 586.323c0 0-27.382 9.576-68.45 9.576-68.459 0-138.28-43.81-161.551-130.058v119.112h-71.2v-635.266h71.2v342.278c0 109.528 34.225 162.921 45.18 177.978 10.946 15.066 47.912 57.505 109.528 57.505 34.225 0 53.394-5.473 68.451-10.955l6.843 69.83zM2353.432 810.851c0 32.855-26.012 58.875-58.867 58.875-32.863 0-58.875-26.020-58.875-58.875s26.011-58.875 58.875-58.875c32.855 0 58.867 26.020 58.867 58.875v0zM2330.161 584.953h-71.191v-635.266h71.191v635.266zM3144.767 267.315c0 188.941-123.223 328.583-312.155 328.583-91.73 0-177.987-36.957-239.594-132.798v431.267h-71.191v-944.68h71.191v120.482c53.394-93.1 141.012-134.169 236.853-134.169 191.673 0 314.896 143.753 314.896 331.315v0zM3069.464 267.315c0-146.494-86.257-266.976-239.594-266.976-154.707 0-239.594 120.482-239.594 266.976 0 147.864 84.887 266.976 239.594 266.976 153.337 0 239.594-119.112 239.594-266.976v0zM3836.158 298.808c0 171.135-120.482 297.090-287.514 297.090-168.402 0-308.044-132.798-308.044-328.583 0-194.406 119.112-331.315 303.933-331.315 184.83 0 264.244 95.833 264.244 95.833l-34.234 50.661c0 0-79.405-82.154-223.158-82.154-143.761 0-228.64 99.952-235.491 250.548h516.154c0 0 4.111 27.382 4.111 47.92v0zM3318.633 312.495c4.111 88.998 68.459 221.796 225.899 221.796 157.449 0 219.065-139.65 219.065-221.796h-444.963zM4027.755 897.194h-26.663l-88.15-217.077h31.998l22.269 56.468h92.852l22.277-56.468h33.874l-88.457 217.077zM3975.68 761.989l37.96 97.245 37.951-97.245h-75.91zM4195.326 778.878c0 101.246-79.876 181.122-181.121 181.122s-181.122-79.876-181.122-181.122c0-101.245 79.876-181.122 181.122-181.122s181.121 79.876 181.121 181.122v0zM4173.452 778.878c0-87.002-72.254-159.247-159.247-159.247-87.002 0-159.246 72.245-159.246 159.247s72.244 159.247 159.246 159.247c86.993 0 159.247-72.245 159.247-159.247v0z" />
<glyph unicode="&#xe809;" glyph-name="ok" horiz-adv-x="1348" d="M436.706-64l-406.588 399.059 112.941 105.412 293.647-293.647 768 760.471 105.412-105.412z" />
<glyph unicode="&#xe810;" glyph-name="thin-cross" d="M1018.389 944.57l5.611 5.611-9.819 9.819-502.181-502.181-502.181 502.181-9.819-9.819 502.181-502.181-502.181-502.181 9.819-9.819 502.181 502.181 502.181-502.181 9.819 9.819-502.181 502.181z" />
</font></defs></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
fonts/ascribe-font.ttf Executable file
View File

Binary file not shown.

BIN
fonts/ascribe-font.woff Executable file
View File

Binary file not shown.

BIN
fonts/ascribe-logo.eot
View File

Binary file not shown.

BIN
fonts/ascribe-logo.ttf
View File

Binary file not shown.

BIN
fonts/ascribe-logo.woff
View File

Binary file not shown.

32
js/actions/contract_agreement_list_actions.js
View File

@ -22,8 +22,7 @@ class ContractAgreementListActions {
if (contractAgreementList.count > 0) {
this.actions.updateContractAgreementList(contractAgreementList.results);
resolve(contractAgreementList.results);
}
else{
} else {
resolve(null);
}
})
@ -35,13 +34,13 @@ class ContractAgreementListActions {
);
}
fetchAvailableContractAgreementList(issuer, createContractAgreement) {
fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
return Q.Promise((resolve, reject) => {
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
.then((acceptedContractAgreementList) => {
// if there is at least an accepted contract agreement, we're going to
// use it
if(acceptedContractAgreementList.count > 0) {
if (acceptedContractAgreementList.count > 0) {
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
} else {
// otherwise, we're looking for contract agreements that are still pending
@ -50,16 +49,14 @@ class ContractAgreementListActions {
// overcomplicate the method
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
.then((pendingContractAgreementList) => {
if(pendingContractAgreementList.count > 0) {
if (pendingContractAgreementList.count > 0) {
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
} else {
} else if (createPublicContractAgreement) {
// if there was neither a pending nor an active contractAgreement
// found and createContractAgreement is set to true, we create a
// new contract agreement
if(createContractAgreement) {
// found and createPublicContractAgreement is set to true, we create a
// new public contract agreement
this.actions.createContractAgreementFromPublicContract(issuer);
}
}
})
.catch((err) => {
console.logGlobal(err);
@ -81,8 +78,7 @@ class ContractAgreementListActions {
// create an agreement with the public contract if there is one
if (publicContract && publicContract.length > 0) {
return this.actions.createContractAgreement(null, publicContract[0]);
}
else {
} else {
/*
contractAgreementList in the store is already set to null;
*/
@ -91,18 +87,14 @@ class ContractAgreementListActions {
if (publicContracAgreement) {
this.actions.updateContractAgreementList([publicContracAgreement]);
}
}).catch((err) => {
console.logGlobal(err);
});
}).catch(console.logGlobal);
}
createContractAgreement(issuer, contract){
return Q.Promise((resolve, reject) => {
OwnershipFetcher.createContractAgreement(issuer, contract).then(
(contractAgreement) => {
resolve(contractAgreement);
}
).catch((err) => {
OwnershipFetcher
.createContractAgreement(issuer, contract).then(resolve)
.catch((err) => {
console.logGlobal(err);
reject(err);
});

4
js/actions/edition_actions.js
View File

@ -7,7 +7,8 @@ import EditionFetcher from '../fetchers/edition_fetcher';
class EditionActions {
constructor() {
this.generateActions(
'updateEdition'
'updateEdition',
'editionFailed'
);
}
@ -18,6 +19,7 @@ class EditionActions {
})
.catch((err) => {
console.logGlobal(err);
this.actions.editionFailed(err.json);
});
}
}

6
js/actions/global_notification_actions.js
View File

@ -2,13 +2,15 @@
import { alt } from '../alt';
class GlobalNotificationActions {
constructor() {
this.generateActions(
'appendGlobalNotification',
'showNextGlobalNotification',
'shiftGlobalNotification',
'emulateEmptyStore'
'cooldownGlobalNotifications',
'pauseGlobalNotifications',
'resumeGlobalNotifications'
);
}
}

4
js/actions/piece_actions.js
View File

@ -8,7 +8,8 @@ class PieceActions {
constructor() {
this.generateActions(
'updatePiece',
'updateProperty'
'updateProperty',
'pieceFailed'
);
}
@ -19,6 +20,7 @@ class PieceActions {
})
.catch((err) => {
console.logGlobal(err);
this.actions.pieceFailed(err.json);
});
}
}

19
js/actions/webhook_actions.js Normal file
View 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);

1
js/components/ascribe_accordion_list/accordion_list_item_edition_widget.js
View File

@ -78,7 +78,6 @@ let AccordionListItemEditionWidget = React.createClass({
return (
<AscribeSpinner
size='sm'
color='white'
classNames='pull-right margin-left-2px'/>
);
} else {

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

@ -4,6 +4,7 @@ import React from 'react';
import { Link } from 'react-router';
import AccordionListItem from './accordion_list_item';
import AccordionListItemThumbnailPlacholder from './accordion_list_item_thumbnail_placeholder';
import { getLangText } from '../../utils/lang_utils';
@ -19,7 +20,14 @@ let AccordionListItemPiece = React.createClass({
]),
subsubheading: React.PropTypes.object,
buttons: React.PropTypes.object,
badge: React.PropTypes.object
badge: React.PropTypes.object,
thumbnailPlaceholder: React.PropTypes.func
},
getDefaultProps() {
return {
thumbnailPlaceholder: AccordionListItemThumbnailPlacholder
};
},
getLinkData() {
@ -34,19 +42,23 @@ let AccordionListItemPiece = React.createClass({
},
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;
let thumbnail;
// Since we're going to refactor the thumbnail generation anyway at one point,
// for not use the annoying ascribe_spiral.png, we're matching the url against
// this name and replace it with a CSS version of the new logo.
if(url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
thumbnail = (
<span className="ascribe-logo-circle">
<span>A</span>
</span>
);
if (url.match(/https:\/\/.*\/media\/thumbnails\/ascribe_spiral.png/)) {
thumbnail = (<ThumbnailPlaceholder />);
} else {
thumbnail = (
<div style={{backgroundImage: 'url("' + url_safe + '")'}}/>

15
js/components/ascribe_accordion_list/accordion_list_item_thumbnail_placeholder.js Normal file
View File

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

23
js/components/ascribe_accordion_list/accordion_list_item_wallet.js
View File

@ -31,6 +31,7 @@ let AccordionListItemWallet = React.createClass({
propTypes: {
className: React.PropTypes.string,
content: React.PropTypes.object,
thumbnailPlaceholder: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
@ -123,32 +124,36 @@ let AccordionListItemWallet = React.createClass({
},
render() {
const { children, className, content, thumbnailPlaceholder } = this.props;
return (
<AccordionListItemPiece
className={this.props.className}
piece={this.props.content}
className={className}
piece={content}
subsubheading={
<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()}
</div>}
</div>
}
buttons={
<div>
<AclProxy
aclObject={this.props.content.acl}
aclObject={content.acl}
aclName="acl_view_editions">
<AccordionListItemEditionWidget
className="pull-right"
piece={this.props.content}
piece={content}
toggleCreateEditionsDialog={this.toggleCreateEditionsDialog}
onPollingSuccess={this.onPollingSuccess}/>
</AclProxy>
</div>}
badge={this.getGlyphicon()}>
</div>
}
badge={this.getGlyphicon()}
thumbnailPlaceholder={thumbnailPlaceholder}>
{this.getCreateEditionsDialog()}
{/* this.props.children is AccordionListItemTableEditions */}
{this.props.children}
{children}
</AccordionListItemPiece>
);
}

2
js/components/ascribe_buttons/acl_button_list.js
View File

@ -41,7 +41,7 @@ let AclButtonList = React.createClass({
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
UserActions.fetchCurrentUser.defer();
window.addEventListener('resize', this.handleResize);
window.dispatchEvent(new Event('resize'));

2
js/components/ascribe_buttons/acls/acl_button.js
View File

@ -26,7 +26,7 @@ export default function ({ action, displayName, title, tooltip }) {
availableAcls: React.PropTypes.object.isRequired,
buttonAcceptName: React.PropTypes.string,
buttonAcceptClassName: React.PropTypes.string,
currentUser: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object,
email: React.PropTypes.string,
pieceOrEditions: React.PropTypes.oneOfType([
React.PropTypes.object,

4
js/components/ascribe_collapsible/collapsible_paragraph.js
View File

@ -12,7 +12,9 @@ const CollapsibleParagraph = React.createClass({
React.PropTypes.object,
React.PropTypes.array
]),
iconName: React.PropTypes.string
iconName: React.PropTypes.string,
show: React.PropTypes.bool,
defaultExpanded: React.PropTypes.bool
},
getDefaultProps() {

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

@ -7,6 +7,7 @@ let DetailProperty = React.createClass({
propTypes: {
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string,
React.PropTypes.element
]),

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

@ -41,13 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
*/
let Edition = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
edition: React.PropTypes.object,
loadEdition: React.PropTypes.func,
location: React.PropTypes.object
loadEdition: React.PropTypes.func
},
mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() {
return UserStore.getState();
},
@ -75,6 +82,8 @@ let Edition = React.createClass({
},
render() {
let FurtherDetailsType = this.props.furtherDetailsType;
return (
<Row>
<Col md={6}>
@ -90,6 +99,7 @@ let Edition = React.createClass({
<hr/>
</div>
<EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition}
currentUser={this.state.currentUser}
handleSuccess={this.props.loadEdition}/>
@ -137,7 +147,7 @@ let Edition = React.createClass({
currentUser={this.state.currentUser}/>
<Note
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}
placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit}
@ -151,13 +161,12 @@ let Edition = React.createClass({
show={this.props.edition.acl.acl_edit
|| Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data.length > 0}>
<FurtherDetails
<FurtherDetailsType
editable={this.props.edition.acl.acl_edit}
pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data}
otherData={this.props.edition.other_data}
handleSuccess={this.props.loadEdition}
location={this.props.location}/>
handleSuccess={this.props.loadEdition} />
</CollapsibleParagraph>
<CollapsibleParagraph
title={getLangText('SPOOL Details')}>
@ -173,6 +182,7 @@ let Edition = React.createClass({
let EditionSummary = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
edition: React.PropTypes.object,
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func
@ -185,7 +195,7 @@ let EditionSummary = React.createClass({
getStatus(){
let status = null;
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 }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = (
@ -197,7 +207,7 @@ let EditionSummary = React.createClass({
},
render() {
let { edition, currentUser } = this.props;
let { actionPanelButtonListType, edition, currentUser } = this.props;
return (
<div className="ascribe-detail-header">
<EditionDetailProperty
@ -212,10 +222,16 @@ let EditionSummary = React.createClass({
value={ edition.owner } />
<LicenseDetail license={edition.license_type}/>
{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
label={getLangText('ACTIONS')}>
<EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={this.handleSuccess} />

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

@ -36,6 +36,7 @@ import { getLangText } from '../../utils/lang_utils';
*/
let EditionActionPanel = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
edition: React.PropTypes.object,
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func
@ -43,6 +44,12 @@ let EditionActionPanel = React.createClass({
mixins: [History],
getDefaultProps() {
return {
actionPanelButtonListType: AclButtonList
};
},
getInitialState() {
return PieceListStore.getState();
},
@ -87,7 +94,10 @@ let EditionActionPanel = React.createClass({
},
render(){
let {edition, currentUser} = this.props;
const {
actionPanelButtonListType: ActionPanelButtonListType,
edition,
currentUser } = this.props;
if (edition &&
edition.notifications &&
@ -104,7 +114,7 @@ let EditionActionPanel = React.createClass({
return (
<Row>
<Col md={12}>
<AclButtonList
<ActionPanelButtonListType
className="ascribe-button-list"
availableAcls={edition.acl}
pieceOrEditions={[edition]}
@ -122,7 +132,8 @@ let EditionActionPanel = React.createClass({
expanded={false}>
<input
type="text"
value={edition.bitcoin_id} />
value={edition.bitcoin_id}
readOnly />
</Property>
<Button bsStyle="default" className="pull-center" bsSize="small" type="submit">
{getLangText('WITHDRAW TRANSFER')}
@ -142,7 +153,8 @@ let EditionActionPanel = React.createClass({
expanded={false}>
<input
type="text"
value={edition.bitcoin_id} />
value={edition.bitcoin_id}
readOnly />
</Property>
<Button bsStyle="danger" className="btn-delete pull-center" bsSize="small" type="submit">
{getLangText('WITHDRAW CONSIGN')}
@ -164,7 +176,7 @@ let EditionActionPanel = React.createClass({
aim="button"
verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
aclObject={edition.acl}/>
</AclButtonList>
</ActionPanelButtonListType>
</Col>
</Row>
);

33
js/components/ascribe_detail/edition_container.js
View File

@ -1,6 +1,10 @@
'use strict';
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 EditionStore from '../../stores/edition_store';
@ -9,6 +13,7 @@ import Edition from './edition';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { setDocumentTitle } from '../../utils/dom_utils';
@ -17,10 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/
let EditionContainer = React.createClass({
propTypes: {
params: React.PropTypes.object,
location: React.PropTypes.object
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
params: React.PropTypes.object
},
mixins: [History, ReactError],
getInitialState() {
return EditionStore.getState();
},
@ -28,11 +36,11 @@ let EditionContainer = React.createClass({
componentDidMount() {
EditionStore.listen(this.onChange);
// Every time we enter the edition detail page, just reset the edition
// store as it will otherwise display wrong/old data once the user loads
// Every time we're entering the edition detail page,
// 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
EditionActions.updateEdition({});
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() {
window.clearInterval(this.state.timerId);
EditionStore.unlisten(this.onChange);
@ -67,14 +83,15 @@ let EditionContainer = React.createClass({
},
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(', '));
return (
<Edition
actionPanelButtonListType={this.props.actionPanelButtonListType}
furtherDetailsType={this.props.furtherDetailsType}
edition={this.state.edition}
loadEdition={this.loadEdition}
location={this.props.location}/>
loadEdition={this.loadEdition} />
);
} else {
return (

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

@ -23,8 +23,7 @@ let FurtherDetails = React.createClass({
pieceId: React.PropTypes.number,
extraData: React.PropTypes.object,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
handleSuccess: React.PropTypes.func,
location: React.PropTypes.object
handleSuccess: React.PropTypes.func
},
getInitialState() {
@ -86,8 +85,7 @@ let FurtherDetails = React.createClass({
overrideForm={true}
pieceId={this.props.pieceId}
otherData={this.props.otherData}
multiple={true}
location={this.props.location}/>
multiple={true} />
</Form>
</Col>
</Row>

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

@ -10,12 +10,15 @@ import ApiUrls from '../../constants/api_urls';
import AppConstants from '../../constants/application_constants';
import { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
const { func, bool, number, object, arrayOf } = React.PropTypes;
let FurtherDetailsFileuploader = React.createClass({
propTypes: {
label: string,
pieceId: number,
otherData: arrayOf(object),
editable: bool,
@ -31,6 +34,7 @@ let FurtherDetailsFileuploader = React.createClass({
getDefaultProps() {
return {
label: getLangText('Additional files'),
multiple: false
};
},
@ -60,7 +64,7 @@ let FurtherDetailsFileuploader = React.createClass({
return (
<Property
name="other_data_key"
label="Additional files">
label={this.props.label}>
<ReactS3FineUploader
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',

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

@ -20,7 +20,10 @@ let Piece = React.createClass({
subheader: React.PropTypes.object,
buttons: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.object
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
},

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

@ -4,6 +4,9 @@ import React from 'react';
import { History } from 'react-router';
import Moment from 'moment';
import ReactError from '../../mixins/react_error';
import { ResourceNotFoundError } from '../../models/errors';
import PieceActions from '../../actions/piece_actions';
import PieceStore from '../../stores/piece_store';
@ -50,11 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/
let PieceContainer = React.createClass({
propTypes: {
params: React.PropTypes.object,
location: React.PropTypes.object
furtherDetailsType: React.PropTypes.func,
params: React.PropTypes.object
},
mixins: [History],
mixins: [History, ReactError],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() {
return mergeOptions(
@ -70,15 +79,22 @@ let PieceContainer = React.createClass({
componentDidMount() {
UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PieceStore.listen(this.onChange);
// Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time
PieceActions.updatePiece({});
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() {
@ -103,7 +119,6 @@ let PieceContainer = React.createClass({
let pieceState = mergeOptions({}, state.piece);
pieceState.acl.acl_loan = false;
this.setState({
piece: pieceState
});
@ -197,7 +212,12 @@ let PieceContainer = React.createClass({
} else {
return (
<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')}>
<AclButtonList
className="ascribe-button-list"
@ -226,7 +246,8 @@ let PieceContainer = React.createClass({
},
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(', '));
return (
@ -252,7 +273,6 @@ let PieceContainer = React.createClass({
}
buttons={this.getActions()}>
{this.getCreateEditionsDialog()}
<CollapsibleParagraph
title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
@ -261,11 +281,14 @@ let PieceContainer = React.createClass({
</CollapsibleParagraph>
<CollapsibleParagraph
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
id={this.getId}
label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null}
show = {!!this.state.currentUser.username}
placeholder={getLangText('Enter your comments ...')}
editable={true}
successMessage={getLangText('Private note saved')}
@ -273,11 +296,12 @@ let PieceContainer = React.createClass({
currentUser={this.state.currentUser}/>
<Note
id={this.getId}
label={getLangText('Piece note (public)')}
label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null}
placeholder={getLangText('Enter your comments ...')}
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}
currentUser={this.state.currentUser}/>
</CollapsibleParagraph>
@ -287,13 +311,12 @@ let PieceContainer = React.createClass({
|| Object.keys(this.state.piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0}
defaultExpanded={true}>
<FurtherDetails
<FurtherDetailsType
editable={this.state.piece.acl.acl_edit}
pieceId={this.state.piece.id}
extraData={this.state.piece.extra_data}
otherData={this.state.piece.other_data}
handleSuccess={this.loadPiece}
location={this.props.location}/>
handleSuccess={this.loadPiece} />
</CollapsibleParagraph>
</Piece>

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

@ -20,9 +20,11 @@ import { getAclFormMessage, getAclFormDataId } from '../../utils/form_utils';
let AclFormFactory = React.createClass({
propTypes: {
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
currentUser: React.PropTypes.object.isRequired,
autoFocusProperty: React.PropTypes.string,
currentUser: React.PropTypes.object,
email: React.PropTypes.string,
message: React.PropTypes.string,
labels: React.PropTypes.object,
pieceOrEditions: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
@ -53,10 +55,12 @@ let AclFormFactory = React.createClass({
render() {
const {
action,
autoFocusProperty,
pieceOrEditions,
currentUser,
email,
message,
labels,
handleSuccess,
showNotification } = this.props;
@ -64,14 +68,16 @@ let AclFormFactory = React.createClass({
aclName: action,
entities: pieceOrEditions,
isPiece: this.isPiece(),
senderName: currentUser.username
senderName: currentUser && currentUser.username
});
if (action === 'acl_consign') {
return (
<ConsignForm
autoFocusProperty={autoFocusProperty}
email={email}
message={formMessage}
labels={labels}
id={this.getFormDataId()}
url={ApiUrls.ownership_consigns}
handleSuccess={showNotification ? this.showSuccessNotification : handleSuccess} />

15
js/components/ascribe_forms/form.js
View File

@ -124,8 +124,18 @@ let Form = React.createClass({
getFormData() {
let data = {};
for (let ref in this.refs) {
data[this.refs[ref].props.name] = this.refs[ref].state.value;
for (let refName in this.refs) {
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 && 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') {
@ -238,7 +248,6 @@ let Form = React.createClass({
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child, i) => {
if (child) {
// Since refs will be overwritten by this functions return statement,
// 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-

72
js/components/ascribe_forms/form_consign.js
View File

@ -6,31 +6,70 @@ import Button from 'react-bootstrap/lib/Button';
import Form from './form';
import Property from './property';
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
import InputTextAreaToggable from './input_textarea_toggable';
import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils.js';
import AclInformation from '../ascribe_buttons/acl_information';
import { getLangText } from '../../utils/lang_utils.js';
let ConsignForm = React.createClass({
propTypes: {
url: React.PropTypes.string,
id: React.PropTypes.object,
autoFocusProperty: React.PropTypes.string,
email: React.PropTypes.string,
message: React.PropTypes.string,
labels: React.PropTypes.object,
createPublicContractAgreement: React.PropTypes.bool,
handleSuccess: React.PropTypes.func
},
getFormData(){
getDefaultProps() {
return {
labels: {}
};
},
getInitialState() {
return {
email: this.props.email || ''
};
},
getFormData() {
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() {
const { email } = this.state;
const {
autoFocusProperty,
createPublicContractAgreement,
email: defaultEmail,
handleSuccess,
id,
message,
labels,
url } = this.props;
return (
<Form
ref='form'
url={this.props.url}
url={url}
getFormData={this.getFormData}
handleSuccess={this.props.handleSuccess}
handleSuccess={handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
@ -49,24 +88,39 @@ let ConsignForm = React.createClass({
</div>}>
<AclInformation aim={'form'} verbs={['acl_consign']}/>
<Property
autoFocus={autoFocusProperty === 'email'}
name='consignee'
label={getLangText('Email')}>
label={labels.email || getLangText('Email')}
editable={!defaultEmail}
onChange={this.handleEmailOnChange}
overrideForm={!!defaultEmail}>
<input
type="email"
value={email}
placeholder={getLangText('Email of the consignee')}
required/>
</Property>
<Property
autoFocus={autoFocusProperty === 'message'}
name='consign_message'
label={getLangText('Personal Message')}
editable={true}
overrideForm={true}>
label={labels.message || getLangText('Personal Message')}
editable
overrideForm>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.message}
defaultValue={message}
placeholder={getLangText('Enter a message...')}
required />
</Property>
<Property
name='contract_agreement'
label={getLangText('Consign Contract')}
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputContractAgreementCheckbox
createPublicContractAgreement={createPublicContractAgreement}
email={email} />
</Property>
<Property
name='password'
label={getLangText('Password')}>

248
js/components/ascribe_forms/form_loan.js
View File

@ -1,33 +1,34 @@
'use strict';
import React from 'react';
import classnames from 'classnames';
import Button from 'react-bootstrap/lib/Button';
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
import Form from './form';
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 ContractAgreementListActions from '../../actions/contract_agreement_list_actions';
import InputDate from './input_date';
import InputTextAreaToggable from './input_textarea_toggable';
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
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 { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let LoanForm = React.createClass({
propTypes: {
loanHeading: React.PropTypes.string,
email: React.PropTypes.string,
gallery: React.PropTypes.string,
startdate: React.PropTypes.object,
enddate: React.PropTypes.object,
startDate: React.PropTypes.object,
endDate: React.PropTypes.object,
showPersonalMessage: React.PropTypes.bool,
showEndDate: React.PropTypes.bool,
showStartDate: React.PropTypes.bool,
@ -36,7 +37,11 @@ let LoanForm = React.createClass({
id: React.PropTypes.object,
message: React.PropTypes.string,
createPublicContractAgreement: React.PropTypes.bool,
handleSuccess: React.PropTypes.func
handleSuccess: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
])
},
getDefaultProps() {
@ -45,148 +50,33 @@ let LoanForm = React.createClass({
showPersonalMessage: true,
showEndDate: true,
showStartDate: true,
showPassword: true,
createPublicContractAgreement: true
showPassword: true
};
},
getInitialState() {
return ContractAgreementListStore.getState();
},
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);
return {
email: this.props.email || ''
};
},
onChange(state) {
this.setState(state);
},
getContractAgreementsOrCreatePublic(email){
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) {
handleEmailOnChange(event) {
// event.target.value is the submitted email of the loanee
if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) {
this.getContractAgreementsOrCreatePublic(event.target.value);
} else {
ContractAgreementListActions.flushContractAgreementList();
}
this.setState({
email: event && event.target && event.target.value || ''
});
},
getContractAgreementId() {
if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
return {'contract_agreement_id': this.state.contractAgreementList[0].id};
}
return {};
handleReset() {
this.handleEmailOnChange();
},
getContractCheckbox() {
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) {
// 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')}&nbsp;
<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;
getFormData() {
return this.props.id;
},
getButtons() {
@ -214,14 +104,31 @@ let LoanForm = React.createClass({
},
render() {
const { email } = this.state;
const {
children,
createPublicContractAgreement,
email: defaultEmail,
handleSuccess,
gallery,
loanHeading,
message,
showPersonalMessage,
endDate,
startDate,
showEndDate,
showStartDate,
showPassword,
url } = this.props;
return (
<Form
className={classnames({'ascribe-form-bordered': this.props.loanHeading})}
className={classnames({'ascribe-form-bordered': loanHeading})}
ref='form'
url={this.props.url}
url={url}
getFormData={this.getFormData}
onReset={this.handleOnChange}
handleSuccess={this.props.handleSuccess}
onReset={this.handleReset}
handleSuccess={handleSuccess}
buttons={this.getButtons()}
spinner={
<div className="modal-footer">
@ -229,18 +136,18 @@ let LoanForm = React.createClass({
<AscribeSpinner color='dark-blue' size='md'/>
</p>
</div>}>
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
<h3>{this.props.loanHeading}</h3>
<div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
<h3>{loanHeading}</h3>
</div>
<AclInformation aim={'form'} verbs={['acl_loan']}/>
<Property
name='loanee'
label={getLangText('Loanee Email')}
editable={!this.props.email}
onChange={this.handleOnChange}
overrideForm={!!this.props.email}>
editable={!defaultEmail}
onChange={this.handleEmailOnChange}
overrideForm={!!defaultEmail}>
<input
value={this.props.email}
value={email}
type="email"
placeholder={getLangText('Email of the loanee')}
required/>
@ -248,31 +155,31 @@ let LoanForm = React.createClass({
<Property
name='gallery'
label={getLangText('Gallery/exhibition (optional)')}
editable={!this.props.gallery}
overrideForm={!!this.props.gallery}>
editable={!gallery}
overrideForm={!!gallery}>
<input
value={this.props.gallery}
value={gallery}
type="text"
placeholder={getLangText('Gallery/exhibition (optional)')}/>
</Property>
<Property
name='startdate'
label={getLangText('Start date')}
editable={!this.props.startdate}
overrideForm={!!this.props.startdate}
expanded={this.props.showStartDate}>
editable={!startDate}
overrideForm={!!startDate}
expanded={showStartDate}>
<InputDate
defaultValue={this.props.startdate}
defaultValue={startDate}
placeholderText={getLangText('Loan start date')} />
</Property>
<Property
name='enddate'
editable={!this.props.enddate}
overrideForm={!!this.props.enddate}
editable={!endDate}
overrideForm={!!endDate}
label={getLangText('End date')}
expanded={this.props.showEndDate}>
expanded={showEndDate}>
<InputDate
defaultValue={this.props.enddate}
defaultValue={endDate}
placeholderText={getLangText('Loan end date')} />
</Property>
<Property
@ -280,25 +187,32 @@ let LoanForm = React.createClass({
label={getLangText('Personal Message')}
editable={true}
overrideForm={true}
expanded={this.props.showPersonalMessage}>
expanded={showPersonalMessage}>
<InputTextAreaToggable
rows={1}
defaultValue={this.props.message}
defaultValue={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>
{this.getContractCheckbox()}
{this.getAppendix()}
<Property
name='password'
label={getLangText('Password')}
expanded={this.props.showPassword}>
expanded={showPassword}>
<input
type="password"
placeholder={getLangText('Enter your password')}
required={this.props.showPassword ? 'required' : ''}/>
required={showPassword}/>
</Property>
{this.props.children}
{children}
</Form>
);
}

4
js/components/ascribe_forms/form_loan_request_answer.js
View File

@ -65,8 +65,8 @@ let LoanRequestAnswerForm = React.createClass({
url={this.props.url}
email={this.state.loanRequest ? this.state.loanRequest.new_owner : null}
gallery={this.state.loanRequest ? this.state.loanRequest.gallery : null}
startdate={startDate}
enddate={endDate}
startDate={startDate}
endDate={endDate}
showPassword={true}
showPersonalMessage={false}
handleSuccess={this.props.handleSuccess}/>

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

@ -31,7 +31,7 @@ let RegisterPieceForm = React.createClass({
isFineUploaderActive: React.PropTypes.bool,
isFineUploaderEditable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool,
onLoggedOut: React.PropTypes.func,
enableSeparateThumbnail: React.PropTypes.bool,
// For this form to work with SlideContainer, we sometimes have to disable it
disabled: React.PropTypes.bool,
@ -46,7 +46,8 @@ let RegisterPieceForm = React.createClass({
return {
headerMessage: getLangText('Register your work'),
submitMessage: getLangText('Register work'),
enableLocalHashing: true
enableLocalHashing: true,
enableSeparateThumbnail: true
};
},
@ -89,6 +90,11 @@ let RegisterPieceForm = React.createClass({
if (digitalWorkFile &&
(digitalWorkFile.status === FileStatus.DELETED || digitalWorkFile.status === FileStatus.CANCELED)) {
this.refs.form.refs.thumbnail_file.reset();
// Manually we need to set the ready state for `thumbnailKeyReady` back
// to `true` as `ReactS3Fineuploader`'s `reset` method triggers
// `setIsUploadReady` with `false`
this.refs.submitButton.setReadyStateForKey('thumbnailKeyReady', true);
this.setState({ digitalWorkFile: null });
} else {
this.setState({ digitalWorkFile });
@ -99,13 +105,18 @@ let RegisterPieceForm = React.createClass({
const { digitalWorkFile } = this.state;
const { fineuploader } = this.refs.digitalWorkFineUploader.refs;
fineuploader.setThumbnailForFileId(digitalWorkFile.id, thumbnailFile.url);
fineuploader.setThumbnailForFileId(
digitalWorkFile.id,
// if thumbnail was deleted, we delete it from the display as well
thumbnailFile.status !== FileStatus.DELETED ? thumbnailFile.url : null
);
},
isThumbnailDialogExpanded() {
const { enableSeparateThumbnail } = this.props;
const { digitalWorkFile } = this.state;
if(digitalWorkFile) {
if(digitalWorkFile && enableSeparateThumbnail) {
const { type: mimeType } = digitalWorkFile;
const mimeSubType = mimeType && mimeType.split('/').length ? mimeType.split('/')[1]
: 'unknown';
@ -121,7 +132,6 @@ let RegisterPieceForm = React.createClass({
submitMessage,
headerMessage,
isFineUploaderActive,
onLoggedOut,
isFineUploaderEditable,
location,
children,
@ -172,7 +182,6 @@ let RegisterPieceForm = React.createClass({
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isFineUploaderActive={isFineUploaderActive}
onLoggedOut={onLoggedOut}
disabled={!isFineUploaderEditable}
enableLocalHashing={hashLocally}
uploadMethod={location.query.method}
@ -189,7 +198,7 @@ let RegisterPieceForm = React.createClass({
url: ApiUrls.blob_thumbnails
}}
handleChangedFile={this.handleChangedThumbnail}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
keyRoutine={{
url: AppConstants.serverUrl + 's3/key/',
fileClass: 'thumbnail'
@ -203,7 +212,9 @@ let RegisterPieceForm = React.createClass({
fileClassToUpload={{
singular: getLangText('Select representative image'),
plural: getLangText('Select representative images')
}} />
}}
isFineUploaderActive={isFineUploaderActive}
disabled={!isFineUploaderEditable} />
</Property>
<Property
name='artist_name'

6
js/components/ascribe_forms/form_contract_agreement.js → js/components/ascribe_forms/form_send_contract_agreement.js
View File

@ -20,7 +20,7 @@ import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let ContractAgreementForm = React.createClass({
let SendContractAgreementForm = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func
},
@ -54,7 +54,7 @@ let ContractAgreementForm = React.createClass({
},
handleSubmitSuccess() {
let notification = 'Contract agreement send';
let notification = 'Contract agreement sent';
notification = new GlobalNotificationModel(notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
@ -148,4 +148,4 @@ let ContractAgreementForm = React.createClass({
}
});
export default ContractAgreementForm;
export default SendContractAgreementForm;

2
js/components/ascribe_forms/form_unconsign_request.js
View File

@ -57,7 +57,7 @@ let UnConsignRequestForm = React.createClass({
rows={1}
defaultValue={this.props.message}
placeholder={getLangText('Enter a message...')}
required="required"/>
required />
</Property>
<hr />
</Form>

206
js/components/ascribe_forms/input_contract_agreement_checkbox.js Normal file
View 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')}&nbsp;
<a href={contractUrl} target="_blank">
{getLangText('terms of ')} {contractIssuer}
</a>
</span>
</InputCheckbox>
);
}
}
},
render() {
return (
<div>
{this.getContractCheckbox()}
{this.getAppendix()}
</div>
);
}
});
export default InputContractAgreementCheckbox;

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

@ -18,10 +18,10 @@ const InputFineUploader = React.createClass({
// a user is actually not logged in already to prevent him from droping files
// before login in
isFineUploaderActive: bool,
onLoggedOut: func,
// provided by Property
disabled: bool,
onChange: func,
// Props for ReactS3FineUploader
areAssetsDownloadable: bool,
@ -110,22 +110,22 @@ const InputFineUploader = React.createClass({
},
render() {
const { fileInputElement,
keyRoutine,
createBlobRoutine,
validation,
setIsUploadReady,
isReadyForFormSubmission,
isFineUploaderActive,
const {
areAssetsDownloadable,
onLoggedOut,
createBlobRoutine,
enableLocalHashing,
disabled,
fileClassToUpload,
uploadMethod,
fileInputElement,
handleChangedFile,
isFineUploaderActive,
isReadyForFormSubmission,
keyRoutine,
setIsUploadReady,
setWarning,
showErrorPrompt,
disabled } = this.props;
uploadMethod,
validation } = this.props;
let editable = isFineUploaderActive;
// if disabled is actually set by property, we want to override
@ -162,7 +162,6 @@ const InputFineUploader = React.createClass({
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
onInactive={onLoggedOut}
enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload}

6
js/components/ascribe_forms/input_textarea_toggable.js
View File

@ -7,6 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
let InputTextAreaToggable = React.createClass({
propTypes: {
autoFocus: React.PropTypes.bool,
disabled: React.PropTypes.bool,
rows: React.PropTypes.number.isRequired,
required: React.PropTypes.bool,
@ -23,6 +24,10 @@ let InputTextAreaToggable = React.createClass({
},
componentDidMount() {
if (this.props.autoFocus) {
this.refs.textarea.focus();
}
this.setState({
value: this.props.defaultValue
});
@ -51,6 +56,7 @@ let InputTextAreaToggable = React.createClass({
className = className + ' ascribe-textarea-editable';
textarea = (
<TextareaAutosize
ref='textarea'
className={className}
value={this.state.value}
rows={this.props.rows}

2
js/components/ascribe_forms/list_form_request_actions.js
View File

@ -10,7 +10,7 @@ let ListRequestActions = React.createClass({
React.PropTypes.object,
React.PropTypes.array
]).isRequired,
currentUser: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func.isRequired,
notifications: React.PropTypes.array.isRequired
},

44
js/components/ascribe_forms/property.js
View File

@ -42,7 +42,8 @@ const Property = React.createClass({
]),
style: object,
expanded: bool,
checkboxLabel: string
checkboxLabel: string,
autoFocus: bool
},
getDefaultProps() {
@ -76,16 +77,24 @@ const Property = React.createClass({
};
},
componentDidMount() {
if(this.props.autoFocus) {
this.handleFocus();
}
},
componentWillReceiveProps(nextProps) {
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`)
// 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.
if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
// This handles case 1. and 3.
if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
this.setState({ expanded: nextProps.expanded });
}
@ -230,12 +239,19 @@ const Property = React.createClass({
}
},
setExpanded(expanded) {
this.setState({ expanded });
},
handleCheckboxToggle() {
this.setExpanded(!this.state.expanded);
},
renderChildren(style) {
// Input's props should only be cloned and propagated down the tree,
// if the component is actually being shown (!== 'expanded === false')
if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
return ReactAddons.Children.map(this.props.children, (child) => {
// Since refs will be overriden by this functions return statement,
// 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-
@ -252,7 +268,8 @@ const Property = React.createClass({
setWarning: this.setWarning,
disabled: !this.props.editable,
ref: 'input',
name: this.props.name
name: this.props.name,
setExpanded: this.setExpanded
});
});
}
@ -271,10 +288,6 @@ const Property = React.createClass({
}
},
handleCheckboxToggle() {
this.setState({expanded: !this.state.expanded});
},
getCheckbox() {
const { checkboxLabel } = this.props;
@ -298,23 +311,20 @@ const Property = React.createClass({
render() {
let footer = null;
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
if(this.props.footer){
footer = (
<div className="ascribe-property-footer">
{this.props.footer}
</div>);
</div>
);
}
style.paddingBottom = !this.state.expanded ? 0 : null;
style.cursor = !this.props.editable ? 'not-allowed' : null;
return (
<div
className={'ascribe-property-wrapper ' + this.getClassName()}
onClick={this.handleFocus}
style={style}>
style={this.props.style}>
{this.getCheckbox()}
<Panel
collapsible
@ -322,7 +332,7 @@ const Property = React.createClass({
className="bs-custom-panel">
<div className={'ascribe-property ' + this.props.className}>
{this.getLabelAndErrors()}
{this.renderChildren(style)}
{this.renderChildren(this.props.style)}
{footer}
</div>
</Panel>

102
js/components/ascribe_piece_list_bulk_modal/piece_list_bulk_modal.js
View File

@ -4,77 +4,24 @@ import React from 'react';
import { mergeOptions } from '../../utils/general_utils';
import EditionListStore from '../../stores/edition_list_store';
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 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';
let PieceListBulkModal = React.createClass({
propTypes: {
className: React.PropTypes.string
},
getInitialState() {
return mergeOptions(
EditionListStore.getState(),
UserStore.getState(),
PieceListStore.getState()
);
},
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;
availableAcls: React.PropTypes.object.isRequired,
className: React.PropTypes.string,
selectedEditions: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
]),
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
},
clearAllSelections() {
@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
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() {
let selectedEditions = this.fetchSelectedEditionList();
let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
if(Object.keys(availableAcls).length > 0) {
if (Object.keys(this.props.availableAcls).length) {
return (
<div className={this.props.className}>
<div className="row no-margin">
@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
<div className="row">
<div className="text-center">
<PieceListBulkModalSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} />
numberOfSelectedEditions={this.props.selectedEditions.length} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span
className="piece-list-bulk-modal-clear-all"
@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
</div>
<p></p>
<div className="row-fluid">
<AclButtonList
availableAcls={availableAcls}
pieceOrEditions={selectedEditions}
handleSuccess={this.handleSuccess}
className="text-center ascribe-button-list collapse-group">
<DeleteButton
handleSuccess={this.handleSuccess}
editions={selectedEditions}/>
</AclButtonList>
{this.props.children}
</div>
</div>
</div>
@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
} else {
return null;
}
}
});

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

@ -28,7 +28,7 @@ let PieceListToolbarFilterWidget = React.createClass({
},
generateFilterByStatement(param) {
let filterBy = this.props.filterBy;
const filterBy = Object.assign({}, this.props.filterBy);
if(filterBy) {
// we need hasOwnProperty since the values are all booleans
@ -56,13 +56,13 @@ let PieceListToolbarFilterWidget = React.createClass({
*/
filterBy(param) {
return () => {
let filterBy = this.generateFilterByStatement(param);
const filterBy = this.generateFilterByStatement(param);
this.props.applyFilterBy(filterBy);
};
},
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,
// the surrounding button is not resized up on appearance
@ -74,7 +74,7 @@ let PieceListToolbarFilterWidget = React.createClass({
},
render() {
let filterIcon = (
const filterIcon = (
<span>
<span className="ascribe-icon icon-ascribe-filter" aria-hidden="true"></span>
<span style={this.isFilterActive()}>*</span>

6
js/components/ascribe_routes/proxy_routes/auth_proxy_handler.js
View File

@ -1,7 +1,7 @@
'use strict';
import React from 'react';
import { History } from 'react-router';
import { History, RouteContext } from 'react-router';
import UserStore from '../../../stores/user_store';
import UserActions from '../../../actions/user_actions';
@ -37,7 +37,9 @@ export default function AuthProxyHandler({to, when}) {
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() {
return UserStore.getState();

2
js/components/ascribe_settings/settings_container.js
View File

@ -11,6 +11,7 @@ import WhitelabelActions from '../../actions/whitelabel_actions';
import AccountSettings from './account_settings';
import BitcoinWalletSettings from './bitcoin_wallet_settings';
import APISettings from './api_settings';
import WebhookSettings from './webhook_settings';
import AclProxy from '../acl_proxy';
@ -70,6 +71,7 @@ let SettingsContainer = React.createClass({
aclName="acl_view_settings_api">
<APISettings />
</AclProxy>
<WebhookSettings />
<AclProxy
aclObject={this.state.whitelabel}
aclName="acl_view_settings_bitcoin">

165
js/components/ascribe_settings/webhook_settings.js Normal file
View 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;

14
js/components/ascribe_slides_container/slides_container.js
View File

@ -1,7 +1,7 @@
'use strict';
import React from 'react/addons';
import { History } from 'react-router';
import { History, Lifecycle } from 'react-router';
import SlidesContainerBreadcrumbs from './slides_container_breadcrumbs';
@ -17,14 +17,16 @@ const SlidesContainer = React.createClass({
pending: string,
complete: string
}),
location: object
location: object,
pageExitWarning: string
},
mixins: [History],
mixins: [History, Lifecycle],
getInitialState() {
return {
containerWidth: 0
containerWidth: 0,
pageExitWarning: null
};
},
@ -41,6 +43,10 @@ const SlidesContainer = React.createClass({
window.removeEventListener('resize', this.handleContainerResize);
},
routerWillLeave() {
return this.props.pageExitWarning;
},
handleContainerResize() {
this.setState({
// +30 to get rid of the padding of the container which is 15px + 15px left and right

16
js/components/ascribe_social_share/facebook_share_button.js
View File

@ -8,7 +8,6 @@ import { InjectInHeadUtils } from '../../utils/inject_utils';
let FacebookShareButton = React.createClass({
propTypes: {
url: 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
* (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);
} else {
// Parse() searches the children of the element we give it, not the element itself.
FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement);
}
InjectInHeadUtils
.inject(AppConstants.facebook.sdkUrl)
.then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
},
shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
},
render() {
@ -41,7 +42,6 @@ let FacebookShareButton = React.createClass({
<span
ref="fbShareButton"
className="fb-share-button btn btn-ascribe-social"
data-href={this.props.url}
data-layout={this.props.type}>
</span>
);

18
js/components/ascribe_spinner.js
View File

@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
propTypes: {
classNames: React.PropTypes.string,
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() {
return {
inline: false,
size: 'md',
color: 'loop'
size: 'md'
};
},
render() {
const { classNames: classes, color, size } = this.props;
return (
<div
className={
classNames('spinner-wrapper-' + this.props.size,
'spinner-wrapper-' + this.props.color,
this.props.classNames)}>
<div className={classNames('spinner-circle')}></div>
<div className={classNames('spinner-inner')}>A</div>
className={classNames('spinner-wrapper-' + size,
color ? 'spinner-wrapper-' + color : null,
classes)}>
<div className='spinner-circle' />
<div className='spinner-inner'>A</div>
</div>
);
}

28
js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
View File

@ -23,7 +23,6 @@ let FileDragAndDrop = React.createClass({
onDrop: React.PropTypes.func.isRequired,
onDragOver: React.PropTypes.func,
onInactive: React.PropTypes.func,
handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func,
handlePauseFile: React.PropTypes.func,
@ -70,16 +69,9 @@ let FileDragAndDrop = React.createClass({
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
let files;
if(this.props.dropzoneInactive) {
// if there is a handle function for doing stuff
// when the dropzone is inactive, then call it
if(this.props.onInactive) {
this.props.onInactive();
}
return;
}
if (!this.props.dropzoneInactive) {
let files;
// handle Drag and Drop
if(event.dataTransfer && event.dataTransfer.files.length > 0) {
@ -91,7 +83,7 @@ let FileDragAndDrop = React.createClass({
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
}
},
handleDeleteFile(fileId) {
@ -123,17 +115,10 @@ let FileDragAndDrop = React.createClass({
},
handleOnClick() {
// do not propagate event if the drop zone's inactive,
// for example when multiple is set to false and the user already uploaded a piece
if (!this.props.dropzoneInactive) {
let evt;
// when multiple is set to false and the user already uploaded a piece,
// do not propagate event
if(this.props.dropzoneInactive) {
// if there is a handle function for doing stuff
// when the dropzone is inactive, then call it
if(this.props.onInactive) {
this.props.onInactive();
}
return;
}
try {
evt = new MouseEvent('click', {
@ -148,6 +133,7 @@ let FileDragAndDrop = React.createClass({
}
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
}
},
getErrorDialog(failedFiles) {

83
js/components/ascribe_uploader/ascribe_upload_button/upload_button.js
View File

@ -32,6 +32,20 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
handleDeleteFile: func
},
getInitialState() {
return {
disabled: this.getUploadingFiles().length !== 0
};
},
componentWillReceiveProps(nextProps) {
if(this.props.filesToUpload !== nextProps.filesToUpload) {
this.setState({
disabled: this.getUploadingFiles(nextProps.filesToUpload).length !== 0
});
}
},
handleDrop(event) {
event.preventDefault();
event.stopPropagation();
@ -42,43 +56,62 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
}
},
getUploadingFiles() {
return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
getUploadingFiles(filesToUpload = this.props.filesToUpload) {
return filesToUpload.filter((file) => file.status === FileStatus.UPLOADING);
},
getUploadedFile() {
return this.props.filesToUpload.filter((file) => file.status === FileStatus.UPLOAD_SUCESSFUL)[0];
},
clearSelection() {
this.refs.fileSelector.getDOMNode().value = '';
},
handleOnClick() {
if(!this.state.disabled) {
let evt;
const uploadingFiles = this.getUploadingFiles();
const uploadedFile = this.getUploadedFile();
if(uploadedFile) {
this.clearSelection();
if(uploadingFiles.length) {
this.props.handleCancelFile(uploadingFiles[0].id);
} else if(uploadedFile && !uploadedFile.s3UrlSafe) {
this.props.handleCancelFile(uploadedFile.id);
} else if(uploadedFile && uploadedFile.s3UrlSafe) {
this.props.handleDeleteFile(uploadedFile.id);
}
if(uploadingFiles.length === 0) {
// We only want the button to be clickable if there are no files currently uploading
// Firefox only recognizes the simulated mouse click if bubbles is set to true,
// but since Google Chrome propagates the event much further than needed, we
// need to stop propagation as soon as the event is created
var evt = new MouseEvent('click', {
try {
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);
}
evt.stopPropagation();
this.refs.fileinput.getDOMNode().dispatchEvent(evt);
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
}
},
onClickCancel() {
this.clearSelection();
const uploadingFile = this.getUploadingFiles()[0];
this.props.handleCancelFile(uploadingFile.id);
},
onClickRemove() {
this.clearSelection();
const uploadedFile = this.getUploadedFile();
this.props.handleDeleteFile(uploadedFile.id);
},
getButtonLabel() {
let { filesToUpload, fileClassToUpload } = this.props;
@ -94,8 +127,16 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
getUploadedFileLabel() {
const uploadedFile = this.getUploadedFile();
const uploadingFiles = this.getUploadingFiles();
if(uploadedFile) {
if(uploadingFiles.length) {
return (
<span>
{' ' + truncateTextAtCharIndex(uploadingFiles[0].name, 40) + ' '}
[<a onClick={this.onClickCancel}>{getLangText('cancel upload')}</a>]
</span>
);
} else if(uploadedFile) {
return (
<span>
<span className='ascribe-icon icon-ascribe-ok'/>
@ -111,8 +152,11 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
},
render() {
let { multiple,
const {
multiple,
allowedExtensions } = this.props;
const { disabled } = this.state;
/*
* We do not want a button that submits here.
@ -122,14 +166,19 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
*/
return (
<div className="upload-button-wrapper">
<a
{/*
The button needs to be of `type="button"` as it would
otherwise submit the form its in.
*/}
<button
type="button"
onClick={this.handleOnClick}
className={className}
disabled={this.getUploadingFiles().length !== 0}>
disabled={disabled}>
{this.getButtonLabel()}
<input
multiple={multiple}
ref="fileinput"
ref="fileSelector"
type="file"
style={{
display: 'none',
@ -138,7 +187,7 @@ export default function UploadButton({ className = 'btn btn-default btn-sm' } =
}}
onChange={this.handleDrop}
accept={allowedExtensions}/>
</a>
</button>
{this.getUploadedFileLabel()}
</div>
);

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

@ -47,7 +47,6 @@ const ReactS3FineUploader = React.createClass({
handleChangedFile: func, // for when a file is dropped or selected, TODO: rename to onChangedFile
submitFile: func, // for when a file has been successfully uploaded, TODO: rename to onSubmitFile
onInactive: func, // for when the user does something while the uploader's inactive
// Handle form validation
setIsUploadReady: func, //TODO: rename to setIsUploaderValidated
@ -317,7 +316,7 @@ const ReactS3FineUploader = React.createClass({
// Cancel uploads and clear previously selected files on the input element
cancelUploads(id) {
!!id ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
typeof id !== 'undefined' ? this.state.uploader.cancel(id) : this.state.uploader.cancelAll();
// Reset the file input element to clear the previously selected files so that
// the user can reselect them again.
@ -425,11 +424,13 @@ const ReactS3FineUploader = React.createClass({
if(fileId < filesToUpload.length) {
const changeSet = { $set: url };
const newFilesToUpload = React.addons.update(filesToUpload, { [fileId]: { thumbnailUrl: changeSet } });
const newFilesToUpload = React.addons.update(filesToUpload, {
[fileId]: { thumbnailUrl: changeSet }
});
this.setState({ filesToUpload: newFilesToUpload });
} else {
throw new Error("You're accessing an index out of range of filesToUpload");
throw new Error('Accessing an index out of range of filesToUpload');
}
},
@ -1052,13 +1053,12 @@ const ReactS3FineUploader = React.createClass({
render() {
const { errorState: { errorClass }, filesToUpload, uploadInProgress } = this.state;
const {
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
fileClassToUpload,
fileInputElement: FileInputElement,
multiple,
showErrorPrompt,
uploadMethod } = this.props;
@ -1069,7 +1069,6 @@ const ReactS3FineUploader = React.createClass({
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
uploadMethod,
fileClassToUpload,

36
js/components/contract_notification.js
View File

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

12
js/components/error_not_found_page.js
View File

@ -6,6 +6,16 @@ import { getLangText } from '../utils/lang_utils';
let ErrorNotFoundPage = React.createClass({
propTypes: {
message: React.PropTypes.string
},
getDefaultProps() {
return {
message: getLangText("Oops, the page you are looking for doesn't exist.")
};
},
render() {
return (
<div className="row">
@ -13,7 +23,7 @@ let ErrorNotFoundPage = React.createClass({
<div className="error-wrapper">
<h1>404</h1>
<p>
{getLangText('Ups, the page you are looking for does not exist.')}
{this.props.message}
</p>
</div>
</div>

1
js/components/footer.js
View File

@ -11,6 +11,7 @@ let Footer = React.createClass({
<p className="ascribe-sub-sub-statement">
<br />
<a href="http://docs.ascribe.apiary.io/" target="_blank">api</a> |
<a href="https://www.ascribe.io/faq/" target="_blank"> {getLangText('faq')}</a> |
<a href="https://www.ascribe.io/imprint/" target="_blank"> {getLangText('imprint')}</a> |
<a href="https://www.ascribe.io/terms/" target="_blank"> {getLangText('terms of service')}</a> |
<a href="https://www.ascribe.io/privacy/" target="_blank"> {getLangText('privacy')}</a>

97
js/components/global_notification.js
View File

@ -1,7 +1,9 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
import GlobalNotificationActions from '../actions/global_notification_actions';
import GlobalNotificationStore from '../stores/global_notification_store';
import Row from 'react-bootstrap/lib/Row';
@ -9,14 +11,18 @@ import Col from 'react-bootstrap/lib/Col';
import { mergeOptions } from '../utils/general_utils';
const MAX_NOTIFICATION_BUBBLE_CONTAINER_WIDTH = 768;
let GlobalNotification = React.createClass({
getInitialState() {
const notificationStore = GlobalNotificationStore.getState();
return mergeOptions(
{
containerWidth: 0
},
this.extractFirstElem(GlobalNotificationStore.getState().notificationQue)
notificationStore
);
},
@ -36,35 +42,8 @@ let GlobalNotification = React.createClass({
window.removeEventListener('resize', this.handleContainerResize);
},
extractFirstElem(l) {
if(l.length > 0) {
return {
show: true,
message: l[0]
};
} else {
return {
show: false,
message: ''
};
}
},
onChange(state) {
let notification = this.extractFirstElem(state.notificationQue);
// error handling for notifications
if(notification.message && notification.type === 'danger') {
console.logGlobal(new Error(notification.message.message));
}
if(notification.show) {
this.setState(notification);
} else {
this.setState({
show: false
});
}
this.setState(state);
},
handleContainerResize() {
@ -73,32 +52,31 @@ let GlobalNotification = React.createClass({
});
},
render() {
let notificationClass = 'ascribe-global-notification';
renderNotification() {
const {
notificationQueue: [notification],
notificationStatus,
notificationsPaused,
containerWidth } = this.state;
const notificationClasses = [];
if (this.state.containerWidth > 768) {
notificationClasses.push('ascribe-global-notification-bubble');
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-bubble-on'
: 'ascribe-global-notification-bubble-off');
} else {
notificationClasses.push('ascribe-global-notification');
notificationClasses.push(notificationStatus === 'show' ? 'ascribe-global-notification-on'
: 'ascribe-global-notification-off');
}
let textClass;
let message;
if (notification && !notificationsPaused) {
message = notification.message;
if(this.state.containerWidth > 768) {
notificationClass = 'ascribe-global-notification-bubble';
if(this.state.show) {
notificationClass += ' ascribe-global-notification-bubble-on';
} else {
notificationClass += ' ascribe-global-notification-bubble-off';
}
} else {
notificationClass = 'ascribe-global-notification';
if(this.state.show) {
notificationClass += ' ascribe-global-notification-on';
} else {
notificationClass += ' ascribe-global-notification-off';
}
}
if(this.state.message) {
switch(this.state.message.type) {
switch(notification.type) {
case 'success':
textClass = 'ascribe-global-notification-success';
break;
@ -106,18 +84,23 @@ let GlobalNotification = React.createClass({
textClass = 'ascribe-global-notification-danger';
break;
default:
console.warn('Could not find a matching type in global_notification.js');
console.warn('Could not find a matching notification type in global_notification.js');
}
}
return (
<div className={classNames(...notificationClasses)}>
<div className={textClass}>{message}</div>
</div>
);
},
render() {
return (
<div ref="notificationWrapper">
<Row>
<Col>
<div className={notificationClass}>
<div className={textClass}>{this.state.message.message}</div>
</div>
{this.renderNotification()}
</Col>
</Row>
</div>

22
js/components/header.js
View File

@ -1,9 +1,10 @@
'use strict';
import React from 'react';
import { Link } from 'react-router';
import history from '../history';
import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar';
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@ -58,11 +59,17 @@ let Header = React.createClass({
UserStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel();
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() {
UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
//history.unlisten(this.onRouteChange);
},
getLogo() {
@ -135,6 +142,13 @@ let Header = React.createClass({
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() {
let account;
let signup;
@ -201,8 +215,10 @@ let Header = React.createClass({
<Navbar
brand={this.getLogo()}
toggleNavKey={0}
fixedTop={true}>
<CollapsibleNav eventKey={0}>
fixedTop={true}
ref="navbar">
<CollapsibleNav
eventKey={0}>
<Nav navbar left>
{this.getPoweredBy()}
</Nav>

175
js/components/piece_list.js
View File

@ -13,6 +13,9 @@ import AccordionList from './ascribe_accordion_list/accordion_list';
import AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
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 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 { 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 { setDocumentTitle } from '../utils/dom_utils';
@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
let PieceList = React.createClass({
propTypes: {
accordionListItemType: React.PropTypes.func,
bulkModalButtonListType: React.PropTypes.func,
canLoadPieceList: React.PropTypes.bool,
redirectTo: React.PropTypes.string,
customSubmitButton: React.PropTypes.element,
customThumbnailPlaceholder: React.PropTypes.func,
filterParams: React.PropTypes.array,
orderParams: React.PropTypes.array,
orderBy: React.PropTypes.string,
@ -43,6 +50,8 @@ let PieceList = React.createClass({
getDefaultProps() {
return {
accordionListItemType: AccordionListItemWallet,
bulkModalButtonListType: AclButtonList,
canLoadPieceList: true,
orderParams: ['artist_name', 'title'],
filterParams: [{
label: getLangText('Show works I can'),
@ -54,23 +63,53 @@ let PieceList = React.createClass({
}]
};
},
getInitialState() {
return mergeOptions(
PieceListStore.getState(),
EditionListStore.getState()
const pieceListStore = PieceListStore.getState();
const stores = mergeOptions(
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() {
let page = this.props.location.query.page || 1;
PieceListStore.listen(this.onChange);
EditionListStore.listen(this.onChange);
let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy;
if (this.state.pieceList.length === 0 || this.state.page !== page){
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
orderBy, this.state.orderAsc, this.state.filterBy);
let page = this.props.location.query.page || 1;
if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
this.loadPieceList({ page });
}
},
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);
},
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) {
return () => {
// if the users clicks a pager of the pagination,
// the site should go to the top
document.body.scrollTop = document.documentElement.scrollTop = 0;
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc,
this.state.filterBy);
this.loadPieceList({ page });
};
},
@ -116,15 +170,21 @@ let PieceList = React.createClass({
},
searchFor(searchTerm) {
PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy,
this.state.orderAsc, this.state.filterBy);
this.loadPieceList({
page: 1,
search: searchTerm
});
this.history.pushState(null, this.props.location.pathname, {page: 1});
},
applyFilterBy(filterBy){
this.setState({
isFilterDirty: true
});
// first we need to apply the filter on the piece list
PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, filterBy)
this
.loadPieceList({ page: 1, filterBy })
.then(() => {
// but also, we need to filter all the open edition lists
this.state.pieceList
@ -150,35 +210,97 @@ let PieceList = React.createClass({
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() {
let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
let AccordionListItemType = this.props.accordionListItemType;
const {
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'));
return (
<div>
<PieceListToolbar
className="ascribe-piece-list-toolbar"
searchFor={this.searchFor}
searchQuery={this.state.search}
filterParams={this.props.filterParams}
orderParams={this.props.orderParams}
filterParams={filterParams}
orderParams={orderParams}
filterBy={this.state.filterBy}
orderBy={this.state.orderBy}
applyFilterBy={this.applyFilterBy}
applyOrderBy={this.applyOrderBy}>
{this.props.customSubmitButton ?
this.props.customSubmitButton :
{customSubmitButton ?
customSubmitButton :
<button className="btn btn-default btn-ascribe-add">
<span className="icon-ascribe icon-ascribe-add" />
</button>
}
</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
filterBy={this.state.filterBy}
filterParams={this.props.filterParams}/>
filterParams={filterParams}/>
<AccordionList
className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder}
@ -196,6 +318,7 @@ let PieceList = React.createClass({
<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"
content={piece}
thumbnailPlaceholder={customThumbnailPlaceholder}
key={i}>
<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"

2
js/components/piece_list_filter_display.js
View File

@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
render() {
let { filterBy } = this.props;
let filtersWithLabel = this.transformFilterParamsItemsToBools();
// do not show the FilterDisplay if there are no filters applied
if(filterBy && Object.keys(filterBy).length === 0) {
return null;
} else {
const filtersWithLabel = this.transformFilterParamsItemsToBools();
return (
<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">

16
js/components/register_piece.js
View File

@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
return mergeOptions(
UserStore.getState(),
WhitelabelStore.getState(),
PieceListStore.getState(),
{
selectedLicense: 0,
isFineUploaderActive: false
});
PieceListStore.getState()
);
},
componentDidMount() {
@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
onChange(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){
@ -118,7 +108,7 @@ let RegisterPiece = React.createClass( {
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<RegisterPieceForm
{...this.props}
isFineUploaderActive={this.state.isFineUploaderActive}
isFineUploaderActive={true}
handleSuccess={this.handleSuccess}
location={this.props.location}>
{this.props.children}

0
js/components/whitelabel/prize/portfolioreview/components/pr_login_container.js Normal file
View File

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

@ -63,6 +63,11 @@ const PRRegisterPiece = React.createClass({
<div className="register-piece--info">
<h1>Portfolio Review</h1>
<h2>{getLangText('Submission closing on %s', ' 22 Dec 2015')}</h2>
<p>For more information, visit:&nbsp;
<a href="http://www.portfolio-review.de/submission/" target="_blank">
portfolio-review.de
</a>
</p>
<p style={{marginTop: '1em'}}>
{getLangText("You're submitting as %s. ", currentUser.email)}
<Link to="/logout">{getLangText('Change account?')}</Link>

17
js/components/whitelabel/prize/simple_prize/components/ascribe_detail/prize_piece_container.js
View File

@ -51,8 +51,7 @@ import { setDocumentTitle } from '../../../../../../utils/dom_utils';
*/
let PieceContainer = React.createClass({
propTypes: {
params: React.PropTypes.object,
location: React.PropTypes.object
params: React.PropTypes.object
},
getInitialState() {
@ -111,7 +110,7 @@ let PieceContainer = React.createClass({
},
render() {
if(this.state.piece && this.state.piece.title) {
if(this.state.piece && this.state.piece.id) {
/*
This really needs a refactor!
@ -162,7 +161,7 @@ let PieceContainer = React.createClass({
piece={this.state.piece}
currentUser={this.state.currentUser}/>
}>
<PrizePieceDetails piece={this.state.piece} location={this.props.location}/>
<PrizePieceDetails piece={this.state.piece} />
</Piece>
);
} else {
@ -292,8 +291,8 @@ let PrizePieceRatings = React.createClass({
url={ApiUrls.ownership_loans_pieces_request}
email={this.props.currentUser.email}
gallery={this.props.piece.prize.name}
startdate={today}
enddate={endDate}
startDate={today}
endDate={endDate}
showPersonalMessage={true}
showPassword={false}
handleSuccess={this.handleLoanSuccess} />
@ -426,8 +425,7 @@ let PrizePieceRatings = React.createClass({
let PrizePieceDetails = React.createClass({
propTypes: {
piece: React.PropTypes.object,
location: React.PropTypes.object
piece: React.PropTypes.object
},
render() {
@ -464,8 +462,7 @@ let PrizePieceDetails = React.createClass({
overrideForm={true}
pieceId={this.props.piece.id}
otherData={this.props.piece.other_data}
multiple={true}
location={location}/>
multiple={true} />
</Form>
</CollapsibleParagraph>
);

15
js/components/whitelabel/wallet/components/23vivi/23vivi_accordion_list/23vivi_accordion_list_item_thumbnail_placeholder.js Normal file
View File

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

78
js/components/whitelabel/wallet/components/23vivi/23vivi_landing.js Normal file
View File

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

24
js/components/whitelabel/wallet/components/23vivi/23vivi_piece_list.js Normal file
View File

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

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

@ -30,7 +30,7 @@ let WalletPieceContainer = React.createClass({
render() {
if(this.props.piece && this.props.piece.title) {
if(this.props.piece && this.props.piece.id) {
return (
<Piece
piece={this.props.piece}

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

@ -89,7 +89,7 @@ let CylandPieceContainer = React.createClass({
},
render() {
if(this.state.piece && this.state.piece.title) {
if(this.state.piece && this.state.piece.id) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
return (

16
js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
View File

@ -116,7 +116,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='artist_bio'
label={getLangText('Artist Biography')}
expanded={!disabled && piece.extra_data.artist_bio}>
expanded={!disabled || !!piece.extra_data.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
@ -125,7 +125,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={piece.extra_data.artist_contact_information}
@ -134,7 +134,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='conceptual_overview'
label={getLangText('Conceptual Overview')}
expanded={!disabled && piece.extra_data.conceptual_overview}>
expanded={!disabled || !!piece.extra_data.conceptual_overview}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.conceptual_overview}
@ -143,7 +143,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='medium'
label={getLangText('Medium (technical specifications)')}
expanded={!disabled && piece.extra_data.medium}>
expanded={!disabled || !!piece.extra_data.medium}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.medium}
@ -152,7 +152,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='size_duration'
label={getLangText('Size / Duration')}
expanded={!disabled && piece.extra_data.size_duration}>
expanded={!disabled || !!piece.extra_data.size_duration}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.size_duration}
@ -161,7 +161,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='display_instructions'
label={getLangText('Display instructions')}
expanded={!disabled && piece.extra_data.display_instructions}>
expanded={!disabled || !!piece.extra_data.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
@ -170,7 +170,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='additional_details'
label={getLangText('Additional details')}
expanded={!disabled && piece.extra_data.additional_details}>
expanded={!disabled || !!piece.extra_data.additional_details}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.additional_details}
@ -178,7 +178,7 @@ let CylandAdditionalDataForm = React.createClass({
</Property>
<FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')}
submitFile={this.submitFile}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
pieceId={piece.id}

4
js/components/whitelabel/wallet/components/cyland/cyland_landing.js
View File

@ -57,9 +57,9 @@ let CylandLanding = React.createClass({
setDocumentTitle('CYLAND MediaArtLab');
return (
<div className="container ascribe-form-wrapper">
<div className="container ascribe-form-wrapper cyland-landing">
<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'}}>
<img src={this.state.whitelabel.logo} width="400px"/>
<div style={{marginTop: '1em'}}>

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

@ -53,8 +53,6 @@ let CylandRegisterPiece = React.createClass({
PieceStore.getState(),
WhitelabelStore.getState(),
{
selectedLicense: 0,
isFineUploaderActive: false,
step: 0
});
},
@ -90,13 +88,6 @@ let CylandRegisterPiece = React.createClass({
onChange(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){
@ -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() {
let today = new Moment();
@ -197,9 +183,8 @@ let CylandRegisterPiece = React.createClass({
enableLocalHashing={false}
headerMessage={getLangText('Submit to Cyland Archive')}
submitMessage={getLangText('Submit')}
isFineUploaderActive={this.state.isFineUploaderActive}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
onLoggedOut={this.onLoggedOut}
location={this.props.location}/>
</Col>
</Row>
@ -229,8 +214,8 @@ let CylandRegisterPiece = React.createClass({
url={ApiUrls.ownership_loans_pieces}
email={this.state.whitelabel.user}
gallery="Cyland Archive"
startdate={today}
enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
startDate={today}
endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
showStartDate={false}
showEndDate={false}
showPersonalMessage={false}

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

@ -123,7 +123,7 @@ let IkonotvPieceContainer = React.createClass({
);
}
if(this.state.piece && this.state.piece.title) {
if(this.state.piece && this.state.piece.id) {
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
return (
<WalletPieceContainer

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

@ -104,7 +104,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.artist_website}
@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='gallery_website'
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
rows={1}
defaultValue={this.props.piece.extra_data.gallery_website}
@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='additional_websites'
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
rows={1}
defaultValue={this.props.piece.extra_data.additional_websites}
@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property
name='conceptual_overview'
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
rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview}

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

@ -103,7 +103,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.medium}
@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.size_duration}
@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.copyright}
@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of}
@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='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
rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography}
@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property
name='additional_details'
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
rows={1}
defaultValue={this.props.piece.extra_data.additional_details}

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

@ -16,6 +16,9 @@ import UserActions from '../../../../../actions/user_actions';
import PieceStore from '../../../../../stores/piece_store';
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 GlobalNotificationActions from '../../../../../actions/global_notification_actions';
@ -32,6 +35,7 @@ import ApiUrls from '../../../../../constants/api_urls';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
let IkonotvRegisterPiece = React.createClass({
propTypes: {
handleSuccess: React.PropTypes.func,
@ -46,8 +50,10 @@ let IkonotvRegisterPiece = React.createClass({
UserStore.getState(),
PieceListStore.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);
UserStore.listen(this.onChange);
PieceStore.listen(this.onChange);
WhitelabelStore.listen(this.onChange);
UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
// 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.
@ -79,22 +87,15 @@ let IkonotvRegisterPiece = React.createClass({
PieceListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
PieceStore.unlisten(this.onChange);
WhitelabelStore.listen(this.onChange);
},
onChange(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){
this.refreshPieceList();
// also start loading the piece for the next step
@ -108,7 +109,6 @@ let IkonotvRegisterPiece = React.createClass({
this.incrementStep();
this.refs.slidesContainer.nextSlide();
}
},
handleAdditionalDataSuccess() {
@ -126,6 +126,8 @@ let IkonotvRegisterPiece = React.createClass({
},
handleLoanSuccess(response) {
this.setState({ pageExitWarning: null });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
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() {
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() {
@ -209,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
getSlideLoan() {
if (this.canSubmit()) {
const { piece, whitelabel } = this.state;
let today = new Moment();
let enddate = new Moment();
enddate.add(2, 'years');
let endDate = new Moment();
endDate.add(2, 'years');
return (
<div data-slide-title={getLangText('Loan')}>
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<LoanForm
loanHeading={getLangText('Loan to IkonoTV archive')}
id={{piece_id: this.state.piece.id}}
id={{piece_id: piece.id}}
url={ApiUrls.ownership_loans_pieces}
email="submissions@ikono.org"
startdate={today}
enddate={enddate}
email={whitelabel.user}
startDate={today}
endDate={endDate}
showStartDate={false}
showEndDate={false}
gallery="IkonoTV archive"
@ -238,6 +230,8 @@ let IkonotvRegisterPiece = React.createClass({
},
render() {
const { pageExitWarning } = this.state;
return (
<SlidesContainer
ref="slidesContainer"
@ -246,7 +240,8 @@ let IkonotvRegisterPiece = React.createClass({
pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock'
}}
location={this.props.location}>
location={this.props.location}
pageExitWarning={pageExitWarning}>
<div data-slide-title={getLangText('Register work')}>
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@ -255,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
enableLocalHashing={false}
headerMessage={getLangText('Register work')}
submitMessage={getLangText('Register')}
isFineUploaderActive={this.state.isFineUploaderActive}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
onLoggedOut={this.onLoggedOut}
location={this.props.location}/>
</Col>
</Row>

84
js/components/whitelabel/wallet/components/lumenus/lumenus_landing.js Normal file
View File

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

74
js/components/whitelabel/wallet/components/market/market_buttons/market_acl_button_list.js Normal file
View File

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

160
js/components/whitelabel/wallet/components/market/market_buttons/market_submit_button.js Normal file
View File

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

24
js/components/whitelabel/wallet/components/market/market_detail/market_edition_container.js Normal file
View File

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

23
js/components/whitelabel/wallet/components/market/market_detail/market_further_details.js Normal file
View File

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

21
js/components/whitelabel/wallet/components/market/market_detail/market_piece_container.js Normal file
View File

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

235
js/components/whitelabel/wallet/components/market/market_forms/market_additional_data_form.js Normal file
View File

@ -0,0 +1,235 @@
'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);
},
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')}
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;

90
js/components/whitelabel/wallet/components/market/market_piece_list.js Normal file
View File

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

174
js/components/whitelabel/wallet/components/market/market_register_piece.js Normal file
View File

@ -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 {
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}
enableSeparateThumbnail={false}
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;

14
js/components/whitelabel/wallet/constants/wallet_api_urls.js
View File

@ -4,20 +4,28 @@ import walletConstants from './wallet_application_constants';
// gets subdomain as a parameter
function getWalletApiUrls(subdomain) {
if (subdomain === 'cyland'){
if (subdomain === 'cyland') {
return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
};
}
else if (subdomain === 'ikonotv'){
} else if (subdomain === 'ikonotv') {
return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'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 {};
}

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

@ -32,7 +32,7 @@ let WalletApp = React.createClass({
// 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'))
&& (['ikonotv']).indexOf(subdomain) > -1) {
&& (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>);
} else {
header = <Header showAddWork={true} routes={routes} />;

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

@ -16,6 +16,8 @@ import SettingsContainer from '../../../components/ascribe_settings/settings_con
import ContractSettings from '../../../components/ascribe_settings/contract_settings';
import ErrorNotFoundPage from '../../../components/error_not_found_page';
import CCRegisterPiece from './components/cc/cc_register_piece';
import CylandLanding from './components/cyland/cyland_landing';
import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
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 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 IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
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';
@ -128,7 +138,7 @@ let ROUTES = {
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
<Route
path='request_loan'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractAgreementForm)}
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)}
headerTitle='SEND NEW CONTRACT'
aclName='acl_create_contractagreement'/>
<Route
@ -148,10 +158,80 @@ let ROUTES = {
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} />
</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) {
if(subdomain in ROUTES) {
return ROUTES[subdomain];
@ -160,5 +240,4 @@ function getRoutes(commonRoutes, subdomain) {
}
}
export default getRoutes;

3
js/constants/api_urls.js
View File

@ -72,6 +72,9 @@ let ApiUrls = {
'users_username': AppConstants.apiEndpoint + 'users/username/',
'users_profile': AppConstants.apiEndpoint + 'users/profile/',
'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}/',
'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
'prize_list': AppConstants.apiEndpoint + 'prize/'

21
js/constants/application_constants.js
View File

@ -51,6 +51,20 @@ const constants = {
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'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',
'name': 'Portfolio Review',
@ -124,7 +138,12 @@ const constants = {
},
'twitter': {
'sdkUrl': 'https://platform.twitter.com/widgets.js'
}
},
'errorMessagesToIgnore': [
'Authentication credentials were not provided.',
'Informations d\'authentification non fournies.'
]
};
export default constants;

16
js/mixins/react_error.js Normal file
View 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
View 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
View 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;

2
js/stores/edition_list_store.js
View File

@ -60,7 +60,7 @@ class EditionListStore {
* We often just have to refresh the edition list for a certain pieceId,
* 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
// through /editions
// If he then tries to delete a piece/edition and this method is called,

6
js/stores/edition_store.js
View File

@ -7,11 +7,17 @@ import EditionActions from '../actions/edition_actions';
class EditionStore {
constructor() {
this.edition = {};
this.editionError = null;
this.bindActions(EditionActions);
}
onUpdateEdition(edition) {
this.edition = edition;
this.editionError = null;
}
onEditionFailed(error) {
this.editionError = error;
}
}

57
js/stores/global_notification_store.js
View File

@ -4,36 +4,63 @@ import { alt } from '../alt';
import GlobalNotificationActions from '../actions/global_notification_actions';
const GLOBAL_NOTIFICATION_COOLDOWN = 400;
class GlobalNotificationStore {
constructor() {
this.notificationQue = [];
this.notificationQueue = [];
this.notificationStatus = 'ready';
this.notificationsPaused = false;
this.bindActions(GlobalNotificationActions);
}
onAppendGlobalNotification(newNotification) {
let notificationDelay = 0;
for(let i = 0; i < this.notificationQue.length; i++) {
notificationDelay += this.notificationQue[i].dismissAfter;
this.notificationQueue.push(newNotification);
if (!this.notificationsPaused && this.notificationStatus === 'ready') {
this.showNextNotification();
}
}
this.notificationQue.push(newNotification);
setTimeout(GlobalNotificationActions.emulateEmptyStore, notificationDelay + newNotification.dismissAfter);
showNextNotification() {
this.notificationStatus = 'show';
setTimeout(GlobalNotificationActions.cooldownGlobalNotifications, this.notificationQueue[0].dismissAfter);
}
onEmulateEmptyStore() {
let actualNotificitionQue = this.notificationQue.slice();
onCooldownGlobalNotifications() {
// When still paused on cooldown, don't shift the queue so we can repeat the current notification.
if (!this.notificationsPaused) {
this.notificationStatus = 'cooldown';
this.notificationQue = [];
setTimeout(() => {
this.notificationQue = actualNotificitionQue.slice();
GlobalNotificationActions.shiftGlobalNotification();
}, 400);
// Leave some time between consecutive notifications
setTimeout(GlobalNotificationActions.shiftGlobalNotification, GLOBAL_NOTIFICATION_COOLDOWN);
} else {
this.notificationStatus = 'ready';
}
}
onShiftGlobalNotification() {
this.notificationQue.shift();
this.notificationQueue.shift();
if (!this.notificationsPaused && this.notificationQueue.length > 0) {
this.showNextNotification();
} else {
this.notificationStatus = 'ready';
}
}
onPauseGlobalNotifications() {
this.notificationsPaused = true;
}
onResumeGlobalNotifications() {
this.notificationsPaused = false;
if (this.notificationStatus === 'ready' && this.notificationQueue.length > 0) {
this.showNextNotification();
}
}
}

6
js/stores/piece_store.js
View File

@ -7,11 +7,13 @@ import PieceActions from '../actions/piece_actions';
class PieceStore {
constructor() {
this.piece = {};
this.pieceError = null;
this.bindActions(PieceActions);
}
onUpdatePiece(piece) {
this.piece = piece;
this.pieceError = null;
}
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.');
}
}
onPieceFailed(err) {
this.pieceError = err;
}
}
export default alt.createStore(PieceStore, 'PieceStore');

88
js/stores/webhook_store.js Normal file
View 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');

18
js/utils/acl_utils.js
View File

@ -4,7 +4,7 @@ import { sanitize, intersectLists } from './general_utils';
export function getAvailableAcls(editions, filterFn) {
let availableAcls = [];
if (!editions || editions.constructor !== Array){
if (!editions || editions.constructor !== Array) {
return [];
}
// 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 only one edition has been selected, their actions are available
// If more than one editions have been selected, their acl properties are intersected
if(editionsCopy.length >= 1) {
// If only one edition has been selected, its actions are available
// If more than one editions have been selected, intersect all their acl properties
if (editionsCopy.length >= 1) {
availableAcls = editionsCopy[0].acl;
}
if(editionsCopy.length >= 2) {
for(let i = 1; i < editionsCopy.length; i++) {
if (editionsCopy.length >= 2) {
for (let i = 1; i < editionsCopy.length; i++) {
availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
}
}
}
// convert acls back to key-value object
let availableAclsObj = {};
for(let i = 0; i < availableAcls.length; i++) {
for (let i = 0; i < availableAcls.length; i++) {
availableAclsObj[availableAcls[i]] = true;
}
return availableAclsObj;
}

3
js/utils/error_utils.js
View File

@ -12,7 +12,8 @@ import AppConstants from '../constants/application_constants';
* @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
*/
function logGlobal(error, ignoreSentry, comment) {
function logGlobal(error, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1,
comment) {
console.error(error);
if(!ignoreSentry) {

7
js/utils/file_utils.js
View File

@ -89,11 +89,16 @@ export function computeHashOfFile(file) {
/**
* Extracts a file extension from a string, by splitting by dot and taking
* the last substring
*
* If a file without an extension is submitted (file), then
* this method just returns an empty string.
* @param {string} s file's name + extension
* @return {string} file extension
*
* Via: http://stackoverflow.com/a/190878/1263876
*/
export function extractFileExtensionFromString(s) {
return s.split('.').pop();
const explodedFileName = s.split('.');
return explodedFileName.length > 1 ? explodedFileName.pop()
: '';
}

Some files were not shown because too many files have changed in this diff Show More