Simplify security editing UI

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

View File

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

View File

@ -11,8 +11,14 @@ function mapStateToProps(state) {
&& state.accounts.map[accountId].SecurityId == state.selectedSecurity)
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 {
securities: state.securities,
security_list: security_list,
selectedSecurityAccounts: selectedSecurityAccounts,
selectedSecurity: state.selectedSecurity,
securityTemplates: state.securityTemplates

View File

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