ascribe/onion
1
0
Fork 0
mirror of https://github.com/ascribe/onion.git synced 2024-06-30 13:41:57 +02:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'remotes/origin/AD-499-whitelabel-prize-with-sluice-as-k' into AD-419-decouple-piece-registration-from-

Browse Source
This commit is contained in:
diminator 2015-07-15 14:51:36 +02:00
commit 44f0b36e73
18 changed files with 352 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
js/actions/loan_contract_actions.js Normal file
View File

@ -0,0 +1,48 @@
'use strict';
import alt from '../alt';
import OwnershipFetcher from '../fetchers/ownership_fetcher';
class LoanContractActions {
constructor() {
this.generateActions(
'updateLoanContract'
);
}
fetchLoanContract(email) {
if(email.match(/.+\@.+\..+/)) {
OwnershipFetcher.fetchLoanContract(email)
.then((contracts) => {
if (contracts && contracts.length > 0) {
this.actions.updateLoanContract({
contractKey: contracts[0].s3Key,
contractUrl: contracts[0].s3Url,
contractEmail: email
});
}
else {
this.actions.updateLoanContract({
contractKey: null,
contractUrl: null,
contractEmail: null
});
}
})
.catch((err) => {
console.error(err);
this.actions.updateLoanContract({
contractKey: null,
contractUrl: null,
contractEmail: null
});
});
} else {
/* No email was entered - Ignore and keep going*/
}
}
}
export default alt.createActions(LoanContractActions);

20
js/components/ascribe_accordion_list/accordion_list_item.js
View File

