From 8855107e52dcf6cb52c95b87033e64f1d2830faa Mon Sep 17 00:00:00 2001
From: Aaron Lindsay <aaron@aclindsay.com>
Date: Sun, 28 May 2017 21:19:19 -0400
Subject: [PATCH] Simplify security editing UI

---
 js/components/SecuritiesTab.js          | 81 +++++++++++++++----------
 js/containers/SecuritiesTabContainer.js |  6 ++
 static/css/stylesheet.css               |  4 +-
 3 files changed, 56 insertions(+), 35 deletions(-)

diff --git a/js/components/SecuritiesTab.js b/js/components/SecuritiesTab.js
index 4c6819b..a6282af 100644
--- a/js/components/SecuritiesTab.js
+++ b/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,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>
 		);
 	}
 });
diff --git a/js/containers/SecuritiesTabContainer.js b/js/containers/SecuritiesTabContainer.js
index b7b46f6..e1c80db 100644
--- a/js/containers/SecuritiesTabContainer.js
+++ b/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
diff --git a/static/css/stylesheet.css b/static/css/stylesheet.css
index 9da7490..9cf2da4 100644
--- a/static/css/stylesheet.css
+++ b/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;
 }