ascribe
/
onion
mirror of https://github.com/ascribe/onion.git
1
0
Fork 0
Code Issues Releases Wiki Activity

bind modals to actionbuttons

This commit is contained in:
ddejongh 2015-06-01 18:59:47 +02:00
parent 1c76c5ef48
commit cbecbf44ad
8 changed files with 148 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
js/components/acl_button.js
View File

@ -1,27 +1,68 @@
import React from 'react';
import ConsignForm from './ascribe_forms/form_consign';
import TransferForm from './ascribe_forms/form_transfer';
import LoanForm from './ascribe_forms/form_loan';
import ShareForm from './ascribe_forms/form_share_email';
import ModalWrapper from './ascribe_modal/modal_wrapper';
import AppConstants from '../constants/application_constants';
let AclButton = React.createClass({
propTypes: {
action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
availableAcls: React.PropTypes.array.isRequired,
actionFunction: React.PropTypes.func.isRequired
editions: React.PropTypes.array.isRequired,
currentUser: React.PropTypes.object
},
actionFunction() {
this.props.actionFunction(this.props.action);
},
actionProperties(){
if (this.props.action == 'consign'){
return {
title: "Consign artwork",
tooltip: "Have someone else sell the artwork",
form: <ConsignForm />
}
}
else if (this.props.action == 'transfer') {
return {
title: "Transfer artwork",
tooltip: "Transfer the ownership of the artwork",
form: <TransferForm />
}
}
else if (this.props.action == 'loan'){
return {
title: "Loan artwork",
tooltip: "Loan your artwork for a limited period of time",
form: <LoanForm />}
}
else if (this.props.action == 'share'){
return {
title: "Share artwork",
tooltip: "Share the artwork",
form: <ShareForm />}
}
},
render() {
let shouldDisplay = this.props.availableAcls.indexOf(this.props.action) > -1;
let aclProps = this.actionProperties();
return (
<button
type="button"
className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}
onClick={this.actionFunction}>
{this.props.action.toUpperCase()}
</button>
<ModalWrapper
button={
<div className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}>
{this.props.action.toUpperCase()}
</div>
}
currentUser={ this.props.currentUser }
edition={ this.props.editions[0] }
title={ aclProps.title }
tooltip={ aclProps.tooltip }>
{ aclProps.form }
</ModalWrapper>
);
}
});

43
js/components/ascribe_modal/modal_consign.js
View File

@ -1,43 +0,0 @@
import React from 'react';
import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import ConsignForm from '../ascribe_forms/form_consign'
import ModalMixin from '../../mixins/modal_mixin'
let ConsignModalButton = React.createClass({
render() {
return (
<OverlayTrigger delay={500} placement="left"
overlay={<Tooltip>Have someone else sell the artwork</Tooltip>}>
<ModalTrigger modal={<ConsignModal edition={this.props.edition}
currentUser={this.props.currentUser}/>}>
<div className="btn btn-ascribe-inv">
CONSIGN
</div>
</ModalTrigger>
</OverlayTrigger>
)
}
});
let ConsignModal = React.createClass({
mixins : [ModalMixin],
render() {
return (
<Modal {...this.props} title="Consign artwork">
<div className="modal-body">
<ConsignForm edition={this.props.edition}
currentUser={this.props.currentUser}
onRequestHide={this.onRequestHide}/>
</div>
</Modal>
)
}
});
export default ConsignModalButton;

57
js/components/ascribe_modal/modal_wrapper.js Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import ReactAddons from 'react/addons';
import Modal from 'react-bootstrap/lib/Modal';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
import ModalTrigger from 'react-bootstrap/lib/ModalTrigger';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import ModalMixin from '../../mixins/modal_mixin'
let ModalWrapper = React.createClass({
render() {
return (
<OverlayTrigger delay={500} placement="left"
overlay={<Tooltip>{this.props.tooltip}</Tooltip>}>
<ModalTrigger modal={
<ModalBody
title={this.props.title}
edition={this.props.edition}
currentUser={this.props.currentUser}>
{this.props.children}
</ModalBody>
}>
{this.props.button}
</ModalTrigger>
</OverlayTrigger>
)
}
});
//
let ModalBody = React.createClass({
mixins : [ModalMixin],
renderChildren() {
return ReactAddons.Children.map(this.props.children, (child, i) => {
return ReactAddons.addons.cloneWithProps(child, {
edition: this.props.edition,
currentUser: this.props.currentUser,
onRequestHide: this.onRequestHide
});
});
},
render() {
return (
<Modal {...this.props} title={this.props.title}>
<div className="modal-body">
{this.renderChildren()}
</div>
</Modal>
)
}
});
export default ModalWrapper;

