Merged in AD-1036-put-contracts-in-his-own-menu (pull request #79)

Ad 1036 put contracts in his own menu

js/components/ascribe_settings/contract_settings.js

@@ -8,6 +8,12 @@ import CreateContractForm from '../ascribe_forms/form_create_contract';
 import ContractListStore from '../../stores/contract_list_store';
 import ContractListActions from '../../actions/contract_list_actions';
 
+import UserStore from '../../stores/user_store';
+import UserActions from '../../actions/user_actions';
+
+import WhitelabelStore from '../../stores/whitelabel_store';
+import WhitelabelActions from '../../actions/whitelabel_actions';
+
 import ActionPanel from '../ascribe_panel/action_panel';
 import ContractSettingsUpdateButton from './contract_settings_update_button';
 
@@ -17,24 +23,30 @@ import GlobalNotificationActions from '../../actions/global_notification_actions
 import AclProxy from '../acl_proxy';
 
 import { getLangText } from '../../utils/lang_utils';
+import { mergeOptions, truncateTextAtCharIndex } from '../../utils/general_utils';
 
 
 let ContractSettings = React.createClass({
-    propTypes: {
-        currentUser: React.PropTypes.object,
-        defaultExpanded: React.PropTypes.bool
-    },
-
     getInitialState(){
-        return ContractListStore.getState();
+        return mergeOptions(
+            ContractListStore.getState(),
+            UserStore.getState()
+        );
     },
 
     componentDidMount() {
         ContractListStore.listen(this.onChange);
+        UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
+        UserActions.fetchCurrentUser();
         ContractListActions.fetchContractList(true);
     },
 
     componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
+        UserStore.unlisten(this.onChange);
         ContractListStore.unlisten(this.onChange);
     },
 
@@ -82,16 +94,14 @@ let ContractSettings = React.createClass({
         }
 
         return (
-            <AclProxy
+            <div className="settings-container">
-                aclName="acl_view_settings_contract"
-                aclObject={this.props.currentUser.acl}>
                 <CollapsibleParagraph
                     title={getLangText('Contracts')}
                     show={true}
-                    defaultExpanded={false}>
+                    defaultExpanded={true}>
                     <AclProxy
                         aclName="acl_edit_public_contract"
-                        aclObject={this.props.currentUser.acl}>
+                        aclObject={this.state.currentUser.acl}>
                         <div>
                             {createPublicContractForm}
                             {publicContracts.map((contract, i) => {
@@ -99,10 +109,14 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
-                                                <ContractSettingsUpdateButton contract={contract}/>
+                                                <AclProxy
+                                                    aclObject={this.state.whitelabel}
+                                                    aclName="acl_update_public_contract">
+                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
                                                     href={contract.blob.url_safe}
@@ -124,7 +138,7 @@ let ContractSettings = React.createClass({
                     </AclProxy>
                     <AclProxy
                         aclName="acl_edit_private_contract"
-                        aclObject={this.props.currentUser.acl}>
+                        aclObject={this.state.currentUser.acl}>
                         <div>
                             <CreateContractForm
                             isPublic={false}
@@ -137,10 +151,14 @@ let ContractSettings = React.createClass({
                                     <ActionPanel
                                         key={i}
                                         title={contract.name}
-                                        content={contract.name}
+                                        content={truncateTextAtCharIndex(contract.name, 120, '(...).pdf')}
                                         buttons={
                                             <div className="pull-right">
-                                               <ContractSettingsUpdateButton contract={contract} />
+                                               <AclProxy
+                                                    aclObject={this.state.whitelabel}
+                                                    aclName="acl_update_private_contract">
+                                                    <ContractSettingsUpdateButton contract={contract}/>
+                                                </AclProxy>
                                                 <a
                                                     className="btn btn-default btn-sm margin-left-2px"
                                                     href={contract.blob.url_safe}
@@ -154,14 +172,14 @@ let ContractSettings = React.createClass({
                                                 </button>
                                            </div>
                                        }
-                                       leftColumnWidth="40%"
+                                       leftColumnWidth="60%"
-                                       rightColumnWidth="60%"/>
+                                       rightColumnWidth="40%"/>
                                 );
                             })}
                         </div>
                     </AclProxy>
                 </CollapsibleParagraph>
-            </AclProxy>
+            </div>
         );
     }
 });

js/components/ascribe_settings/settings_container.js

@@ -6,11 +6,17 @@ import Router from 'react-router';
 import UserStore from '../../stores/user_store';
 import UserActions from '../../actions/user_actions';
 
+import WhitelabelStore from '../../stores/whitelabel_store';
+import WhitelabelActions from '../../actions/whitelabel_actions';
+
 import AccountSettings from './account_settings';
 import BitcoinWalletSettings from './bitcoin_wallet_settings';
-import ContractSettings from './contract_settings';
 import APISettings from './api_settings';
 
+import AclProxy from '../acl_proxy';
+
+import { mergeOptions } from '../../utils/general_utils';
+
 
 let SettingsContainer = React.createClass({
     propTypes: {
@@ -22,15 +28,22 @@ let SettingsContainer = React.createClass({
     mixins: [Router.Navigation],
 
     getInitialState() {
-        return UserStore.getState();
+        return mergeOptions(
+            UserStore.getState(),
+            WhitelabelStore.getState()
+        );
     },
 
     componentDidMount() {
         UserStore.listen(this.onChange);
+        WhitelabelStore.listen(this.onChange);
+
+        WhitelabelActions.fetchWhitelabel();
         UserActions.fetchCurrentUser();
     },
 
     componentWillUnmount() {
+        WhitelabelStore.unlisten(this.onChange);
         UserStore.unlisten(this.onChange);
     },
 
@@ -48,9 +61,16 @@ let SettingsContainer = React.createClass({
                 <div className="settings-container">
                     <AccountSettings currentUser={this.state.currentUser} loadUser={this.loadUser}/>
                     {this.props.children}
-                    <APISettings />
+                    <AclProxy
-                    <BitcoinWalletSettings />
+                        aclObject={this.state.whitelabel}
-                    <ContractSettings currentUser={this.state.currentUser} loadUser={this.loadUser}/>
+                        aclName="acl_view_settings_api">
+                        <APISettings />
+                    </AclProxy>
+                    <AclProxy
+                        aclObject={this.state.whitelabel}
+                        aclName="acl_view_settings_bitcoin">
+                        <BitcoinWalletSettings />
+                    </AclProxy>
                 </div>
             );
         }

js/components/header.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import Router from 'react-router';
 
-
 import Nav from 'react-bootstrap/lib/Nav';
 import Navbar from 'react-bootstrap/lib/Navbar';
 import CollapsibleNav from 'react-bootstrap/lib/CollapsibleNav';
@@ -12,6 +11,8 @@ import MenuItem from 'react-bootstrap/lib/MenuItem';
 import MenuItemLink from 'react-router-bootstrap/lib/MenuItemLink';
 import NavItemLink from 'react-router-bootstrap/lib/NavItemLink';
 
+import AclProxy from './acl_proxy';
+
 import UserActions from '../actions/user_actions';
 import UserStore from '../stores/user_store';
 
@@ -96,7 +97,7 @@ let Header = React.createClass({
         }
     },
 
-    onMenuItemClick(event) {
+    onMenuItemClick() {
         /*
         This is a hack to make the dropdown close after clicking on an item
         The function just need to be defined
@@ -137,6 +138,15 @@ let Header = React.createClass({
                         onClick={this.onMenuItemClick}>
                         {getLangText('Account Settings')}
                     </MenuItemLink>
+                    <AclProxy
+                        aclObject={this.state.currentUser.acl}
+                        aclName="acl_view_settings_contract">
+                        <MenuItemLink
+                            to="contract_settings"
+                            onClick={this.onMenuItemClick}>
+                            {getLangText('Contract Settings')}
+                        </MenuItemLink>
+                    </AclProxy>
                     <MenuItem divider />
                     <MenuItemLink eventKey="3" to="logout">{getLangText('Log out')}</MenuItemLink>
                 </DropdownButton>

js/components/whitelabel/wallet/wallet_routes.js

@@ -12,7 +12,7 @@ import PieceList from '../../../components/piece_list';
 import PieceContainer from '../../../components/ascribe_detail/piece_container';
 import EditionContainer from '../../../components/ascribe_detail/edition_container';
 import SettingsContainer from '../../../components/ascribe_settings/settings_container';
-import RegisterPiece from '../../../components/register_piece';
+import ContractSettings from '../../../components/ascribe_settings/contract_settings';
 
 import CylandLanding from './components/cyland/cyland_landing';
 import CylandPieceContainer from './components/cyland/ascribe_detail/cyland_piece_container';
@@ -49,6 +49,7 @@ let ROUTES = {
             <Route name="piece" path="pieces/:pieceId" handler={CylandPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         </Route>
     ),
     'cc': (
@@ -79,6 +80,7 @@ let ROUTES = {
             <Route name="piece" path="pieces/:pieceId" handler={IkonotvPieceContainer} />
             <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
             <Route name="settings" path="settings" handler={SettingsContainer} />
+            <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
             <Route name="contract_notifications" path="contract_notifications" handler={IkonotvContractNotifications} />
         </Route>
     )

js/routes.js

@@ -17,6 +17,7 @@ import LogoutContainer from './components/logout_container';
 import SignupContainer from './components/signup_container';
 import PasswordResetContainer from './components/password_reset_container';
 
+import ContractSettings from './components/ascribe_settings/contract_settings';
 import SettingsContainer from './components/ascribe_settings/settings_container';
 import CoaVerifyContainer from './components/coa_verify_container';
 
@@ -43,6 +44,7 @@ const COMMON_ROUTES = (
         <Route name="edition" path="editions/:editionId" handler={EditionContainer} />
         <Route name="password_reset" path="password_reset" handler={PasswordResetContainer} />
         <Route name="settings" path="settings" handler={SettingsContainer} />
+        <Route name="contract_settings" path="contract_settings" handler={ContractSettings} />
         <Route name="coa_verify" path="verify" handler={CoaVerifyContainer} />
         <Route name="contract_notifications" path="verify" handler={ContractNotification} />
     </Route>

js/utils/general_utils.js

@@ -204,4 +204,21 @@ export function excludePropFromObject(obj, propList){
         }
     }
     return clonedObj;
+}
+
+/**
+ * Takes a string and breaks it at the supplied index and replaces it
+ * with a (potentially) short string that also has been provided
+ * @param  {string} text        The string to truncate
+ * @param  {number} charIndex   The char number at which the text should be truncated
+ * @param  {String} replacement All text after charIndex will be replaced with this string
+ * @return {string}             The truncated text
+ */
+export function truncateTextAtCharIndex(text, charIndex, replacement = '...') {
+    let truncatedText = '';
+
+    truncatedText = text.slice(0, charIndex);
+    truncatedText += text.length > charIndex ? replacement : '';
+
+    return truncatedText;
 }

sass/ascribe_panel.scss

@@ -24,6 +24,10 @@
     > .ascribe-panel-content {
         display: table-cell;
         vertical-align: middle;
+
+        &:first-child {
+            font-size: .9em;
+        }
     }
 
     @media(max-width:767px) {