bind modals to actionbuttons

js/components/acl_button.js

@@ -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 
+            <ModalWrapper
-                type="button" 
+                button={
-                className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}
+                    <div className={shouldDisplay ? 'btn btn-default btn-sm' : 'hidden'}>
-                onClick={this.actionFunction}>
                         {this.props.action.toUpperCase()}
-            </button>
+                    </div>
+                }
+                currentUser={ this.props.currentUser }
+                edition={ this.props.editions[0] }
+                title={ aclProps.title }
+                tooltip={ aclProps.tooltip }>
+                { aclProps.form }
+            </ModalWrapper>
         );
     }
 });

js/components/ascribe_modal/modal_consign.js

@@ -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;

js/components/ascribe_modal/modal_wrapper.js

@@ -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;

js/components/ascribe_piece_list_toolbar/piece_list_toolbar.js

@@ -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
-                                    <AclButton availableAcls={availableAcls} action="consign" actionFunction={this.bulk} />
+                                        availableAcls={availableAcls}
-                                    <AclButton availableAcls={availableAcls} action="share" actionFunction={this.bulk} />
+                                        action="transfer"
-                                    <AclButton availableAcls={availableAcls} action="loan" actionFunction={this.bulk} />
+                                        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>

js/components/edition.js

@@ -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 }/>

js/components/edition_container.js

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

js/mixins/inject_in_head_mixin.js

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

js/stores/user_store.js

@@ -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);