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

Merge branch 'master' into AD-1313-Attach-thumbnail-to-piece-in-register-form

Browse Source 
Conflicts:
	js/components/ascribe_detail/further_details_fileuploader.js
	js/components/ascribe_forms/form.js
	js/components/ascribe_forms/form_loan.js
	js/components/ascribe_forms/form_register_piece.js
	js/components/ascribe_forms/input_fineuploader.js
	js/components/ascribe_forms/property.js
	js/components/ascribe_forms/property_collapsible.js
	js/components/ascribe_uploader/ascribe_file_drag_and_drop/file_drag_and_drop.js
	js/components/ascribe_uploader/react_s3_fine_uploader.js
	js/components/whitelabel/wallet/components/cyland/cyland_forms/cyland_additional_data_form.js
	js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artist_details_form.js
	js/components/whitelabel/wallet/components/ikonotv/ikonotv_forms/ikonotv_artwork_details_form.js
	sass/ascribe-fonts/ascribe-fonts.scss
	sass/whitelabel/wallet/cyland/cyland_custom_style.scss
This commit is contained in:
Tim Daubenschütz 2015-12-07 13:39:30 +01:00
commit 49421e1fa1
101 changed files with 2977 additions and 731 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
js/actions/contract_agreement_list_actions.js
View File

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

4
js/actions/edition_actions.js
View File

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

