From 2c9370e555723f90811bf187d9f5d0d30ddda5b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Sep 2015 10:03:20 +0200 Subject: [PATCH 1/4] restyle contract settings list --- .../ascribe_settings/contract_settings.js | 82 ++++++++++--------- sass/ascribe_collapsible.scss | 2 +- 2 files changed, 43 insertions(+), 41 deletions(-) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 880cd744..16225dc9 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -61,49 +61,51 @@ let ContractSettings = React.createClass({ render() { let publicContracts = this.getPublicContracts(); let privateContracts = this.getPrivateContracts(); - console.log(this.state.contractList); + return ( - {/* this should be this.props.defaultExpanded */} + defaultExpanded={true}> - {
-

Public Contracts

- {(publicContracts.length > 0) ? - publicContracts.map( - (contract) => { + defaultExpanded={true}> + + {publicContracts.map((contract) => { return ( - - - - } - />); - } - ) : null } -
} - - {
-

Private Contracts

- {(privateContracts.length > 0) ? - privateContracts.map( - (contract) => { + + + + + }/> + ); + })} + + + {privateContracts.map((contract) => { return ( - - - } - />); - } - ) : null} -
} + + }/> + ); + })} + + defaultExpanded={true}> diff --git a/sass/ascribe_collapsible.scss b/sass/ascribe_collapsible.scss index f6c9a623..85fd4270 100644 --- a/sass/ascribe_collapsible.scss +++ b/sass/ascribe_collapsible.scss @@ -26,7 +26,7 @@ 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%; } From 38b7dcd79fa5aa675a8a053e394767cc1a056361 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Sep 2015 10:15:26 +0200 Subject: [PATCH 2/4] finalize contract styles --- js/components/ascribe_panel/action_panel.js | 17 +++++++-- .../ascribe_settings/contract_settings.js | 37 +++++++++++-------- 2 files changed, 35 insertions(+), 19 deletions(-) diff --git a/js/components/ascribe_panel/action_panel.js b/js/components/ascribe_panel/action_panel.js index 3146f1ba..f6fe9a70 100644 --- a/js/components/ascribe_panel/action_panel.js +++ b/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 (
-
+
{this.props.content}
-
+
{this.props.buttons}
diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 16225dc9..72d2b233 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -81,7 +81,7 @@ let ContractSettings = React.createClass({ title={contract.name} content={contract.name} buttons={ - +
@@ -89,8 +89,11 @@ let ContractSettings = React.createClass({ onClick={this.removeContract.bind(this, contract)}> REMOVE - - }/> +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%" + /> ); })} @@ -104,20 +107,22 @@ let ContractSettings = React.createClass({ title={contract.name} content={contract.name} buttons={ - +
- - - - }/> + UPDATE + + + +
+ } + leftColumnWidth="40%" + rightColumnWidth="60%"/> ); })} From 2c1ad6dc464fdc34d5496fe9f8ac33c5119b2289 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Sep 2015 11:19:11 +0200 Subject: [PATCH 3/4] fix bug in contract settings and expand actionpanel functionality --- .../ascribe_forms/form_create_contract.js | 12 ++-- .../ascribe_settings/contract_settings.js | 64 +++++++++++-------- sass/ascribe_collapsible.scss | 2 +- 3 files changed, 45 insertions(+), 33 deletions(-) diff --git a/js/components/ascribe_forms/form_create_contract.js b/js/components/ascribe_forms/form_create_contract.js index 55a94511..488a2153 100644 --- a/js/components/ascribe_forms/form_create_contract.js +++ b/js/components/ascribe_forms/form_create_contract.js @@ -9,6 +9,8 @@ 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'; @@ -48,6 +50,9 @@ let CreateContractForm = React.createClass({ handleCreateSuccess(response) { 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 +114,7 @@ let CreateContractForm = React.createClass({ label={getLangText('Contract name')}> - {' ' + getLangText('I agree to the Terms of Service') + ' '} - ( - {getLangText('read')} - ) + Make contract public (this will replace the current public contract) diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index 72d2b233..e34772f2 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -10,54 +10,63 @@ 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){ - ContractListActions.makeContractPublic(contract) - .then(( ) => ContractListActions.fetchContractList()) - .catch((error)=>{ - let notification = new GlobalNotificationModel(error, 'danger', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - }); + + makeContractPublic(contract) { + return () => { + ContractListActions.makeContractPublic(contract) + .then(() => ContractListActions.fetchContractList()) + .catch((error) => { + let notification = new GlobalNotificationModel(error, 'success', 10000); + GlobalNotificationActions.appendGlobalNotification(notification); + }); + }; }, - removeContract(contract){ - console.log(contract); - ContractListActions.removeContract(contract.id) - .then(( ) => ContractListActions.fetchContractList()) - .catch((error) => { - console.log('Error', error); - let notification = new GlobalNotificationModel(error, 'danger', 10000); - GlobalNotificationActions.appendGlobalNotification(notification); - }); + + removeContract(contract) { + return () => { + ContractListActions.removeContract(contract.id) + .then(( ) => ContractListActions.fetchContractList()) + .catch((error) => { + let notification = new GlobalNotificationModel(error, '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(); @@ -75,9 +84,10 @@ let ContractSettings = React.createClass({ title={getLangText('Public Contracts')} show={true} defaultExpanded={true}> - {publicContracts.map((contract) => { + {publicContracts.map((contract, i) => { return (
} leftColumnWidth="40%" - rightColumnWidth="60%" - /> + rightColumnWidth="60%"/> ); })} @@ -101,9 +110,10 @@ let ContractSettings = React.createClass({ title={getLangText('Private Contracts')} show={true} defaultExpanded={true}> - {privateContracts.map((contract) => { + {privateContracts.map((contract, i) => { return (
diff --git a/sass/ascribe_collapsible.scss b/sass/ascribe_collapsible.scss index 85fd4270..2b65567c 100644 --- a/sass/ascribe_collapsible.scss +++ b/sass/ascribe_collapsible.scss @@ -28,6 +28,6 @@ /* Shrink the size of the headline for a nested element */ .ascribe-collapsible-wrapper > .ascribe-collapsible-content { padding-left: 1em; - font-size: 90%; + font-size: 95%; } } \ No newline at end of file From ba2ebe81fd341c6493298975680ff6ed26df7da3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Tue, 8 Sep 2015 11:44:05 +0200 Subject: [PATCH 4/4] code restructuring --- js/actions/contract_list_actions.js | 5 +--- .../ascribe_settings/contract_settings.js | 26 +++++++++++-------- js/utils/general_utils.js | 23 +++++++--------- js/utils/requests.js | 5 ++-- 4 files changed, 29 insertions(+), 30 deletions(-) diff --git a/js/actions/contract_list_actions.js b/js/actions/contract_list_actions.js index 307706ef..60144ef6 100644 --- a/js/actions/contract_list_actions.js +++ b/js/actions/contract_list_actions.js @@ -23,8 +23,7 @@ class ContractListActions { }); } - makeContractPublic(contract){ - contract.public = true; + changeContract(contract){ return Q.Promise((resolve, reject) => { OwnershipFetcher.makeContractPublic(contract) .then((res) => { @@ -41,11 +40,9 @@ class ContractListActions { return Q.Promise((resolve, reject) => { OwnershipFetcher.deleteContract(contractId) .then((res) => { - console.log('Contract deleted'); resolve(res); }) .catch( (err) => { - console.log('Error while deleting'); console.logGlobal(err); reject(err); }); diff --git a/js/components/ascribe_settings/contract_settings.js b/js/components/ascribe_settings/contract_settings.js index e34772f2..c48ca0d7 100644 --- a/js/components/ascribe_settings/contract_settings.js +++ b/js/components/ascribe_settings/contract_settings.js @@ -39,10 +39,11 @@ let ContractSettings = React.createClass({ makeContractPublic(contract) { return () => { - ContractListActions.makeContractPublic(contract) + contract.public = true; + ContractListActions.changeContract(contract) .then(() => ContractListActions.fetchContractList()) - .catch((error) => { - let notification = new GlobalNotificationModel(error, 'success', 10000); + .catch((err) => { + let notification = new GlobalNotificationModel(err, 'danger', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }); }; @@ -52,8 +53,8 @@ let ContractSettings = React.createClass({ return () => { ContractListActions.removeContract(contract.id) .then(( ) => ContractListActions.fetchContractList()) - .catch((error) => { - let notification = new GlobalNotificationModel(error, 'danger', 10000); + .catch((err) => { + let notification = new GlobalNotificationModel(err, 'danger', 10000); GlobalNotificationActions.appendGlobalNotification(notification); }); }; @@ -95,8 +96,9 @@ let ContractSettings = React.createClass({ -
@@ -121,12 +123,14 @@ let ContractSettings = React.createClass({ - -
diff --git a/js/utils/general_utils.js b/js/utils/general_utils.js index 673a5509..7717a96a 100644 --- a/js/utils/general_utils.js +++ b/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 @@ -207,4 +194,14 @@ 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; } \ No newline at end of file diff --git a/js/utils/requests.js b/js/utils/requests.js index 8e846d7c..c785abf6 100644 --- a/js/utils/requests.js +++ b/js/utils/requests.js @@ -33,7 +33,7 @@ class Requests { // If this is the case, we can not try to parse it as JSON. if(responseText !== 'None') { let body = JSON.parse(responseText); - + if(body && body.errors) { let error = new Error('Form Error'); error.json = body; @@ -134,12 +134,13 @@ class Requests { delete(url, params) { let paramsCopy = this._merge(params); let newUrl = this.prepareUrl(url, paramsCopy, true); + return this.request('delete', newUrl); } _putOrPost(url, paramsAndBody, method){ let paramsCopy = this._merge(paramsAndBody); - let params = excludePropFromObject(paramsAndBody,['body']); + let params = excludePropFromObject(paramsAndBody, ['body']); let newUrl = this.prepareUrl(url, params); let body = null;