Simplify security editing UI

js/components/SecuritiesTab.js

@@ -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,13 +365,12 @@ 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">
+			<div>
 			<AddEditSecurityModal
 				show={this.state.creatingNewSecurity}
 				onCancel={this.handleCreationCancel}
@@ -382,18 +389,26 @@ module.exports = React.createClass({
 				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>
+			<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>
-				</Col>
-			</Row></Grid>
+			</div>
 		);
 	}
 });

js/containers/SecuritiesTabContainer.js

@@ -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

static/css/stylesheet.css

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