fix acl and editions

js/components/ascribe_buttons/acl_button.js

@@ -5,7 +5,7 @@ import React from 'react';
 import ConsignForm from '../ascribe_forms/form_consign';
 import UnConsignForm from '../ascribe_forms/form_unconsign';
 import TransferForm from '../ascribe_forms/form_transfer';
-import LoanForm from '../ascribe_forms/form_loan_new';
+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';

js/components/ascribe_buttons/delete_button.js

@@ -52,10 +52,10 @@ let DeleteButton = React.createClass({
         
         } else if(availableAcls.acl_unshare){
             
-            if(this.props.editions && this.props.editions.constructor !== Array && this.props.editions.acl.acl_unshare) {
+            if(this.props.editions) {
                 content = <EditionRemoveFromCollectionForm editions={this.props.editions}/>;
                 title = getLangText('Remove Edition from Collection');
-            } else if(this.props.piece && this.props.piece.acl.acl_unshare) {
+            } else if(this.props.piece) {
                 content = <PieceRemoveFromCollectionForm pieceId={this.props.piece.id}/>;
                 title = getLangText('Remove Piece from Collection');
             }

js/components/ascribe_forms/form_loan.js

@@ -2,151 +2,167 @@
 
 import React from 'react';
 
-import ApiUrls from '../../constants/api_urls';
+import Button from 'react-bootstrap/lib/Button';
-import FormMixin from '../../mixins/form_mixin';
+
-import InputText from './input_text';
+import Form from './form';
-import InputHidden from './input_hidden';
+import Property from './property';
-import InputCheckbox from './input_checkbox';
+import InputTextAreaToggable from './input_textarea_toggable';
 import InputDate from './input_date';
-import InputTextArea from './input_textarea';
+import InputCheckbox from './input_checkbox';
 
-import OwnershipFetcher from '../../fetchers/ownership_fetcher';
+import LoanContractStore from '../../stores/loan_contract_store';
-import ButtonSubmitOrClose from '../ascribe_buttons/button_submit_close';
+import LoanContractActions from '../../actions/loan_contract_actions';
+
+import AppConstants from '../../constants/application_constants';
+
+import { mergeOptions } from '../../utils/general_utils';
+import { getLangText } from '../../utils/lang_utils';
 
-import { getLangText } from '../../utils/lang_utils.js';
 
 let LoanForm = React.createClass({
-    
+    propTypes: {
+        url: React.PropTypes.string,
+        id: React.PropTypes.object,
+        message: React.PropTypes.string,
+        onRequestHide: React.PropTypes.func,
+        handleSuccess: React.PropTypes.func
+    },
+
     getInitialState() {
-        this.setState({
+        return LoanContractStore.getState();
-            contract_key: null,
-            contract_url: null,
-            loaneeHasContract: false
-        });
     },
 
-    mixins: [FormMixin],
+    componentDidMount() {
-
+        LoanContractStore.listen(this.onChange);
-    url() {
-        return ApiUrls.ownership_loans;
     },
 
-    getFormData() {
+    componentWillUnmount() {
-        return {
+        LoanContractStore.unlisten(this.onChange);
-            bitcoin_id: this.getBitcoinIds().join(),
-            loanee: this.refs.loanee.state.value,
-            gallery_name: this.refs.gallery_name.state.value,
-            startdate: this.refs.startdate.state.value_formatted,
-            enddate: this.refs.enddate.state.value_formatted,
-            loan_message: this.refs.loan_message.state.value,
-            password: this.refs.password.state.value,
-            terms: this.refs.terms.state.value
-        };
     },
 
-    handleLoanEmailBlur(){
+    onChange(state) {
-        OwnershipFetcher.fetchLoanContract(this.refs.loanee.state.value)
+        this.setState(state);
-            .then((res) => {
-                if (res && res.length > 0) {
-                    this.setState({
-                        contract_key: res[0].s3Key,
-                        contract_url: res[0].s3Url,
-                        loaneeHasContract: true
-                    });
-                }
-                else {
-                    this.resetLoanContract();
-                }
-            })
-            .catch((err) => {
-                console.log(err);
-                this.resetLoanContract();
-            });
     },
 
-    resetLoanContract(){
+    getFormData(){
-        this.setState({
+        return this.props.id;
-            contract_key: null,
-            contract_url: null,
-            loaneeHasContract: false
-        });
     },
-    
-    renderForm() {
-        let title = this.getTitlesString().join('');
-        let username = this.props.currentUser.username;
-        let message =
-`${getLangText('Hi')},
 
-${getLangText('I loan')} :
+    handleOnBlur(event) {
-${title}${getLangText('to you')}.
+        LoanContractActions.fetchLoanContract(event.target.value);
+    },
 
-${getLangText('Truly yours')},
+    getContractCheckbox() {
-${username}`;
+        if(this.state.contractKey && this.state.contractUrl) {
-
+            return (
-        let contract = <InputHidden ref="terms" value="True"/>;
+                <Property
-        if (this.state.loaneeHasContract){
+                    name="terms"
-            let label = (<div>
+                    className="ascribe-settings-property-collapsible-toggle"
+                    style={{paddingBottom: 0}}>
+                    <InputCheckbox>
+                        <span>
                             {getLangText('I agree to the')}&nbsp;
-                            <a href={this.state.contract_url} target="_blank">
+                            <a href={this.state.contractUrl} target="_blank">
-                                {getLangText('terms of')} {this.refs.loanee.state.value}
+                                {getLangText('terms of')} {this.state.contractEmail}
                             </a>
-                        </div>);
+                        </span>
-            contract = (<InputCheckbox
+                    </InputCheckbox>
-                            ref="terms"
+                </Property>
-                            required="required"
+            );
-                            label={label}
-                        />);
         }
+    },
+
+    onRequestHide() {
+        // Since the modal can be opened without sending it to the server
+        // and therefore clearing the store,
+        // we'll need to make sure to flush the store once the
+        // modal unmounts
+        LoanContractActions.updateLoanContract({
+            contractUrl: null,
+            contractEmail: null,
+            contractKey: null
+        });
+
+        this.props.onRequestHide();
+    },
+
+    render() {
 
         return (
-            <form id="loan_modal_content" role="form" onSubmit={this.submit}>
+            <Form
-                <input className="invisible" type="email" name="fake_loanee"/>
+                ref='form'
-                <input className="invisible" type="password" name="fake_password"/>
+                url={this.props.url}
-                <InputText
+                getFormData={this.getFormData}
-                    ref="loanee"
+                handleSuccess={this.props.handleSuccess}
-                    placeHolder={getLangText('Loanee email')}
+                buttons={
-                    required="required"
+                    <div className="modal-footer">
-                    type="email"
+                        <p className="pull-right">
-                    submitted={this.state.submitted}
+                            <Button
-                    onBlur={this.handleLoanEmailBlur}/>
+                                className="btn btn-default btn-sm ascribe-margin-1px"
-                <InputText
+                                type="submit">{getLangText('LOAN')}</Button>
-                    ref="gallery_name"
+                            <Button
-                    placeHolder={getLangText('Gallery/exhibition (optional)')}
+                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
-                    required=""
+                                style={{marginLeft: '0'}}
-                    type="text"
+                                onClick={this.onRequestHide}>{getLangText('CLOSE')}</Button>
-                    submitted={this.state.submitted}/>
+                        </p>
-                <div className="row">
+                    </div>}
-                    <div className="col-xs-6">
+                spinner={
-                        <InputDate
+                    <div className="modal-footer">
-                            ref="startdate"
+                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
-                            placeholderText={getLangText('Loan start date')} />
+                    </div>}>
-                    </div>
+                <Property
-                    <div className="col-xs-6 form-group">
+                    name='loanee'
-                        <InputDate
+                    label={getLangText('Loanee Email')}
-                            ref="enddate"
+                    onBlur={this.handleOnBlur}>
-                            placeholderText={getLangText('Loan end date')} />
+                    <input
-                    </div>
+                        type="email"
-                </div>
+                        placeholder={getLangText('Email of the loanee')}
-                <InputTextArea
+                        required/>
-                    ref="loan_message"
+                </Property>
-                    defaultValue={message}
+                <Property
-                    required=""
+                    name='gallery_name'
-                    />
+                    label={getLangText('Gallery/exhibition (optional)')}
-                <InputText
+                    onBlur={this.handleOnBlur}>
-                    ref="password"
+                    <input
-                    placeHolder={getLangText('Password')}
+                        type="text"
-                    required="required"
+                        placeholder={getLangText('Gallery/exhibition (optional)')}/>
-                    type="password"
+                </Property>
-                    submitted={this.state.submitted}/>
+                <Property
-                {contract}
+                    name='startdate'
-                <ButtonSubmitOrClose
+                    label={getLangText('Start date')}>
-                    text={getLangText('LOAN')}
+                    <InputDate
-                    onClose={this.props.onRequestHide}
+                        placeholderText={getLangText('Loan start date')} />
-                    submitted={this.state.submitted} />
+                </Property>
-            </form>
+                <Property
+                    name='enddate'
+                    label={getLangText('End date')}>
+                    <InputDate
+                        placeholderText={getLangText('Loan end date')} />
+                </Property>
+                <Property
+                    name='loan_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>
+                {this.getContractCheckbox()}
+            </Form>
         );
     }
 });
 
-export default LoanForm;
+export default LoanForm;

js/components/ascribe_forms/form_loan_new.js

@@ -1,168 +0,0 @@
-'use strict';
-
-import React from 'react';
-
-import Button from 'react-bootstrap/lib/Button';
-
-import Form from './form';
-import Property from './property';
-import InputTextAreaToggable from './input_textarea_toggable';
-import InputDate from './input_date';
-import InputCheckbox from './input_checkbox';
-
-import LoanContractStore from '../../stores/loan_contract_store';
-import LoanContractActions from '../../actions/loan_contract_actions';
-
-import AppConstants from '../../constants/application_constants';
-
-import { mergeOptions } from '../../utils/general_utils';
-import { getLangText } from '../../utils/lang_utils';
-
-
-let LoanForm = React.createClass({
-    propTypes: {
-        url: React.PropTypes.string,
-        id: React.PropTypes.object,
-        message: React.PropTypes.string,
-        onRequestHide: React.PropTypes.func,
-        handleSuccess: React.PropTypes.func
-    },
-
-    getInitialState() {
-        return LoanContractStore.getState();
-    },
-
-    componentDidMount() {
-        LoanContractStore.listen(this.onChange);
-    },
-
-    componentWillUnmount() {
-        LoanContractStore.unlisten(this.onChange);
-    },
-
-    onChange(state) {
-        this.setState(state);
-    },
-
-    getFormData(){
-        return this.props.id;
-    },
-
-    handleOnBlur(event) {
-        LoanContractActions.fetchLoanContract(event.target.value);
-    },
-
-    getContractCheckbox() {
-        if(this.state.contractKey && this.state.contractUrl) {
-            return (
-                <Property
-                    name="terms"
-                    className="ascribe-settings-property-collapsible-toggle"
-                    style={{paddingBottom: 0}}>
-                    <InputCheckbox>
-                        <span>
-                            {getLangText('I agree to the')}&nbsp;
-                            <a href={this.state.contractUrl} target="_blank">
-                                {getLangText('terms of')} {this.state.contractEmail}
-                            </a>
-                        </span>
-                    </InputCheckbox>
-                </Property>
-            );
-        }
-    },
-
-    onRequestHide() {
-        // Since the modal can be opened without sending it to the server
-        // and therefore clearing the store,
-        // we'll need to make sure to flush the store once the
-        // modal unmounts
-        LoanContractActions.updateLoanContract({
-            contractUrl: null,
-            contractEmail: null,
-            contractKey: null
-        });
-
-        this.props.onRequestHide();
-    },
-
-    render() {
-
-        return (
-            <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('LOAN')}</Button>
-                            <Button
-                                className="btn btn-danger btn-delete btn-sm ascribe-margin-1px"
-                                style={{marginLeft: '0'}}
-                                onClick={this.onRequestHide}>{getLangText('CLOSE')}</Button>
-                        </p>
-                    </div>}
-                spinner={
-                    <div className="modal-footer">
-                        <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
-                    </div>}>
-                <Property
-                    name='loanee'
-                    label={getLangText('Loanee Email')}
-                    onBlur={this.handleOnBlur}>
-                    <input
-                        type="email"
-                        placeholder={getLangText('Email of the loanee')}
-                        required/>
-                </Property>
-                <Property
-                    name='gallery_name'
-                    label={getLangText('Gallery/exhibition (optional)')}
-                    onBlur={this.handleOnBlur}>
-                    <input
-                        type="text"
-                        placeholder={getLangText('Gallery/exhibition (optional)')}/>
-                </Property>
-                <Property
-                    name='startdate'
-                    label={getLangText('Start date')}>
-                    <InputDate
-                        placeholderText={getLangText('Loan start date')} />
-                </Property>
-                <Property
-                    name='enddate'
-                    label={getLangText('End date')}>
-                    <InputDate
-                        placeholderText={getLangText('Loan end date')} />
-                </Property>
-                <Property
-                    name='loan_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>
-                {this.getContractCheckbox()}
-            </Form>
-        );
-    }
-});
-
-export default LoanForm;

js/components/ascribe_forms/input_checkbox.js

@@ -40,7 +40,7 @@ let InputCheckbox = React.createClass({
             <span
                 onClick={this.handleFocus}
                 onFocus={this.handleFocus}>
-                <input type="checkbox" ref="checkbox"/>
+                <input type="checkbox" ref="checkbox" required="required"/>
                 <span className="checkbox">
                     {this.props.children}
                 </span>