1
0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-12-26 23:42:29 -05:00

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 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,13 +365,12 @@ 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}
@ -382,18 +389,26 @@ module.exports = React.createClass({
deletingSecurity={selectedSecurity} deletingSecurity={selectedSecurity}
onClose={this.closeDeletionFailedModal} onClose={this.closeDeletionFailedModal}
securityAccounts={this.props.selectedSecurityAccounts} /> securityAccounts={this.props.selectedSecurityAccounts} />
<SecurityList <ButtonToolbar>
selectedSecurity={this.props.selectedSecurity} <ButtonGroup>
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.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.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> <Button onClick={this.handleDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
</ButtonGroup></ButtonToolbar> </ButtonGroup></ButtonToolbar>
</Col> </div>
</Row></Grid>
); );
} }
}); });

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

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;
} }