@ -13,6 +13,9 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
import PieceListActions from '../../actions/piece_list_actions';
import PieceListStore from '../../stores/piece_list_store';
import WhitelabelStore from '../../stores/whitelabel_store';
import WhitelabelActions from '../../actions/whitelabel_actions';
import EditionListActions from '../../actions/edition_list_actions';
import GlobalNotificationModel from '../../models/global_notification_model';
@ -40,16 +43,19 @@ let AccordionListItem = React.createClass({
{
showCreateEditionsDialog: false
},
PieceListStore.getState()
PieceListStore.getState(),
WhitelabelStore.getState()
);
},
componentDidMount() {
PieceListStore.listen(this.onChange);
WhitelabelStore.listen(this.onChange);
},
componentWillUnmount() {
PieceListStore.unlisten(this.onChange);
WhitelabelStore.unlisten(this.onChange);
},
onChange(state) {
@ -111,6 +117,17 @@ let AccordionListItem = React.createClass({
}
},
getLicences() {
// convert this to acl_view_licences later
if(this.state.whitelabel.name === 'Creative Commons France') {
return (
<a href={this.props.content.license_type.url} target="_blank" className="pull-right">
{getLangText('%s license', this.props.content.license_type.code)}
</a>
);
}
},
render() {
let linkData;
@ -173,6 +190,7 @@ let AccordionListItem = React.createClass({
{getLangText('Submitted to prize')} <span className="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</AclProxy>
{this.getLicences()}
</div>
</div>
<span style={{'clear': 'both'}}></span>

35
js/components/ascribe_buttons/acl_button.js
View File

@ -5,7 +5,7 @@ import React from 'react';
import ConsignForm from '../ascribe_forms/form_consign';
import UnConsignForm from '../ascribe_forms/form_unconsign';
import TransferForm from '../ascribe_forms/form_transfer';
import LoanForm from '../ascribe_forms/form_loan';
import LoanForm from '../ascribe_forms/form_loan_new';
import ShareForm from '../ascribe_forms/form_share_email';
import ModalWrapper from '../ascribe_modal/modal_wrapper';
import AppConstants from '../../constants/application_constants';
@ -30,7 +30,7 @@ let AclButton = React.createClass({
},
isPiece(){
return !(this.props.pieceOrEditions.constructor === Array);
return this.props.pieceOrEditions.constructor !== Array;
},
actionProperties(){
@ -68,7 +68,7 @@ let AclButton = React.createClass({
message={this.getTransferMessage()}
id={this.getFormDataId()}
url={apiUrls.ownership_transfers}/>
),
),
handleSuccess: this.showNotification
};
}
@ -76,7 +76,11 @@ let AclButton = React.createClass({
return {
title: getLangText('Loan artwork'),
tooltip: getLangText('Loan your artwork for a limited period of time'),
form: <LoanForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
form: (<LoanForm
message={this.getLoanMessage()}
id={this.getFormDataId()}
url={this.isPiece() ? apiUrls.ownership_loans_pieces : apiUrls.ownership_loans_editions}/>
),
handleSuccess: this.showNotification
};
}
@ -135,6 +139,20 @@ let AclButton = React.createClass({
${getLangText('I transfer ownership of')}:
${this.getTitlesString()} ${getLangText('to you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
);
},
// plz move to transfer form
getLoanMessage(){
return (
`${getLangText('Hi')},
${getLangText('I loan')}:
${this.getTitlesString()} ${getLangText('to you')}.
${getLangText('Truly yours')},
${this.props.currentUser.username}
`
@ -191,6 +209,7 @@ ${this.props.currentUser.username}
render() {
let shouldDisplay = this.props.availableAcls[this.props.action];
let aclProps = this.actionProperties();
return (
<ModalWrapper
button={
@ -198,10 +217,10 @@ ${this.props.currentUser.username}
{this.sanitizeAction()}
</button>
}
handleSuccess={ aclProps.handleSuccess }
title={ aclProps.title }
tooltip={ aclProps.tooltip }>
{ aclProps.form }
handleSuccess={aclProps.handleSuccess}
title={aclProps.title}
tooltip={aclProps.tooltip}>
{aclProps.form}
</ModalWrapper>
);
}

16
js/components/ascribe_detail/media_container.js
View File

@ -22,6 +22,7 @@ let MediaContainer = React.createClass({
let mimetype = this.props.content.digital_work.mime;
let embed = null;
let extraData = null;
let isEmbedDisabled = mimetype === 'video' && this.props.content.digital_work.isEncoding !== undefined && this.props.content.digital_work.isEncoding !== 100;
if (this.props.content.digital_work.encoding_urls) {
extraData = this.props.content.digital_work.encoding_urls.map(e => { return { url: e.url, type: e.label }; });
@ -31,25 +32,26 @@ let MediaContainer = React.createClass({
embed = (
<CollapsibleButton
button={
<Button bsSize="xsmall" className="ascribe-margin-1px">
<Button bsSize="xsmall" className="ascribe-margin-1px" disabled={isEmbedDisabled ? '"disabled"' : ''}>
Embed
</Button>
}
panel={
<pre className="">
{'<iframe width="560" height="315" src="http://embed.ascribe.io/content/'
+ this.props.content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'
}
+ this.props.content.bitcoin_id + '" frameborder="0" allowfullscreen></iframe>'}
</pre>
}/>
);
}
return (
<div>
<MediaPlayer mimetype={mimetype}
preview={thumbnail}
url={this.props.content.digital_work.url}
extraData={extraData} />
<MediaPlayer
mimetype={mimetype}
preview={thumbnail}
url={this.props.content.digital_work.url}
extraData={extraData}
encodingStatus={this.props.content.digital_work.isEncoding} />
<p className="text-center">
<AclProxy
aclObject={this.props.content.acl}

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

@ -6,8 +6,12 @@ import Router from 'react-router';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
import CollapsibleParagraph from './../ascribe_collapsible/collapsible_paragraph';
import DetailProperty from './detail_property';
import FurtherDetails from './further_details';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
@ -33,15 +37,13 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
import { getLangText } from '../../utils/lang_utils';
import { mergeOptions } from '../../utils/general_utils';
/**
* This is the component that implements display-specific functionality
*/
let Piece = React.createClass({
propTypes: {
piece: React.PropTypes.object,
loadPiece: React.PropTypes.func,
children: React.PropTypes.object
loadPiece: React.PropTypes.func
},
mixins: [Router.Navigation],
@ -157,8 +159,20 @@ let Piece = React.createClass({
</AclButtonList>
{this.getCreateEditionsDialog()}
{this.props.children}
<CollapsibleParagraph
title="Further Details"
show={this.props.piece.acl.acl_edit
|| Object.keys(this.props.piece.extra_data).length > 0
|| this.props.piece.other_data !== null}
defaultExpanded={true}>
<FurtherDetails
editable={this.props.piece.acl.acl_edit}
pieceId={this.props.piece.id}
extraData={this.props.piece.extra_data}
otherData={this.props.piece.other_data}
handleSuccess={this.props.loadPiece}/>
</CollapsibleParagraph>
</Col>
</Row>
);

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

@ -13,7 +13,7 @@ import InputTextArea from './input_textarea';
import OwnershipFetcher from '../../fetchers/ownership_fetcher';
import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
import { getLangText } from '../../utils/lang_utils.js'
import { getLangText } from '../../utils/lang_utils.js';
let LoanForm = React.createClass({

168
js/components/ascribe_forms/form_loan_new.js Normal file
View File

@ -0,0 +1,168 @@
'use strict';
import React from 'react';
import Button from 'react-bootstrap/lib/Button';
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 LoanContractStore from '../../stores/loan_contract_store';
import LoanContractActions from '../../actions/loan_contract_actions';
import AppConstants from '../../constants/application_constants';
import { mergeOptions } from '../../utils/general_utils';
import { getLangText } from '../../utils/lang_utils';
let LoanForm = React.createClass({
propTypes: {
url: React.PropTypes.string,
id: React.PropTypes.object,
message: React.PropTypes.string,
onRequestHide: React.PropTypes.func,
handleSuccess: React.PropTypes.func
},
getInitialState() {
return LoanContractStore.getState();
},
componentDidMount() {
LoanContractStore.listen(this.onChange);
},
componentWillUnmount() {
LoanContractStore.unlisten(this.onChange);
},
onChange(state) {
this.setState(state);
},
getFormData(){
return this.props.id;
},
handleOnBlur(event) {
LoanContractActions.fetchLoanContract(event.target.value);
},
getContractCheckbox() {
if(this.state.contractKey && this.state.contractUrl) {
return (
<Property
name="terms"
className="ascribe-settings-property-collapsible-toggle"
style={{paddingBottom: 0}}>
<InputCheckbox>
<span>
{getLangText('I agree to the')}&nbsp;
<a href={this.state.contractUrl} target="_blank">
{getLangText('terms of')} {this.state.contractEmail}
</a>
</span>
</InputCheckbox>
</Property>
);
}
},
onRequestHide() {
// Since the modal can be opened without sending it to the server
// and therefore clearing the store,
// we'll need to make sure to flush the store once the
// modal unmounts
LoanContractActions.updateLoanContract({
contractUrl: null,
contractEmail: null,
contractKey: null
});
this.props.onRequestHide();
},
render() {
return (
<Form
ref='form'
url={this.props.url}
getFormData={this.getFormData}
handleSuccess={this.props.handleSuccess}
buttons={
<div className="modal-footer">
<p className="pull-right">
<Button
className="btn btn-default btn-sm ascribe-margin-1px"
type="submit">{getLangText('LOAN')}</Button>
<Button
className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
style={{marginLeft: '0'}}
onClick={this.onRequestHide}>{getLangText('CLOSE')}</Button>
</p>
</div>}
spinner={
<div className="modal-footer">
<img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
</div>}>
<Property
name='loanee'
label={getLangText('Loanee Email')}
onBlur={this.handleOnBlur}>
<input
type="email"
placeholder={getLangText('Email of the loanee')}
required/>
</Property>
<Property
name='gallery_name'
label={getLangText('Gallery/exhibition (optional)')}
onBlur={this.handleOnBlur}>
<input
type="text"
placeholder={getLangText('Gallery/exhibition (optional)')}/>
</Property>
<Property
name='startdate'
label={getLangText('Start date')}>
<InputDate
placeholderText={getLangText('Loan start date')} />
</Property>
<Property
name='enddate'
label={getLangText('End date')}>
<InputDate
placeholderText={getLangText('Loan end date')} />
</Property>
<Property
name='loan_message'
label={getLangText('Personal Message')}
editable={true}>
<InputTextAreaToggable
rows={1}
editable={true}
defaultValue={this.props.message}
placeholder={getLangText('Enter a message...')}
required="required"/>
</Property>
<Property
name='password'
label={getLangText('Password')}>
<input
type="password"
placeholder={getLangText('Enter your password')}
required/>
</Property>
{this.getContractCheckbox()}
</Form>
);
}
});
export default LoanForm;

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

@ -58,12 +58,9 @@ let SignupForm = React.createClass({
},
handleSuccess(response){
let notificationText = getLangText('Sign up successful');
let notification = new GlobalNotificationModel(notificationText, 'success', 50000);
let notification = new GlobalNotificationModel(getLangText('Sign up successful'), 'success', 50000);
GlobalNotificationActions.appendGlobalNotification(notification);
this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email +
', ' + getLangText('please confirm') + '.');
this.props.handleSuccess(getLangText('We sent an email to your address') + ' ' + response.user.email + ', ' + getLangText('please confirm') + '.');
},
getFormData(){

25
js/components/ascribe_forms/input_date.js
View File

@ -2,7 +2,6 @@
import React from 'react';
import AlertMixin from '../../mixins/alert_mixin';
import DatePicker from 'react-datepicker/dist/react-datepicker';
let InputDate = React.createClass({
@ -11,31 +10,33 @@ let InputDate = React.createClass({
placeholderText: React.PropTypes.string
},
mixins: [AlertMixin],
getInitialState() {
return {
value: null,
value_formatted: null,
alerts: null // needed in AlertMixin
value: null
};
},
handleChange(date) {
let formattedDate = date.format('YYYY-MM-DD');
this.setState({
value: date,
value_formatted: date.format('YYYY-MM-DD')});
value: formattedDate,
value_moment: date
});
this.props.onChange({
target: {
value: formattedDate
}
});
},
render: function () {
let alerts = (this.props.submitted) ? null : this.state.alerts;
console.log(this.state.value);
return (
<div className="form-group">
{alerts}
<DatePicker
key="example2"
dateFormat="YYYY-MM-DD"
selected={this.state.value}
selected={this.state.value_moment}
onChange={this.handleChange}
placeholderText={this.props.placeholderText}/>
</div>

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

@ -82,7 +82,7 @@ let Property = React.createClass({
this.props.onChange(event);
}
this.setState({value: true});
this.setState({value: event.target.value});
},
handleFocus() {
@ -104,10 +104,14 @@ let Property = React.createClass({
});
},
handleBlur() {
handleBlur(event) {
this.setState({
isFocused: false
});
if(this.props.onBlur) {
this.props.onBlur(event);
}
},
handleSuccess(){

3
js/components/signup_container.js
View File

@ -2,9 +2,6 @@
import React from 'react';
import SignupForm from './ascribe_forms/form_signup';
import Property from './ascribe_forms/property';
import { getLangText } from '../utils/lang_utils';
let SignupContainer = React.createClass({

8
js/components/whitelabel/prize/components/landing.js
View File

@ -14,20 +14,20 @@ let Landing = React.createClass({
<div className="container">
<div className="row">
<div className="col-xs-12 wp-landing-wrapper">
<h1>Sluice Art Prize 2015</h1>
<h1>Sluice_screens ↄc Prize 2015</h1>
<p>
This is the submission page for sluice art fair price 2015.
This is the submission page for Sluice_screens ↄc Prize 2015.
</p>
<ButtonGroup className="enter" bsSize="large" vertical block>
<ButtonLink to="signup">
Signup to the prize
Signup to submit
</ButtonLink>
<p>
or, already an ascribe user?
</p>
<ButtonLink to="login">
Login with ascribe
Login to submit
</ButtonLink>
</ButtonGroup>
</div>

17
js/components/whitelabel/prize/components/signup_container.js
View File

@ -28,15 +28,16 @@ let SignupContainer = React.createClass({
</div>
</div>
);
} else {
return (
<div className="ascribe-login-wrapper">
<SignupForm
headerMessage="Create account for submission"
submitMessage="Sign up"
handleSuccess={this.handleSuccess} />
</div>
);
}
return (
<div className="ascribe-login-wrapper">
<SignupForm
headerMessage="Sign up to the prize"
submitMessage="Sign up"
handleSuccess={this.handleSuccess} />
</div>
);
}
});

3
js/constants/api_urls.js
View File

@ -24,7 +24,8 @@ let apiUrls = {
'ownership_consigns': AppConstants.apiEndpoint + 'ownership/consigns/',
'ownership_consigns_confirm': AppConstants.apiEndpoint + 'ownership/consigns/confirm/',
'ownership_consigns_deny': AppConstants.apiEndpoint + 'ownership/consigns/deny/',
'ownership_loans': AppConstants.apiEndpoint + 'ownership/loans/',
'ownership_loans_pieces': AppConstants.apiEndpoint + 'ownership/loans/pieces/',
'ownership_loans_editions': AppConstants.apiEndpoint + 'ownership/loans/editions/',
'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/',
'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/',
'ownership_loans_contract': AppConstants.apiEndpoint + 'ownership/loans/editions/contract/',

4
js/fetchers/ownership_fetcher.js
View File

@ -1,8 +1,8 @@
'use strict';
import requests from '../utils/requests';
import AppConstants from '../constants/application_constants';
import ApiUrls from '../constants/api_urls';
let OwnershipFetcher = {
/**
@ -10,7 +10,7 @@ let OwnershipFetcher = {
* If no arg is supplied, load the current user
*/
fetchLoanContract(email) {
return requests.get(AppConstants.apiEndpoint + 'ownership/loans/contract/?loanee=' + email);
return requests.get(ApiUrls.ownership_loans_contract + '?loanee=' + email);
}
};

22
js/stores/loan_contract_store.js Normal file
View File

@ -0,0 +1,22 @@
'use strict';
import alt from '../alt';
import LoanContractActions from '../actions/loan_contract_actions';
class LoanContractStore {
constructor() {
this.contractKey = null;
this.contractUrl = null;
this.contractEmail = null;
this.bindActions(LoanContractActions);
}
onUpdateLoanContract({contractKey, contractUrl, contractEmail}) {
this.contractKey = contractKey;
this.contractUrl = contractUrl;
this.contractEmail = contractEmail;
}
}
export default alt.createStore(LoanContractStore, 'LoanContractStore');

3
sass/ascribe_settings.scss
View File

@ -100,7 +100,7 @@
margin-top: 0 !important;
}
> input, > pre, > textarea, > select {
> input, > pre, > textarea, > select, .datepicker__input {
font-weight: 400;
font-size: 1.1em;
width:100%;
@ -109,6 +109,7 @@
background-color: rgba(0,0,0,0);
color: rgba(0,0,0,.8);
padding-left: 0;
box-shadow: none;
&:focus {
border:0;

12
sass/main.scss
View File

@ -243,18 +243,6 @@ form{
font-style: italic;
}
.input-text-ascribe,
.datepicker__input {
border-bottom: 1px solid black;
border-top: 0;
border-left: 0;
border-right: 0;
background: transparent;
border-radius: 0 !important;
box-shadow: none;
width: 100%;
}
.textarea-ascribe-message {
height: 13em !important;
}