var React = require('react'); var ReactDOM = require('react-dom'); var ReactBootstrap = require('react-bootstrap'); var Grid = ReactBootstrap.Grid; var Row = ReactBootstrap.Row; var Col = ReactBootstrap.Col; var Form = ReactBootstrap.Form; var FormGroup = ReactBootstrap.FormGroup; var FormControl = ReactBootstrap.FormControl; var ControlLabel = ReactBootstrap.ControlLabel; var Button = ReactBootstrap.Button; var ButtonGroup = ReactBootstrap.ButtonGroup; var ButtonToolbar = ReactBootstrap.ButtonToolbar; var Glyphicon = ReactBootstrap.Glyphicon; var ListGroup = ReactBootstrap.ListGroup; var ListGroupItem = ReactBootstrap.ListGroupItem; var Modal = ReactBootstrap.Modal; var Panel = ReactBootstrap.Panel; var Combobox = require('react-widgets').Combobox; var models = require('../models'); var Security = models.Security; var SecurityType = models.SecurityType; var SecurityTypeList = models.SecurityTypeList; class SecurityTemplatePanel extends React.Component { constructor() { super(); this.onSearchChange = this.handleSearchChange.bind(this); } handleSearchChange() { this.props.onSearchTemplates(ReactDOM.findDOMNode(this.refs.search).value, 0, this.props.maxResults + 1); } renderTemplateList() { var templates = this.props.securityTemplates; if (this.props.search != "") { var items = []; for (var i = 0; i < templates.length && i < 15; i++) { var template = templates[i]; var self = this; var onClickFn = (function() { var j = i; return function(){self.props.onSelectTemplate(templates[j])}; })(); var key = template.Type.toString() + template.AlternateId; items.push(( {template.Name} - {template.Description} )); } if (templates.length > this.props.maxResults) { items.push(( Too many templates to display, please refine your search... )); } else if (templates.length == 0) { items.push(( Sorry, no templates matched your search... )); } return (

Select a template to populate your security: {items}
); } } render() { return ( {this.renderTemplateList()} ); } } class AddEditSecurityModal extends React.Component { getInitialState(props) { var s = { securityid: -1, name: "", description: "", symbol: "", precision: 0, type: 1, alternateid: "" }; if (props && props.editSecurity != null) { s.securityid = props.editSecurity.SecurityId; s.name = props.editSecurity.Name; s.description = props.editSecurity.Description; s.symbol = props.editSecurity.Symbol; s.precision = props.editSecurity.Precision; s.type = props.editSecurity.Type; s.alternateid = props.editSecurity.AlternateId; } return s; } constructor() { super(); this.state = this.getInitialState(); this.onSelectTemplate = this.handleSelectTemplate.bind(this); this.onCancel = this.handleCancel.bind(this); this.onNameChange = this.handleNameChange.bind(this); this.onDescriptionChange = this.handleDescriptionChange.bind(this); this.onSymbolChange = this.handleSymbolChange.bind(this); this.onPrecisionChange = this.handlePrecisionChange.bind(this); this.onTypeChange = this.handleTypeChange.bind(this); this.onAlternateIdChange = this.handleAlternateIdChange.bind(this); this.onSubmit = this.handleSubmit.bind(this); } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState(nextProps)); } } handleSelectTemplate(template) { this.setState({ name: template.Name, description: template.Description, symbol: template.Symbol, precision: template.Precision, type: template.Type, alternateid: template.AlternateId }); } handleCancel() { if (this.props.onCancel != null) this.props.onCancel(); } handleNameChange() { this.setState({ name: ReactDOM.findDOMNode(this.refs.name).value, }); } handleDescriptionChange() { this.setState({ description: ReactDOM.findDOMNode(this.refs.description).value, }); } handleSymbolChange() { this.setState({ symbol: ReactDOM.findDOMNode(this.refs.symbol).value, }); } handlePrecisionChange() { this.setState({ precision: +ReactDOM.findDOMNode(this.refs.precision).value, }); } handleTypeChange(type) { if (type.hasOwnProperty('TypeId')) this.setState({ type: type.TypeId }); } handleAlternateIdChange() { this.setState({ alternateid: ReactDOM.findDOMNode(this.refs.alternateid).value, }); } handleSubmit() { var s = new Security(); if (this.props.editSecurity != null) s.SecurityId = this.state.securityid; s.Name = this.state.name; s.Description = this.state.description; s.Symbol = this.state.symbol; s.Precision = this.state.precision; s.Type = this.state.type; s.AlternateId = this.state.alternateid; if (this.props.onSubmit != null) this.props.onSubmit(s); } render() { var headerText = (this.props.editSecurity != null) ? "Edit" : "Create New"; var buttonText = (this.props.editSecurity != null) ? "Save Changes" : "Create Security"; var alternateidname = (this.state.type == SecurityType.Currency) ? "ISO 4217 Code" : "CUSIP"; return ( {headerText} Security
Name Description Symbol or Ticker Smallest Fraction Traded Security Type {alternateidname}
); } } class DeletionFailedModal extends React.Component { render() { var msg = "We are unable to delete your " + this.props.deletingSecurity.Name + " security because it is in use by " + this.props.securityAccounts.length + " account(s). Please change those accounts to use other securities and try again."; if (this.props.user.DefaultCurrency == this.props.deletingSecurity.SecurityId) { msg = "We are unable to delete your default currency: " + this.props.deletingSecurity.Name + ". To delete this security, select another as your default currency under Account Settings."; } return ( Cannot Delete Security {msg} ); } } class SecurityList extends React.Component { render() { var children = []; var self = this; for (var securityId in this.props.securities) { if (this.props.securities.hasOwnProperty(securityId)) { var buttonStyle = (securityId == this.props.selectedSecurity) ? "info" : "link"; var onClickFn = (function() { var id = securityId; return function(){self.props.onSelectSecurity(id)}; })(); children.push(()); } } return (
{children}
); } } class SecuritiesTab extends React.Component { constructor() { super(); this.state = { creatingNewSecurity: false, editingSecurity: false, deletionFailedModal: false }; this.onSelectSecurity = this.handleSelectSecurity.bind(this); this.onNewSecurity = this.handleNewSecurity.bind(this); this.onEditSecurity = this.handleEditSecurity.bind(this); this.onDeleteSecurity = this.handleDeleteSecurity.bind(this); this.onCreationCancel = this.handleCreationCancel.bind(this); this.onCreationSubmit = this.handleCreationSubmit.bind(this); this.onEditingCancel = this.handleEditingCancel.bind(this); this.onEditingSubmit = this.handleEditingSubmit.bind(this); this.onCloseDeletionFailed = this.handleCloseDeletionFailed.bind(this); } componentWillReceiveProps(nextProps) { if (nextProps.selectedSecurity == -1 && nextProps.security_list.length > 0) { nextProps.onSelectSecurity(nextProps.security_list[0].SecurityId); } } handleSelectSecurity(security) { this.props.onSelectSecurity(security.SecurityId); } handleNewSecurity() { this.setState({creatingNewSecurity: true}); } handleEditSecurity() { this.setState({editingSecurity: true}); } handleDeleteSecurity() { // check if user has this as their default currency var security = this.props.securities[this.props.selectedSecurity]; if (this.props.selectedSecurityAccounts.length == 0 && security.SecurityId != this.props.user.DefaultCurrency) this.props.onDeleteSecurity(security); else this.setState({deletionFailedModal: true}); } handleCreationCancel() { this.setState({creatingNewSecurity: false}); } handleCreationSubmit(security) { this.setState({creatingNewSecurity: false}); this.props.onCreateSecurity(security); } handleEditingCancel() { this.setState({editingSecurity: false}); } handleEditingSubmit(security) { this.setState({editingSecurity: false}); if (security.SecurityId == this.props.user.DefaultCurrency && security.Type != SecurityType.Currency) { this.props.onUserError("Unable to modify the default currency to be a non-currency security"); } else { this.props.onUpdateSecurity(security); } } handleCloseDeletionFailed() { this.setState({deletionFailedModal: false}); } render() { var noSecuritySelected = this.props.selectedSecurity == -1; var selectedSecurity = -1; if (this.props.securities.hasOwnProperty(this.props.selectedSecurity)) selectedSecurity = this.props.securities[this.props.selectedSecurity]; return (
typeof item === 'string' ? item : item.Name + " - " + item.Description} value={selectedSecurity} onChange={this.onSelectSecurity} suggest filter='contains' ref="security" />
); } } module.exports = SecuritiesTab;