merge 456

js/actions/contract_list_actions.js

@@ -23,16 +23,27 @@ class ContractListActions {
             });
     }
 
-    makeContractPublic(contract){
+
-        contract.public = true;
+    changeContract(contract){
         return Q.Promise((resolve, reject) => {
             OwnershipFetcher.makeContractPublic(contract)
                 .then((res) => {
-                    console.log('Here is the result... ');
                     resolve(res);
                 })
                 .catch((err)=> {
-                    console.log('Here we have an error');
+                    console.logGlobal(err);
+                    reject(err);
+                });
+        });
+    }
+
+    removeContract(contractId){
+        return Q.Promise( (resolve, reject) => {
+            OwnershipFetcher.deleteContract(contractId)
+                .then((res) => {
+                    resolve(res);
+                })
+                .catch( (err) => {
                     console.logGlobal(err);
                     reject(err);
                 });

js/components/ascribe_buttons/button_submit_close.js

@@ -3,7 +3,7 @@
 import React from 'react';
 
 import AppConstants from '../../constants/application_constants';
-import { getLangText } from '../../utils/lang_utils.js'
+import { getLangText } from '../../utils/lang_utils.js';
 
 let ButtonSubmitOrClose = React.createClass({
     propTypes: {

js/components/ascribe_forms/form_create_contract.js

@@ -9,11 +9,15 @@ import InputCheckbox from '../ascribe_forms/input_checkbox';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import ContractListActions from '../../actions/contract_list_actions';
+
 import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
 
 import AppConstants from '../../constants/application_constants';
 import ApiUrls from '../../constants/api_urls';
 
+
+
 import { getLangText } from '../../utils/lang_utils';
 import { getCookie } from '../../utils/fetch_api_utils';
 import { formSubmissionValidation } from '../ascribe_uploader/react_s3_fine_uploader_utils';
@@ -46,8 +50,12 @@ let CreateContractForm = React.createClass({
     },
 
     handleCreateSuccess(response) {
+        ContractListActions.fetchContractList();
         let notification = new GlobalNotificationModel(getLangText('Contract %s successfully created', response.name), 'success', 5000);
         GlobalNotificationActions.appendGlobalNotification(notification);
+
+        // also refresh contract lists for the rest of the contract settings page
+        ContractListActions.fetchContractList();
     },
 
 
@@ -109,7 +117,7 @@ let CreateContractForm = React.createClass({
                     label={getLangText('Contract name')}>
                     <input
                         type="text"
-                        placeholder="(e.g. Loan agreement #1)"
+                        placeholder="(e.g. Contract - Loan agreement #1)"
                         required/>
                 </Property>
                 <Property
@@ -118,10 +126,7 @@ let CreateContractForm = React.createClass({
                     style={{paddingBottom: 0}}>
                     <InputCheckbox>
                         <span>
-                            {' ' + getLangText('I agree to the Terms of Service') + ' '}
+                            Make contract public (this will replace the current public contract)
-                            (<a href="https://www.ascribe.io/terms" target="_blank" style={{fontSize: '0.9em', color: 'rgba(0,0,0,0.7)'}}>
-                                {getLangText('read')}
-                            </a>)
                         </span>
                     </InputCheckbox>
                 </Property>

js/components/ascribe_panel/action_panel.js

@@ -12,8 +12,12 @@ let ActionPanel = React.createClass({
         ]),
         buttons: React.PropTypes.element,
         onClick: React.PropTypes.func,
-        ignoreFocus: React.PropTypes.bool
+        ignoreFocus: React.PropTypes.bool,
+
+        leftColumnWidth: React.PropTypes.string,
+        rightColumnWidth: React.PropTypes.string
     },
+
     getInitialState() {
         return {
             isFocused: false
@@ -40,14 +44,21 @@ let ActionPanel = React.createClass({
     },
 
     render() {
+
+        let { leftColumnWidth, rightColumnWidth } = this.props;
+
         return (
             <div className={classnames('ascribe-panel-wrapper', {'is-focused': this.state.isFocused})}>
-                <div className="ascribe-panel-table">
+                <div
+                    className="ascribe-panel-table"
+                    style={{width: leftColumnWidth}}>
                     <div className="ascribe-panel-content">
                         {this.props.content}
                     </div>
                 </div>
-                <div className="ascribe-panel-table">
+                <div
+                    className="ascribe-panel-table"
+                    style={{width: rightColumnWidth}}>
                     <div className="ascribe-panel-content">
                         {this.props.buttons}
                     </div>

js/components/ascribe_settings/contract_settings.js

@@ -10,97 +10,141 @@ import ContractListActions from '../../actions/contract_list_actions';
 
 import ActionPanel from '../ascribe_panel/action_panel';
 
-import { getLangText } from '../../utils/lang_utils';
 import GlobalNotificationModel from '../../models/global_notification_model';
 import GlobalNotificationActions from '../../actions/global_notification_actions';
 
+import { getLangText } from '../../utils/lang_utils';
+
 let ContractSettings = React.createClass({
     propTypes: {
         defaultExpanded: React.PropTypes.bool
     },
+
     getInitialState(){
         return ContractListStore.getState();
     },
+
     componentDidMount() {
         ContractListStore.listen(this.onChange);
         ContractListActions.fetchContractList();
     },
+
     componentWillUnmount() {
         ContractListStore.unlisten(this.onChange);
     },
+
     onChange(state) {
         this.setState(state);
     },
+
     makeContractPublic(contract) {
-        console.log(contract);
+        return () => {
-        ContractListActions.makeContractPublic(contract)
+            contract.public = true;
+            ContractListActions.changeContract(contract)
                 .then(() => ContractListActions.fetchContractList())
-            .catch((error)=>{console.log('Error ', error);
+                .catch((err) => {
-                                let notification = new GlobalNotificationModel('Service is unavailable', 'danger', 10000);
+                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
                     GlobalNotificationActions.appendGlobalNotification(notification);
             });
+        };
     },
+
+    removeContract(contract) {
+        return () => {
+            ContractListActions.removeContract(contract.id)
+                .then(( ) => ContractListActions.fetchContractList())
+                .catch((err) => {
+                    let notification = new GlobalNotificationModel(err, 'danger', 10000);
+                    GlobalNotificationActions.appendGlobalNotification(notification);
+            });
+        };
+    },
+
     getPublicContracts(){
         return this.state.contractList.filter((contract) => contract.public);
     },
+
     getPrivateContracts(){
         return this.state.contractList.filter((contract) => !contract.public);
     },
-    getblobEndName(contract){
+
-        return contract.blob.match(/.*\/(.*)/)[1];
-    },
     render() {
         let publicContracts = this.getPublicContracts();
         let privateContracts = this.getPrivateContracts();
-        console.log(this.state.contractList);
+
         return (
             <CollapsibleParagraph
                 title={getLangText('Contract Settings')}
                 show={true}
-                defaultExpanded={false}>
+                defaultExpanded={true}>
-                {/* this should be this.props.defaultExpanded */}
                 <CollapsibleParagraph
                     title={getLangText('List Contracts')}
                     show={true}
-                    defaultExpanded={false}>
+                    defaultExpanded={true}>
-                    {<div>
+                    <CollapsibleParagraph
-                    <p>Public Contracts</p>
+                        title={getLangText('Public Contracts')}
-                    {(publicContracts.length > 0) ?
+                        show={true}
-                        publicContracts.map(
+                        defaultExpanded={true}>
-                        (contract) => {
+                        {publicContracts.map((contract, i) => {
                             return (
-                                <ActionPanel title = {contract.name}
+                                <ActionPanel
-                                content = {this.getblobEndName(contract)}
+                                    key={i}
-                                buttons = {<span>
+                                    title={contract.name}
-                                           <button className="btn btn-default btn-sm margin-left-2px">UPDATE</button>
+                                    content={contract.name}
-                                           <button className="btn btn-default btn-sm margin-left-2px">REMOVE</button>
+                                    buttons={
-                                           </span>}
+                                        <div className="pull-right">
-                            />);
+                                           <button className="btn btn-default btn-sm margin-left-2px">
+                                                UPDATE
+                                           </button>
+                                           <button
+                                                className="btn btn-default btn-sm margin-left-2px"
+                                                onClick={this.removeContract(contract)}>
+                                                REMOVE
+                                            </button>
+                                       </div>
                                     }
-                    ) : null }
+                                    leftColumnWidth="40%"
-                    </div>}
+                                    rightColumnWidth="60%"/>
-
+                            );
-                    {<div>
+                        })}
-                    <p>Private Contracts</p>
+                    </CollapsibleParagraph>
-                    {(privateContracts.length > 0) ?
+                    <CollapsibleParagraph
-                        privateContracts.map(
+                        title={getLangText('Private Contracts')}
-                        (contract) => {
+                        show={true}
+                        defaultExpanded={true}>
+                        {privateContracts.map((contract, i) => {
                             return (
-                                <ActionPanel title = {contract.name}
+                                <ActionPanel
-                                content = {this.getblobEndName(contract)}
+                                    key={i}
-                                buttons = {<span> <button className="btn btn-default btn-sm margin-left-2px">UPDATE</button>
+                                    title={contract.name}
-                                           <button className="btn btn-default btn-sm margin-left-2px" >REMOVE</button>
+                                    content={contract.name}
-                                           <button className="btn btn-default btn-sm margin-left-2px"
+                                    buttons={
-                                           onClick={this.makeContractPublic.bind(this, contract)}>MAKE PUBLIC</button> </span>}
+                                        <div className="pull-right">
-                            />);
+                                           <button className="btn btn-default btn-sm margin-left-2px">
+                                                UPDATE
+                                            </button>
+                                            <button
+                                                className="btn btn-default btn-sm margin-left-2px"
+                                                onClick={this.removeContract(contract)}>
+                                                REMOVE
+                                            </button>
+                                            <button
+                                                className="btn btn-default btn-sm margin-left-2px"
+                                                onClick={this.makeContractPublic(contract)}>
+                                                MAKE PUBLIC
+                                            </button>
+                                       </div>
                                    }
-                    ) : null}
+                                   leftColumnWidth="40%"
-                    </div>}
+                                   rightColumnWidth="60%"/>
+                            );
+                        })}
+                    </CollapsibleParagraph>
                 </CollapsibleParagraph>
                 <CollapsibleParagraph
                     title={getLangText('Create Contract')}
                     show={true}
-                    defaultExpanded={false}>
+                    defaultExpanded={true}>
                     <CreateContractForm />
                 </CollapsibleParagraph>
             </CollapsibleParagraph>

js/constants/api_urls.js

@@ -54,7 +54,7 @@ let ApiUrls = {
     'ownership_unconsigns': AppConstants.apiEndpoint + 'ownership/unconsigns/',
     'ownership_unconsigns_deny': AppConstants.apiEndpoint + 'ownership/unconsigns/deny/',
     'ownership_unconsigns_request': AppConstants.apiEndpoint + 'ownership/unconsigns/request/',
-    'ownership_contract': AppConstants.apiEndpoint + 'ownership/contracts/${contract_id}',
+    'ownership_contract': AppConstants.apiEndpoint + 'ownership/contracts/${contract_id}/',
     'ownership_contract_list': AppConstants.apiEndpoint + 'ownership/contracts/',
     'piece': AppConstants.apiEndpoint + 'pieces/${piece_id}/',
     'piece_extradata': AppConstants.apiEndpoint + 'pieces/${piece_id}/extradata/',

js/fetchers/ownership_fetcher.js

@@ -25,6 +25,10 @@ let OwnershipFetcher = {
 
     makeContractPublic(contractObj){
         return requests.put('ownership_contract', { body: contractObj, contract_id: contractObj.id });
+    },
+
+    deleteContract(contractObjId){
+        return requests.delete(ApiUrls.ownership_contract, {contract_id: contractObjId});
     }
 };
 

js/utils/general_utils.js

@@ -52,19 +52,6 @@ export function sumNumList(l) {
     return sum;
 }
 
-export function excludePropFromObject(obj, propList){
-    let clonedObj = mergeOptions({},obj);
-    for (let item in propList){
-        console.log(item);
-        if (clonedObj[propList[item]]){
-            console.log('deleting... ');
-            delete clonedObj[propList[item]];
-        }
-    }
-    console.log(clonedObj);
-    return clonedObj;
-}
-
 /*
     Taken from http://stackoverflow.com/a/4795914/1263876
     Behaves like C's format string function
@@ -208,3 +195,13 @@ function _mergeOptions(obj1, obj2) {
 export function escapeHTML(s) {
     return document.createElement('div').appendChild(document.createTextNode(s)).parentNode.innerHTML;
 }
+
+export function excludePropFromObject(obj, propList){
+    let clonedObj = mergeOptions({}, obj);
+    for (let item in propList){
+        if (clonedObj[propList[item]]){
+            delete clonedObj[propList[item]];
+        }
+    }
+    return clonedObj;
+}

js/utils/requests.js

@@ -119,7 +119,9 @@ class Requests {
 
         return fetch(url, merged)
                     .then(this.unpackResponse)
-                    .catch(this.handleError);
+                    .catch( () => {
+                        this.handleError();
+            });
     }
 
     get(url, params) {
@@ -134,6 +136,7 @@ class Requests {
     delete(url, params) {
         let paramsCopy = this._merge(params);
         let newUrl = this.prepareUrl(url, paramsCopy, true);
+
         return this.request('delete', newUrl);
     }
 
@@ -144,18 +147,17 @@ class Requests {
         let newUrl = this.prepareUrl(url, params);
         let body = null;
         if (paramsCopy && paramsCopy.body) {
-            console.log(paramsCopy.body);
             body = JSON.stringify(paramsCopy.body);
         }
         return this.request(method, newUrl, { body });
     }
 
     post(url, params) {
-        return this._putOrPost(url,params,'post')
+        return this._putOrPost(url, params, 'post');
     }
 
     put(url, params){
-        return this._putOrPost(url,params,'put')
+        return this._putOrPost(url, params, 'put');
     }
 
     defaults(options) {

sass/ascribe_collapsible.scss

@@ -26,8 +26,8 @@
     width: 100%;
     
     /* Shrink the size of the headline for a nested element */
-    .ascribe-collapsible-wrapper > div:first-child {
+    .ascribe-collapsible-wrapper > .ascribe-collapsible-content {
         padding-left: 1em;
-        font-size: 90%;
+        font-size: 95%;
     }
 }