From f6be4a29228c969a756e814f35f56805efbcc742 Mon Sep 17 00:00:00 2001
From: diminator <dimi.dejonghe@gmail.com>
Date: Tue, 14 Jul 2015 14:16:51 +0200
Subject: [PATCH] consign WIP

---
 .../accordion_list_item_table_editions.js     |   6 +-
 js/components/ascribe_buttons/acl_button.js   |  29 +-
 js/components/ascribe_forms/form_consign.js   | 270 ++++++++++++++----
 .../ascribe_forms/form_request_action.js      |   2 +-
 js/components/ascribe_forms/form_transfer.js  |   6 +-
 .../ascribe_table/table_item_acl_filtered.js  |  10 +-
 6 files changed, 251 insertions(+), 72 deletions(-)

diff --git a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
index e2c7d263..077fc9b5 100644
--- a/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
+++ b/js/components/ascribe_accordion_list/accordion_list_item_table_editions.js
@@ -162,11 +162,9 @@ let AccordionListItemTableEditions = React.createClass({
             new ColumnModel(
                 (item) => {
                     let content = item.acl;
-                    if (item.request_action) {
-                        content = [item.request_action + ' request'];
-                    }
                     return {
-                        'content': content
+                        'content': content,
+                        'requestAction': item.request_action
                     }; },
                     'acl',
                     getLangText('Actions'),
diff --git a/js/components/ascribe_buttons/acl_button.js b/js/components/ascribe_buttons/acl_button.js
index c3e6e2ec..6969aeb5 100644
--- a/js/components/ascribe_buttons/acl_button.js
+++ b/js/components/ascribe_buttons/acl_button.js
@@ -38,7 +38,12 @@ 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.pieceOrEditions }/>,
+                form: (
+                    <ConsignForm
+                        message={this.getConsignMessage()}
+                        id={this.getFormDataId()}
+                        url={apiUrls.ownership_consigns}/>
+                    ),
                 handleSuccess: this.showNotification
             };
         }