4
js/actions/piece_actions.js
View File

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

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

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

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

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

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, availableAcls: React.PropTypes.object.isRequired,
buttonAcceptName: React.PropTypes.string, buttonAcceptName: React.PropTypes.string,
buttonAcceptClassName: React.PropTypes.string, buttonAcceptClassName: React.PropTypes.string,
currentUser: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object,
email: React.PropTypes.string, email: React.PropTypes.string,
pieceOrEditions: React.PropTypes.oneOfType([ pieceOrEditions: React.PropTypes.oneOfType([
React.PropTypes.object, React.PropTypes.object,

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

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

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

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

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

@ -41,13 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
*/ */
let Edition = React.createClass({ let Edition = React.createClass({
propTypes: { propTypes: {
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
edition: React.PropTypes.object, edition: React.PropTypes.object,
loadEdition: React.PropTypes.func, loadEdition: React.PropTypes.func
location: React.PropTypes.object
}, },
mixins: [History], mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() { getInitialState() {
return UserStore.getState(); return UserStore.getState();
}, },
@ -75,6 +82,8 @@ let Edition = React.createClass({
}, },
render() { render() {
let FurtherDetailsType = this.props.furtherDetailsType;
return ( return (
<Row> <Row>
<Col md={6}> <Col md={6}>
@ -90,6 +99,7 @@ let Edition = React.createClass({
<hr/> <hr/>
</div> </div>
<EditionSummary <EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition} edition={this.props.edition}
currentUser={this.state.currentUser} currentUser={this.state.currentUser}
handleSuccess={this.props.loadEdition}/> handleSuccess={this.props.loadEdition}/>
@ -137,7 +147,7 @@ let Edition = React.createClass({
currentUser={this.state.currentUser}/> currentUser={this.state.currentUser}/>
<Note <Note
id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }} id={() => {return {'bitcoin_id': this.props.edition.bitcoin_id}; }}
label={getLangText('Edition note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null} defaultValue={this.props.edition.public_note ? this.props.edition.public_note : null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.props.edition.acl.acl_edit} editable={!!this.props.edition.acl.acl_edit}
@ -151,13 +161,12 @@ let Edition = React.createClass({
show={this.props.edition.acl.acl_edit show={this.props.edition.acl.acl_edit
|| Object.keys(this.props.edition.extra_data).length > 0 || Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data.length > 0}> || this.props.edition.other_data.length > 0}>
<FurtherDetails <FurtherDetailsType
editable={this.props.edition.acl.acl_edit} editable={this.props.edition.acl.acl_edit}
pieceId={this.props.edition.parent} pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data} extraData={this.props.edition.extra_data}
otherData={this.props.edition.other_data} otherData={this.props.edition.other_data}
handleSuccess={this.props.loadEdition} handleSuccess={this.props.loadEdition} />
location={this.props.location}/>
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('SPOOL Details')}> title={getLangText('SPOOL Details')}>
@ -173,6 +182,7 @@ let Edition = React.createClass({
let EditionSummary = React.createClass({ let EditionSummary = React.createClass({
propTypes: { propTypes: {
actionPanelButtonListType: React.PropTypes.func,
edition: React.PropTypes.object, edition: React.PropTypes.object,
currentUser: React.PropTypes.object, currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func handleSuccess: React.PropTypes.func
@ -185,7 +195,7 @@ let EditionSummary = React.createClass({
getStatus(){ getStatus(){
let status = null; let status = null;
if (this.props.edition.status.length > 0){ if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join().replace(/_/, ' '); let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>; status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){ if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = ( status = (
@ -197,7 +207,7 @@ let EditionSummary = React.createClass({
}, },
render() { render() {
let { edition, currentUser } = this.props; let { actionPanelButtonListType, edition, currentUser } = this.props;
return ( return (
<div className="ascribe-detail-header"> <div className="ascribe-detail-header">
<EditionDetailProperty <EditionDetailProperty
@ -212,10 +222,16 @@ let EditionSummary = React.createClass({
value={ edition.owner } /> value={ edition.owner } />
<LicenseDetail license={edition.license_type}/> <LicenseDetail license={edition.license_type}/>
{this.getStatus()} {this.getStatus()}
<AclProxy show={currentUser && currentUser.email}> {/*
`acl_view` is always available in `edition.acl`, therefore if it has
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
`AclInformation` would show up
*/}
<AclProxy show={currentUser && currentUser.email && Object.keys(edition.acl).length > 1}>
<EditionDetailProperty <EditionDetailProperty
label={getLangText('ACTIONS')}> label={getLangText('ACTIONS')}>
<EditionActionPanel <EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType}
edition={edition} edition={edition}
currentUser={currentUser} currentUser={currentUser}
handleSuccess={this.handleSuccess} /> handleSuccess={this.handleSuccess} />

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

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

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

@ -1,6 +1,10 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { History } from 'react-router';
import ReactError from '../../mixins/react_error';
import { ResourceNotFoundError } from '../../models/errors';
import EditionActions from '../../actions/edition_actions'; import EditionActions from '../../actions/edition_actions';
import EditionStore from '../../stores/edition_store'; import EditionStore from '../../stores/edition_store';
@ -9,6 +13,7 @@ import Edition from './edition';
import AscribeSpinner from '../ascribe_spinner'; import AscribeSpinner from '../ascribe_spinner';
import { getLangText } from '../../utils/lang_utils';
import { setDocumentTitle } from '../../utils/dom_utils'; import { setDocumentTitle } from '../../utils/dom_utils';
@ -17,10 +22,13 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/ */
let EditionContainer = React.createClass({ let EditionContainer = React.createClass({
propTypes: { propTypes: {
params: React.PropTypes.object, actionPanelButtonListType: React.PropTypes.func,
location: React.PropTypes.object furtherDetailsType: React.PropTypes.func,
params: React.PropTypes.object
}, },
mixins: [History, ReactError],
getInitialState() { getInitialState() {
return EditionStore.getState(); return EditionStore.getState();
}, },
@ -28,11 +36,11 @@ let EditionContainer = React.createClass({
componentDidMount() { componentDidMount() {
EditionStore.listen(this.onChange); EditionStore.listen(this.onChange);
// Every time we enter the edition detail page, just reset the edition // Every time we're entering the edition detail page,
// store as it will otherwise display wrong/old data once the user loads // just reset the edition that is saved in the edition store
// as it will otherwise display wrong/old data once the user loads
// the edition detail a second time // the edition detail a second time
EditionActions.updateEdition({}); EditionActions.updateEdition({});
this.loadEdition(); this.loadEdition();
}, },
@ -45,6 +53,14 @@ let EditionContainer = React.createClass({
} }
}, },
componentDidUpdate() {
const { editionError } = this.state;
if(editionError && editionError.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the edition you're looking for doesn't exist.")));
}
},
componentWillUnmount() { componentWillUnmount() {
window.clearInterval(this.state.timerId); window.clearInterval(this.state.timerId);
EditionStore.unlisten(this.onChange); EditionStore.unlisten(this.onChange);
@ -67,14 +83,15 @@ let EditionContainer = React.createClass({
}, },
render() { render() {
if(this.state.edition && this.state.edition.title) { if(this.state.edition && this.state.edition.id) {
setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', ')); setDocumentTitle([this.state.edition.artist_name, this.state.edition.title].join(', '));
return ( return (
<Edition <Edition
actionPanelButtonListType={this.props.actionPanelButtonListType}
furtherDetailsType={this.props.furtherDetailsType}
edition={this.state.edition} edition={this.state.edition}
loadEdition={this.loadEdition} loadEdition={this.loadEdition} />
location={this.props.location}/>
); );
} else { } else {
return ( return (

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

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

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

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

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

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

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

@ -4,6 +4,9 @@ import React from 'react';
import { History } from 'react-router'; import { History } from 'react-router';
import Moment from 'moment'; import Moment from 'moment';
import ReactError from '../../mixins/react_error';
import { ResourceNotFoundError } from '../../models/errors';
import PieceActions from '../../actions/piece_actions'; import PieceActions from '../../actions/piece_actions';
import PieceStore from '../../stores/piece_store'; import PieceStore from '../../stores/piece_store';
@ -50,11 +53,17 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/ */
let PieceContainer = React.createClass({ let PieceContainer = React.createClass({
propTypes: { propTypes: {
params: React.PropTypes.object, furtherDetailsType: React.PropTypes.func,
location: React.PropTypes.object params: React.PropTypes.object
}, },
mixins: [History], mixins: [History, ReactError],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() { getInitialState() {
return mergeOptions( return mergeOptions(
@ -70,15 +79,22 @@ let PieceContainer = React.createClass({
componentDidMount() { componentDidMount() {
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
// Every time we enter the piece detail page, just reset the piece // Every time we enter the piece detail page, just reset the piece
// store as it will otherwise display wrong/old data once the user loads // store as it will otherwise display wrong/old data once the user loads
// the piece detail a second time // the piece detail a second time
PieceActions.updatePiece({}); PieceActions.updatePiece({});
this.loadPiece(); this.loadPiece();
UserActions.fetchCurrentUser();
},
componentDidUpdate() {
const { pieceError } = this.state;
if(pieceError && pieceError.status === 404) {
this.throws(new ResourceNotFoundError(getLangText("Oops, the piece you're looking for doesn't exist.")));
}
}, },
componentWillUnmount() { componentWillUnmount() {
@ -103,7 +119,6 @@ let PieceContainer = React.createClass({
let pieceState = mergeOptions({}, state.piece); let pieceState = mergeOptions({}, state.piece);
pieceState.acl.acl_loan = false; pieceState.acl.acl_loan = false;
this.setState({ this.setState({
piece: pieceState piece: pieceState
}); });
@ -197,7 +212,12 @@ let PieceContainer = React.createClass({
} else { } else {
return ( return (
<AclProxy <AclProxy
show={currentUser && currentUser.email}> show={currentUser && currentUser.email && Object.keys(piece.acl).length > 1}>
{/*
`acl_view` is always available in `edition.acl`, therefore if it has
no more than 1 key, we're hiding the `DetailProperty` actions as otherwise
`AclInformation` would show up
*/}
<DetailProperty label={getLangText('ACTIONS')}> <DetailProperty label={getLangText('ACTIONS')}>
<AclButtonList <AclButtonList
className="ascribe-button-list" className="ascribe-button-list"
@ -226,7 +246,8 @@ let PieceContainer = React.createClass({
}, },
render() { render() {
if(this.state.piece && this.state.piece.title) { if (this.state.piece && this.state.piece.id) {
let FurtherDetailsType = this.props.furtherDetailsType;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', ')); setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
return ( return (
@ -252,7 +273,6 @@ let PieceContainer = React.createClass({
} }
buttons={this.getActions()}> buttons={this.getActions()}>
{this.getCreateEditionsDialog()} {this.getCreateEditionsDialog()}
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Loan History')} title={getLangText('Loan History')}
show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}> show={this.state.piece.loan_history && this.state.piece.loan_history.length > 0}>
@ -261,11 +281,14 @@ let PieceContainer = React.createClass({
</CollapsibleParagraph> </CollapsibleParagraph>
<CollapsibleParagraph <CollapsibleParagraph
title={getLangText('Notes')} title={getLangText('Notes')}
show={!!(this.state.currentUser.username || this.state.piece.public_note)}> show={!!(this.state.currentUser.username
|| this.state.piece.acl.acl_edit
|| this.state.piece.public_note)}>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Personal note (private)')} label={getLangText('Personal note (private)')}
defaultValue={this.state.piece.private_note || null} defaultValue={this.state.piece.private_note || null}
show = {!!this.state.currentUser.username}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={true} editable={true}
successMessage={getLangText('Private note saved')} successMessage={getLangText('Private note saved')}
@ -273,11 +296,12 @@ let PieceContainer = React.createClass({
currentUser={this.state.currentUser}/> currentUser={this.state.currentUser}/>
<Note <Note
id={this.getId} id={this.getId}
label={getLangText('Piece note (public)')} label={getLangText('Personal note (public)')}
defaultValue={this.state.piece.public_note || null} defaultValue={this.state.piece.public_note || null}
placeholder={getLangText('Enter your comments ...')} placeholder={getLangText('Enter your comments ...')}
editable={!!this.state.piece.acl.acl_edit} editable={!!this.state.piece.acl.acl_edit}
successMessage={getLangText('Public piece note saved')} show={!!(this.state.piece.public_note || this.state.piece.acl.acl_edit)}
successMessage={getLangText('Public note saved')}
url={ApiUrls.note_public_piece} url={ApiUrls.note_public_piece}
currentUser={this.state.currentUser}/> currentUser={this.state.currentUser}/>
</CollapsibleParagraph> </CollapsibleParagraph>
@ -287,13 +311,12 @@ let PieceContainer = React.createClass({
|| Object.keys(this.state.piece.extra_data).length > 0 || Object.keys(this.state.piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0} || this.state.piece.other_data.length > 0}
defaultExpanded={true}> defaultExpanded={true}>
<FurtherDetails <FurtherDetailsType
editable={this.state.piece.acl.acl_edit} editable={this.state.piece.acl.acl_edit}
pieceId={this.state.piece.id} pieceId={this.state.piece.id}
extraData={this.state.piece.extra_data} extraData={this.state.piece.extra_data}
otherData={this.state.piece.other_data} otherData={this.state.piece.other_data}
handleSuccess={this.loadPiece} handleSuccess={this.loadPiece} />
location={this.props.location}/>
</CollapsibleParagraph> </CollapsibleParagraph>
</Piece> </Piece>

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

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

@ -124,8 +124,18 @@ let Form = React.createClass({
getFormData() { getFormData() {
let data = {}; let data = {};
for (let ref in this.refs) { for (let refName in this.refs) {
data[this.refs[ref].props.name] = this.refs[ref].state.value; const ref = this.refs[refName];
if (ref.state && 'value' in ref.state) {
// An input can also provide an `Object` as a value
// which we're going to merge with `data` (overwrites)
if(ref.state.value.constructor === Object) {
Object.assign(data, ref.state.value);
} else {
data[ref.props.name] = ref.state.value;
}
}
} }
if (typeof this.props.getFormData === 'function') { if (typeof this.props.getFormData === 'function') {
@ -238,7 +248,6 @@ let Form = React.createClass({
renderChildren() { renderChildren() {
return ReactAddons.Children.map(this.props.children, (child, i) => { return ReactAddons.Children.map(this.props.children, (child, i) => {
if (child) { if (child) {
// Since refs will be overwritten by this functions return statement, // Since refs will be overwritten by this functions return statement,
// we still want to be able to define refs for nested `Form` or `Property` // we still want to be able to define refs for nested `Form` or `Property`
// children, which is why we're upfront simply invoking the callback-ref- // children, which is why we're upfront simply invoking the callback-ref-

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

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

@ -1,33 +1,34 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import Button from 'react-bootstrap/lib/Button'; import Button from 'react-bootstrap/lib/Button';
import ContractAgreementListStore from '../../stores/contract_agreement_list_store';
import Form from './form'; import Form from './form';
import Property from './property'; import Property from './property';
import InputTextAreaToggable from './input_textarea_toggable';
import InputDate from './input_date';
import InputCheckbox from './input_checkbox';
import ContractAgreementListStore from '../../stores/contract_agreement_list_store'; import InputDate from './input_date';
import ContractAgreementListActions from '../../actions/contract_agreement_list_actions'; import InputTextAreaToggable from './input_textarea_toggable';
import InputContractAgreementCheckbox from './input_contract_agreement_checkbox';
import AscribeSpinner from '../ascribe_spinner'; import AscribeSpinner from '../ascribe_spinner';
import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils';
import AclInformation from '../ascribe_buttons/acl_information'; import AclInformation from '../ascribe_buttons/acl_information';
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
let LoanForm = React.createClass({ let LoanForm = React.createClass({
propTypes: { propTypes: {
loanHeading: React.PropTypes.string, loanHeading: React.PropTypes.string,
email: React.PropTypes.string, email: React.PropTypes.string,
gallery: React.PropTypes.string, gallery: React.PropTypes.string,
startdate: React.PropTypes.object, startDate: React.PropTypes.object,
enddate: React.PropTypes.object, endDate: React.PropTypes.object,
showPersonalMessage: React.PropTypes.bool, showPersonalMessage: React.PropTypes.bool,
showEndDate: React.PropTypes.bool, showEndDate: React.PropTypes.bool,
showStartDate: React.PropTypes.bool, showStartDate: React.PropTypes.bool,
@ -36,7 +37,11 @@ let LoanForm = React.createClass({
id: React.PropTypes.object, id: React.PropTypes.object,
message: React.PropTypes.string, message: React.PropTypes.string,
createPublicContractAgreement: React.PropTypes.bool, createPublicContractAgreement: React.PropTypes.bool,
handleSuccess: React.PropTypes.func handleSuccess: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.object,
React.PropTypes.array
])
}, },
getDefaultProps() { getDefaultProps() {
@ -45,148 +50,33 @@ let LoanForm = React.createClass({
showPersonalMessage: true, showPersonalMessage: true,
showEndDate: true, showEndDate: true,
showStartDate: true, showStartDate: true,
showPassword: true, showPassword: true
createPublicContractAgreement: true
}; };
}, },
getInitialState() { getInitialState() {
return ContractAgreementListStore.getState(); return {
}, email: this.props.email || ''
};
componentDidMount() {
ContractAgreementListStore.listen(this.onChange);
this.getContractAgreementsOrCreatePublic(this.props.email);
},
/**
* This method needs to be in form_loan as some whitelabel pages (Cyland) load
* the loanee's email async!
*
* SO LEAVE IT IN!
*/
componentWillReceiveProps(nextProps) {
if(nextProps && nextProps.email && this.props.email !== nextProps.email) {
this.getContractAgreementsOrCreatePublic(nextProps.email);
}
},
componentWillUnmount() {
ContractAgreementListStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
}, },
getContractAgreementsOrCreatePublic(email){ handleEmailOnChange(event) {
ContractAgreementListActions.flushContractAgreementList.defer();
if (email) {
// fetch the available contractagreements (pending/accepted)
ContractAgreementListActions.fetchAvailableContractAgreementList(email, true);
}
},
getFormData(){
return mergeOptions(
this.props.id,
this.getContractAgreementId()
);
},
handleOnChange(event) {
// event.target.value is the submitted email of the loanee // event.target.value is the submitted email of the loanee
if(event && event.target && event.target.value && event.target.value.match(/.*@.*\..*/)) { this.setState({
this.getContractAgreementsOrCreatePublic(event.target.value); email: event && event.target && event.target.value || ''
} else { });
ContractAgreementListActions.flushContractAgreementList();
}
}, },
getContractAgreementId() { handleReset() {
if (this.state.contractAgreementList && this.state.contractAgreementList.length > 0) { this.handleEmailOnChange();
return {'contract_agreement_id': this.state.contractAgreementList[0].id};
}
return {};
}, },
getContractCheckbox() { getFormData() {
if(this.state.contractAgreementList && this.state.contractAgreementList.length > 0) { return this.props.id;
// we need to define a key on the InputCheckboxes as otherwise
// react is not rerendering them on a store switch and is keeping
// the default value of the component (which is in that case true)
let contractAgreement = this.state.contractAgreementList[0];
let contract = contractAgreement.contract;
if(contractAgreement.datetime_accepted) {
return (
<Property
name="terms"
label={getLangText('Loan Contract')}
expanded={true}
className="notification-contract-pdf">
<embed
className="loan-form"
src={contract.blob.url_safe}
alt="pdf"
pluginspage="http://www.adobe.com/products/acrobat/readstep2.html"/>
<a href={contract.blob.url_safe} target="_blank">
<span className="glyphicon glyphicon-download" aria-hidden="true"></span> {getLangText('Download contract')}
</a>
{/* We still need to send the server information that we're accepting */}
<InputCheckbox
style={{'display': 'none'}}
key="terms_implicitly"
defaultChecked={true} />
</Property>
);
} else {
return (
<Property
name="terms"
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox
key="terms_explicitly"
defaultChecked={false}>
<span>
{getLangText('I agree to the')}&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;
}, },
getButtons() { getButtons() {
@ -214,14 +104,31 @@ let LoanForm = React.createClass({
}, },
render() { render() {
const { email } = this.state;
const {
children,
createPublicContractAgreement,
email: defaultEmail,
handleSuccess,
gallery,
loanHeading,
message,
showPersonalMessage,
endDate,
startDate,
showEndDate,
showStartDate,
showPassword,
url } = this.props;
return ( return (
<Form <Form
className={classnames({'ascribe-form-bordered': this.props.loanHeading})} className={classnames({'ascribe-form-bordered': loanHeading})}
ref='form' ref='form'
url={this.props.url} url={url}
getFormData={this.getFormData} getFormData={this.getFormData}
onReset={this.handleOnChange} onReset={this.handleReset}
handleSuccess={this.props.handleSuccess} handleSuccess={handleSuccess}
buttons={this.getButtons()} buttons={this.getButtons()}
spinner={ spinner={
<div className="modal-footer"> <div className="modal-footer">
@ -229,18 +136,18 @@ let LoanForm = React.createClass({
<AscribeSpinner color='dark-blue' size='md'/> <AscribeSpinner color='dark-blue' size='md'/>
</p> </p>
</div>}> </div>}>
<div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}> <div className={classnames({'ascribe-form-header': true, 'hidden': !loanHeading})}>
<h3>{this.props.loanHeading}</h3> <h3>{loanHeading}</h3>
</div> </div>
<AclInformation aim={'form'} verbs={['acl_loan']}/> <AclInformation aim={'form'} verbs={['acl_loan']}/>
<Property <Property
name='loanee' name='loanee'
label={getLangText('Loanee Email')} label={getLangText('Loanee Email')}
editable={!this.props.email} editable={!defaultEmail}
onChange={this.handleOnChange} onChange={this.handleEmailOnChange}
overrideForm={!!this.props.email}> overrideForm={!!defaultEmail}>
<input <input
value={this.props.email} value={email}
type="email" type="email"
placeholder={getLangText('Email of the loanee')} placeholder={getLangText('Email of the loanee')}
required/> required/>
@ -248,31 +155,31 @@ let LoanForm = React.createClass({
<Property <Property
name='gallery' name='gallery'
label={getLangText('Gallery/exhibition (optional)')} label={getLangText('Gallery/exhibition (optional)')}
editable={!this.props.gallery} editable={!gallery}
overrideForm={!!this.props.gallery}> overrideForm={!!gallery}>
<input <input
value={this.props.gallery} value={gallery}
type="text" type="text"
placeholder={getLangText('Gallery/exhibition (optional)')}/> placeholder={getLangText('Gallery/exhibition (optional)')}/>
</Property> </Property>
<Property <Property
name='startdate' name='startdate'
label={getLangText('Start date')} label={getLangText('Start date')}
editable={!this.props.startdate} editable={!startDate}
overrideForm={!!this.props.startdate} overrideForm={!!startDate}
expanded={this.props.showStartDate}> expanded={showStartDate}>
<InputDate <InputDate
defaultValue={this.props.startdate} defaultValue={startDate}
placeholderText={getLangText('Loan start date')} /> placeholderText={getLangText('Loan start date')} />
</Property> </Property>
<Property <Property
name='enddate' name='enddate'
editable={!this.props.enddate} editable={!endDate}
overrideForm={!!this.props.enddate} overrideForm={!!endDate}
label={getLangText('End date')} label={getLangText('End date')}
expanded={this.props.showEndDate}> expanded={showEndDate}>
<InputDate <InputDate
defaultValue={this.props.enddate} defaultValue={endDate}
placeholderText={getLangText('Loan end date')} /> placeholderText={getLangText('Loan end date')} />
</Property> </Property>
<Property <Property
@ -280,25 +187,32 @@ let LoanForm = React.createClass({
label={getLangText('Personal Message')} label={getLangText('Personal Message')}
editable={true} editable={true}
overrideForm={true} overrideForm={true}
expanded={this.props.showPersonalMessage}> expanded={showPersonalMessage}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.message} defaultValue={message}
placeholder={getLangText('Enter a message...')} placeholder={getLangText('Enter a message...')}
required={this.props.showPersonalMessage}/> required={showPersonalMessage}/>
</Property>
<Property
name='contract_agreement'
label={getLangText('Loan Contract')}
className="ascribe-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputContractAgreementCheckbox
createPublicContractAgreement={createPublicContractAgreement}
email={email} />
</Property> </Property>
{this.getContractCheckbox()}
{this.getAppendix()}
<Property <Property
name='password' name='password'
label={getLangText('Password')} label={getLangText('Password')}
expanded={this.props.showPassword}> expanded={showPassword}>
<input <input
type="password" type="password"
placeholder={getLangText('Enter your password')} placeholder={getLangText('Enter your password')}
required={this.props.showPassword ? 'required' : ''}/> required={showPassword}/>
</Property> </Property>
{this.props.children} {children}
</Form> </Form>
); );
} }

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

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

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

@ -30,7 +30,6 @@ let RegisterPieceForm = React.createClass({
isFineUploaderActive: React.PropTypes.bool, isFineUploaderActive: React.PropTypes.bool,
isFineUploaderEditable: React.PropTypes.bool, isFineUploaderEditable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool, enableLocalHashing: React.PropTypes.bool,
onLoggedOut: React.PropTypes.func,
// For this form to work with SlideContainer, we sometimes have to disable it // For this form to work with SlideContainer, we sometimes have to disable it
disabled: React.PropTypes.bool, disabled: React.PropTypes.bool,
@ -124,7 +123,6 @@ let RegisterPieceForm = React.createClass({
submitMessage, submitMessage,
headerMessage, headerMessage,
isFineUploaderActive, isFineUploaderActive,
onLoggedOut,
isFineUploaderEditable, isFineUploaderEditable,
location, location,
children, children,
@ -175,7 +173,6 @@ let RegisterPieceForm = React.createClass({
setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')} setIsUploadReady={this.setIsUploadReady('digitalWorkKeyReady')}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile} isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isFineUploaderActive={isFineUploaderActive} isFineUploaderActive={isFineUploaderActive}
onLoggedOut={onLoggedOut}
disabled={!isFineUploaderEditable} disabled={!isFineUploaderEditable}
enableLocalHashing={hashLocally} enableLocalHashing={hashLocally}
uploadMethod={location.query.method} uploadMethod={location.query.method}
@ -207,6 +204,10 @@ let RegisterPieceForm = React.createClass({
singular: getLangText('Select representative image'), singular: getLangText('Select representative image'),
plural: getLangText('Select representative images') plural: getLangText('Select representative images')
}}/> }}/>
isFineUploaderActive={isFineUploaderActive}
disabled={!isFineUploaderEditable}
enableLocalHashing={enableLocalHashing}
uploadMethod={location.query.method} />
</Property> </Property>
<Property <Property
name='artist_name' name='artist_name'

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

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

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

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;

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

@ -38,7 +38,6 @@ const InputFineUploader = React.createClass({
// a user is actually not logged in already to prevent him from droping files // a user is actually not logged in already to prevent him from droping files
// before login in // before login in
isFineUploaderActive: bool, isFineUploaderActive: bool,
onLoggedOut: func,
enableLocalHashing: bool, enableLocalHashing: bool,
uploadMethod: string, uploadMethod: string,
@ -52,7 +51,10 @@ const InputFineUploader = React.createClass({
singular: string, singular: string,
plural: string plural: string
}), }),
handleChangedFile: func handleChangedFile: func,
// Provided by `Property`
onChange: React.PropTypes.func
}, },
getDefaultProps() { getDefaultProps() {
@ -95,24 +97,26 @@ const InputFineUploader = React.createClass({
}, },
render() { render() {
const { fileInputElement, const {
keyRoutine, areAssetsDownloadable,
createBlobRoutine, enableLocalHashing,
validation, createBlobRoutine,
setIsUploadReady, disabled,
isReadyForFormSubmission, fileClassToUpload,
areAssetsDownloadable, fileInputElement,
onLoggedOut, isFineUploaderActive,
enableLocalHashing, isReadyForFormSubmission,
fileClassToUpload, keyRoutine,
uploadMethod, setIsUploadReady,
handleChangedFile } = this.props; uploadMethod,
let editable = this.props.isFineUploaderActive; validation,
handleChangedFile } = this.props;
let editable = isFineUploaderActive;
// if disabled is actually set by property, we want to override // if disabled is actually set by property, we want to override
// isFineUploaderActive // isFineUploaderActive
if(typeof this.props.disabled !== 'undefined') { if(typeof disabled !== 'undefined') {
editable = !this.props.disabled; editable = !disabled;
} }
return ( return (
@ -141,7 +145,6 @@ const InputFineUploader = React.createClass({
'X-CSRFToken': getCookie(AppConstants.csrftoken) 'X-CSRFToken': getCookie(AppConstants.csrftoken)
} }
}} }}
onInactive={onLoggedOut}
enableLocalHashing={enableLocalHashing} enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod} uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload} fileClassToUpload={fileClassToUpload}

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

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.object,
React.PropTypes.array React.PropTypes.array
]).isRequired, ]).isRequired,
currentUser: React.PropTypes.object.isRequired, currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func.isRequired, handleSuccess: React.PropTypes.func.isRequired,
notifications: React.PropTypes.array.isRequired notifications: React.PropTypes.array.isRequired
}, },

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

@ -42,7 +42,8 @@ const Property = React.createClass({
]), ]),
style: object, style: object,
expanded: bool, expanded: bool,
checkboxLabel: string checkboxLabel: string,
autoFocus: bool
}, },
getDefaultProps() { getDefaultProps() {
@ -75,16 +76,24 @@ const Property = React.createClass({
}; };
}, },
componentDidMount() {
if(this.props.autoFocus) {
this.handleFocus();
}
},
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
let childInput = this.refs.input; let childInput = this.refs.input;
// For expanded there are actually two use cases: // For expanded there are actually three use cases:
// //
// 1. Control its value from the outside completely (do not define `checkboxLabel`) // 1. Control its value from the outside completely (do not define `checkboxLabel`)
// 2. Let it be controlled from the inside (default value can be set though via `expanded`) // 2. Let it be controlled from the inside (default value can be set though via `expanded`)
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
// set from the outside as a prop then(!!!))
// //
// This handles case 1. // This handles case 1. and 3.
if(nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) { if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
this.setState({ expanded: nextProps.expanded }); this.setState({ expanded: nextProps.expanded });
} }
@ -226,6 +235,14 @@ const Property = React.createClass({
} }
}, },
setExpanded(expanded) {
this.setState({ expanded });
},
handleCheckboxToggle() {
this.setExpanded(!this.state.expanded);
},
renderChildren(style) { renderChildren(style) {
// Input's props should only be cloned and propagated down the tree, // Input's props should only be cloned and propagated down the tree,
// if the component is actually being shown (!== 'expanded === false') // if the component is actually being shown (!== 'expanded === false')
@ -247,7 +264,8 @@ const Property = React.createClass({
onBlur: this.handleBlur, onBlur: this.handleBlur,
disabled: !this.props.editable, disabled: !this.props.editable,
ref: 'input', ref: 'input',
name: this.props.name name: this.props.name,
setExpanded: this.setExpanded
}); });
}); });
} }
@ -293,13 +311,14 @@ const Property = React.createClass({
render() { render() {
let footer = null; let footer = null;
let style = this.props.style ? mergeOptions({}, this.props.style) : {}; let style = Object.assign({}, this.props.style);
if(this.props.footer){ if(this.props.footer){
footer = ( footer = (
<div className="ascribe-property-footer"> <div className="ascribe-property-footer">
{this.props.footer} {this.props.footer}
</div>); </div>
);
} }
style.paddingBottom = !this.state.expanded ? 0 : null; style.paddingBottom = !this.state.expanded ? 0 : null;

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 { mergeOptions } from '../../utils/general_utils';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions'; import EditionListActions from '../../actions/edition_list_actions';
import UserStore from '../../stores/user_store';
import UserActions from '../../actions/user_actions';
import PieceListStore from '../../stores/piece_list_store';
import PieceListActions from '../../actions/piece_list_actions';
import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget'; import PieceListBulkModalSelectedEditionsWidget from './piece_list_bulk_modal_selected_editions_widget';
import AclButtonList from '../ascribe_buttons/acl_button_list';
import DeleteButton from '../ascribe_buttons/delete_button';
import { getAvailableAcls } from '../../utils/acl_utils';
import { getLangText } from '../../utils/lang_utils.js'; import { getLangText } from '../../utils/lang_utils.js';
let PieceListBulkModal = React.createClass({ let PieceListBulkModal = React.createClass({
propTypes: { propTypes: {
className: React.PropTypes.string availableAcls: React.PropTypes.object.isRequired,
}, className: React.PropTypes.string,
selectedEditions: React.PropTypes.oneOfType([
getInitialState() { React.PropTypes.object,
return mergeOptions( React.PropTypes.array
EditionListStore.getState(), ]),
UserStore.getState(), children: React.PropTypes.oneOfType([
PieceListStore.getState() React.PropTypes.arrayOf(React.PropTypes.element),
); React.PropTypes.element
}, ])
componentDidMount() {
EditionListStore.listen(this.onChange);
UserStore.listen(this.onChange);
PieceListStore.listen(this.onChange);
UserActions.fetchCurrentUser();
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
},
componentWillUnmount() {
EditionListStore.unlisten(this.onChange);
PieceListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
fetchSelectedPieceEditionList() {
let filteredPieceIdList = Object.keys(this.state.editionList)
.filter((pieceId) => {
return this.state.editionList[pieceId]
.filter((edition) => edition.selected).length > 0;
});
return filteredPieceIdList;
},
fetchSelectedEditionList() {
let selectedEditionList = [];
Object
.keys(this.state.editionList)
.forEach((pieceId) => {
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
});
return selectedEditionList;
}, },
clearAllSelections() { clearAllSelections() {
@ -82,22 +29,8 @@ let PieceListBulkModal = React.createClass({
EditionListActions.closeAllEditionLists(); EditionListActions.closeAllEditionLists();
}, },
handleSuccess() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
this.fetchSelectedPieceEditionList()
.forEach((pieceId) => {
EditionListActions.refreshEditionList({pieceId, filterBy: {}});
});
EditionListActions.clearAllEditionSelections();
},
render() { render() {
let selectedEditions = this.fetchSelectedEditionList(); if (Object.keys(this.props.availableAcls).length) {
let availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
if(Object.keys(availableAcls).length > 0) {
return ( return (
<div className={this.props.className}> <div className={this.props.className}>
<div className="row no-margin"> <div className="row no-margin">
@ -106,7 +39,7 @@ let PieceListBulkModal = React.createClass({
<div className="row"> <div className="row">
<div className="text-center"> <div className="text-center">
<PieceListBulkModalSelectedEditionsWidget <PieceListBulkModalSelectedEditionsWidget
numberOfSelectedEditions={this.fetchSelectedEditionList().length} /> numberOfSelectedEditions={this.props.selectedEditions.length} />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span <span
className="piece-list-bulk-modal-clear-all" className="piece-list-bulk-modal-clear-all"
@ -115,15 +48,7 @@ let PieceListBulkModal = React.createClass({
</div> </div>
<p></p> <p></p>
<div className="row-fluid"> <div className="row-fluid">
<AclButtonList {this.props.children}
availableAcls={availableAcls}
pieceOrEditions={selectedEditions}
handleSuccess={this.handleSuccess}
className="text-center ascribe-button-list collapse-group">
<DeleteButton
handleSuccess={this.handleSuccess}
editions={selectedEditions}/>
</AclButtonList>
</div> </div>
</div> </div>
</div> </div>
@ -132,7 +57,6 @@ let PieceListBulkModal = React.createClass({
} else { } else {
return null; return null;
} }
} }
}); });

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

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

@ -1,7 +1,7 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { History } from 'react-router'; import { History, RouteContext } from 'react-router';
import UserStore from '../../../stores/user_store'; import UserStore from '../../../stores/user_store';
import UserActions from '../../../actions/user_actions'; import UserActions from '../../../actions/user_actions';
@ -37,7 +37,9 @@ export default function AuthProxyHandler({to, when}) {
location: object location: object
}, },
mixins: [History], // We need insert `RouteContext` here in order to be able
// to use the `Lifecycle` widget in further down nested components
mixins: [History, RouteContext],
getInitialState() { getInitialState() {
return UserStore.getState(); return UserStore.getState();

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

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

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({ let FacebookShareButton = React.createClass({
propTypes: { propTypes: {
url: React.PropTypes.string,
type: React.PropTypes.string type: React.PropTypes.string
}, },
@ -28,12 +27,14 @@ let FacebookShareButton = React.createClass({
* To circumvent this, we always have the sdk parse the entire DOM on the initial load * To circumvent this, we always have the sdk parse the entire DOM on the initial load
* (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later. * (see FacebookHandler) and then use FB.XFBML.parse() on the mounting component later.
*/ */
if (!InjectInHeadUtils.isPresent('script', AppConstants.facebook.sdkUrl)) {
InjectInHeadUtils.inject(AppConstants.facebook.sdkUrl); InjectInHeadUtils
} else { .inject(AppConstants.facebook.sdkUrl)
// Parse() searches the children of the element we give it, not the element itself. .then(() => { FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement) });
FB.XFBML.parse(this.refs.fbShareButton.getDOMNode().parentElement); },
}
shouldComponentUpdate(nextProps) {
return this.props.type !== nextProps.type;
}, },
render() { render() {
@ -41,7 +42,6 @@ let FacebookShareButton = React.createClass({
<span <span
ref="fbShareButton" ref="fbShareButton"
className="fb-share-button btn btn-ascribe-social" className="fb-share-button btn btn-ascribe-social"
data-href={this.props.url}
data-layout={this.props.type}> data-layout={this.props.type}>
</span> </span>
); );

18
js/components/ascribe_spinner.js
View File

@ -7,26 +7,26 @@ let AscribeSpinner = React.createClass({
propTypes: { propTypes: {
classNames: React.PropTypes.string, classNames: React.PropTypes.string,
size: React.PropTypes.oneOf(['sm', 'md', 'lg']), size: React.PropTypes.oneOf(['sm', 'md', 'lg']),
color: React.PropTypes.oneOf(['blue', 'dark-blue', 'light-blue', 'pink', 'black', 'loop']) color: React.PropTypes.oneOf(['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop'])
}, },
getDefaultProps() { getDefaultProps() {
return { return {
inline: false, inline: false,
size: 'md', size: 'md'
color: 'loop'
}; };
}, },
render() { render() {
const { classNames: classes, color, size } = this.props;
return ( return (
<div <div
className={ className={classNames('spinner-wrapper-' + size,
classNames('spinner-wrapper-' + this.props.size, color ? 'spinner-wrapper-' + color : null,
'spinner-wrapper-' + this.props.color, classes)}>
this.props.classNames)}> <div className='spinner-circle' />
<div className={classNames('spinner-circle')}></div> <div className='spinner-inner'>A</div>
<div className={classNames('spinner-inner')}>A</div>
</div> </div>
); );
} }

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

@ -15,7 +15,6 @@ let FileDragAndDrop = React.createClass({
className: React.PropTypes.string, className: React.PropTypes.string,
onDrop: React.PropTypes.func.isRequired, onDrop: React.PropTypes.func.isRequired,
onDragOver: React.PropTypes.func, onDragOver: React.PropTypes.func,
onInactive: React.PropTypes.func,
filesToUpload: React.PropTypes.array, filesToUpload: React.PropTypes.array,
handleDeleteFile: React.PropTypes.func, handleDeleteFile: React.PropTypes.func,
handleCancelFile: React.PropTypes.func, handleCancelFile: React.PropTypes.func,
@ -60,28 +59,21 @@ let FileDragAndDrop = React.createClass({
handleDrop(event) { handleDrop(event) {
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
let files;
if(this.props.dropzoneInactive) { if (!this.props.dropzoneInactive) {
// if there is a handle function for doing stuff let files;
// when the dropzone is inactive, then call it
if(this.props.onInactive) { // handle Drag and Drop
this.props.onInactive(); if(event.dataTransfer && event.dataTransfer.files.length > 0) {
files = event.dataTransfer.files;
} else if(event.target.files) { // handle input type file
files = event.target.files;
} }
return;
}
// handle Drag and Drop if(typeof this.props.onDrop === 'function' && files) {
if(event.dataTransfer && event.dataTransfer.files.length > 0) { this.props.onDrop(files);
files = event.dataTransfer.files; }
} else if(event.target.files) { // handle input type file
files = event.target.files;
} }
if(typeof this.props.onDrop === 'function' && files) {
this.props.onDrop(files);
}
}, },
handleDeleteFile(fileId) { handleDeleteFile(fileId) {
@ -113,31 +105,25 @@ let FileDragAndDrop = React.createClass({
}, },
handleOnClick() { handleOnClick() {
let evt; // do not propagate event if the drop zone's inactive,
// when multiple is set to false and the user already uploaded a piece, // for example when multiple is set to false and the user already uploaded a piece
// do not propagate event if (!this.props.dropzoneInactive) {
if(this.props.dropzoneInactive) { let evt;
// if there is a handle function for doing stuff
// when the dropzone is inactive, then call it try {
if(this.props.onInactive) { evt = new MouseEvent('click', {
this.props.onInactive(); view: window,
bubbles: true,
cancelable: true
});
} catch(e) {
// For browsers that do not support the new MouseEvent syntax
evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
} }
return;
}
try { this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
evt = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
} catch(e) {
// For browsers that do not support the new MouseEvent syntax
evt = document.createEvent('MouseEvents');
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
} }
this.refs.fileSelector.getDOMNode().dispatchEvent(evt);
}, },
render: function () { render: function () {

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

@ -112,7 +112,6 @@ const ReactS3FineUploader = React.createClass({
areAssetsDownloadable: bool, areAssetsDownloadable: bool,
areAssetsEditable: bool, areAssetsEditable: bool,
defaultErrorMessage: string, defaultErrorMessage: string,
onInactive: func,
// We encountered some cases where people had difficulties to upload their // We encountered some cases where people had difficulties to upload their
// works to ascribe due to a slow internet connection. // works to ascribe due to a slow internet connection.
@ -940,7 +939,6 @@ const ReactS3FineUploader = React.createClass({
multiple, multiple,
areAssetsDownloadable, areAssetsDownloadable,
areAssetsEditable, areAssetsEditable,
onInactive,
enableLocalHashing, enableLocalHashing,
fileClassToUpload, fileClassToUpload,
fileInputElement: FileInputElement, fileInputElement: FileInputElement,
@ -950,7 +948,6 @@ const ReactS3FineUploader = React.createClass({
multiple, multiple,
areAssetsDownloadable, areAssetsDownloadable,
areAssetsEditable, areAssetsEditable,
onInactive,
enableLocalHashing, enableLocalHashing,
uploadMethod, uploadMethod,
fileClassToUpload, fileClassToUpload,

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

22
js/components/header.js
View File

@ -1,9 +1,10 @@
'use strict'; 'use strict';
import React from 'react'; import React from 'react';
import { Link } from 'react-router'; import { Link } from 'react-router';
import history from '../history';
import Nav from 'react-bootstrap/lib/Nav'; import Nav from 'react-bootstrap/lib/Nav';
import Navbar from 'react-bootstrap/lib/Navbar'; import Navbar from 'react-bootstrap/lib/Navbar';
import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav'; import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@ -58,11 +59,17 @@ let Header = React.createClass({
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel(); WhitelabelActions.fetchWhitelabel();
WhitelabelStore.listen(this.onChange); WhitelabelStore.listen(this.onChange);
// react-bootstrap 0.25.1 has a bug in which it doesn't
// close the mobile expanded navigation after a click by itself.
// To get rid of this, we set the state of the component ourselves.
history.listen(this.onRouteChange);
}, },
componentWillUnmount() { componentWillUnmount() {
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange); WhitelabelStore.unlisten(this.onChange);
history.unlisten(this.onRouteChange);
}, },
getLogo() { getLogo() {
@ -135,6 +142,13 @@ let Header = React.createClass({
this.refs.dropdownbutton.setDropdownState(false); this.refs.dropdownbutton.setDropdownState(false);
}, },
// On route change, close expanded navbar again since react-bootstrap doesn't close
// the collapsibleNav by itself on click. setState() isn't available on a ref so
// doing this explicitly is the only way for now.
onRouteChange() {
this.refs.navbar.state.navExpanded = false;
},
render() { render() {
let account; let account;
let signup; let signup;
@ -201,8 +215,10 @@ let Header = React.createClass({
<Navbar <Navbar
brand={this.getLogo()} brand={this.getLogo()}
toggleNavKey={0} toggleNavKey={0}
fixedTop={true}> fixedTop={true}
<CollapsibleNav eventKey={0}> ref="navbar">
<CollapsibleNav
eventKey={0}>
<Nav navbar left> <Nav navbar left>
{this.getPoweredBy()} {this.getPoweredBy()}
</Nav> </Nav>

205
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 AccordionListItemWallet from './ascribe_accordion_list/accordion_list_item_wallet';
import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions'; import AccordionListItemTableEditions from './ascribe_accordion_list/accordion_list_item_table_editions';
import AclButtonList from './ascribe_buttons/acl_button_list.js';
import DeleteButton from './ascribe_buttons/delete_button';
import Pagination from './ascribe_pagination/pagination'; import Pagination from './ascribe_pagination/pagination';
import PieceListFilterDisplay from './piece_list_filter_display'; import PieceListFilterDisplay from './piece_list_filter_display';
@ -22,7 +25,8 @@ import PieceListToolbar from './ascribe_piece_list_toolbar/piece_list_toolbar';
import AscribeSpinner from './ascribe_spinner'; import AscribeSpinner from './ascribe_spinner';
import { mergeOptions } from '../utils/general_utils'; import { getAvailableAcls } from '../utils/acl_utils';
import { mergeOptions, isShallowEqual } from '../utils/general_utils';
import { getLangText } from '../utils/lang_utils'; import { getLangText } from '../utils/lang_utils';
import { setDocumentTitle } from '../utils/dom_utils'; import { setDocumentTitle } from '../utils/dom_utils';
@ -30,8 +34,11 @@ import { setDocumentTitle } from '../utils/dom_utils';
let PieceList = React.createClass({ let PieceList = React.createClass({
propTypes: { propTypes: {
accordionListItemType: React.PropTypes.func, accordionListItemType: React.PropTypes.func,
bulkModalButtonListType: React.PropTypes.func,
canLoadPieceList: React.PropTypes.bool,
redirectTo: React.PropTypes.string, redirectTo: React.PropTypes.string,
customSubmitButton: React.PropTypes.element, customSubmitButton: React.PropTypes.element,
customThumbnailPlaceholder: React.PropTypes.func,
filterParams: React.PropTypes.array, filterParams: React.PropTypes.array,
orderParams: React.PropTypes.array, orderParams: React.PropTypes.array,
orderBy: React.PropTypes.string, orderBy: React.PropTypes.string,
@ -43,6 +50,8 @@ let PieceList = React.createClass({
getDefaultProps() { getDefaultProps() {
return { return {
accordionListItemType: AccordionListItemWallet, accordionListItemType: AccordionListItemWallet,
bulkModalButtonListType: AclButtonList,
canLoadPieceList: true,
orderParams: ['artist_name', 'title'], orderParams: ['artist_name', 'title'],
filterParams: [{ filterParams: [{
label: getLangText('Show works I can'), label: getLangText('Show works I can'),
@ -54,23 +63,53 @@ let PieceList = React.createClass({
}] }]
}; };
}, },
getInitialState() { getInitialState() {
return mergeOptions( const pieceListStore = PieceListStore.getState();
PieceListStore.getState(), const stores = mergeOptions(
EditionListStore.getState() pieceListStore,
EditionListStore.getState(),
{
isFilterDirty: false
}
); );
// Use the default filters but use the pieceListStore's settings if they're available
stores.filterBy = Object.assign(this.getDefaultFilterBy(), pieceListStore.filterBy);
return stores;
}, },
componentDidMount() { componentDidMount() {
let page = this.props.location.query.page || 1;
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
EditionListStore.listen(this.onChange); EditionListStore.listen(this.onChange);
let orderBy = this.props.orderBy ? this.props.orderBy : this.state.orderBy; let page = this.props.location.query.page || 1;
if (this.state.pieceList.length === 0 || this.state.page !== page){ if (this.props.canLoadPieceList && (this.state.pieceList.length === 0 || this.state.page !== page)) {
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.loadPieceList({ page });
orderBy, this.state.orderAsc, this.state.filterBy); }
},
componentWillReceiveProps(nextProps) {
let filterBy;
let page = this.props.location.query.page || 1;
// If the user hasn't changed the filter and the new default filter is different
// than the current filter, apply the new default filter
if (!this.state.isFilterDirty) {
const newDefaultFilterBy = this.getDefaultFilterBy(nextProps);
// Only need to check shallowly since the filterBy shouldn't be nested
if (!isShallowEqual(this.state.filterBy, newDefaultFilterBy)) {
filterBy = newDefaultFilterBy;
page = 1;
}
}
// Only load if we are applying a new filter or if it's the first time we can
// load the piece list
if (nextProps.canLoadPieceList && (filterBy || !this.props.canLoadPieceList)) {
this.loadPieceList({ page, filterBy });
} }
}, },
@ -90,14 +129,29 @@ let PieceList = React.createClass({
this.setState(state); this.setState(state);
}, },
getDefaultFilterBy(props = this.props) {
const { filterParams } = props;
const defaultFilterBy = {};
if (filterParams && typeof filterParams.forEach === 'function') {
filterParams.forEach(({ items }) => {
items.forEach((item) => {
if (typeof item === 'object' && item.defaultValue) {
defaultFilterBy[item.key] = true;
}
});
});
}
return defaultFilterBy;
},
paginationGoToPage(page) { paginationGoToPage(page) {
return () => { return () => {
// if the users clicks a pager of the pagination, // if the users clicks a pager of the pagination,
// the site should go to the top // the site should go to the top
document.body.scrollTop = document.documentElement.scrollTop = 0; document.body.scrollTop = document.documentElement.scrollTop = 0;
PieceListActions.fetchPieceList(page, this.state.pageSize, this.state.search, this.loadPieceList({ page });
this.state.orderBy, this.state.orderAsc,
this.state.filterBy);
}; };
}, },
@ -116,29 +170,35 @@ let PieceList = React.createClass({
}, },
searchFor(searchTerm) { searchFor(searchTerm) {
PieceListActions.fetchPieceList(1, this.state.pageSize, searchTerm, this.state.orderBy, this.loadPieceList({
this.state.orderAsc, this.state.filterBy); page: 1,
this.history.pushState(null, this.props.location.pathname, {page: 1}); search: searchTerm
});
this.history.pushState(null, this.props.location.pathname, {page: 1});
}, },
applyFilterBy(filterBy){ applyFilterBy(filterBy){
// first we need to apply the filter on the piece list this.setState({
PieceListActions.fetchPieceList(1, this.state.pageSize, this.state.search, isFilterDirty: true
this.state.orderBy, this.state.orderAsc, filterBy) });
.then(() => {
// but also, we need to filter all the open edition lists
this.state.pieceList
.forEach((piece) => {
// but only if they're actually open
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
EditionListActions.refreshEditionList({
pieceId: piece.id,
filterBy
});
}
}); // first we need to apply the filter on the piece list
}); this
.loadPieceList({ page: 1, filterBy })
.then(() => {
// but also, we need to filter all the open edition lists
this.state.pieceList
.forEach((piece) => {
// but only if they're actually open
if(this.state.isEditionListOpenForPieceId[piece.id].show) {
EditionListActions.refreshEditionList({
pieceId: piece.id,
filterBy
});
}
});
});
// we have to redirect the user always to page one as it could be that there is no page two // we have to redirect the user always to page one as it could be that there is no page two
// for filtered pieces // for filtered pieces
@ -150,35 +210,97 @@ let PieceList = React.createClass({
orderBy, this.state.orderAsc, this.state.filterBy); orderBy, this.state.orderAsc, this.state.filterBy);
}, },
loadPieceList({ page, filterBy = this.state.filterBy, search = this.state.search }) {
const orderBy = this.state.orderBy || this.props.orderBy;
return PieceListActions.fetchPieceList(page, this.state.pageSize, search,
orderBy, this.state.orderAsc, filterBy);
},
fetchSelectedPieceEditionList() {
let filteredPieceIdList = Object.keys(this.state.editionList)
.filter((pieceId) => {
return this.state.editionList[pieceId]
.filter((edition) => edition.selected).length > 0;
});
return filteredPieceIdList;
},
fetchSelectedEditionList() {
let selectedEditionList = [];
Object
.keys(this.state.editionList)
.forEach((pieceId) => {
let filteredEditionsForPiece = this.state.editionList[pieceId].filter((edition) => edition.selected);
selectedEditionList = selectedEditionList.concat(filteredEditionsForPiece);
});
return selectedEditionList;
},
handleAclSuccess() {
PieceListActions.fetchPieceList(this.state.page, this.state.pageSize, this.state.search,
this.state.orderBy, this.state.orderAsc, this.state.filterBy);
this.fetchSelectedPieceEditionList()
.forEach((pieceId) => {
EditionListActions.refreshEditionList({pieceId});
});
EditionListActions.clearAllEditionSelections();
},
render() { render() {
let loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>; const {
let AccordionListItemType = this.props.accordionListItemType; accordionListItemType: AccordionListItemType,
bulkModalButtonListType: BulkModalButtonListType,
customSubmitButton,
customThumbnailPlaceholder,
filterParams,
orderParams } = this.props;
const loadingElement = <AscribeSpinner color='dark-blue' size='lg'/>;
const selectedEditions = this.fetchSelectedEditionList();
const availableAcls = getAvailableAcls(selectedEditions, (aclName) => aclName !== 'acl_view');
setDocumentTitle(getLangText('Collection')); setDocumentTitle(getLangText('Collection'));
return ( return (
<div> <div>
<PieceListToolbar <PieceListToolbar
className="ascribe-piece-list-toolbar" className="ascribe-piece-list-toolbar"
searchFor={this.searchFor} searchFor={this.searchFor}
searchQuery={this.state.search} searchQuery={this.state.search}
filterParams={this.props.filterParams} filterParams={filterParams}
orderParams={this.props.orderParams} orderParams={orderParams}
filterBy={this.state.filterBy} filterBy={this.state.filterBy}
orderBy={this.state.orderBy} orderBy={this.state.orderBy}
applyFilterBy={this.applyFilterBy} applyFilterBy={this.applyFilterBy}
applyOrderBy={this.applyOrderBy}> applyOrderBy={this.applyOrderBy}>
{this.props.customSubmitButton ? {customSubmitButton ?
this.props.customSubmitButton : customSubmitButton :
<button className="btn btn-default btn-ascribe-add"> <button className="btn btn-default btn-ascribe-add">
<span className="icon-ascribe icon-ascribe-add" /> <span className="icon-ascribe icon-ascribe-add" />
</button> </button>
} }
</PieceListToolbar> </PieceListToolbar>
<PieceListBulkModal className="ascribe-piece-list-bulk-modal" /> <PieceListBulkModal
availableAcls={availableAcls}
selectedEditions={selectedEditions}
className="ascribe-piece-list-bulk-modal">
<BulkModalButtonListType
availableAcls={availableAcls}
pieceOrEditions={selectedEditions}
handleSuccess={this.handleAclSuccess}
className="text-center ascribe-button-list collapse-group">
<DeleteButton
handleSuccess={this.handleAclSuccess}
editions={selectedEditions}/>
</BulkModalButtonListType>
</PieceListBulkModal>
<PieceListFilterDisplay <PieceListFilterDisplay
filterBy={this.state.filterBy} filterBy={this.state.filterBy}
filterParams={this.props.filterParams}/> filterParams={filterParams}/>
<AccordionList <AccordionList
className="ascribe-accordion-list" className="ascribe-accordion-list"
changeOrder={this.accordionChangeOrder} changeOrder={this.accordionChangeOrder}
@ -196,6 +318,7 @@ let PieceList = React.createClass({
<AccordionListItemType <AccordionListItemType
className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item" className="col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2 ascribe-accordion-list-item"
content={piece} content={piece}
thumbnailPlaceholder={customThumbnailPlaceholder}
key={i}> key={i}>
<AccordionListItemTableEditions <AccordionListItemTableEditions
className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2" className="ascribe-accordion-list-item-table col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"

2
js/components/piece_list_filter_display.js
View File

@ -97,12 +97,12 @@ let PieceListFilterDisplay = React.createClass({
render() { render() {
let { filterBy } = this.props; let { filterBy } = this.props;
let filtersWithLabel = this.transformFilterParamsItemsToBools();
// do not show the FilterDisplay if there are no filters applied // do not show the FilterDisplay if there are no filters applied
if(filterBy && Object.keys(filterBy).length === 0) { if(filterBy && Object.keys(filterBy).length === 0) {
return null; return null;
} else { } else {
const filtersWithLabel = this.transformFilterParamsItemsToBools();
return ( return (
<div className="row"> <div className="row">
<div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2"> <div className="ascribe-piece-list-filter-display col-xs-12 col-sm-10 col-md-8 col-lg-8 col-sm-offset-1 col-md-offset-2 col-lg-offset-2">

16
js/components/register_piece.js
View File

@ -44,11 +44,8 @@ let RegisterPiece = React.createClass( {
return mergeOptions( return mergeOptions(
UserStore.getState(), UserStore.getState(),
WhitelabelStore.getState(), WhitelabelStore.getState(),
PieceListStore.getState(), PieceListStore.getState()
{ );
selectedLicense: 0,
isFineUploaderActive: false
});
}, },
componentDidMount() { componentDidMount() {
@ -66,13 +63,6 @@ let RegisterPiece = React.createClass( {
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
// we should also make the fineuploader component editable again
this.setState({
isFineUploaderActive: true
});
}
}, },
handleSuccess(response){ handleSuccess(response){
@ -118,7 +108,7 @@ let RegisterPiece = React.createClass( {
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<RegisterPieceForm <RegisterPieceForm
{...this.props} {...this.props}
isFineUploaderActive={this.state.isFineUploaderActive} isFineUploaderActive={true}
handleSuccess={this.handleSuccess} handleSuccess={this.handleSuccess}
location={this.props.location}> location={this.props.location}>
{this.props.children} {this.props.children}

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

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

@ -292,8 +292,8 @@ let PrizePieceRatings = React.createClass({
url={ApiUrls.ownership_loans_pieces_request} url={ApiUrls.ownership_loans_pieces_request}
email={this.props.currentUser.email} email={this.props.currentUser.email}
gallery={this.props.piece.prize.name} gallery={this.props.piece.prize.name}
startdate={today} startDate={today}
enddate={endDate} endDate={endDate}
showPersonalMessage={true} showPersonalMessage={true}
showPassword={false} showPassword={false}
handleSuccess={this.handleLoanSuccess} /> handleSuccess={this.handleLoanSuccess} />

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;

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

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

@ -57,9 +57,9 @@ let CylandLanding = React.createClass({
setDocumentTitle('CYLAND MediaArtLab'); setDocumentTitle('CYLAND MediaArtLab');
return ( return (
<div className="container ascribe-form-wrapper"> <div className="container ascribe-form-wrapper cyland-landing">
<div className="row"> <div className="row">
<div className="col-xs-12 wp-landing-wrapper"> <div className="col-xs-12">
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}> <div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
<img src={this.state.whitelabel.logo} width="400px"/> <img src={this.state.whitelabel.logo} width="400px"/>
<div style={{marginTop: '1em'}}> <div style={{marginTop: '1em'}}>

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

@ -53,8 +53,6 @@ let CylandRegisterPiece = React.createClass({
PieceStore.getState(), PieceStore.getState(),
WhitelabelStore.getState(), WhitelabelStore.getState(),
{ {
selectedLicense: 0,
isFineUploaderActive: false,
step: 0 step: 0
}); });
}, },
@ -90,13 +88,6 @@ let CylandRegisterPiece = React.createClass({
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
// we should also make the fineuploader component editable again
this.setState({
isFineUploaderActive: true
});
}
}, },
handleRegisterSuccess(response){ handleRegisterSuccess(response){
@ -167,11 +158,6 @@ let CylandRegisterPiece = React.createClass({
} }
}, },
// basically redirects to the second slide (index: 1), when the user is not logged in
onLoggedOut() {
this.history.pushState(null, '/login');
},
render() { render() {
let today = new Moment(); let today = new Moment();
@ -197,9 +183,8 @@ let CylandRegisterPiece = React.createClass({
enableLocalHashing={false} enableLocalHashing={false}
headerMessage={getLangText('Submit to Cyland Archive')} headerMessage={getLangText('Submit to Cyland Archive')}
submitMessage={getLangText('Submit')} submitMessage={getLangText('Submit')}
isFineUploaderActive={this.state.isFineUploaderActive} isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
onLoggedOut={this.onLoggedOut}
location={this.props.location}/> location={this.props.location}/>
</Col> </Col>
</Row> </Row>
@ -229,8 +214,8 @@ let CylandRegisterPiece = React.createClass({
url={ApiUrls.ownership_loans_pieces} url={ApiUrls.ownership_loans_pieces}
email={this.state.whitelabel.user} email={this.state.whitelabel.user}
gallery="Cyland Archive" gallery="Cyland Archive"
startdate={today} startDate={today}
enddate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain} endDate={datetimeWhenWeAllWillBeFlyingCoolHoverboardsAndDinosaursWillLiveAgain}
showStartDate={false} showStartDate={false}
showEndDate={false} showEndDate={false}
showPersonalMessage={false} showPersonalMessage={false}

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 <Property
name='artist_website' name='artist_website'
label={getLangText('Artist Website')} label={getLangText('Artist Website')}
expanded={!this.props.disabled && this.props.piece.extra_data.artist_website}> expanded={!this.props.disabled || !!this.props.piece.extra_data.artist_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.artist_website} defaultValue={this.props.piece.extra_data.artist_website}
@ -113,7 +113,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property <Property
name='gallery_website' name='gallery_website'
label={getLangText('Website of related Gallery, Museum, etc.')} label={getLangText('Website of related Gallery, Museum, etc.')}
expanded={!this.props.disabled && this.props.piece.extra_data.gallery_website}> expanded={!this.props.disabled || !!this.props.piece.extra_data.gallery_website}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.gallery_website} defaultValue={this.props.piece.extra_data.gallery_website}
@ -122,7 +122,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property <Property
name='additional_websites' name='additional_websites'
label={getLangText('Additional Websites/Publications/Museums/Galleries')} label={getLangText('Additional Websites/Publications/Museums/Galleries')}
expanded={!this.props.disabled && this.props.piece.extra_data.additional_websites}> expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_websites}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_websites} defaultValue={this.props.piece.extra_data.additional_websites}
@ -131,7 +131,7 @@ let IkonotvArtistDetailsForm = React.createClass({
<Property <Property
name='conceptual_overview' name='conceptual_overview'
label={getLangText('Short text about the Artist')} label={getLangText('Short text about the Artist')}
expanded={!this.props.disabled && this.props.piece.extra_data.conceptual_overview}> expanded={!this.props.disabled || !!this.props.piece.extra_data.conceptual_overview}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.conceptual_overview} defaultValue={this.props.piece.extra_data.conceptual_overview}

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 <Property
name='medium' name='medium'
label={getLangText('Medium')} label={getLangText('Medium')}
expanded={!this.props.disabled && this.props.piece.extra_data.medium}> expanded={!this.props.disabled || !!this.props.piece.extra_data.medium}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.medium} defaultValue={this.props.piece.extra_data.medium}
@ -112,7 +112,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='size_duration' name='size_duration'
label={getLangText('Size/Duration')} label={getLangText('Size/Duration')}
expanded={!this.props.disabled && this.props.piece.extra_data.size_duration}> expanded={!this.props.disabled || !!this.props.piece.extra_data.size_duration}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.size_duration} defaultValue={this.props.piece.extra_data.size_duration}
@ -121,7 +121,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='copyright' name='copyright'
label={getLangText('Copyright')} label={getLangText('Copyright')}
expanded={!this.props.disabled && this.props.piece.extra_data.copyright}> expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright} defaultValue={this.props.piece.extra_data.copyright}
@ -130,7 +130,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='courtesy_of' name='courtesy_of'
label={getLangText('Courtesy of')} label={getLangText('Courtesy of')}
expanded={!this.props.disabled && this.props.piece.extra_data.courtesy_of}> expanded={!this.props.disabled || !!this.props.piece.extra_data.courtesy_of}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.courtesy_of} defaultValue={this.props.piece.extra_data.courtesy_of}
@ -139,7 +139,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='copyright_of_photography' name='copyright_of_photography'
label={getLangText('Copyright of Photography')} label={getLangText('Copyright of Photography')}
expanded={!this.props.disabled && this.props.piece.extra_data.copyright_of_photography}> expanded={!this.props.disabled || !!this.props.piece.extra_data.copyright_of_photography}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.copyright_of_photography} defaultValue={this.props.piece.extra_data.copyright_of_photography}
@ -148,7 +148,7 @@ let IkonotvArtworkDetailsForm = React.createClass({
<Property <Property
name='additional_details' name='additional_details'
label={getLangText('Additional Details about the artwork')} label={getLangText('Additional Details about the artwork')}
expanded={!this.props.disabled && this.props.piece.extra_data.additional_details}> expanded={!this.props.disabled || !!this.props.piece.extra_data.additional_details}>
<InputTextAreaToggable <InputTextAreaToggable
rows={1} rows={1}
defaultValue={this.props.piece.extra_data.additional_details} defaultValue={this.props.piece.extra_data.additional_details}

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 PieceStore from '../../../../../stores/piece_store';
import PieceActions from '../../../../../actions/piece_actions'; import PieceActions from '../../../../../actions/piece_actions';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import GlobalNotificationModel from '../../../../../models/global_notification_model'; import GlobalNotificationModel from '../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../actions/global_notification_actions'; import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
@ -32,6 +35,7 @@ import ApiUrls from '../../../../../constants/api_urls';
import { mergeOptions } from '../../../../../utils/general_utils'; import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils'; import { getLangText } from '../../../../../utils/lang_utils';
let IkonotvRegisterPiece = React.createClass({ let IkonotvRegisterPiece = React.createClass({
propTypes: { propTypes: {
handleSuccess: React.PropTypes.func, handleSuccess: React.PropTypes.func,
@ -46,8 +50,10 @@ let IkonotvRegisterPiece = React.createClass({
UserStore.getState(), UserStore.getState(),
PieceListStore.getState(), PieceListStore.getState(),
PieceStore.getState(), PieceStore.getState(),
WhitelabelStore.getState(),
{ {
step: 0 step: 0,
pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
}); });
}, },
@ -55,7 +61,9 @@ let IkonotvRegisterPiece = React.createClass({
PieceListStore.listen(this.onChange); PieceListStore.listen(this.onChange);
UserStore.listen(this.onChange); UserStore.listen(this.onChange);
PieceStore.listen(this.onChange); PieceStore.listen(this.onChange);
WhitelabelStore.listen(this.onChange);
UserActions.fetchCurrentUser(); UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
// Before we load the new piece, we reset the piece store to delete old data that we do // Before we load the new piece, we reset the piece store to delete old data that we do
// not want to display to the user. // not want to display to the user.
@ -79,22 +87,15 @@ let IkonotvRegisterPiece = React.createClass({
PieceListStore.unlisten(this.onChange); PieceListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange); UserStore.unlisten(this.onChange);
PieceStore.unlisten(this.onChange); PieceStore.unlisten(this.onChange);
WhitelabelStore.listen(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
// we should also make the fineuploader component editable again
this.setState({
isFineUploaderActive: true
});
}
}, },
handleRegisterSuccess(response){ handleRegisterSuccess(response){
this.refreshPieceList(); this.refreshPieceList();
// also start loading the piece for the next step // also start loading the piece for the next step
@ -108,7 +109,6 @@ let IkonotvRegisterPiece = React.createClass({
this.incrementStep(); this.incrementStep();
this.refs.slidesContainer.nextSlide(); this.refs.slidesContainer.nextSlide();
} }
}, },
handleAdditionalDataSuccess() { handleAdditionalDataSuccess() {
@ -126,6 +126,8 @@ let IkonotvRegisterPiece = React.createClass({
}, },
handleLoanSuccess(response) { handleLoanSuccess(response) {
this.setState({ pageExitWarning: null });
let notification = new GlobalNotificationModel(response.notification, 'success', 10000); let notification = new GlobalNotificationModel(response.notification, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
@ -155,22 +157,10 @@ let IkonotvRegisterPiece = React.createClass({
); );
}, },
changeSlide() {
// only transition to the login store, if user is not logged in
// ergo the currentUser object is not properly defined
if(this.state.currentUser && !this.state.currentUser.email) {
this.onLoggedOut();
}
},
// basically redirects to the second slide (index: 1), when the user is not logged in
onLoggedOut() {
this.history.pushState(null, '/login');
},
canSubmit() { canSubmit() {
let currentUser = this.state.currentUser; let currentUser = this.state.currentUser;
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit; let whitelabel = this.state.whitelabel;
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
}, },
getSlideArtistDetails() { getSlideArtistDetails() {
@ -209,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
getSlideLoan() { getSlideLoan() {
if (this.canSubmit()) { if (this.canSubmit()) {
const { piece, whitelabel } = this.state;
let today = new Moment(); let today = new Moment();
let enddate = new Moment(); let endDate = new Moment();
enddate.add(2, 'years'); endDate.add(2, 'years');
return ( return (
<div data-slide-title={getLangText('Loan')}> <div data-slide-title={getLangText('Loan')}>
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<LoanForm <LoanForm
loanHeading={getLangText('Loan to IkonoTV archive')} loanHeading={getLangText('Loan to IkonoTV archive')}
id={{piece_id: this.state.piece.id}} id={{piece_id: piece.id}}
url={ApiUrls.ownership_loans_pieces} url={ApiUrls.ownership_loans_pieces}
email="submissions@ikono.org" email={whitelabel.user}
startdate={today} startDate={today}
enddate={enddate} endDate={endDate}
showStartDate={false} showStartDate={false}
showEndDate={false} showEndDate={false}
gallery="IkonoTV archive" gallery="IkonoTV archive"
@ -238,6 +230,8 @@ let IkonotvRegisterPiece = React.createClass({
}, },
render() { render() {
const { pageExitWarning } = this.state;
return ( return (
<SlidesContainer <SlidesContainer
ref="slidesContainer" ref="slidesContainer"
@ -246,7 +240,8 @@ let IkonotvRegisterPiece = React.createClass({
pending: 'glyphicon glyphicon-chevron-right', pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock' completed: 'glyphicon glyphicon-lock'
}} }}
location={this.props.location}> location={this.props.location}
pageExitWarning={pageExitWarning}>
<div data-slide-title={getLangText('Register work')}> <div data-slide-title={getLangText('Register work')}>
<Row className="no-margin"> <Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}> <Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
@ -255,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
enableLocalHashing={false} enableLocalHashing={false}
headerMessage={getLangText('Register work')} headerMessage={getLangText('Register work')}
submitMessage={getLangText('Register')} submitMessage={getLangText('Register')}
isFineUploaderActive={this.state.isFineUploaderActive} isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess} handleSuccess={this.handleRegisterSuccess}
onLoggedOut={this.onLoggedOut}
location={this.props.location}/> location={this.props.location}/>
</Col> </Col>
</Row> </Row>

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;

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

@ -0,0 +1,242 @@
'use strict';
import React from 'react';
import Form from '../../../../../ascribe_forms/form';
import Property from '../../../../../ascribe_forms/property';
import InputTextAreaToggable from '../../../../../ascribe_forms/input_textarea_toggable';
import FurtherDetailsFileuploader from '../../../../../ascribe_detail/further_details_fileuploader';
import AscribeSpinner from '../../../../../ascribe_spinner';
import GlobalNotificationModel from '../../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../../actions/global_notification_actions';
import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
import PieceActions from '../../../../../../actions/piece_actions';
import PieceStore from '../../../../../../stores/piece_store';
import ApiUrls from '../../../../../../constants/api_urls';
import AppConstants from '../../../../../../constants/application_constants';
import requests from '../../../../../../utils/requests';
import { mergeOptions } from '../../../../../../utils/general_utils';
import { getLangText } from '../../../../../../utils/lang_utils';
let MarketAdditionalDataForm = React.createClass({
propTypes: {
pieceId: React.PropTypes.oneOfType([
React.PropTypes.number,
React.PropTypes.string
]),
editable: React.PropTypes.bool,
isInline: React.PropTypes.bool,
showHeading: React.PropTypes.bool,
showNotification: React.PropTypes.bool,
submitLabel: React.PropTypes.string,
handleSuccess: React.PropTypes.func
},
getDefaultProps() {
return {
editable: true,
submitLabel: getLangText('Register work')
};
},
getInitialState() {
const pieceStore = PieceStore.getState();
return mergeOptions(
pieceStore,
{
// Allow the form to be submitted if there's already an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(pieceStore.piece),
forceUpdateKey: 0
});
},
componentDidMount() {
PieceStore.listen(this.onChange);
if (this.props.pieceId) {
PieceActions.fetchOne(this.props.pieceId);
}
},
componentWillUnmount() {
PieceStore.unlisten(this.onChange);
},
onChange(state) {
Object.assign({}, state, {
// Allow the form to be submitted if the updated piece already has an additional image uploaded
isUploadReady: this.isUploadReadyOnChange(state.piece),
/**
* Increment the forceUpdateKey to force the form to rerender on each change
*
* THIS IS A HACK TO MAKE SURE THE FORM ALWAYS DISPLAYS THE MOST RECENT STATE
* BECAUSE SOME OF OUR FORM ELEMENTS DON'T UPDATE FROM PROP CHANGES (ie.
* InputTextAreaToggable).
*/
forceUpdateKey: this.state.forceUpdateKey + 1
});
this.setState(state);
},
getFormData() {
let extradata = {};
let formRefs = this.refs.form.refs;
// Put additional fields in extra data object
Object
.keys(formRefs)
.forEach((fieldName) => {
extradata[fieldName] = formRefs[fieldName].state.value;
});
return {
extradata: extradata,
piece_id: this.state.piece.id
};
},
isUploadReadyOnChange(piece) {
return piece && piece.other_data && piece.other_data.length > 0;
},
handleSuccessWithNotification() {
if (typeof this.props.handleSuccess === 'function') {
this.props.handleSuccess();
}
let notification = new GlobalNotificationModel(getLangText('Further details successfully updated'), 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
},
uploadStarted() {
this.setState({
isUploadReady: false
});
},
setIsUploadReady(isReady) {
this.setState({
isUploadReady: isReady
});
},
render() {
const { editable, isInline, handleSuccess, showHeading, showNotification, submitLabel } = this.props;
const { piece } = this.state;
let buttons, heading;
let spinner = <AscribeSpinner color='dark-blue' size='lg' />;
if (!isInline) {
buttons = (
<button
type="submit"
className="btn btn-default btn-wide"
disabled={!this.state.isUploadReady}>
{submitLabel}
</button>
);
spinner = (
<div className="modal-footer">
<p className="pull-right">
{spinner}
</p>
</div>
);
heading = showHeading ? (
<div className="ascribe-form-header">
<h3>
{getLangText('Provide additional details')}
</h3>
</div>
) : null;
}
if (piece && piece.id) {
return (
<Form
className="ascribe-form-bordered"
ref='form'
key={this.state.forceUpdateKey}
url={requests.prepareUrl(ApiUrls.piece_extradata, {piece_id: piece.id})}
handleSuccess={showNotification ? this.handleSuccessWithNotification : handleSuccess}
getFormData={this.getFormData}
buttons={buttons}
spinner={spinner}
disabled={!this.props.editable || !piece.acl.acl_edit}>
{heading}
<FurtherDetailsFileuploader
label={getLangText('Marketplace Thumbnail Image')}
uploadStarted={this.uploadStarted}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
pieceId={piece.id}
otherData={piece.other_data}
editable={editable} />
<Property
name='artist_bio'
label={getLangText('Artist Bio')}
expanded={editable || !!piece.extra_data.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
placeholder={getLangText('Enter a biography of the artist...')}
required />
</Property>
<Property
name='work_description'
label={getLangText('Work Description')}
expanded={editable || !!piece.extra_data.work_description}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.work_description}
placeholder={getLangText('Enter a description of the work...')}
required />
</Property>
<Property
name='technology_details'
label={getLangText('Technology Details')}
expanded={editable || !!piece.extra_data.technology_details}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.technology_details}
placeholder={getLangText('Enter technological details about the work...')}
required />
</Property>
<Property
name='display_instructions'
label={getLangText('Display Instructions')}
expanded={editable || !!piece.extra_data.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
placeholder={getLangText('Enter instructions on how to best display the work...')}
required />
</Property>
</Form>
);
} else {
return (
<div className="ascribe-loading-position">
{spinner}
</div>
);
}
}
});
export default MarketAdditionalDataForm;

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 {
isFineUploaderActive,
step,
whitelabel: {
name: whitelabelName = 'Market'
} } = this.state;
setDocumentTitle(getLangText('Register a new piece'));
return (
<SlidesContainer
ref="slidesContainer"
forwardProcess={true}
glyphiconClassNames={{
pending: 'glyphicon glyphicon-chevron-right',
completed: 'glyphicon glyphicon-lock'
}}
location={this.props.location}>
<div data-slide-title={getLangText('Register work')}>
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<RegisterPieceForm
disabled={step > 0}
enableLocalHashing={false}
headerMessage={getLangText('Consign to %s', whitelabelName)}
submitMessage={getLangText('Proceed to additional details')}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
location={this.props.location}>
<Property
name="num_editions"
label={getLangText('Specify editions')}>
<input
type="number"
placeholder="(e.g. 32)"
min={0}
required />
</Property>
</RegisterPieceForm>
</Col>
</Row>
</div>
<div data-slide-title={getLangText('Additional details')}>
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<MarketAdditionalDataForm
handleSuccess={this.handleAdditionalDataSuccess}
pieceId={this.getPieceFromQueryParam()}
showHeading />
</Col>
</Row>
</div>
</SlidesContainer>
);
}
});
export default MarketRegisterPiece;

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 // gets subdomain as a parameter
function getWalletApiUrls(subdomain) { function getWalletApiUrls(subdomain) {
if (subdomain === 'cyland'){ if (subdomain === 'cyland') {
return { return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/', 'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/', 'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/', 'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
'user': walletConstants.walletApiEndpoint + subdomain + '/users/' 'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
}; };
} } else if (subdomain === 'ikonotv') {
else if (subdomain === 'ikonotv'){
return { return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/', 'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/', 'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'user': walletConstants.walletApiEndpoint + subdomain + '/users/' 'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
}; };
} else if (subdomain === 'lumenus' || subdomain === '23vivi') {
return {
'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',
'pieces_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/',
'piece_extradata': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/extradata/',
'user': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/users/'
};
} }
return {}; return {};
} }

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 the path of the current activeRoute is not defined, then this is the IndexRoute
if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications')) if ((!path || history.isActive('/login') || history.isActive('/signup') || history.isActive('/contract_notifications'))
&& (['ikonotv']).indexOf(subdomain) > -1) { && (['cyland', 'ikonotv', 'lumenus', '23vivi']).indexOf(subdomain) > -1) {
header = (<div className="hero"/>); header = (<div className="hero"/>);
} else { } else {
header = <Header showAddWork={true} routes={routes} />; header = <Header showAddWork={true} routes={routes} />;

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 ContractSettings from '../../../components/ascribe_settings/contract_settings';
import ErrorNotFoundPage from '../../../components/error_not_found_page'; import ErrorNotFoundPage from '../../../components/error_not_found_page';
import CCRegisterPiece from './components/cc/cc_register_piece';
import CylandLanding from './components/cyland/cyland_landing'; import CylandLanding from './components/cyland/cyland_landing';
import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container'; import CylandPieceContainer from './components/cyland/cyland_detail/cyland_piece_container';
import CylandRegisterPiece from './components/cyland/cyland_register_piece'; import CylandRegisterPiece from './components/cyland/cyland_register_piece';
@ -23,12 +25,20 @@ import CylandPieceList from './components/cyland/cyland_piece_list';
import IkonotvLanding from './components/ikonotv/ikonotv_landing'; import IkonotvLanding from './components/ikonotv/ikonotv_landing';
import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list'; import IkonotvPieceList from './components/ikonotv/ikonotv_piece_list';
import ContractAgreementForm from '../../../components/ascribe_forms/form_contract_agreement'; import SendContractAgreementForm from '../../../components/ascribe_forms/form_send_contract_agreement';
import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece'; import IkonotvRegisterPiece from './components/ikonotv/ikonotv_register_piece';
import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container'; import IkonotvPieceContainer from './components/ikonotv/ikonotv_detail/ikonotv_piece_container';
import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications'; import IkonotvContractNotifications from './components/ikonotv/ikonotv_contract_notifications';
import CCRegisterPiece from './components/cc/cc_register_piece'; import MarketPieceList from './components/market/market_piece_list';
import MarketRegisterPiece from './components/market/market_register_piece';
import MarketPieceContainer from './components/market/market_detail/market_piece_container';
import MarketEditionContainer from './components/market/market_detail/market_edition_container';
import LumenusLanding from './components/lumenus/lumenus_landing';
import Vivi23Landing from './components/23vivi/23vivi_landing';
import Vivi23PieceList from './components/23vivi/23vivi_piece_list';
import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler'; import AuthProxyHandler from '../../../components/ascribe_routes/proxy_routes/auth_proxy_handler';
@ -128,7 +138,7 @@ let ROUTES = {
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/> component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
<Route <Route
path='request_loan' path='request_loan'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractAgreementForm)} component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SendContractAgreementForm)}
headerTitle='SEND NEW CONTRACT' headerTitle='SEND NEW CONTRACT'
aclName='acl_create_contractagreement'/> aclName='acl_create_contractagreement'/>
<Route <Route
@ -148,10 +158,80 @@ let ROUTES = {
<Route path='verify' component={CoaVerifyContainer} /> <Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} /> <Route path='*' component={ErrorNotFoundPage} />
</Route> </Route>
),
'lumenus': (
<Route path='/' component={WalletApp}>
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LumenusLanding)} />
<Route
path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
<Route
path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
<Route
path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
<Route
path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
<Route
path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
<Route
path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
<Route
path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
headerTitle='+ NEW WORK'/>
<Route
path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketPieceList)}
headerTitle='COLLECTION'/>
<Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} />
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} />
</Route>
),
'23vivi': (
<Route path='/' component={WalletApp}>
<IndexRoute component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(Vivi23Landing)} />
<Route
path='login'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(LoginContainer)} />
<Route
path='logout'
component={AuthProxyHandler({to: '/', when: 'loggedOut'})(LogoutContainer)}/>
<Route
path='signup'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(SignupContainer)} />
<Route
path='password_reset'
component={AuthProxyHandler({to: '/collection', when: 'loggedIn'})(PasswordResetContainer)} />
<Route
path='settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(SettingsContainer)}/>
<Route
path='contract_settings'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(ContractSettings)}/>
<Route
path='register_piece'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(MarketRegisterPiece)}
headerTitle='+ NEW WORK'
aclName='acl_wallet_submit'/>
<Route
path='collection'
component={AuthProxyHandler({to: '/login', when: 'loggedOut'})(Vivi23PieceList)}
headerTitle='COLLECTION'/>
<Route path='pieces/:pieceId' component={MarketPieceContainer} />
<Route path='editions/:editionId' component={MarketEditionContainer} />
<Route path='verify' component={CoaVerifyContainer} />
<Route path='*' component={ErrorNotFoundPage} />
</Route>
) )
}; };
function getRoutes(commonRoutes, subdomain) { function getRoutes(commonRoutes, subdomain) {
if(subdomain in ROUTES) { if(subdomain in ROUTES) {
return ROUTES[subdomain]; return ROUTES[subdomain];
@ -160,5 +240,4 @@ function getRoutes(commonRoutes, subdomain) {
} }
} }
export default getRoutes; export default getRoutes;

3
js/constants/api_urls.js
View File

@ -72,6 +72,9 @@ let ApiUrls = {
'users_username': AppConstants.apiEndpoint + 'users/username/', 'users_username': AppConstants.apiEndpoint + 'users/username/',
'users_profile': AppConstants.apiEndpoint + 'users/profile/', 'users_profile': AppConstants.apiEndpoint + 'users/profile/',
'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/', 'wallet_settings': AppConstants.apiEndpoint + 'users/wallet_settings/',
'webhook': AppConstants.apiEndpoint + 'webhooks/${webhook_id}/',
'webhooks': AppConstants.apiEndpoint + 'webhooks/',
'webhooks_events': AppConstants.apiEndpoint + 'webhooks/events/',
'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/', 'whitelabel_settings': AppConstants.apiEndpoint + 'whitelabel/settings/${subdomain}/',
'delete_s3_file': AppConstants.serverUrl + 's3/delete/', 'delete_s3_file': AppConstants.serverUrl + 's3/delete/',
'prize_list': AppConstants.apiEndpoint + 'prize/' 'prize_list': AppConstants.apiEndpoint + 'prize/'

21
js/constants/application_constants.js
View File

@ -51,6 +51,20 @@ const constants = {
'permissions': ['register', 'edit', 'share', 'del_from_collection'], 'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet' 'type': 'wallet'
}, },
{
'subdomain': 'lumenus',
'name': 'Lumenus',
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet'
},
{
'subdomain': '23vivi',
'name': '23vivi',
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet'
},
{ {
'subdomain': 'portfolioreview', 'subdomain': 'portfolioreview',
'name': 'Portfolio Review', 'name': 'Portfolio Review',
@ -124,7 +138,12 @@ const constants = {
}, },
'twitter': { 'twitter': {
'sdkUrl': 'https://platform.twitter.com/widgets.js' 'sdkUrl': 'https://platform.twitter.com/widgets.js'
} },
'errorMessagesToIgnore': [
'Authentication credentials were not provided.',
'Informations d\'authentification non fournies.'
]
}; };
export default constants; export default constants;

16
js/mixins/react_error.js Normal file
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, * We often just have to refresh the edition list for a certain pieceId,
* this method provides exactly that functionality without any side effects * this method provides exactly that functionality without any side effects
*/ */
onRefreshEditionList({pieceId, filterBy}) { onRefreshEditionList({pieceId, filterBy = {}}) {
// It may happen that the user enters the site logged in already // It may happen that the user enters the site logged in already
// through /editions // through /editions
// If he then tries to delete a piece/edition and this method is called, // If he then tries to delete a piece/edition and this method is called,

6
js/stores/edition_store.js
View File

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

6
js/stores/piece_store.js
View File

@ -7,11 +7,13 @@ import PieceActions from '../actions/piece_actions';
class PieceStore { class PieceStore {
constructor() { constructor() {
this.piece = {}; this.piece = {};
this.pieceError = null;
this.bindActions(PieceActions); this.bindActions(PieceActions);
} }
onUpdatePiece(piece) { onUpdatePiece(piece) {
this.piece = piece; this.piece = piece;
this.pieceError = null;
} }
onUpdateProperty({key, value}) { onUpdateProperty({key, value}) {
@ -21,6 +23,10 @@ class PieceStore {
throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.'); throw new Error('There is no piece defined in PieceStore or the piece object does not have the property you\'re looking for.');
} }
} }
onPieceFailed(err) {
this.pieceError = err;
}
} }
export default alt.createStore(PieceStore, 'PieceStore'); export default alt.createStore(PieceStore, 'PieceStore');

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

20
js/utils/acl_utils.js
View File

@ -4,7 +4,7 @@ import { sanitize, intersectLists } from './general_utils';
export function getAvailableAcls(editions, filterFn) { export function getAvailableAcls(editions, filterFn) {
let availableAcls = []; let availableAcls = [];
if (!editions || editions.constructor !== Array){ if (!editions || editions.constructor !== Array) {
return []; return [];
} }
// if you copy a javascript array of objects using slice, then // if you copy a javascript array of objects using slice, then
@ -33,23 +33,23 @@ export function getAvailableAcls(editions, filterFn) {
}); });
// If no edition has been selected, availableActions is empty // If no edition has been selected, availableActions is empty
// If only one edition has been selected, their actions are available // If only one edition has been selected, its actions are available
// If more than one editions have been selected, their acl properties are intersected // If more than one editions have been selected, intersect all their acl properties
if(editionsCopy.length >= 1) { if (editionsCopy.length >= 1) {
availableAcls = editionsCopy[0].acl; availableAcls = editionsCopy[0].acl;
}
if(editionsCopy.length >= 2) { if (editionsCopy.length >= 2) {
for(let i = 1; i < editionsCopy.length; i++) { for (let i = 1; i < editionsCopy.length; i++) {
availableAcls = intersectLists(availableAcls, editionsCopy[i].acl); availableAcls = intersectLists(availableAcls, editionsCopy[i].acl);
}
} }
} }
// convert acls back to key-value object // convert acls back to key-value object
let availableAclsObj = {}; let availableAclsObj = {};
for(let i = 0; i < availableAcls.length; i++) { for (let i = 0; i < availableAcls.length; i++) {
availableAclsObj[availableAcls[i]] = true; availableAclsObj[availableAcls[i]] = true;
} }
return availableAclsObj; return availableAclsObj;
} }

4
js/utils/error_utils.js
View File

@ -13,8 +13,8 @@ import AppConstants from '../constants/application_constants';
* @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry * @param {boolean} ignoreSentry Defines whether or not the error should be submitted to Sentry
* @param {string} comment Will also be submitted to Sentry, but will not be logged * @param {string} comment Will also be submitted to Sentry, but will not be logged
*/ */
function logGlobal(error, ignoreSentry, comment) { function logGlobal(error, ignoreSentry = AppConstants.errorMessagesToIgnore.indexOf(error.message) > -1,
comment) {
console.error(error); console.error(error);
if(!ignoreSentry) { if(!ignoreSentry) {

6
js/utils/form_utils.js
View File

@ -2,6 +2,8 @@
import { getLangText } from './lang_utils'; import { getLangText } from './lang_utils';
import AppConstants from '../constants/application_constants';
/** /**
* Get the data ids of the given piece or editions. * Get the data ids of the given piece or editions.
* @param {boolean} isPiece Is the given entities parameter a piece? (False: array of editions) * @param {boolean} isPiece Is the given entities parameter a piece? (False: array of editions)
@ -70,6 +72,10 @@ export function getAclFormMessage(options) {
throw new Error('Your specified aclName did not match a an acl class.'); throw new Error('Your specified aclName did not match a an acl class.');
} }
if (options.additionalMessage) {
message += '\n\n' + options.additionalMessage;
}
if (options.senderName) { if (options.senderName) {
message += '\n\n'; message += '\n\n';
message += getLangText('Truly yours,'); message += getLangText('Truly yours,');

8
js/utils/general_utils.js
View File

@ -1,5 +1,11 @@
'use strict'; 'use strict';
/**
* Checks shallow equality
* Re-export of shallow from shallow-equals
*/
export { default as isShallowEqual } from 'shallow-equals';
/** /**
* Takes an object and returns a shallow copy without any keys * Takes an object and returns a shallow copy without any keys
* that fail the passed in filter function. * that fail the passed in filter function.
@ -109,7 +115,7 @@ function _doesObjectListHaveDuplicates(l) {
export function mergeOptions(...l) { export function mergeOptions(...l) {
// If the objects submitted in the list have duplicates,in their key names, // If the objects submitted in the list have duplicates,in their key names,
// abort the merge and tell the function's user to check his objects. // abort the merge and tell the function's user to check his objects.
if(_doesObjectListHaveDuplicates(l)) { if (_doesObjectListHaveDuplicates(l)) {
throw new Error('The objects you submitted for merging have duplicates. Merge aborted.'); throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
} }

23
js/utils/inject_utils.js
View File

@ -12,16 +12,16 @@ let mapTag = {
css: 'link' css: 'link'
}; };
let tags = {};
function injectTag(tag, src) { function injectTag(tag, src) {
return Q.Promise((resolve, reject) => { if(!tags[src]) {
if (isPresent(tag, src)) { tags[src] = Q.Promise((resolve, reject) => {
resolve();
} else {
let attr = mapAttr[tag]; let attr = mapAttr[tag];
let element = document.createElement(tag); let element = document.createElement(tag);
if (tag === 'script') { if (tag === 'script') {
element.onload = () => resolve(); element.onload = resolve;
element.onerror = () => reject(); element.onerror = reject;
} else { } else {
resolve(); resolve();
} }
@ -30,14 +30,10 @@ function injectTag(tag, src) {
if (tag === 'link') { if (tag === 'link') {
element.rel = 'stylesheet'; element.rel = 'stylesheet';
} }
} });
}); }
}
function isPresent(tag, src) { return tags[src];
let attr = mapAttr[tag];
let query = `head > ${tag}[${attr}="${src}"]`;
return document.querySelector(query);
} }
function injectStylesheet(src) { function injectStylesheet(src) {
@ -65,7 +61,6 @@ export const InjectInHeadUtils = {
* you don't want to embed everything inside the build file. * you don't want to embed everything inside the build file.
*/ */
isPresent,
injectStylesheet, injectStylesheet,
injectScript, injectScript,
inject inject

7
js/utils/regex_utils.js Normal file
View File

@ -0,0 +1,7 @@
'use strict'
export function isEmail(string) {
// This is a bit of a weak test for an email, but you really can't win them all
// http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address
return !!string && string.match(/.*@.*\..*/);
}

19
js/utils/requests.js
View File

@ -30,6 +30,15 @@ class Requests {
reject(error); reject(error);
} else if(body && body.detail) { } else if(body && body.detail) {
reject(new Error(body.detail)); reject(new Error(body.detail));
} else if(!body.success) {
let error = new Error('Client Request Error');
error.json = {
status: response.status,
statusText: response.statusText,
type: response.type,
url: response.url
};
reject(error);
} else { } else {
resolve(body); resolve(body);
} }
@ -100,8 +109,7 @@ class Requests {
return newUrl; return newUrl;
} }
request(verb, url, options) { request(verb, url, options = {}) {
options = options || {};
let merged = Object.assign({}, this.httpOptions, options); let merged = Object.assign({}, this.httpOptions, options);
let csrftoken = getCookie(AppConstants.csrftoken); let csrftoken = getCookie(AppConstants.csrftoken);
if (csrftoken) { if (csrftoken) {
@ -129,13 +137,10 @@ class Requests {
} }
_putOrPost(url, paramsAndBody, method) { _putOrPost(url, paramsAndBody, method) {
let paramsCopy = Object.assign({}, paramsAndBody);
let params = omitFromObject(paramsAndBody, ['body']); let params = omitFromObject(paramsAndBody, ['body']);
let newUrl = this.prepareUrl(url, params); let newUrl = this.prepareUrl(url, params);
let body = null; let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
if (paramsCopy && paramsCopy.body) { : null;
body = JSON.stringify(paramsCopy.body);
}
return this.request(method, newUrl, { body }); return this.request(method, newUrl, { body });
} }

5
package.json
View File

@ -66,7 +66,7 @@
"gulp-uglify": "^1.2.0", "gulp-uglify": "^1.2.0",
"gulp-util": "^3.0.4", "gulp-util": "^3.0.4",
"harmonize": "^1.4.2", "harmonize": "^1.4.2",
"history": "^1.11.1", "history": "^1.13.1",
"invariant": "^2.1.1", "invariant": "^2.1.1",
"isomorphic-fetch": "^2.0.2", "isomorphic-fetch": "^2.0.2",
"jest-cli": "^0.4.0", "jest-cli": "^0.4.0",
@ -80,11 +80,12 @@
"react": "0.13.2", "react": "0.13.2",
"react-bootstrap": "0.25.1", "react-bootstrap": "0.25.1",
"react-datepicker": "^0.12.0", "react-datepicker": "^0.12.0",
"react-router": "^1.0.0-rc3", "react-router": "1.0.0",
"react-router-bootstrap": "^0.19.0", "react-router-bootstrap": "^0.19.0",
"react-star-rating": "~1.3.2", "react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2", "react-textarea-autosize": "^2.5.2",
"reactify": "^1.1.0", "reactify": "^1.1.0",
"shallow-equals": "0.0.0",
"shmui": "^0.1.0", "shmui": "^0.1.0",
"spark-md5": "~1.0.0", "spark-md5": "~1.0.0",
"uglifyjs": "^2.4.10", "uglifyjs": "^2.4.10",

22
sass/ascribe-fonts/ascribe-fonts.scss
View File

@ -90,25 +90,3 @@
font-size: 18px; font-size: 18px;
padding: 4px 12px 0 10px padding: 4px 12px 0 10px
} }
.ascribe-logo-circle {
border: 6px solid #F6F6F6;
border-radius: 10em;
position: relative;
top: 10%;
left: 10%;
display: block;
width: 80%;
height: 80%;
> span {
color: #F6F6F6;
position: absolute;
top: -.29em;
left: .16em;
font-size: 5em;
font-weight: normal;
}
}

32
sass/ascribe_accordion_list.scss
View File

@ -60,6 +60,34 @@ $ascribe-accordion-list-item-height: 100px;
background-size: cover; background-size: cover;
} }
.ascribe-logo-circle {
border: 6px solid #F6F6F6;
border-radius: 10em;
position: relative;
top: 10%;
left: 10%;
display: block;
width: 80%;
height: 80%;
> span {
color: #F6F6F6;
position: absolute;
top: -.29em;
left: .16em;
font-size: 5em;
font-weight: normal;
}
}
.ascribe-thumbnail-placeholder {
color: #F6F6F6;
font-size: 5em;
font-weight: normal;
}
//&::before { //&::before {
// content: ' '; // content: ' ';
// display: inline-block; // display: inline-block;
@ -211,10 +239,6 @@ $ascribe-accordion-list-item-height: 100px;
-ms-user-select: none; -ms-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
&:hover {
color: $ascribe-dark-blue;
}
.glyphicon { .glyphicon {
font-size: .8em; font-size: .8em;
top: 1px !important; top: 1px !important;

9
sass/ascribe_custom_style.scss
View File

@ -68,10 +68,15 @@ hr {
.dropdown-menu { .dropdown-menu {
background-color: $ascribe--nav-bg-color; background-color: $ascribe--nav-bg-color;
} }
.navbar-nav > li > .dropdown-menu {
padding: 0;
}
.dropdown-menu > li > a { .dropdown-menu > li > a {
color: $ascribe--nav-fg-prim-color; color: $ascribe--nav-fg-prim-color;
font-weight: $ascribe--font-weight-light; font-weight: $ascribe--font-weight-light;
padding-bottom: 9px;
padding-top: 9px;
} }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover,
@ -79,6 +84,10 @@ hr {
background-color: rgba($ascribe--button-default-color, .05); background-color: rgba($ascribe--button-default-color, .05);
} }
.dropdown-menu > .divider {
margin: 0;
}
.notification-menu { .notification-menu {
.dropdown-menu { .dropdown-menu {
background-color: white; background-color: white;

5
sass/ascribe_notification_list.scss
View File

@ -2,8 +2,9 @@ $break-small: 764px;
$break-medium: 991px; $break-medium: 991px;
$break-medium: 1200px; $break-medium: 1200px;
.notification-header,.notification-wrapper { .notification-header, .notification-wrapper {
width: 350px; min-width: 350px;
width: 100%;
} }
.notification-header { .notification-header {

11
sass/ascribe_notification_page.scss
View File

@ -31,16 +31,11 @@
margin-top: .5em; margin-top: .5em;
margin-bottom: 1em; margin-bottom: 1em;
.loan-form { &.embed-form {
margin-top: .5em;
height: 45vh; height: 45vh;
} }
} }
.loan-form {
height: 40vh;
}
.notification-contract-pdf-download { .notification-contract-pdf-download {
text-align: left; text-align: left;
margin-left: 1em; margin-left: 1em;
@ -70,3 +65,7 @@
width: 100%; width: 100%;
} }
} }
.ascribe-property.contract-appendix-form {
padding-left: 0;
}

2
sass/ascribe_panel.scss
View File

@ -31,7 +31,7 @@
vertical-align: middle; vertical-align: middle;
&:first-child { &:first-child {
word-break: break-all; word-break: break-word;
font-size: .9em; font-size: .9em;
} }
} }

4
sass/ascribe_piece_list_toolbar.scss
View File

@ -81,4 +81,8 @@
top: 2px; top: 2px;
} }
} }
.dropdown-menu {
min-width: 170px;
}
} }

7
sass/ascribe_spinner.scss
View File

@ -52,6 +52,13 @@ $ascribe--spinner-size-sm: 15px;
} }
} }
.spinner-wrapper-white {
color: $ascribe-white;
.spinner-circle {
border-color: $ascribe-white;
}
}
.spinner-wrapper-lg { .spinner-wrapper-lg {
width: $ascribe--spinner-size-lg; width: $ascribe--spinner-size-lg;
height: $ascribe--spinner-size-lg; height: $ascribe--spinner-size-lg;

2
sass/main.scss
View File

@ -350,7 +350,7 @@ hr {
> span { > span {
font-size: 1.1em; font-size: 1.1em;
font-weight: 600; font-weight: normal;
color: #616161; color: #616161;
padding-left: .3em; padding-left: .3em;

363
sass/whitelabel/wallet/23vivi/23vivi_custom_style.scss Normal file
View File

@ -0,0 +1,363 @@
/** Sass cannot use a number as the first character of a variable, so we'll have to settle with vivi23 **/
$vivi23--fg-color: black;
$vivi23--bg-color: white;
$vivi23--nav-fg-prim-color: $vivi23--fg-color;
$vivi23--nav-fg-sec-color: #3a3a3a;
$vivi23--nav-bg-color: $vivi23--bg-color;
$vivi23--nav-highlight-color: #f8f8f8;
$vivi23--button-default-color: $vivi23--fg-color;
$vivi23--highlight-color: #de2600;
.client--23vivi {
/** Landing page **/
.route--landing {
display: table;
> .container {
display: table-cell;
padding-bottom: 100px;
vertical-align: middle;
}
.vivi23-landing {
font-weight: normal;
text-align: center;
}
.vivi23-landing--header {
background-color: $vivi23--fg-color;
border: 1px solid $vivi23--fg-color;
color: $vivi23--bg-color;
padding: 2em;
.vivi23-landing--header-logo {
margin-top: 1em;
margin-bottom: 2em;
height: 75px;
}
}
.vivi23-landing--content {
border: 1px solid darken($vivi23--bg-color, 20%);
border-top: none;
padding: 2em;
}
}
/** Navbar **/
.navbar-default {
background-color: $vivi23--nav-fg-prim-color;
.navbar-brand .icon-ascribe-logo {
color: $vivi23--bg-color;
&:hover {
color: darken($vivi23--bg-color, 20%);
}
}
}
.navbar-nav > li > a,
.navbar-nav > li > a:focus,
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $vivi23--nav-bg-color;
}
.navbar-nav > li > a:hover {
color: darken($vivi23--nav-bg-color, 20%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $vivi23--nav-fg-prim-color;
border-bottom-color: $vivi23--nav-bg-color;
color: $vivi23--nav-bg-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a,
.dropdown-menu > li > a {
color: $vivi23--nav-fg-prim-color;
background-color: $vivi23--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($vivi23--nav-fg-prim-color, 20%);
background-color: $vivi23--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $vivi23--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $vivi23--nav-highlight-color;
}
}
.navbar-collapse.collapsing li a,
.navbar-collapse.collapse.in li a {
color: $vivi23--nav-fg-prim-color;
}
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($vivi23--nav-fg-prim-color, 20%);
background-color: $vivi23--nav-highlight-color;
}
.navbar-toggle {
border-color: $vivi23--highlight-color;
.icon-bar {
background-color: $vivi23--highlight-color;
}
}
.navbar-toggle:hover,
.navbar-toggle:focus {
border-color: lighten($vivi23--highlight-color, 10%);
background-color: $vivi23--nav-fg-prim-color;
.icon-bar {
background-color: lighten($vivi23--highlight-color, 10%);
}
}
.notification-menu {
.dropdown-menu {
background-color: $vivi23--nav-bg-color;
}
.notification-header {
background-color: $vivi23--nav-fg-sec-color;
border-top-width: 0;
color: $vivi23--nav-bg-color;
}
.notification-action {
color: $vivi23--highlight-color;
}
}
/** Buttons **/
// reset disabled button styling for btn-default
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
background-color: lighten($vivi23--button-default-color, 30%);
border-color: lighten($vivi23--button-default-color, 30%);
}
.btn-default {
background-color: $vivi23--button-default-color;
border-color: $vivi23--button-default-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($vivi23--button-default-color, 30%);
border-color: lighten($vivi23--button-default-color, 30%);
}
}
// disabled buttons
.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled.focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled],
.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled].focus,
.btn-secondary[disabled]:active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary.focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active {
background-color: darken($vivi23--bg-color, 20%);
border-color: $vivi23--button-default-color;
}
.btn-secondary {
border-color: $vivi23--button-default-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: $vivi23--button-default-color;
border-color: $vivi23--button-default-color;
}
}
.btn-tertiary {
&:hover,
&:active,
&ctive:hover,
&.active:hover{
background-color: $vivi23--highlight-color;
border-color: $vivi23--highlight-color;
color: $vivi23--highlight-color;
}
}
/** Other components **/
.ascribe-piece-list-toolbar .btn-ascribe-add {
display: none;
}
.ascribe-footer {
display: none;
}
.ascribe-accordion-list-table-toggle:hover {
color: $vivi23--fg-color;
}
.request-action-badge {
color: $vivi23--fg-color;
}
.acl-information-dropdown-list .title {
color: $vivi23--fg-color;
}
// filter widget
.ascribe-piece-list-toolbar-filter-widget button {
background-color: transparent !important;
border-color: transparent !important;
color: $vivi23--button-default-color !important;
&:hover,
&:active {
background-color: $vivi23--button-default-color !important;
border-color: $vivi23--button-default-color !important;
color: $vivi23--bg-color !important;
}
}
.icon-ascribe-search {
color: $vivi23--fg-color;
}
// forms
.ascribe-property-wrapper:hover {
border-left-color: rgba($vivi23--fg-color, 0.5);
}
.ascribe-property textarea,
.ascribe-property input,
.search-bar > .form-group > .input-group input {
&::-webkit-input-placeholder {
color: rgba($vivi23--fg-color, 0.5);
}
&::-moz-placeholder {
color: rgba($vivi23--fg-color, 0.5);
}
&:-ms-input-placeholder {
color: rgba($vivi23--fg-color, 0.5);
}
&:-moz-placeholder {
color: rgba($vivi23--fg-color, 0.5);
}
}
.ascribe-property {
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> p,
> p > span,
> textarea {
color: $vivi23--fg-color;
}
}
// global notification
.ascribe-global-notification-success {
background-color: lighten($vivi23--fg-color, 20%);
}
// uploader progress
.ascribe-progress-bar > .progress-bar {
background-color: lighten($vivi23--fg-color, 20%);
}
// spinner
.spinner-circle {
border-color: $vivi23--fg-color;
}
.spinner-inner {
display: none;
}
.btn-secondary .spinner-circle {
border-color: $vivi23--bg-color;
}
// video player
.ascribe-media-player .vjs-default-skin {
.vjs-play-progress,
.vjs-volume-level {
background-color: $vivi23--highlight-color;
}
}
// pager
.pager li > a,
.pager li > span {
background-color: $vivi23--fg-color;
border-color: $vivi23--fg-color;
}
.pager .disabled > a,
.pager .disabled > span {
background-color: $vivi23--fg-color !important;
border-color: $vivi23--fg-color;
}
// intercom
#intercom-container .intercom-launcher-button {
background-color: $vivi23--button-default-color !important;
border-color: $vivi23--button-default-color !important;
}
}

25
sass/whitelabel/wallet/cyland/cyland_custom_style.scss
View File

@ -59,8 +59,12 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
display: none; display: none;
} }
<<<<<<< HEAD
.client--cyland .icon-ascribe-search { .client--cyland .icon-ascribe-search {
=======
.client--cyland .icon-ascribe-search{
>>>>>>> master
color: $cyland--button-color; color: $cyland--button-color;
} }
@ -143,6 +147,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
} }
} }
<<<<<<< HEAD
// disabled buttons // disabled buttons
.client--cyland { .client--cyland {
.btn-default.disabled, .btn-default.disabled,
@ -165,6 +170,23 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
fieldset[disabled] .btn-default.active { fieldset[disabled] .btn-default.active {
background-color: darken($cyland--button-color, 20%); background-color: darken($cyland--button-color, 20%);
border-color: darken($cyland--button-color, 20%); border-color: darken($cyland--button-color, 20%);
=======
// landing page
.client--cyland {
.route--landing {
display: table;
> .container {
display: table-cell;
padding-bottom: 100px;
vertical-align: middle;
}
.cyland-landing {
font-weight: normal;
text-align: center;
}
>>>>>>> master
} }
} }
@ -203,6 +225,7 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
.client--cyland .acl-information-dropdown-list .title { .client--cyland .acl-information-dropdown-list .title {
color: $cyland--button-color; color: $cyland--button-color;
} }
<<<<<<< HEAD
.client--cyland .action-file.icon-ascribe-ok, .client--cyland .action-file.icon-ascribe-ok,
.client--cyland .action-file.icon-ascribe-ok:hover { .client--cyland .action-file.icon-ascribe-ok:hover {
@ -219,3 +242,5 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
.client--cyland .upload-button-wrapper > span { .client--cyland .upload-button-wrapper > span {
color: $cyland--button-color; color: $cyland--button-color;
} }
=======
>>>>>>> master

1
sass/whitelabel/wallet/index.scss
View File

@ -1,6 +1,7 @@
@import 'cc/cc_custom_style'; @import 'cc/cc_custom_style';
@import 'cyland/cyland_custom_style'; @import 'cyland/cyland_custom_style';
@import 'ikonotv/ikonotv_custom_style'; @import 'ikonotv/ikonotv_custom_style';
@import '23vivi/23vivi_custom_style';
.ascribe-wallet-app { .ascribe-wallet-app {
border-radius: 0; border-radius: 0;