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

Merge pull request #2 from ascribe/AD-1149-implement-lumenus-the-lumen-mark

Browse Source 
Implement marketplace wallets
This commit is contained in:
Tim Daubenschütz 2015-12-07 10:37:22 +01:00
commit b0b8af3305
78 changed files with 2556 additions and 677 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) {
this.actions.updateContractAgreementList(contractAgreementList.results);
resolve(contractAgreementList.results);
}
else{
} else {
resolve(null);
}
})
@ -35,13 +34,13 @@ class ContractAgreementListActions {
);
}
fetchAvailableContractAgreementList(issuer, createContractAgreement) {
fetchAvailableContractAgreementList(issuer, createPublicContractAgreement) {
return Q.Promise((resolve, reject) => {
OwnershipFetcher.fetchContractAgreementList(issuer, true, null)
.then((acceptedContractAgreementList) => {
// if there is at least an accepted contract agreement, we're going to
// use it
if(acceptedContractAgreementList.count > 0) {
if (acceptedContractAgreementList.count > 0) {
this.actions.updateContractAgreementList(acceptedContractAgreementList.results);
} else {
// otherwise, we're looking for contract agreements that are still pending
@ -50,15 +49,13 @@ class ContractAgreementListActions {
// overcomplicate the method
OwnershipFetcher.fetchContractAgreementList(issuer, null, true)
.then((pendingContractAgreementList) => {
if(pendingContractAgreementList.count > 0) {
if (pendingContractAgreementList.count > 0) {
this.actions.updateContractAgreementList(pendingContractAgreementList.results);
} else {
} else if (createPublicContractAgreement) {
// if there was neither a pending nor an active contractAgreement
// found and createContractAgreement is set to true, we create a
// new contract agreement
if(createContractAgreement) {
this.actions.createContractAgreementFromPublicContract(issuer);
}
// found and createPublicContractAgreement is set to true, we create a
// new public contract agreement
this.actions.createContractAgreementFromPublicContract(issuer);
}
})
.catch((err) => {
@ -81,8 +78,7 @@ class ContractAgreementListActions {
// create an agreement with the public contract if there is one
if (publicContract && publicContract.length > 0) {
return this.actions.createContractAgreement(null, publicContract[0]);
}
else {
} else {
/*
contractAgreementList in the store is already set to null;
*/
@ -91,21 +87,17 @@ class ContractAgreementListActions {
if (publicContracAgreement) {
this.actions.updateContractAgreementList([publicContracAgreement]);
}
}).catch((err) => {
console.logGlobal(err);
});
}).catch(console.logGlobal);
}
createContractAgreement(issuer, contract){
return Q.Promise((resolve, reject) => {
OwnershipFetcher.createContractAgreement(issuer, contract).then(
(contractAgreement) => {
resolve(contractAgreement);
}
).catch((err) => {
console.logGlobal(err);
reject(err);
});
OwnershipFetcher
.createContractAgreement(issuer, contract).then(resolve)
.catch((err) => {
console.logGlobal(err);
reject(err);
});
});
}
}

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

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

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

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

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

@ -0,0 +1,15 @@
'use strict'
import React from 'react';
let AccordionListItemThumbnailPlaceholder = React.createClass({
render() {
return (
<span className="ascribe-logo-circle">
<span>A</span>
</span>
);
}
});
export default AccordionListItemThumbnailPlaceholder;

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

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

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

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

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

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

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

@ -41,12 +41,20 @@ import { getLangText } from '../../utils/lang_utils';
*/
let Edition = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
edition: React.PropTypes.object,
loadEdition: React.PropTypes.func
},
mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() {
return UserStore.getState();
},
@ -74,6 +82,8 @@ let Edition = React.createClass({
},
render() {
let FurtherDetailsType = this.props.furtherDetailsType;
return (
<Row>
<Col md={6}>
@ -89,6 +99,7 @@ let Edition = React.createClass({
<hr/>
</div>
<EditionSummary
actionPanelButtonListType={this.props.actionPanelButtonListType}
edition={this.props.edition}
currentUser={this.state.currentUser}
handleSuccess={this.props.loadEdition}/>
@ -150,7 +161,7 @@ let Edition = React.createClass({
show={this.props.edition.acl.acl_edit
|| Object.keys(this.props.edition.extra_data).length > 0
|| this.props.edition.other_data.length > 0}>
<FurtherDetails
<FurtherDetailsType
editable={this.props.edition.acl.acl_edit}
pieceId={this.props.edition.parent}
extraData={this.props.edition.extra_data}
@ -171,6 +182,7 @@ let Edition = React.createClass({
let EditionSummary = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
edition: React.PropTypes.object,
currentUser: React.PropTypes.object,
handleSuccess: React.PropTypes.func
@ -183,7 +195,7 @@ let EditionSummary = React.createClass({
getStatus(){
let status = null;
if (this.props.edition.status.length > 0){
let statusStr = this.props.edition.status.join().replace(/_/, ' ');
let statusStr = this.props.edition.status.join(', ').replace(/_/g, ' ');
status = <EditionDetailProperty label="STATUS" value={ statusStr }/>;
if (this.props.edition.pending_new_owner && this.props.edition.acl.acl_withdraw_transfer){
status = (
@ -195,7 +207,7 @@ let EditionSummary = React.createClass({
},
render() {
let { edition, currentUser } = this.props;
let { actionPanelButtonListType, edition, currentUser } = this.props;
return (
<div className="ascribe-detail-header">
<EditionDetailProperty
@ -214,6 +226,7 @@ let EditionSummary = React.createClass({
<EditionDetailProperty
label={getLangText('ACTIONS')}>
<EditionActionPanel
actionPanelButtonListType={actionPanelButtonListType}
edition={edition}
currentUser={currentUser}
handleSuccess={this.handleSuccess} />

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

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

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

@ -17,6 +17,8 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/
let EditionContainer = React.createClass({
propTypes: {
actionPanelButtonListType: React.PropTypes.func,
furtherDetailsType: React.PropTypes.func,
params: React.PropTypes.object
},
@ -71,6 +73,8 @@ let EditionContainer = React.createClass({
return (
<Edition
actionPanelButtonListType={this.props.actionPanelButtonListType}
furtherDetailsType={this.props.furtherDetailsType}
edition={this.state.edition}
loadEdition={this.loadEdition} />
);

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 { getCookie } from '../../utils/fetch_api_utils';
import { getLangText } from '../../utils/lang_utils';
let FurtherDetailsFileuploader = React.createClass({
propTypes: {
label: React.PropTypes.string,
uploadStarted: React.PropTypes.func,
pieceId: React.PropTypes.number,
otherData: React.PropTypes.arrayOf(React.PropTypes.object),
@ -25,6 +28,7 @@ let FurtherDetailsFileuploader = React.createClass({
getDefaultProps() {
return {
label: getLangText('Additional files'),
multiple: false
};
},
@ -44,7 +48,7 @@ let FurtherDetailsFileuploader = React.createClass({
return (
<Property
name="other_data_key"
label="Additional files">
label={this.props.label}>
<ReactS3FineUploader
uploadStarted={this.props.uploadStarted}
keyRoutine={{

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

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

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

@ -50,11 +50,18 @@ import { setDocumentTitle } from '../../utils/dom_utils';
*/
let PieceContainer = React.createClass({
propTypes: {
furtherDetailsType: React.PropTypes.func,
params: React.PropTypes.object
},
mixins: [History],
getDefaultProps() {
return {
furtherDetailsType: FurtherDetails
};
},
getInitialState() {
return mergeOptions(
UserStore.getState(),
@ -88,7 +95,7 @@ let PieceContainer = React.createClass({
onChange(state) {
/*
ATTENTION:
THIS IS JUST A TEMPORARY USABILITY FIX THAT ESSENTIALLY REMOVES THE LOAN BUTTON
FROM THE PIECE DETAIL PAGE SO THAT USERS DO NOT CONFUSE A PIECE WITH AN EDITION.
@ -225,7 +232,8 @@ let PieceContainer = React.createClass({
},
render() {
if(this.state.piece && this.state.piece.id) {
if (this.state.piece && this.state.piece.id) {
let FurtherDetailsType = this.props.furtherDetailsType;
setDocumentTitle([this.state.piece.artist_name, this.state.piece.title].join(', '));
return (
@ -286,7 +294,7 @@ let PieceContainer = React.createClass({
|| Object.keys(this.state.piece.extra_data).length > 0
|| this.state.piece.other_data.length > 0}
defaultExpanded={true}>
<FurtherDetails
<FurtherDetailsType
editable={this.state.piece.acl.acl_edit}
pieceId={this.state.piece.id}
extraData={this.state.piece.extra_data}

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

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

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

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

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

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

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

@ -91,14 +91,14 @@ let CreateContractForm = React.createClass({
<Property
name='name'
label={getLangText('Contract name')}
hidden={true}>
expanded={false}>
<input
type="text"
value={this.state.contractName}/>
</Property>
<Property
name="is_public"
hidden={true}>
expanded={false}>
<input
type="checkbox"
value={this.props.isPublic} />

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

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

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

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

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

@ -26,7 +26,6 @@ let RegisterPieceForm = React.createClass({
isFineUploaderActive: React.PropTypes.bool,
isFineUploaderEditable: React.PropTypes.bool,
enableLocalHashing: React.PropTypes.bool,
onLoggedOut: React.PropTypes.func,
// For this form to work with SlideContainer, we sometimes have to disable it
disabled: React.PropTypes.bool,
@ -116,7 +115,6 @@ let RegisterPieceForm = React.createClass({
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.atLeastOneUploadedFile}
isFineUploaderActive={this.props.isFineUploaderActive}
onLoggedOut={this.props.onLoggedOut}
disabled={!this.props.isFineUploaderEditable}
enableLocalHashing={enableLocalHashing}
uploadMethod={this.props.location.query.method} />

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

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

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

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

206
js/components/ascribe_forms/input_contract_agreement_checkbox.js Normal file
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;

44
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
// before login in
isFineUploaderActive: bool,
onLoggedOut: func,
enableLocalHashing: bool,
uploadMethod: string,
@ -51,7 +50,10 @@ const InputFineUploader = React.createClass({
fileClassToUpload: shape({
singular: string,
plural: string
})
}),
// Provided by `Property`
onChange: React.PropTypes.func
},
getDefaultProps() {
@ -94,23 +96,26 @@ const InputFineUploader = React.createClass({
},
render() {
const { fileInputElement,
keyRoutine,
createBlobRoutine,
validation,
setIsUploadReady,
isReadyForFormSubmission,
areAssetsDownloadable,
onLoggedOut,
enableLocalHashing,
fileClassToUpload,
location } = this.props;
let editable = this.props.isFineUploaderActive;
const {
areAssetsDownloadable,
enableLocalHashing,
createBlobRoutine,
disabled,
fileClassToUpload,
fileInputElement,
isFineUploaderActive,
isReadyForFormSubmission,
keyRoutine,
setIsUploadReady,
uploadMethod,
validation } = this.props;
let editable = isFineUploaderActive;
// if disabled is actually set by property, we want to override
// isFineUploaderActive
if(typeof this.props.disabled !== 'undefined') {
editable = !this.props.disabled;
if(typeof disabled !== 'undefined') {
editable = !disabled;
}
return (
@ -139,10 +144,9 @@ const InputFineUploader = React.createClass({
'X-CSRFToken': getCookie(AppConstants.csrftoken)
}
}}
onInactive={this.props.onLoggedOut}
enableLocalHashing={this.props.enableLocalHashing}
uploadMethod={this.props.uploadMethod}
fileClassToUpload={this.props.fileClassToUpload} />
enableLocalHashing={enableLocalHashing}
uploadMethod={uploadMethod}
fileClassToUpload={fileClassToUpload} />
);
}
});

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

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

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

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

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

@ -3,58 +3,69 @@
import React from 'react';
import ReactAddons from 'react/addons';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import Panel from 'react-bootstrap/lib/Panel';
import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
let Property = React.createClass({
propTypes: {
hidden: React.PropTypes.bool,
const { bool, element, string, oneOfType, func, object, arrayOf } = React.PropTypes;
editable: React.PropTypes.bool,
const Property = React.createClass({
propTypes: {
editable: bool,
// If we want Form to have a different value for disabled as Property has one for
// editable, we need to set overrideForm to true, as it will then override Form's
// disabled value for individual Properties
overrideForm: React.PropTypes.bool,
overrideForm: bool,
tooltip: React.PropTypes.element,
label: React.PropTypes.string,
value: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.element
label: string,
value: oneOfType([
string,
element
]),
footer: React.PropTypes.element,
handleChange: React.PropTypes.func,
ignoreFocus: React.PropTypes.bool,
name: React.PropTypes.string.isRequired,
className: React.PropTypes.string,
footer: element,
handleChange: func,
ignoreFocus: bool,
name: string.isRequired,
className: string,
onClick: React.PropTypes.func,
onChange: React.PropTypes.func,
onBlur: React.PropTypes.func,
onClick: func,
onChange: func,
onBlur: func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
children: oneOfType([
arrayOf(element),
element
]),
style: React.PropTypes.object
style: object,
expanded: bool,
checkboxLabel: string,
autoFocus: bool
},
getDefaultProps() {
return {
editable: true,
hidden: false,
expanded: true,
className: ''
};
},
getInitialState() {
const { expanded, ignoreFocus, checkboxLabel } = this.props;
return {
// We're mirroring expanded here as a state
// React's docs do NOT consider this an antipattern as long as it's
// not a "source of truth"-duplication
expanded,
// When a checkboxLabel is defined in the props, we want to set
// `ignoreFocus` to true
ignoreFocus: ignoreFocus || checkboxLabel,
// Please don't confuse initialValue with react's defaultValue.
// initialValue is set by us to ensure that a user can reset a specific
// property (after editing) to its initial value
@ -65,9 +76,27 @@ let Property = React.createClass({
};
},
componentWillReceiveProps() {
componentDidMount() {
if(this.props.autoFocus) {
this.handleFocus();
}
},
componentWillReceiveProps(nextProps) {
let childInput = this.refs.input;
// For expanded there are actually three use cases:
//
// 1. Control its value from the outside completely (do not define `checkboxLabel`)
// 2. Let it be controlled from the inside (default value can be set though via `expanded`)
// 3. Let it be controlled from a child by using `setExpanded` (`expanded` must not be
// set from the outside as a prop then(!!!))
//
// This handles case 1. and 3.
if(nextProps.expanded !== this.props.expanded && nextProps.expanded !== this.state.expanded && !this.props.checkboxLabel) {
this.setState({ expanded: nextProps.expanded });
}
// In order to set this.state.value from another component
// the state of value should only be set if its not undefined and
// actually references something
@ -80,13 +109,13 @@ let Property = React.createClass({
// from native HTML elements.
// To enable developers to create input elements, they can expose a property called value
// in their state that will be picked up by property.js
} else if(childInput.state && typeof childInput.state.value !== 'undefined') {
} else if(childInput && childInput.state && typeof childInput.state.value !== 'undefined') {
this.setState({
value: childInput.state.value
});
}
if(!this.state.initialValue && childInput.props.defaultValue) {
if(!this.state.initialValue && childInput && childInput.props.defaultValue) {
this.setState({
initialValue: childInput.props.defaultValue
});
@ -138,7 +167,7 @@ let Property = React.createClass({
handleFocus() {
// if ignoreFocus (bool) is defined, then just ignore focusing on
// the property and input
if(this.props.ignoreFocus) {
if(this.state.ignoreFocus) {
return;
}
@ -190,7 +219,7 @@ let Property = React.createClass({
},
getClassName() {
if(this.props.hidden){
if(!this.state.expanded && !this.props.checkboxLabel){
return 'is-hidden';
}
if(!this.props.editable){
@ -206,40 +235,92 @@ let Property = React.createClass({
}
},
setExpanded(expanded) {
this.setState({ expanded });
},
handleCheckboxToggle() {
this.setExpanded(!this.state.expanded);
},
renderChildren(style) {
return ReactAddons.Children.map(this.props.children, (child) => {
return ReactAddons.addons.cloneWithProps(child, {
style,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
disabled: !this.props.editable,
ref: 'input',
name: this.props.name
// Input's props should only be cloned and propagated down the tree,
// if the component is actually being shown (!== 'expanded === false')
if((this.state.expanded && this.props.checkboxLabel) || !this.props.checkboxLabel) {
return ReactAddons.Children.map(this.props.children, (child) => {
// Since refs will be overriden by this functions return statement,
// we still want to be able to define refs for nested `Form` or `Property`
// children, which is why we're upfront simply invoking the callback-ref-
// function before overriding it.
if(typeof child.ref === 'function' && this.refs.input) {
child.ref(this.refs.input);
}
return React.cloneElement(child, {
style,
onChange: this.handleChange,
onFocus: this.handleFocus,
onBlur: this.handleBlur,
disabled: !this.props.editable,
ref: 'input',
name: this.props.name,
setExpanded: this.setExpanded
});
});
});
}
},
getLabelAndErrors() {
if(this.props.label || this.state.errors) {
return (
<p>
<span className="pull-left">{this.props.label}</span>
<span className="pull-right">{this.state.errors}</span>
</p>
);
} else {
return null;
}
},
getCheckbox() {
const { checkboxLabel } = this.props;
if(checkboxLabel) {
return (
<div
className="ascribe-property-collapsible-toggle"
onClick={this.handleCheckboxToggle}>
<input
onChange={this.handleCheckboxToggle}
type="checkbox"
checked={this.state.expanded}
ref="checkboxCollapsible"/>
<span className="checkbox">{' ' + checkboxLabel}</span>
</div>
);
} else {
return null;
}
},
render() {
let footer = null;
let tooltip = <span/>;
let style = this.props.style ? mergeOptions({}, this.props.style) : {};
let style = Object.assign({}, this.props.style);
if(this.props.tooltip){
tooltip = (
<Tooltip>
{this.props.tooltip}
</Tooltip>);
}
if(this.props.footer){
footer = (
<div className="ascribe-property-footer">
{this.props.footer}
</div>);
</div>
);
}
if(!this.props.editable) {
if (!this.state.expanded) {
style.paddingBottom = 0;
}
if (!this.props.editable) {
style.cursor = 'not-allowed';
}
@ -248,19 +329,17 @@ let Property = React.createClass({
className={'ascribe-property-wrapper ' + this.getClassName()}
onClick={this.handleFocus}
style={style}>
<OverlayTrigger
delay={500}
placement="top"
overlay={tooltip}>
{this.getCheckbox()}
<Panel
collapsible
expanded={this.state.expanded}
className="bs-custom-panel">
<div className={'ascribe-property ' + this.props.className}>
<p>
<span className="pull-left">{this.props.label}</span>
<span className="pull-right">{this.state.errors}</span>
</p>
{this.getLabelAndErrors()}
{this.renderChildren(style)}
{footer}
</div>
</OverlayTrigger>
</Panel>
</div>
);
}

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

@ -8,7 +8,7 @@ import Tooltip from 'react-bootstrap/lib/Tooltip';
import Panel from 'react-bootstrap/lib/Panel';
let PropertyCollapsile = React.createClass({
let PropertyCollapsible = React.createClass({
propTypes: {
children: React.PropTypes.arrayOf(React.PropTypes.element),
checkboxLabel: React.PropTypes.string,
@ -93,4 +93,4 @@ let PropertyCollapsile = React.createClass({
}
});
export default PropertyCollapsile;
export default PropertyCollapsible;

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

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

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

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

18
js/components/ascribe_spinner.js
View File

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

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

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

@ -99,7 +99,6 @@ let ReactS3FineUploader = React.createClass({
areAssetsDownloadable: React.PropTypes.bool,
areAssetsEditable: React.PropTypes.bool,
defaultErrorMessage: React.PropTypes.string,
onInactive: React.PropTypes.func,
// We encountered some cases where people had difficulties to upload their
// works to ascribe due to a slow internet connection.
@ -891,7 +890,6 @@ let ReactS3FineUploader = React.createClass({
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
fileClassToUpload,
fileInputElement: FileInputElement,
@ -901,7 +899,6 @@ let ReactS3FineUploader = React.createClass({
multiple,
areAssetsDownloadable,
areAssetsEditable,
onInactive,
enableLocalHashing,
uploadMethod,
fileClassToUpload,

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

2
js/components/piece_list_filter_display.js
View File

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

16
js/components/register_piece.js
View File

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

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}
email={this.props.currentUser.email}
gallery={this.props.piece.prize.name}
startdate={today}
enddate={endDate}
startDate={today}
endDate={endDate}
showPersonalMessage={true}
showPassword={false}
handleSuccess={this.handleLoanSuccess} />

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

@ -122,7 +122,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='artist_bio'
label={getLangText('Artist Biography')}
hidden={disabled && !piece.extra_data.artist_bio}>
expanded={!disabled || !!piece.extra_data.artist_bio}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_bio}
@ -131,7 +131,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='artist_contact_information'
label={getLangText('Artist Contact Information')}
hidden={disabled && !piece.extra_data.artist_contact_information}>
expanded={!disabled || !!piece.extra_data.artist_contact_information}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.artist_contact_information}
@ -140,7 +140,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='conceptual_overview'
label={getLangText('Conceptual Overview')}
hidden={disabled && !piece.extra_data.conceptual_overview}>
expanded={!disabled || !!piece.extra_data.conceptual_overview}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.conceptual_overview}
@ -149,7 +149,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='medium'
label={getLangText('Medium (technical specifications)')}
hidden={disabled && !piece.extra_data.medium}>
expanded={!disabled || !!piece.extra_data.medium}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.medium}
@ -158,7 +158,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='size_duration'
label={getLangText('Size / Duration')}
hidden={disabled && !piece.extra_data.size_duration}>
expanded={!disabled || !!piece.extra_data.size_duration}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.size_duration}
@ -167,7 +167,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='display_instructions'
label={getLangText('Display instructions')}
hidden={disabled && !piece.extra_data.display_instructions}>
expanded={!disabled || !!piece.extra_data.display_instructions}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.display_instructions}
@ -176,7 +176,7 @@ let CylandAdditionalDataForm = React.createClass({
<Property
name='additional_details'
label={getLangText('Additional details')}
hidden={disabled && !piece.extra_data.additional_details}>
expanded={!disabled || !!piece.extra_data.additional_details}>
<InputTextAreaToggable
rows={1}
defaultValue={piece.extra_data.additional_details}
@ -185,7 +185,7 @@ let CylandAdditionalDataForm = React.createClass({
<FurtherDetailsFileuploader
label={getLangText('Additional files (e.g. still images, pdf)')}
uploadStarted={this.uploadStarted}
submitFile={this.submitFile}
submitFile={function () {}}
setIsUploadReady={this.setIsUploadReady}
isReadyForFormSubmission={formSubmissionValidation.fileOptional}
pieceId={piece.id}

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

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

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

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

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

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

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

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

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

@ -16,6 +16,9 @@ import UserActions from '../../../../../actions/user_actions';
import PieceStore from '../../../../../stores/piece_store';
import PieceActions from '../../../../../actions/piece_actions';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import GlobalNotificationModel from '../../../../../models/global_notification_model';
import GlobalNotificationActions from '../../../../../actions/global_notification_actions';
@ -47,6 +50,7 @@ let IkonotvRegisterPiece = React.createClass({
UserStore.getState(),
PieceListStore.getState(),
PieceStore.getState(),
WhitelabelStore.getState(),
{
step: 0,
pageExitWarning: getLangText("If you leave this form now, your work will not be loaned to Ikono TV.")
@ -57,7 +61,9 @@ let IkonotvRegisterPiece = React.createClass({
PieceListStore.listen(this.onChange);
UserStore.listen(this.onChange);
PieceStore.listen(this.onChange);
WhitelabelStore.listen(this.onChange);
UserActions.fetchCurrentUser();
WhitelabelActions.fetchWhitelabel();
// Before we load the new piece, we reset the piece store to delete old data that we do
// not want to display to the user.
@ -81,17 +87,11 @@ let IkonotvRegisterPiece = React.createClass({
PieceListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
PieceStore.unlisten(this.onChange);
WhitelabelStore.listen(this.onChange);
},
onChange(state) {
this.setState(state);
if(this.state.currentUser && this.state.currentUser.email) {
// we should also make the fineuploader component editable again
this.setState({
isFineUploaderActive: true
});
}
},
@ -157,22 +157,10 @@ let IkonotvRegisterPiece = React.createClass({
);
},
changeSlide() {
// only transition to the login store, if user is not logged in
// ergo the currentUser object is not properly defined
if(this.state.currentUser && !this.state.currentUser.email) {
this.onLoggedOut();
}
},
// basically redirects to the second slide (index: 1), when the user is not logged in
onLoggedOut() {
this.history.pushState(null, '/login');
},
canSubmit() {
let currentUser = this.state.currentUser;
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit;
let whitelabel = this.state.whitelabel;
return currentUser && currentUser.acl && currentUser.acl.acl_wallet_submit && whitelabel && whitelabel.user;
},
getSlideArtistDetails() {
@ -211,20 +199,22 @@ let IkonotvRegisterPiece = React.createClass({
getSlideLoan() {
if (this.canSubmit()) {
const { piece, whitelabel } = this.state;
let today = new Moment();
let enddate = new Moment();
enddate.add(2, 'years');
let endDate = new Moment();
endDate.add(2, 'years');
return (
<div data-slide-title={getLangText('Loan')}>
<Row className="no-margin">
<Col xs={12} sm={10} md={8} smOffset={1} mdOffset={2}>
<LoanForm
loanHeading={getLangText('Loan to IkonoTV archive')}
id={{piece_id: this.state.piece.id}}
id={{piece_id: piece.id}}
url={ApiUrls.ownership_loans_pieces}
email="submissions@ikono.org"
startdate={today}
enddate={enddate}
email={whitelabel.user}
startDate={today}
endDate={endDate}
showStartDate={false}
showEndDate={false}
gallery="IkonoTV archive"
@ -260,9 +250,8 @@ let IkonotvRegisterPiece = React.createClass({
enableLocalHashing={false}
headerMessage={getLangText('Register work')}
submitMessage={getLangText('Register')}
isFineUploaderActive={this.state.isFineUploaderActive}
isFineUploaderActive={true}
handleSuccess={this.handleRegisterSuccess}
onLoggedOut={this.onLoggedOut}
location={this.props.location}/>
</Col>
</Row>

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

@ -0,0 +1,84 @@
'use strict';
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
import LinkContainer from 'react-router-bootstrap/lib/LinkContainer';
import WhitelabelActions from '../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../stores/whitelabel_store';
import { mergeOptions } from '../../../../../utils/general_utils';
import { getLangText } from '../../../../../utils/lang_utils';
import { setDocumentTitle } from '../../../../../utils/dom_utils';
let LumenusLanding = React.createClass({
getInitialState() {
return mergeOptions(
WhitelabelStore.getState()
);
},
componentWillMount() {
setDocumentTitle('Lumenus Marketplace');
},
componentDidMount() {
WhitelabelStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel();
},
componentWillUnmount() {
WhitelabelStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() {
return (
<div className="container ascribe-form-wrapper">
<div className="row">
<div className="col-xs-12 wp-landing-wrapper">
<div className="row" style={{border: '1px solid #CCC', padding: '2em'}}>
<img src={this.state.whitelabel.logo} width="150px"/>
<div style={{marginTop: '1em'}}>
{getLangText('Artwork from the Lumenus Marketplace is powered by') + ' '}
<span>
<span className="icon-ascribe-logo"></span>
</span>
</div>
</div>
<div className="row" style={{border: '1px solid #CCC', borderTop: 'none', padding: '2em'}}>
<div className="col-sm-6">
<p>
{getLangText('Existing ascribe user?')}
</p>
<LinkContainer to="/login">
<Button>
{getLangText('Log in')}
</Button>
</LinkContainer>
</div>
<div className="col-sm-6">
<p>
{getLangText('Do you need an account?')}
</p>
<LinkContainer to="/signup">
<Button>
{getLangText('Sign up')}
</Button>
</LinkContainer>
</div>
</div>
</div>
</div>
</div>
);
}
});
export default LumenusLanding;

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

@ -0,0 +1,74 @@
'use strict';
import React from 'react';
import MarketSubmitButton from './market_submit_button';
import DeleteButton from '../../../../../ascribe_buttons/delete_button';
import EmailButton from '../../../../../ascribe_buttons/acls/email_button';
import TransferButton from '../../../../../ascribe_buttons/acls/transfer_button';
import UnconsignButton from '../../../../../ascribe_buttons/acls/unconsign_button';
import UserActions from '../../../../../../actions/user_actions';
import UserStore from '../../../../../../stores/user_store';
let MarketAclButtonList = React.createClass({
propTypes: {
availableAcls: React.PropTypes.object.isRequired,
className: React.PropTypes.string,
pieceOrEditions: React.PropTypes.array,
handleSuccess: React.PropTypes.func,
children: React.PropTypes.oneOfType([
React.PropTypes.arrayOf(React.PropTypes.element),
React.PropTypes.element
])
},
getInitialState() {
return UserStore.getState();
},
componentDidMount() {
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentWillUnmount() {
UserStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
render() {
let { availableAcls, className, pieceOrEditions, handleSuccess } = this.props;
return (
<div className={className}>
<MarketSubmitButton
availableAcls={availableAcls}
currentUser={this.state.currentUser}
editions={pieceOrEditions}
handleSuccess={handleSuccess} />
<EmailButton
availableAcls={availableAcls}
currentUser={this.state.currentUser}
pieceOrEditions={pieceOrEditions}
handleSuccess={handleSuccess} />
<TransferButton
availableAcls={availableAcls}
currentUser={this.state.currentUser}
pieceOrEditions={pieceOrEditions}
handleSuccess={handleSuccess} />
<UnconsignButton
availableAcls={availableAcls}
currentUser={this.state.currentUser}
pieceOrEditions={pieceOrEditions}
handleSuccess={handleSuccess} />
{this.props.children}
</div>
);
}
});
export default MarketAclButtonList;

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

@ -0,0 +1,160 @@
'use strict';
import React from 'react';
import classNames from 'classnames';
import MarketAdditionalDataForm from '../market_forms/market_additional_data_form';
import AclFormFactory from '../../../../../ascribe_forms/acl_form_factory';
import ConsignForm from '../../../../../ascribe_forms/form_consign';
import ModalWrapper from '../../../../../ascribe_modal/modal_wrapper';
import AclProxy from '../../../../../acl_proxy';
import PieceActions from '../../../../../../actions/piece_actions';
import WhitelabelActions from '../../../../../../actions/whitelabel_actions';
import WhitelabelStore from '../../../../../../stores/whitelabel_store';
import ApiUrls from '../../../../../../constants/api_urls';
import { getAclFormMessage, getAclFormDataId } from '../../../../../../utils/form_utils';
import { getLangText } from '../../../../../../utils/lang_utils';
let MarketSubmitButton = React.createClass({
propTypes: {
availableAcls: React.PropTypes.object.isRequired,
currentUser: React.PropTypes.object,
editions: React.PropTypes.array.isRequired,
handleSuccess: React.PropTypes.func.isRequired,
className: React.PropTypes.string,
},
getInitialState() {
return WhitelabelStore.getState();
},
componentDidMount() {
WhitelabelStore.listen(this.onChange);
WhitelabelActions.fetchWhitelabel();
},
componentWillUnmount() {
WhitelabelStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
canEditionBeSubmitted(edition) {
if (edition && edition.extra_data && edition.other_data) {
const { extra_data, other_data } = edition;
if (extra_data.artist_bio && extra_data.work_description &&
extra_data.technology_details && extra_data.display_instructions &&
other_data.length > 0) {
return true;
}
}
return false;
},
getFormDataId() {
return getAclFormDataId(false, this.props.editions);
},
getAggregateEditionDetails() {
const { editions } = this.props;
// Currently, we only care if all the given editions are from the same parent piece
// and if they can be submitted
return editions.reduce((details, curEdition) => {
return {
solePieceId: details.solePieceId === curEdition.parent ? details.solePieceId : null,
canSubmit: details.canSubmit && this.canEditionBeSubmitted(curEdition)
};
}, {
solePieceId: editions.length > 0 ? editions[0].parent : null,
canSubmit: this.canEditionBeSubmitted(editions[0])
});
},
handleAdditionalDataSuccess(pieceId) {
// Fetch newly updated piece to update the views
PieceActions.fetchOne(pieceId);
this.refs.consignModal.show();
},
render() {
const { availableAcls, currentUser, className, editions, handleSuccess } = this.props;
const { whitelabel: { name: whitelabelName = 'Market', user: whitelabelAdminEmail } } = this.state;
const { solePieceId, canSubmit } = this.getAggregateEditionDetails();
const message = getAclFormMessage({
aclName: 'acl_consign',
entities: editions,
isPiece: false,
additionalMessage: getLangText('Suggested price:'),
senderName: currentUser.username
});
const triggerButton = (
<button className={classNames('btn', 'btn-default', 'btn-sm', className)}>
{getLangText('CONSIGN TO %s', whitelabelName.toUpperCase())}
</button>
);
const consignForm = (
<AclFormFactory
action='acl_consign'
autoFocusProperty='message'
email={whitelabelAdminEmail}
message={message}
labels={{
'message': getLangText('Message (also suggest a sales price if necessary)')
}}
pieceOrEditions={editions}
showNotification />
);
if (solePieceId && !canSubmit) {
return (
<AclProxy
aclObject={availableAcls}
aclName='acl_consign'>
<ModalWrapper
trigger={triggerButton}
handleSuccess={this.handleAdditionalDataSuccess.bind(this, solePieceId)}
title={getLangText('Add additional information')}>
<MarketAdditionalDataForm
pieceId={solePieceId}
submitLabel={getLangText('Continue to consignment')} />
</ModalWrapper>
<ModalWrapper
ref="consignModal"
handleSuccess={handleSuccess}
title={getLangText('Consign artwork')}>
{consignForm}
</ModalWrapper>
</AclProxy>
);
} else {
return (
<AclProxy
show={availableAcls.acl_consign && canSubmit}>
<ModalWrapper
trigger={triggerButton}
handleSuccess={handleSuccess}
title={getLangText('Consign artwork to %s', whitelabelName)}>
{consignForm}
</ModalWrapper>
</AclProxy>
);
}
}
});
export default MarketSubmitButton;

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

@ -0,0 +1,24 @@
'use strict';
import React from 'react';
import MarketFurtherDetails from './market_further_details';
import MarketAclButtonList from '../market_buttons/market_acl_button_list';
import EditionContainer from '../../../../../ascribe_detail/edition_container';
let MarketEditionContainer = React.createClass({
propTypes: EditionContainer.propTypes,
render() {
return (
<EditionContainer
{...this.props}
actionPanelButtonListType={MarketAclButtonList}
furtherDetailsType={MarketFurtherDetails} />
);
}
});
export default MarketEditionContainer;

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

@ -0,0 +1,23 @@
'use strict';
import React from 'react';
import MarketAdditionalDataForm from '../market_forms/market_additional_data_form'
let MarketFurtherDetails = React.createClass({
propTypes: {
pieceId: React.PropTypes.number,
handleSuccess: React.PropTypes.func,
},
render() {
return (
<MarketAdditionalDataForm
{...this.props}
isInline
showNotification />
);
}
});
export default MarketFurtherDetails;

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

@ -0,0 +1,21 @@
'use strict';
import React from 'react';
import MarketFurtherDetails from './market_further_details';
import PieceContainer from '../../../../../ascribe_detail/piece_container';
let MarketPieceContainer = React.createClass({
propTypes: PieceContainer.propTypes,
render() {
return (
<PieceContainer
{...this.props}
furtherDetailsType={MarketFurtherDetails} />
);
}
});
export default MarketPieceContainer;

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;

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

@ -4,22 +4,30 @@ import walletConstants from './wallet_application_constants';
// gets subdomain as a parameter
function getWalletApiUrls(subdomain) {
if (subdomain === 'cyland'){
if (subdomain === 'cyland') {
return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'piece_extradata': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/extradata/',
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
};
}
else if (subdomain === 'ikonotv'){
} else if (subdomain === 'ikonotv') {
return {
'pieces_list': walletConstants.walletApiEndpoint + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + subdomain + '/pieces/${piece_id}/',
'user': walletConstants.walletApiEndpoint + subdomain + '/users/'
};
} else if (subdomain === 'lumenus' || subdomain === '23vivi') {
return {
'editions_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/editions/',
'edition': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/editions/${bitcoin_id}/',
'pieces_list': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/',
'piece': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/',
'piece_extradata': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/pieces/${piece_id}/extradata/',
'user': walletConstants.walletApiEndpoint + 'markets/' + subdomain + '/users/'
};
}
return {};
}
export default getWalletApiUrls;
export default getWalletApiUrls;

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

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

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

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

14
js/constants/application_constants.js
View File

@ -51,6 +51,20 @@ const constants = {
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet'
},
{
'subdomain': 'lumenus',
'name': 'Lumenus',
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/lumenus/lumenus-logo.png',
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet'
},
{
'subdomain': '23vivi',
'name': '23vivi',
'logo': 'https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/23vivi/23vivi-logo.png',
'permissions': ['register', 'edit', 'share', 'del_from_collection'],
'type': 'wallet'
},
{
'subdomain': 'portfolioreview',
'name': 'Portfolio Review',

2
js/stores/edition_list_store.js
View File

@ -60,7 +60,7 @@ class EditionListStore {
* We often just have to refresh the edition list for a certain pieceId,
* this method provides exactly that functionality without any side effects
*/
onRefreshEditionList({pieceId, filterBy}) {
onRefreshEditionList({pieceId, filterBy = {}}) {
// It may happen that the user enters the site logged in already
// through /editions
// If he then tries to delete a piece/edition and this method is called,

22
js/utils/acl_utils.js
View File

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

6
js/utils/form_utils.js
View File

@ -2,6 +2,8 @@
import { getLangText } from './lang_utils';
import AppConstants from '../constants/application_constants';
/**
* Get the data ids of the given piece or 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.');
}
if (options.additionalMessage) {
message += '\n\n' + options.additionalMessage;
}
if (options.senderName) {
message += '\n\n';
message += getLangText('Truly yours,');

8
js/utils/general_utils.js
View File

@ -1,5 +1,11 @@
'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
* that fail the passed in filter function.
@ -109,7 +115,7 @@ function _doesObjectListHaveDuplicates(l) {
export function mergeOptions(...l) {
// 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.
if(_doesObjectListHaveDuplicates(l)) {
if (_doesObjectListHaveDuplicates(l)) {
throw new Error('The objects you submitted for merging have duplicates. Merge aborted.');
}

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(/.*@.*\..*/);
}

10
js/utils/requests.js
View File

@ -100,8 +100,7 @@ class Requests {
return newUrl;
}
request(verb, url, options) {
options = options || {};
request(verb, url, options = {}) {
let merged = Object.assign({}, this.httpOptions, options);
let csrftoken = getCookie(AppConstants.csrftoken);
if (csrftoken) {
@ -129,13 +128,10 @@ class Requests {
}
_putOrPost(url, paramsAndBody, method) {
let paramsCopy = Object.assign({}, paramsAndBody);
let params = omitFromObject(paramsAndBody, ['body']);
let newUrl = this.prepareUrl(url, params);
let body = null;
if (paramsCopy && paramsCopy.body) {
body = JSON.stringify(paramsCopy.body);
}
let body = paramsAndBody && paramsAndBody.body ? JSON.stringify(paramsAndBody.body)
: null;
return this.request(method, newUrl, { body });
}

1
package.json
View File

@ -85,6 +85,7 @@
"react-star-rating": "~1.3.2",
"react-textarea-autosize": "^2.5.2",
"reactify": "^1.1.0",
"shallow-equals": "0.0.0",
"shmui": "^0.1.0",
"spark-md5": "~1.0.0",
"uglifyjs": "^2.4.10",

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

@ -248,25 +248,3 @@
font-size: 18px;
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;
}
.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 {
// content: ' ';
// display: inline-block;
@ -211,10 +239,6 @@ $ascribe-accordion-list-item-height: 100px;
-ms-user-select: none;
-webkit-user-select: none;
&:hover {
color: $ascribe-dark-blue;
}
.glyphicon {
font-size: .8em;
top: 1px !important;

2
sass/ascribe_acl_information.scss
View File

@ -22,4 +22,4 @@
.example {
color: #616161;
}
}
}

9
sass/ascribe_custom_style.scss
View File

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

11
sass/ascribe_notification_page.scss
View File

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

7
sass/ascribe_panel.scss
View File

@ -1,3 +1,8 @@
.panel {
/* Here we are overriding bootstrap to show the is-focused background color */
background-color: transparent;
}
.ascribe-panel-wrapper {
border: 1px solid #ddd;
height: 5em;
@ -26,7 +31,7 @@
vertical-align: middle;
&:first-child {
word-break: break-all;
word-break: break-word;
font-size: .9em;
}
}

4
sass/ascribe_piece_list_toolbar.scss
View File

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

9
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 {
width: $ascribe--spinner-size-lg;
height: $ascribe--spinner-size-lg;
@ -146,4 +153,4 @@ $ascribe--spinner-size-sm: 15px;
40% { color: $ascribe-blue; }
60% { color: $ascribe-light-blue; }
80% { color: $ascribe-pink; }
}
}

2
sass/main.scss
View File

@ -350,7 +350,7 @@ hr {
> span {
font-size: 1.1em;
font-weight: 600;
font-weight: normal;
color: #616161;
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;
}
}

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

@ -59,7 +59,6 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
display: none;
}
.client--cyland .icon-ascribe-search{
color: $cyland--button-color;
}
@ -148,6 +147,24 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
}
}
// 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;
}
}
}
// spinner!
.client--cyland {
.btn-spinner {
@ -182,4 +199,4 @@ $cyland--button-color: $cyland--nav-fg-prim-color;
.client--cyland .acl-information-dropdown-list .title {
color: $cyland--button-color;
}
}

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

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