Cleanup code

js/components/ascribe_buttons/acl_information.js

@@ -0,0 +1,145 @@
+'use strict';
+
+import React from 'react';
+import classnames from 'classnames';
+
+import Button from 'react-bootstrap/lib/Button';
+
+import { InformationTexts } from '../../constants/information_text';
+import { replaceSubstringAtIndex, sanitize } from '../../utils/general_utils';
+import { intersectAcls } from '../../utils/acl_utils';
+import { getLangText } from '../../utils/lang_utils';
+
+
+let AclInformation = React.createClass({
+    propTypes: {
+        verbs: React.PropTypes.arrayOf(React.PropTypes.string),
+        aim: React.PropTypes.string.isRequired,
+        aclObject: React.PropTypes.object
+    },
+
+    getInitialState() {
+        return { isVisible: false };
+    },
+
+    componentDidMount() {
+        this.dropdownButtonStyle = {
+                background: 'none',
+                color: 'black',
+                padding: 0,
+                border: 'none'
+            };
+
+        this.dropdownListStyle = {
+                textAlign: 'justify',
+                width: '80.8%',
+                border: '1px solid #CCC',
+                backgroundColor: 'white',
+                padding: '0.5em'
+            };
+    },
+
+    onOff() {
+        if(!this.state.isVisible) {
+            this.setState({ isVisible: true });
+        }
+        else {
+            this.setState({ isVisible: false });
+        }
+    },
+
+    getInfoText(title, info, example){
+        let titleStyle = {
+            color: '#02B6A3',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let infoStyle = {
+            color: '#333333',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let exampleStyle = {
+            color: '#B2B2B2',
+            fontSize: '11px',
+            lineHeight: '3px'
+        };
+
+        let paragraphStyle = {
+            margin: '0.1em',
+            lineHeight: '15px',
+            align: 'justify'
+        };
+
+        let aim = this.props.aim;
+
+        if (aim) {
+            if (aim === 'form') {
+                return (
+                    <p style={paragraphStyle}>
+                        <span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
+                        <span style={exampleStyle}> {example} </span>
+                    </p>
+                );
+            }
+            else if (aim === 'button') {
+                return (
+                    <p style={paragraphStyle}><span style={titleStyle}> {title} </span>
+                        <span style={infoStyle}> {info} <br/> </span>
+                        <span style={exampleStyle}> {example} </span>
+                    </p>
+                );
+            }
+        }
+        else {
+            console.log('Aim is required when you want to place information text');
+        }
+    },
+
+    produceInformationBlock() {
+        const { titles, informationSentences, exampleSentences } = InformationTexts;
+        const {verbs, aim } = this.props;
+
+        // sorting is not needed, as `this.props.verbs` takes care of sorting already
+        // So we assume a user of `AclInformationButton` puts an ordered version of
+        // `verbs` into `propTypes`
+        let verbsToDisplay = [];
+        if(aim === 'form') {
+            verbsToDisplay = verbsToDisplay.concat(verbs);
+        } else if(aim === 'button' && this.props.aclObject) {
+            const { aclObject } = this.props;
+            const sanitizedAclObject = sanitize(aclObject, (val) => !val);
+            verbsToDisplay = verbsToDisplay.concat(intersectAcls(verbs, Object.keys(sanitizedAclObject)));
+        } else {
+            console.warn('AclInformation can only be used with aim === "button" or aim === "form".' +
+                'For aim === "button", aclObject needs to be defined.');
+        }
+
+        return verbsToDisplay.map((verb) => {
+            return this.getInfoText(getLangText(titles[verb]), getLangText(informationSentences[verb]), getLangText(exampleSentences[verb]));
+        });
+    },
+
+    getButton() {
+        return this.props.aim === 'button' ?
+            <Button style = {this.dropdownButtonStyle} className="glyphicon glyphicon-question-sign" onClick={this.onOff} /> :
+            null;
+    },
+
+    render() {
+        return (
+            <span>
+                {this.getButton()}
+                <div
+                    style={this.dropdownListStyle}
+                    className={classnames({'hidden': this.props.aim === 'button' && !this.state.isVisible})}>
+                    <span>{this.produceInformationBlock()}</span>
+                </div>
+            </span>
+        );
+    }
+});
+
+export default AclInformation;

js/components/ascribe_buttons/acl_information_button.js

@@ -1,64 +0,0 @@
-
-'use strict';
-
-import React from 'react';
-import classnames from 'classnames';
-
-import AclInformation from '../ascribe_information/acl_information';
-import Button from 'react-bootstrap/lib/Button';
-
-let AclInformationButton = React.createClass({
-    propTypes: {
-        verbs: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.arrayOf(React.PropTypes.string)
-        ])
-    },
-    getInitialState() {
-        return {isVisible: false};
-    },
-    componentDidMount() {
-        console.log('Information button being launched');
-        this.dropdownButtonStyle = {
-                background: 'none',
-                color: 'black',
-                padding: 0,
-                border: 'none'
-            };
-
-        this.dropdownListStyle = {
-                textAlign: 'justify',
-                width: '80.8%',
-                border: '1px solid #CCC',
-                backgroundColor: 'white',
-                padding: '0.5em'
-            };
-    },
-    onOff() {
-        if (!this.state.isVisible) {
-            this.setState({isVisible: true});
-        }
-        else {
-            this.setState({isVisible: false});
-        }
-    },
-    showInformation() {
-        if (this.state.isVisible) {
-            return (<AclInformation aim={'button'} verbs={this.props.verbs}/>);
-        }
-    },
-    render() {
-        return (
-            <span>
-                <Button style = {this.dropdownButtonStyle} className="glyphicon glyphicon-question-sign" onClick={this.onOff} />
-                <div
-                    style={this.dropdownListStyle}
-                    className={classnames({'hidden': !this.state.isVisible})}>
-                    {this.showInformation()}
-                </div>
-            </span>
-        );
-    }
-});
-
-export default AclInformationButton;