@@ -50,12 +55,6 @@ let AclButton = React.createClass({
                 handleSuccess: this.showNotification
             };
         }else if (this.props.action === 'acl_transfer') {
-            //return {
-            //    title: getLangText('Transfer artwork'),
-            //    tooltip: getLangText('Transfer the ownership of the artwork'),
-            //    form: <TransferForm currentUser={ this.props.currentUser } editions={ this.props.pieceOrEditions }/>,
-            //    handleSuccess: this.showNotification
-            //};
             return {
                 title: getLangText('Transfer artwork'),
                 tooltip: getLangText('Transfer the ownership of the artwork'),
@@ -123,7 +122,7 @@ let AclButton = React.createClass({
         }
     },
 
-// plz move to share form
+// plz move to transfer form
     getTransferMessage(){
         return (
             `${getLangText('Hi')},
@@ -131,6 +130,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 consign form
+    getConsignMessage(){
+        return (
+            `${getLangText('Hi')},
+
+${getLangText('I consign')}:
+${this.getTitlesString()} ${getLangText('to you')}.
+
 ${getLangText('Truly yours')},
 ${this.props.currentUser.username}
             `
diff --git a/js/components/ascribe_forms/form_consign.js b/js/components/ascribe_forms/form_consign.js
index d2db267d..beb06917 100644
--- a/js/components/ascribe_forms/form_consign.js
+++ b/js/components/ascribe_forms/form_consign.js
@@ -1,69 +1,229 @@
+//'use strict';
+//
+//import React from 'react';
+//
+//import ApiUrls from '../../constants/api_urls';
+//import FormMixin from '../../mixins/form_mixin';
+//import InputText from './input_text';
+//import InputTextArea from './input_textarea';
+//import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+//import { getLangText } from '../../utils/lang_utils.js'
+//
+//let ConsignForm = React.createClass({
+//    mixins: [FormMixin],
+//
+//
+//    url() {
+//        return ApiUrls.ownership_consigns;
+//    },
+//
+//    getFormData() {
+//        return {
+//            bitcoin_id: this.getBitcoinIds().join(),
+//            consignee: this.refs.consignee.state.value,
+//            consign_message: this.refs.consign_message.state.value,
+//            password: this.refs.password.state.value
+//        };
+//    },
+//
+//    renderForm() {
+//        let title = this.getTitlesString().join('');
+//        let username = this.props.currentUser.username;
+//        let message =
+//`${getLangText('Hi')},
+//
+//${getLangText('I consign')} :
+//${title}${getLangText('to you')}.
+//
+//${getLangText('Truly yours')},
+//${username}`;
+//
+//        return (
+//            <form id="consign_modal_content" role="form" onSubmit={this.submit}>
+//                <input className="invisible" type="email" name="fake_consignee"/>
+//                <input className="invisible" type="password" name="fake_password"/>
+//                <InputText
+//                    ref="consignee"
+//                    placeHolder={getLangText('Consignee email')}
+//                    required="required"
+//                    type="email"
+//                    submitted={this.state.submitted}/>
+//                <InputTextArea
+//                    ref="consign_message"
+//                    defaultValue={message}
+//                    required=""
+//                    />
+//                <InputText
+//                    ref="password"
+//                    placeHolder={getLangText('Password')}
+//                    required="required"
+//                    type="password"
+//                    submitted={this.state.submitted}/>
+//               <ButtonSubmitOrClose
+//                    text={getLangText('CONSIGN')}
+//                    onClose={this.props.onRequestHide}
+//                    submitted={this.state.submitted} />
+//            </form>
+//        );
+//    }
+//});
+////'use strict';
+////
+////import React from 'react';
+////
+////import ApiUrls from '../../constants/api_urls';
+////import FormMixin from '../../mixins/form_mixin';
+////import InputText from './input_text';
+////import InputTextArea from './input_textarea';
+////import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+////import { getLangText } from '../../utils/lang_utils.js'
+////
+////let TransferForm = React.createClass({
+////    mixins: [FormMixin],
+////
+////    url() {
+////        return ApiUrls.ownership_transfers;
+////    },
+////
+////    getFormData() {
+////        return {
+////            bitcoin_id: this.getBitcoinIds().join(),
+////            transferee: this.refs.transferee.state.value,
+////            transfer_message: this.refs.transfer_message.state.value,
+////            password: this.refs.password.state.value
+////        };
+////    },
+////
+////    renderForm() {
+////        let title = this.getTitlesString().join('');
+////        let username = this.props.currentUser.username;
+////        let message =
+////`${getLangText('Hi')},
+////
+////${getLangText('I transfer ownership of')} :
+////${title}${getLangText('to you')}.
+////
+////${getLangText('Truly yours')},
+////${username}`;
+////
+////        return (
+////            <form id="transfer_modal_content" role="form" onSubmit={this.submit}>
+////                <input className="invisible" type="email" name="fake_transferee"/>
+////                <input className="invisible" type="password" name="fake_password"/>
+////                <InputText
+////                    ref="transferee"
+////                    placeHolder={getLangText('Transferee email')}
+////                    required="required"
+////                    type="email"
+////                    submitted={this.state.submitted}/>
+////                <InputTextArea
+////                    ref="transfer_message"
+////                    defaultValue={message}
+////                    required=""
+////                    />
+////                <InputText
+////                    ref="password"
+////                    placeHolder={getLangText('Password')}
+////                    required="required"
+////                    type="password"
+////                    submitted={this.state.submitted}/>
+////                <div>
+////                    Make sure that display instructions and technology details are correct.
+////                    They cannot be edited after the transfer.
+////                </div>
+////               <ButtonSubmitOrClose
+////                    text={getLangText('TRANSFER')}
+////                    onClose={this.props.onRequestHide}
+////                    submitted={this.state.submitted} />
+////            </form>
+////        );
+////    }
+////});
+////
 'use strict';
 
 import React from 'react';
 
-import ApiUrls from '../../constants/api_urls';
-import FormMixin from '../../mixins/form_mixin';
-import InputText from './input_text';
-import InputTextArea from './input_textarea';
-import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
-import { getLangText } from '../../utils/lang_utils.js'
+import Button from 'react-bootstrap/lib/Button';
+import Alert from 'react-bootstrap/lib/Alert';
+
+import Form from './form';
+import Property from './property';
+import InputTextAreaToggable from './input_textarea_toggable';
+
+
+import AppConstants from '../../constants/application_constants';
+import { getLangText } from '../../utils/lang_utils.js';
+
 
 let ConsignForm = React.createClass({
-    mixins: [FormMixin],
-
-
-    url() {
-        return ApiUrls.ownership_consigns;
-    },
-    
-    getFormData() {
-        return {
-            bitcoin_id: this.getBitcoinIds().join(),
-            consignee: this.refs.consignee.state.value,
-            consign_message: this.refs.consign_message.state.value,
-            password: this.refs.password.state.value
-        };
+    propTypes: {
+        url: React.PropTypes.string,
+        id: React.PropTypes.object,
+        message: React.PropTypes.string,
+        editions: React.PropTypes.array,
+        currentUser: React.PropTypes.object,
+        onRequestHide: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func
     },
 
-    renderForm() {
-        let title = this.getTitlesString().join('');
-        let username = this.props.currentUser.username;
-        let message =
-`${getLangText('Hi')},
+    getFormData(){
+        return this.props.id;
+    },
 
-${getLangText('I consign')} :
-${title}${getLangText('to you')}.
-
-${getLangText('Truly yours')},
-${username}`;
+    render() {
 
         return (
-            <form id="consign_modal_content" role="form" onSubmit={this.submit}>
-                <input className="invisible" type="email" name="fake_consignee"/>
-                <input className="invisible" type="password" name="fake_password"/>
-                <InputText
-                    ref="consignee"
-                    placeHolder={getLangText('Consignee email')}
-                    required="required"
-                    type="email"
-                    submitted={this.state.submitted}/>
-                <InputTextArea
-                    ref="consign_message"
-                    defaultValue={message}
-                    required=""
-                    />
-                <InputText
-                    ref="password"
-                    placeHolder={getLangText('Password')}
-                    required="required"
-                    type="password"
-                    submitted={this.state.submitted}/>
-               <ButtonSubmitOrClose
-                    text={getLangText('CONSIGN')}
-                    onClose={this.props.onRequestHide}
-                    submitted={this.state.submitted} />
-            </form>
+            <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('CONSIGN')}</Button>
+                            <Button
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
+                                style={{marginLeft: '0'}}
+                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
+                        </p>
+                    </div>}
+                spinner={
+                    <div className="modal-footer">
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
+                    </div>}>
+                <Property
+                    name='consignee'
+                    label={getLangText('Email')}>
+                    <input
+                        type="email"
+                        placeholder={getLangText('Email of the consignee')}
+                        required/>
+                </Property>
+                <Property
+                    name='consign_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>
+                <hr />
+            </Form>
         );
     }
 });
diff --git a/js/components/ascribe_forms/form_request_action.js b/js/components/ascribe_forms/form_request_action.js
index 666422e6..f76aa1d5 100644
--- a/js/components/ascribe_forms/form_request_action.js
+++ b/js/components/ascribe_forms/form_request_action.js
@@ -72,7 +72,7 @@ let RequestActionForm = React.createClass({
         return (
             <Alert bsStyle='warning'>
                 <div style={{textAlign: 'center'}}>
-                <div>{ edition.owner } {getFormData('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
+                <div>{ edition.owner } {getLangText('requests you')} { edition.request_action } {getLangText('this edition%s', '.')}&nbsp;&nbsp;</div>
                 {buttons}
                 </div>
             </Alert>
diff --git a/js/components/ascribe_forms/form_transfer.js b/js/components/ascribe_forms/form_transfer.js
index a965610e..7bfdd605 100644
--- a/js/components/ascribe_forms/form_transfer.js
+++ b/js/components/ascribe_forms/form_transfer.js
@@ -115,11 +115,11 @@ let TransferForm = React.createClass({
                         <p className="pull-right">
                             <Button
                                 className="btn btn-default btn-sm ascribe-margin-1px"
-                                type="submit">TRANSFER</Button>
+                                type="submit">{getLangText('TRANSFER')}</Button>
                             <Button
                                 className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
                                 style={{marginLeft: '0'}}
-                                onClick={this.props.onRequestHide}>CLOSE</Button>
+                                onClick={this.props.onRequestHide}>{getLangText('CLOSE')}</Button>
                         </p>
                     </div>}
                 spinner={
@@ -136,7 +136,7 @@ let TransferForm = React.createClass({
                 </Property>
                 <Property
                     name='transfer_message'
-                    label='Personal Message'
+                    label={getLangText('Personal Message')}
                     editable={true}>
                     <InputTextAreaToggable
                         rows={1}
diff --git a/js/components/ascribe_table/table_item_acl_filtered.js b/js/components/ascribe_table/table_item_acl_filtered.js
index b3a6adb7..466e8477 100644
--- a/js/components/ascribe_table/table_item_acl_filtered.js
+++ b/js/components/ascribe_table/table_item_acl_filtered.js
@@ -5,10 +5,18 @@ import React from 'react';
 
 let TableItemAclFiltered = React.createClass({
     propTypes: {
-        content: React.PropTypes.object.isRequired
+        content: React.PropTypes.object,
+        requestAction: React.PropTypes.string
     },
 
     render() {
+        if (this.props.requestAction){
+            return (
+                <span>
+                    {this.props.requestAction + ' request pending'}
+                </span>
+            );
+        }
         var availableAcls = ['acl_consign', 'acl_loan', 'acl_transfer', 'acl_view', 'acl_share', 'acl_unshare'];
 
         let filteredAcls = Object.keys(this.props.content).filter((key) => {