35
js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js
View File

@ -3,6 +3,9 @@ import React from 'react';
import EditionListStore from '../../stores/edition_list_store';
import EditionListActions from '../../actions/edition_list_actions';
import UserActions from '../../actions/user_actions';
import UserStore from '../../stores/user_store';
import AclButton from '../acl_button';
import PieceListToolbarSelectedEditionsWidget from './piece_list_toolbar_selected_editions_widget';
@ -20,11 +23,14 @@ let PieceListToolbar = React.createClass({
},
componentDidMount() {
EditionListStore.listen(this.onChange)
EditionListStore.listen(this.onChange);
UserStore.listen(this.onChange);
UserActions.fetchCurrentUser();
},
componentDidUnmount() {
EditionListStore.unlisten(this.onChange)
EditionListStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);
},
filterForSelected(edition) {
@ -77,6 +83,7 @@ let PieceListToolbar = React.createClass({
render() {
let availableAcls = this.getAvailableAcls();
let editions = this.fetchSelectedEditionList();
if(availableAcls.length > 0) {
return (
@ -97,10 +104,26 @@ let PieceListToolbar = React.createClass({
<p></p>
<div className="row">
<div className="text-center">
<AclButton availableAcls={availableAcls} action="transfer" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
<AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
<AclButton
availableAcls={availableAcls}
action="transfer"
editions={editions}
currentUser={this.state.currentUser}/>
<AclButton
availableAcls={availableAcls}
action="consign"
editions={editions}
currentUser={this.state.currentUser}/>
<AclButton
availableAcls={availableAcls}
action="loan"
editions={editions}
currentUser={this.state.currentUser}/>
<AclButton
availableAcls={availableAcls}
action="share"
editions={editions}
currentUser={this.state.currentUser}/>
</div>
</div>
</div>

13
js/components/edition.js
View File

@ -2,7 +2,8 @@ import React from 'react';
import ResourceViewer from './ascribe_media/resource_viewer';
import LoanModalButton from './ascribe_modal/modal_loan';
import ConsignModalButton from './ascribe_modal/modal_consign';
import ModalWrapper from './ascribe_modal/modal_wrapper';
import ConsignForm from './ascribe_forms/form_consign.js';
import UnConsignModalButton from './ascribe_modal/modal_unconsign';
import UnConsignRequestModalButton from './ascribe_modal/modal_unconsign_request';
import TransferModalButton from './ascribe_modal/modal_transfer';
@ -48,6 +49,7 @@ let EditionHeader = React.createClass({
});
let EditionDetails = React.createClass({
render() {
return (
<div className="ascribe-detail-header">
@ -57,7 +59,14 @@ let EditionDetails = React.createClass({
<EditionDetailProperty label="owner" value={ this.props.edition.owner } />
<br/>
<LoanModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
<ConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
<ModalWrapper
button={<div className="btn btn-ascribe-inv">CONSIGN</div>}
currentUser={ this.props.currentUser }
edition={ this.props.edition }
title="Consign artwork"
tooltip="Have someone else sell the artwork">
<ConsignForm />
</ModalWrapper>
<UnConsignModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
<UnConsignRequestModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>
<TransferModalButton edition={ this.props.edition } currentUser={ this.props.currentUser }/>

1
js/components/edition_container.js
View File

@ -27,7 +27,6 @@ let EditionContainer = React.createClass({
UserActions.fetchCurrentUser();
UserStore.listen(this.onChange);
},
componentDidUnmount() {
EditionStore.unlisten(this.onChange);
UserStore.unlisten(this.onChange);

2
js/mixins/inject_in_head_mixin.js
View File

@ -42,7 +42,7 @@ let InjectInHeadMixin = {
},
inject(src) {
debugger;
//debugger;
let ext = src.split('.').pop();
try {
let tag = mapAttr(src);

4
js/stores/user_store.js
View File

@ -4,13 +4,13 @@ import UserAction from '../actions/user_actions';
class UserStore{
constructor() {
this.currentUser = {}
this.currentUser = {};
this.bindActions(UserAction);
}
onUpdateCurrentUser(user) {
this.currentUser = user;
}
};
}
export default alt.createStore(UserStore);