1
0
mirror of https://github.com/ascribe/onion.git synced 2024-06-28 00:28:00 +02:00

fix bug in contract settings and expand actionpanel functionality

This commit is contained in:
Tim Daubenschütz 2015-09-08 11:19:11 +02:00
parent 38b7dcd79f
commit 2c1ad6dc46
3 changed files with 45 additions and 33 deletions

View File

@ -9,6 +9,8 @@ import InputCheckbox from '../ascribe_forms/input_checkbox';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import ContractListActions from '../../actions/contract_list_actions';
import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader'; import ReactS3FineUploader from '../ascribe_uploader/react_s3_fine_uploader';
import AppConstants from '../../constants/application_constants'; import AppConstants from '../../constants/application_constants';
@ -48,6 +50,9 @@ let CreateContractForm = React.createClass({
handleCreateSuccess(response) { handleCreateSuccess(response) {
let notification = new GlobalNotificationModel(getLangText('Contract %s successfully created', response.name), 'success', 5000); let notification = new GlobalNotificationModel(getLangText('Contract %s successfully created', response.name), 'success', 5000);
GlobalNotificationActions.appendGlobalNotification(notification); 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')}> label={getLangText('Contract name')}>
<input <input
type="text" type="text"
placeholder="(e.g. Loan agreement #1)" placeholder="(e.g. Contract - Loan agreement #1)"
required/> required/>
</Property> </Property>
<Property <Property
@ -118,10 +123,7 @@ let CreateContractForm = React.createClass({
style={{paddingBottom: 0}}> style={{paddingBottom: 0}}>
<InputCheckbox> <InputCheckbox>
<span> <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> </span>
</InputCheckbox> </InputCheckbox>
</Property> </Property>

View File

@ -10,54 +10,63 @@ import ContractListActions from '../../actions/contract_list_actions';
import ActionPanel from '../ascribe_panel/action_panel'; import ActionPanel from '../ascribe_panel/action_panel';
import { getLangText } from '../../utils/lang_utils';
import GlobalNotificationModel from '../../models/global_notification_model'; import GlobalNotificationModel from '../../models/global_notification_model';
import GlobalNotificationActions from '../../actions/global_notification_actions'; import GlobalNotificationActions from '../../actions/global_notification_actions';
import { getLangText } from '../../utils/lang_utils';
let ContractSettings = React.createClass({ let ContractSettings = React.createClass({
propTypes: { propTypes: {
defaultExpanded: React.PropTypes.bool defaultExpanded: React.PropTypes.bool
}, },
getInitialState(){ getInitialState(){
return ContractListStore.getState(); return ContractListStore.getState();
}, },
componentDidMount() { componentDidMount() {
ContractListStore.listen(this.onChange); ContractListStore.listen(this.onChange);
ContractListActions.fetchContractList(); ContractListActions.fetchContractList();
}, },
componentWillUnmount() { componentWillUnmount() {
ContractListStore.unlisten(this.onChange); ContractListStore.unlisten(this.onChange);
}, },
onChange(state) { onChange(state) {
this.setState(state); this.setState(state);
}, },
makeContractPublic(contract){
ContractListActions.makeContractPublic(contract) makeContractPublic(contract) {
.then(( ) => ContractListActions.fetchContractList()) return () => {
.catch((error)=>{ ContractListActions.makeContractPublic(contract)
let notification = new GlobalNotificationModel(error, 'danger', 10000); .then(() => ContractListActions.fetchContractList())
GlobalNotificationActions.appendGlobalNotification(notification); .catch((error) => {
}); let notification = new GlobalNotificationModel(error, 'success', 10000);
GlobalNotificationActions.appendGlobalNotification(notification);
});
};
}, },
removeContract(contract){
console.log(contract); removeContract(contract) {
ContractListActions.removeContract(contract.id) return () => {
.then(( ) => ContractListActions.fetchContractList()) ContractListActions.removeContract(contract.id)
.catch((error) => { .then(( ) => ContractListActions.fetchContractList())
console.log('Error', error); .catch((error) => {
let notification = new GlobalNotificationModel(error, 'danger', 10000); let notification = new GlobalNotificationModel(error, 'danger', 10000);
GlobalNotificationActions.appendGlobalNotification(notification); GlobalNotificationActions.appendGlobalNotification(notification);
}); });
};
}, },
getPublicContracts(){ getPublicContracts(){
return this.state.contractList.filter((contract) => contract.public); return this.state.contractList.filter((contract) => contract.public);
}, },
getPrivateContracts(){ getPrivateContracts(){
return this.state.contractList.filter((contract) => !contract.public); return this.state.contractList.filter((contract) => !contract.public);
}, },
getblobEndName(contract){
return contract.blob.match(/.*\/(.*)/)[1];
},
render() { render() {
let publicContracts = this.getPublicContracts(); let publicContracts = this.getPublicContracts();
let privateContracts = this.getPrivateContracts(); let privateContracts = this.getPrivateContracts();
@ -75,9 +84,10 @@ let ContractSettings = React.createClass({
title={getLangText('Public Contracts')} title={getLangText('Public Contracts')}
show={true} show={true}
defaultExpanded={true}> defaultExpanded={true}>
{publicContracts.map((contract) => { {publicContracts.map((contract, i) => {
return ( return (
<ActionPanel <ActionPanel
key={i}
title={contract.name} title={contract.name}
content={contract.name} content={contract.name}
buttons={ buttons={
@ -86,14 +96,13 @@ let ContractSettings = React.createClass({
UPDATE UPDATE
</button> </button>
<button className="btn btn-default btn-sm margin-left-2px" <button className="btn btn-default btn-sm margin-left-2px"
onClick={this.removeContract.bind(this, contract)}> onClick={this.removeContract(contract)}>
REMOVE REMOVE
</button> </button>
</div> </div>
} }
leftColumnWidth="40%" leftColumnWidth="40%"
rightColumnWidth="60%" rightColumnWidth="60%"/>
/>
); );
})} })}
</CollapsibleParagraph> </CollapsibleParagraph>
@ -101,9 +110,10 @@ let ContractSettings = React.createClass({
title={getLangText('Private Contracts')} title={getLangText('Private Contracts')}
show={true} show={true}
defaultExpanded={true}> defaultExpanded={true}>
{privateContracts.map((contract) => { {privateContracts.map((contract, i) => {
return ( return (
<ActionPanel <ActionPanel
key={i}
title={contract.name} title={contract.name}
content={contract.name} content={contract.name}
buttons={ buttons={
@ -112,11 +122,11 @@ let ContractSettings = React.createClass({
UPDATE UPDATE
</button> </button>
<button className="btn btn-default btn-sm margin-left-2px" <button className="btn btn-default btn-sm margin-left-2px"
onClick={this.removeContract.bind(this, contract)}> onClick={this.removeContract(contract)}>
REMOVE REMOVE
</button> </button>
<button className="btn btn-default btn-sm margin-left-2px" <button className="btn btn-default btn-sm margin-left-2px"
onClick={this.makeContractPublic.bind(this, contract)}> onClick={this.makeContractPublic(contract)}>
MAKE PUBLIC MAKE PUBLIC
</button> </button>
</div> </div>

View File

@ -28,6 +28,6 @@
/* Shrink the size of the headline for a nested element */ /* Shrink the size of the headline for a nested element */
.ascribe-collapsible-wrapper > .ascribe-collapsible-content { .ascribe-collapsible-wrapper > .ascribe-collapsible-content {
padding-left: 1em; padding-left: 1em;
font-size: 90%; font-size: 95%;
} }
} }