aclindsa/moneygo
1
0
Fork 0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-10-30 07:40:05 -04:00
Code Issues Releases Wiki Activity

Simplify security editing UI

Browse Source
This commit is contained in:
Aaron Lindsay 2017-05-28 21:19:19 -04:00
parent 616208a35c
commit 8855107e52
3 changed files with 56 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
js/components/SecuritiesTab.js
View File

@ -325,6 +325,14 @@ module.exports = React.createClass({
deletionFailedModal: false deletionFailedModal: false
}; };
}, },
componentWillReceiveProps: function(nextProps) {
if (nextProps.selectedSecurity == -1 && nextProps.security_list.length > 0) {
nextProps.onSelectSecurity(nextProps.security_list[0].SecurityId);
}
},
handleSelectSecurity: function(security) {
this.props.onSelectSecurity(security.SecurityId);
},
handleNewSecurity: function() { handleNewSecurity: function() {
this.setState({creatingNewSecurity: true}); this.setState({creatingNewSecurity: true});
}, },
@ -357,43 +365,50 @@ module.exports = React.createClass({
render: function() { render: function() {
var noSecuritySelected = this.props.selectedSecurity == -1; var noSecuritySelected = this.props.selectedSecurity == -1;
var selectedSecurity = null; var selectedSecurity = -1;
if (this.props.securities.hasOwnProperty(this.props.selectedSecurity)) if (this.props.securities.hasOwnProperty(this.props.selectedSecurity))
selectedSecurity = this.props.securities[this.props.selectedSecurity]; selectedSecurity = this.props.securities[this.props.selectedSecurity];
return ( return (
<Grid fluid className="fullheight"><Row className="fullheight"> <div>
<Col xs={3} className="fullheight securitylist-column"> <AddEditSecurityModal
<AddEditSecurityModal show={this.state.creatingNewSecurity}
show={this.state.creatingNewSecurity} onCancel={this.handleCreationCancel}
onCancel={this.handleCreationCancel} onSubmit={this.handleCreationSubmit}
onSubmit={this.handleCreationSubmit} onSearchTemplates={this.props.onSearchTemplates}
onSearchTemplates={this.props.onSearchTemplates} securityTemplates={this.props.securityTemplates} />
securityTemplates={this.props.securityTemplates} /> <AddEditSecurityModal
<AddEditSecurityModal show={this.state.editingSecurity}
show={this.state.editingSecurity} editSecurity={selectedSecurity}
editSecurity={selectedSecurity} onCancel={this.handleEditingCancel}
onCancel={this.handleEditingCancel} onSubmit={this.handleEditingSubmit}
onSubmit={this.handleEditingSubmit} onSearchTemplates={this.props.onSearchTemplates}
onSearchTemplates={this.props.onSearchTemplates} securityTemplates={this.props.securityTemplates} />
securityTemplates={this.props.securityTemplates} /> <DeletionFailedModal
<DeletionFailedModal show={this.state.deletionFailedModal}
show={this.state.deletionFailedModal} deletingSecurity={selectedSecurity}
deletingSecurity={selectedSecurity} onClose={this.closeDeletionFailedModal}
onClose={this.closeDeletionFailedModal} securityAccounts={this.props.selectedSecurityAccounts} />
securityAccounts={this.props.selectedSecurityAccounts} /> <ButtonToolbar>
<SecurityList <ButtonGroup>
selectedSecurity={this.props.selectedSecurity} <Button onClick={this.handleNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button>
securities={this.props.securities} </ButtonGroup>
onSelectSecurity={this.props.onSelectSecurity} /> <ButtonGroup>
</Col><Col xs={9} className="fullheight securities-column"> <Combobox
<ButtonToolbar className="pull-right"><ButtonGroup> data={this.props.security_list}
<Button onClick={this.handleNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button> valueField='SecurityId'
<Button onClick={this.handleEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button> textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
<Button onClick={this.handleDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button> value={selectedSecurity}
</ButtonGroup></ButtonToolbar> onChange={this.handleSelectSecurity}
</Col> suggest
</Row></Grid> filter='contains'
ref="security" />
</ButtonGroup>
<ButtonGroup>
<Button onClick={this.handleEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button>
<Button onClick={this.handleDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
</ButtonGroup></ButtonToolbar>
</div>
); );
} }
}); });

6
js/containers/SecuritiesTabContainer.js
View File

@ -11,8 +11,14 @@ function mapStateToProps(state) {
&& state.accounts.map[accountId].SecurityId == state.selectedSecurity) && state.accounts.map[accountId].SecurityId == state.selectedSecurity)
selectedSecurityAccounts.push(state.accounts.map[accountId]); selectedSecurityAccounts.push(state.accounts.map[accountId]);
} }
var security_list = [];
for (var securityId in state.securities) {
if (state.securities.hasOwnProperty(securityId))
security_list.push(state.securities[securityId]);
}
return { return {
securities: state.securities, securities: state.securities,
security_list: security_list,
selectedSecurityAccounts: selectedSecurityAccounts, selectedSecurityAccounts: selectedSecurityAccounts,
selectedSecurity: state.selectedSecurity, selectedSecurity: state.selectedSecurity,
securityTemplates: state.securityTemplates securityTemplates: state.securityTemplates

4
static/css/stylesheet.css
View File

@ -63,7 +63,7 @@ div.accounttree-root div {
height: 100%-100px; height: 100%-100px;
overflow: auto; overflow: auto;
} }
.account-column, .securitylist-column { .account-column {
padding: 15px 15px 43px 15px; padding: 15px 15px 43px 15px;
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
border-left: 1px solid #DDD; border-left: 1px solid #DDD;
@ -84,7 +84,7 @@ div.accounttree-root div {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
} }
.transactions-column, .securities-column { .transactions-column {
padding: 15px; padding: 15px;
border-right: 1px solid #DDD; border-right: 1px solid #DDD;
} }