js/components/ascribe_detail/edition_action_panel.js

@@ -22,7 +22,7 @@ import DeleteButton from '../ascribe_buttons/delete_button';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
-import AclInformationButton from '../ascribe_buttons/acl_information_button';
+import AclInformation from '../ascribe_buttons/acl_information';
 
 import AclProxy from '../acl_proxy';
 
@@ -86,19 +86,6 @@ let EditionActionPanel = React.createClass({
         }
     },
 
-    getVerbList(){
-        let verbsToCheck = ['acl_transfer', 'acl_consign', 'acl_loan', 'acl_share', 'acl_delete'];
-        let verbListIndices = [];
-        let acl = this.props.edition.acl;
-        Object.keys(acl).forEach((key) => {
-            let index = verbsToCheck.indexOf(key);
-            if (acl[key] && index !== -1) {
-                verbListIndices.push(verbsToCheck[index].slice(4));
-            }
-        });
-        return verbListIndices;
-    },
-
     render(){
         let {edition, currentUser} = this.props;
 
@@ -173,7 +160,10 @@ let EditionActionPanel = React.createClass({
                             <DeleteButton
                                 handleSuccess={this.handleDeleteSuccess}
                                 editions={[edition]}/>
-                            <AclInformationButton aim="button" verbs = {this.getVerbList()}/>
+                            <AclInformation
+                                aim="button"
+                                verbs={['acl_share', 'acl_transfer', 'acl_consign', 'acl_loan', 'acl_delete']}
+                                aclObject={edition.acl}/>
                         </AclButtonList>
                     </Col>
                 </Row>

js/components/ascribe_detail/piece_container.js

@@ -27,6 +27,8 @@ import CreateEditionsForm from '../ascribe_forms/create_editions_form';
 import CreateEditionsButton from '../ascribe_buttons/create_editions_button';
 import DeleteButton from '../ascribe_buttons/delete_button';
 
+import AclInformation from '../ascribe_buttons/acl_information';
+
 import ListRequestActions from '../ascribe_forms/list_form_request_actions';
 
 import GlobalNotificationModel from '../../models/global_notification_model';
@@ -200,6 +202,10 @@ let PieceContainer = React.createClass({
                         <DeleteButton
                             handleSuccess={this.handleDeleteSuccess}
                             piece={this.state.piece}/>
+                        <AclInformation
+                            aim="button"
+                            verbs={['acl_share', 'acl_create_editions', 'acl_loan', 'acl_delete']}
+                            aclObject={this.state.piece.acl}/>
                 </AclButtonList>
             );
         }

js/components/ascribe_forms/form_consign.js

@@ -10,7 +10,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
-import AclInformation from '../ascribe_information/acl_information';
+import AclInformation from '../ascribe_buttons/acl_information';
 
 let ConsignForm = React.createClass({
     propTypes: {
@@ -45,7 +45,7 @@ let ConsignForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
-                <AclInformation aim={'form'} verbs={'consign'}/>
+                <AclInformation aim={'form'} verbs={['acl_consign']}/>
                 <Property
                     name='consignee'
                     label={getLangText('Email')}>

js/components/ascribe_forms/form_delete_edition.js

@@ -8,7 +8,7 @@ import ApiUrls from '../../constants/api_urls';
 import AppConstants from '../../constants/application_constants';
 
 import { getLangText } from '../../utils/lang_utils';
-import AclInformation from '../ascribe_information/acl_information';
+import AclInformation from '../ascribe_buttons/acl_information';
 
 let EditionDeleteForm = React.createClass({
 
@@ -58,7 +58,7 @@ let EditionDeleteForm = React.createClass({
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>
                 }>
-                <AclInformation aim={'form'} verbs={'delete'}/>
+                <AclInformation aim={'form'} verbs={['acl_delete']}/>
                 <p>{getLangText('Are you sure you would like to permanently delete this edition')}&#63;</p>
                 <p>{getLangText('This is an irrevocable action%s', '.')}</p>
             </Form>

js/components/ascribe_forms/form_loan.js

@@ -19,7 +19,7 @@ import AppConstants from '../../constants/application_constants';
 
 import { mergeOptions } from '../../utils/general_utils';
 import { getLangText } from '../../utils/lang_utils';
-import AclInformation from '../ascribe_information/acl_information';
+import AclInformation from '../ascribe_buttons/acl_information';
 
 let LoanForm = React.createClass({
     propTypes: {
@@ -227,7 +227,7 @@ let LoanForm = React.createClass({
                 <div className={classnames({'ascribe-form-header': true, 'hidden': !this.props.loanHeading})}>
                     <h3>{this.props.loanHeading}</h3>
                 </div>
-                <AclInformation aim={'form'} verbs={'loan'}/>
+                <AclInformation aim={'form'} verbs={['acl_loan']}/>
                 <br></br>
                 <Property
                     name='loanee'

js/components/ascribe_forms/form_share_email.js

@@ -9,7 +9,7 @@ import InputTextAreaToggable from './input_textarea_toggable';
 import Button from 'react-bootstrap/lib/Button';
 
 import AppConstants from '../../constants/application_constants';
-import AclInformation from '../ascribe_information/acl_information';
+import AclInformation from '../ascribe_buttons/acl_information';
 import { getLangText } from '../../utils/lang_utils.js';
 
 
@@ -49,8 +49,7 @@ let ShareForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
-                {console.log('hoho')}
+                <AclInformation aim={'form'} verbs={['acl_share']}/>
-                <AclInformation aim={'form'} verbs={'share'}/>
                 <Property
                     name='share_emails'
                     label={getLangText('Emails')}>

js/components/ascribe_forms/form_transfer.js

@@ -9,7 +9,7 @@ import Form from './form';
 import Property from './property';
 import InputTextAreaToggable from './input_textarea_toggable';
 
-import AclInformation from '../ascribe_information/acl_information';
+import AclInformation from '../ascribe_buttons/acl_information';
 import AppConstants from '../../constants/application_constants';
 import { getLangText } from '../../utils/lang_utils.js';
 
@@ -50,7 +50,7 @@ let TransferForm = React.createClass({
                     <div className="modal-footer">
                         <img src={AppConstants.baseUrl + 'static/img/ascribe_animated_small.gif'} />
                     </div>}>
-                <AclInformation aim={'form'} verbs={'transfer'}/>
+                <AclInformation aim={'form'} verbs={['acl_transfer']}/>
                 <Property
                     name='transferee'
                     label={getLangText('Email')}>

js/components/ascribe_information/acl_information.js

@@ -1,97 +0,0 @@
-'use strict';
-
-import React from 'react';
-import informationTexts from '../../constants/information_text';
-import { getLangText } from '../../utils/lang_utils';
-import { replaceSubstringAtIndex } from '../../utils/general_utils';
-
-let AclInformation = React.createClass({
-    propTypes: {
-        verbs: React.PropTypes.oneOfType([
-            React.PropTypes.string,
-            React.PropTypes.arrayOf(React.PropTypes.string)
-        ]),
-        aim: React.PropTypes.string.isRequired
-    },
-    getInfoText(title, info, example){
-        let titleStyle = {
-            color: '#02B6A3',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let infoStyle = {
-            color: '#333333',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let exampleStyle = {
-            color: '#B2B2B2',
-            fontSize: '11px',
-            lineHeight: '3px'
-        };
-
-        let paragraphStyle = {
-            margin: '0.1em',
-            lineHeight: '15px',
-            align: 'justify'
-        };
-
-        let aim = this.props.aim;
-
-        if (aim) {
-            if (aim === 'form') {
-                return (<p style={paragraphStyle}>
-                    <span style={infoStyle}> {replaceSubstringAtIndex(info.slice(2), 's ', ' ')} <br/> </span>
-                    <span style={exampleStyle}> {example} </span></p>);
-            }
-            else if (aim === 'button') {
-                return (<p style={paragraphStyle}><span style={titleStyle}> {title} </span>
-                    <span style={infoStyle}> {info} <br/> </span>
-                    <span style={exampleStyle}> {example} </span></p>);
-            }
-        }
-        else {
-            console.log('Aim is required when you want to place information text');
-        }
-    },
-    produceInformationBlock() {
-        let enabledIndices = this.props.verbs;
-        let titleList = informationTexts.title;
-        let infoSentenceList = informationTexts.informationSentence;
-        let exampleSentenceList = informationTexts.exampleSentence;
-        let sortedIndices = ['share', 'transfer', 'consign', 'loan', 'delete'];
-        let tempIndices = [];
-        for (let i = 0; i < sortedIndices.length; i++){
-            if (enabledIndices.indexOf(sortedIndices[i]) === -1){
-                continue;
-            }
-            else{
-                tempIndices.push(sortedIndices[i]);
-            }
-        }
-        enabledIndices = tempIndices;
-        if(Array.isArray(enabledIndices)) {
-            return enabledIndices.map((i)=> {
-                return (this.getInfoText(getLangText(titleList[i]), getLangText(infoSentenceList[i]),
-                    getLangText(exampleSentenceList[i])));
-            });
-        }
-        else if (typeof enabledIndices === 'string'){
-            return (this.getInfoText(getLangText(titleList[enabledIndices]), getLangText(infoSentenceList[enabledIndices])));
-        }
-        else if (typeof enabledIndices === 'undefined'){
-            console.log('Verbs come undefined maybe you wrote verb instead of verbs?');
-        }
-        else {
-            console.log('You need to supply an array of strings or string as verbs to AclInformation');
-        }
-    },
-    render() {
-        console.log('Creation of information block');
-        return (<span>{this.produceInformationBlock()}</span>);
-    }
-});
-
-export default AclInformation;

js/constants/information_text.js

@@ -1,42 +1,37 @@
 'use strict';
 
-const informationTexts = {
+export const InformationTexts = {
-
+    'titles': {
-    'title': {
+        'acl_transfer': 'TRANSFER',
-        'transfer': 'TRANSFER',
+        'acl_consign': 'CONSIGN',
-        'consign': 'CONSIGN',
+        'acl_loan': 'LOAN',
-        'loan': 'LOAN',
+        'acl_share': 'SHARE',
-        'share': 'SHARE',
+        'acl_delete': 'DELETE',
-        'delete': 'DELETE'},
+        'acl_create_editions': 'CREATE EDITIONS',
-
+        'acl_unconsign': 'UNCONSIGN',
-    'informationSentence': {
+        'acl_request_unconsign': 'REQUEST UNCONSIGN'
-
+    },
-        'transfer': ' - Changes ownership of an Edition. As with a physical piece of work, ' +
+    'informationSentences': {
+        'acl_transfer': ' - Changes ownership of an Edition. As with a physical piece of work, ' +
             'transferring ownership of an Edition does not transfer copyright in the Work.',
-
+        'acl_consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
-        'consign': ' - Lets someone represent you in dealing with the work, under the terms you agree to.',
+        'acl_loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
-
+        'acl_share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
-        'loan': ' - Lets someone use or put the Work on display for a limited amount of time.',
+        'acl_delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
-
+            'history will still exist on the blockchain and cannot be deleted.',
-        'share': ' - Lets someone view the Work or Edition, but does not give rights to publish or display it.',
+        'acl_create_editions': '<Insert text here>',
-
+        'acl_unconsign': '<Insert text here>',
-        'delete': ' - Removes the Work from your Wallet. Note that the previous registration and transfer ' +
+        'acl_request_unconsign': '<Insert text here>'
-            'history will still exist on the blockchain and cannot be deleted.'
+    },
-    }
+    'exampleSentences': {
-
+        'acl_transfer': '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
-    ,
+        'acl_consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
-    'exampleSentence': {
-        'transfer': '(e.g. a musician Transfers limited edition 1 of 10 of her new album to a very happy fan)',
-
-        'consign': '(e.g. an artist Consigns 10 Editions of her new Work to a gallery ' +
             'so the gallery can sell them on her behalf, under the terms the artist and the gallery have agreed to)',
-
+        'acl_loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
-        'loan': '(e.g. a collector Loans a Work to a gallery for one month for display in the gallery\'s show)',
+        'acl_share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
-
+        'acl_delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)',
-        'share': '(e.g. a photographer Shares proofs of a graduation photo with the graduate\'s grandparents)',
+        'acl_create_editions': '<Insert text here>',
-
+        'acl_unconsign': '<Insert text here>',
-        'delete': '(e.g. an artist uploaded the wrong file and doesn\'t want it cluttering his Wallet, so he Deletes it)'
+        'acl_request_unconsign': '<Insert text here>'
     }
 };
-
-export default informationTexts;

js/utils/acl_utils.js

@@ -2,7 +2,7 @@
 
 import { sanitize } from './general_utils';
 
-function intersectAcls(a, b) {
+export function intersectAcls(a, b) {
     return a.filter((val) => b.indexOf(val) > -1);
 }
 

package.json

@@ -73,7 +73,7 @@
     "q": "^1.4.1",
     "raven-js": "^1.1.19",
     "react": "^0.13.2",
-    "react-bootstrap": "^0.25.1",
+    "react-bootstrap": "0.25.1",
     "react-datepicker": "^0.12.0",
     "react-router": "^0.13.3",
     "react-router-bootstrap": "~0.16.0",