acl buttons and share forms for pieces/editions

js/components/ascribe_buttons/acl_button.js

@@ -13,14 +13,14 @@ import AppConstants from '../../constants/application_constants';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 
 let AclButton = React.createClass({
     propTypes: {
         action: React.PropTypes.oneOf(AppConstants.aclList).isRequired,
         availableAcls: React.PropTypes.array.isRequired,
-        editions: React.PropTypes.array.isRequired,
+        pieceOrEditions: React.PropTypes.array.isRequired,
         currentUser: React.PropTypes.object,
         handleSuccess: React.PropTypes.func.isRequired,
         className: React.PropTypes.string
@@ -31,7 +31,7 @@ let AclButton = React.createClass({
             return {
                 title: getLangText('Consign artwork'),
                 tooltip: getLangText('Have someone else sell the artwork'),
-                form: <ConsignForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
+                form: <ConsignForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
                 handleSuccess: this.showNotification
             };
         }
@@ -39,14 +39,14 @@ let AclButton = React.createClass({
             return {
                 title: getLangText('Unconsign artwork'),
                 tooltip: getLangText('Have the owner manage his sales again'),
-                form: <UnConsignForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
+                form: <UnConsignForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
                 handleSuccess: this.showNotification
             };
         }else if (this.props.action === 'transfer') {
             return {
                 title: getLangText('Transfer artwork'),
                 tooltip: getLangText('Transfer the ownership of the artwork'),
-                form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
+                form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
                 handleSuccess: this.showNotification
             };
         }
@@ -54,7 +54,7 @@ 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.editions }/>,
+                form: <LoanForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
                 handleSuccess: this.showNotification
             };
         }
@@ -62,7 +62,7 @@ let AclButton = React.createClass({
             return {
                 title: getLangText('Share artwork'),
                 tooltip: getLangText('Share the artwork'),
-                form: <ShareForm currentUser={ this.props.currentUser } editions={ this.props.editions }/>,
+                form: <ShareForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
                 handleSuccess: this.showNotification
             };
         }

js/components/ascribe_buttons/acl_button_list.js

@@ -39,31 +39,31 @@ let AclButtonList = React.createClass({
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="transfer"
-                    editions={this.props.editions}
+                    pieceOrEditions={this.props.editions}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.props.handleSuccess}/>
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="consign"
-                    editions={this.props.editions}
+                    pieceOrEditions={this.props.editions}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="unconsign"
-                    editions={this.props.editions}
+                    pieceOrEditions={this.props.editions}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="loan"
-                    editions={this.props.editions}
+                    pieceOrEditions={this.props.editions}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 <AclButton
                     availableAcls={this.props.availableAcls}
                     action="share"
-                    editions={this.props.editions}
+                    pieceOrEditions={this.props.editions}
                     currentUser={this.state.currentUser}
                     handleSuccess={this.props.handleSuccess} />
                 <DeleteButton editions={this.props.editions}/>

js/components/ascribe_detail/piece.js

@@ -7,14 +7,30 @@ 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 UserActions from '../../actions/user_actions';
-//import UserStore from '../../stores/user_store';
+import UserStore from '../../stores/user_store';
 
 import MediaContainer from './media_container';
 
 import Header from './header';
 
+import Form from './../ascribe_forms/form';
+import Property from './../ascribe_forms/property';
+
+import RequestActionForm from './../ascribe_forms/form_request_action';
+import EditionActions from '../../actions/edition_actions';
+import AclButtonList from './../ascribe_buttons/acl_button_list';
+
+
+import GlobalNotificationModel from '../../models/global_notification_model';
+import GlobalNotificationActions from '../../actions/global_notification_actions';
+
+import apiUrls from '../../constants/api_urls';
+import { getLangText } from '../../utils/lang_utils';
+
 /**
  * This is the component that implements display-specific functionality
  */
@@ -24,22 +40,22 @@ let Piece = React.createClass({
         loadPiece: React.PropTypes.func
     },
 
-    //getInitialState() {
+    getInitialState() {
-    //    return UserStore.getState();
+        return UserStore.getState();
-    //},
+    },
-    //
+
-    //componentDidMount() {
+    componentDidMount() {
-    //    UserStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
-    //    UserActions.fetchCurrentUser();
+        UserActions.fetchCurrentUser();
-    //},
+    },
-    //
+
-    //componentWillUnmount() {
+    componentWillUnmount() {
-    //    UserStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
-    //},
+    },
-    //
+
-    //onChange(state) {
+    onChange(state) {
-    //    this.setState(state);
+        this.setState(state);
-    //},
+    },
 
     render() {
 
@@ -52,6 +68,9 @@ let Piece = React.createClass({
                 <Col md={6} className="ascribe-edition-details">
                     <Header
                         content={this.props.piece}/>
+                    <PieceSummary
+                        currentUser={this.state.currentUser}
+                        piece={this.props.piece} />
                     <CollapsibleParagraph
                         title="Further Details"
                         show={this.props.piece.acl.indexOf('edit') > -1
@@ -72,4 +91,37 @@ let Piece = React.createClass({
     }
 });
 
+let PieceSummary = React.createClass({
+    propTypes: {
+        piece: React.PropTypes.object
+    },
+
+    getActions(){
+        //let actions = (
+        //    <Row>
+        //        <Col md={12}>
+        //            <AclButtonList
+        //                className="text-center ascribe-button-list"
+        //                availableAcls={this.props.piece.acl}
+        //                editions={[this.props.piece]}
+        //                handleSuccess={this.handleSuccess} />
+        //        </Col>
+        //    </Row>);
+        //return actions;
+        return null;
+    },
+    render() {
+        return (
+            <div className="ascribe-detail-header">
+                <DetailProperty label={getLangText('REGISTREE')} value={ this.props.piece.user_registered } />
+                <br/>
+                {this.getActions()}
+                <hr/>
+            </div>
+        );
+
+    }
+});
+
+
 export default Piece;

js/components/ascribe_forms/form_share_email.js

@@ -3,29 +3,45 @@
 import React from 'react';
 
 import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
+
-import InputText from './input_text';
+import Form from './form';
-import InputTextArea from './input_textarea';
+import Property from './property';
-import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import InputTextAreaToggable from './input_textarea_toggable';
-import { getLangText } from '../../utils/lang_utils.js'
+import Button from 'react-bootstrap/lib/Button';
+
+import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js';
 
 
 let ShareForm = React.createClass({
-    mixins: [FormMixin],
+    propTypes: {
-
+        editions: React.PropTypes.array,
-    url() {
+        currentUser: React.PropTypes.object
-        return ApiUrls.ownership_shares;
     },
 
     getFormData() {
         return {
-            bitcoin_id: this.getBitcoinIds().join(),
+            bitcoin_id: this.getBitcoinIds().join()
-            share_emails: this.refs.share_emails.state.value,
-            share_message: this.refs.share_message.state.value
         };
     },
+    handleSuccess(response){
+        if ('handleSuccess' in this.props){
+            this.props.handleSuccess(response);
+        }
+    },
+    getBitcoinIds(){
+        return this.props.editions.map(function(edition){
+            return edition.bitcoin_id;
+        });
+    },
 
-    renderForm() {
+    getTitlesString(){
+        return this.props.editions.map(function(edition){
+            return '- \"' + edition.title + ', ' + getLangText('edition') + ' ' + edition.edition_number + '\"\n';
+        });
+    },
+
+    render() {
         let title = this.getTitlesString().join('');
         let username = this.props.currentUser.username;
         let message =
@@ -36,25 +52,50 @@ ${title}${getLangText('with you')}.
 
 ${getLangText('Truly yours')},
 ${username}`;
-
         return (
-            <form id="share_modal_content" role="form" key="share_modal_content" onSubmit={this.submit}>
+            <Form
-                <InputText
+                ref='form'
-                    ref="share_emails"
+                url={ApiUrls.ownership_shares_editions}
-                    placeHolder={getLangText('Comma separated emails')}
+                getFormData={this.getFormData}
-                    required="required"
+                handleSuccess={this.handleSuccess}
+                buttons={
+                    <div className="modal-footer">
+                        <p className="pull-right">
+                            <Button
+                                className="btn btn-default btn-sm ascribe-margin-1px"
+                                type="submit">SHARE</Button>
+                            <Button
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                style={{marginLeft: '0'}}
+                                onClick={this.props.onRequestHide}>CLOSE</Button>
+                        </p>
+                    </div>}
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>
+                }
+                >
+                <Property
+                    name='share_emails'
+                    label={getLangText('Emails')}>
+                    <input
                         type="text"
-                    submitted={this.state.submitted}/>
+                        placeholder={getLangText('Comma separated emails')}
-                <InputTextArea
+                        required/>
-                    ref="share_message"
+                </Property>
+                <Property
+                    name='share_message'
+                    label='Personal Message'
+                    editable={true}>
+                    <InputTextAreaToggable
+                        rows={1}
+                        editable={true}
                         defaultValue={message}
-                    required=""
+                        placeholder={getLangText('Enter a message...')}
-                    />
+                        required="required"/>
-                <ButtonSubmitOrClose
+                </Property>
-                    text={getLangText('SHARE')}
+            </Form>
-                    onClose={this.props.onRequestHide}
-                    submitted={this.state.submitted} />
-            </form>
         );
     }
 });

js/constants/api_urls.js

@@ -25,7 +25,7 @@ let apiUrls = {
     'ownership_loans_confirm': AppConstants.apiEndpoint + 'ownership/loans/confirm/',
     'ownership_loans_deny': AppConstants.apiEndpoint + 'ownership/loans/deny/',
     'ownership_loans_contract': AppConstants.apiEndpoint + 'ownership/loans/contract/',
-    'ownership_shares': AppConstants.apiEndpoint + 'ownership/shares/',
+    'ownership_shares_editions': AppConstants.apiEndpoint + 'ownership/shares/editions/',
     'ownership_transfers': AppConstants.apiEndpoint + 'ownership/transfers/',
     'ownership_transfers_withdraw': AppConstants.apiEndpoint + 'ownership/transfers/withdraw/',
     'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',