mirror of
https://github.com/ascribe/onion.git
synced 2024-11-15 01:25:17 +01:00
bind modals to actionbuttons
This commit is contained in:
parent
1c76c5ef48
commit
cbecbf44ad
@ -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>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
@ -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
57
js/components/ascribe_modal/modal_wrapper.js
Normal 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;
|
@ -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>
|
||||
|
@ -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 }/>
|
||||
|
@ -27,7 +27,6 @@ let EditionContainer = React.createClass({
|
||||
UserActions.fetchCurrentUser();
|
||||
UserStore.listen(this.onChange);
|
||||
},
|
||||
|
||||
componentDidUnmount() {
|
||||
EditionStore.unlisten(this.onChange);
|
||||
UserStore.unlisten(this.onChange);
|
||||
|
@ -42,7 +42,7 @@ let InjectInHeadMixin = {
|
||||
},
|
||||
|
||||
inject(src) {
|
||||
debugger;
|
||||
//debugger;
|
||||
let ext = src.split('.').pop();
|
||||
try {
|
||||
let tag = mapAttr(src);
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user