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 Checkbox = ReactBootstrap.Checkbox; var ControlLabel = ReactBootstrap.ControlLabel; var Button = ReactBootstrap.Button; var ButtonGroup = ReactBootstrap.ButtonGroup; var Glyphicon = ReactBootstrap.Glyphicon; var ListGroup = ReactBootstrap.ListGroup; var ListGroupItem = ReactBootstrap.ListGroupItem; var Alert = ReactBootstrap.Alert; var Modal = ReactBootstrap.Modal; var Collapse = ReactBootstrap.Collapse; var Tabs = ReactBootstrap.Tabs; var Tab = ReactBootstrap.Tab; var Panel = ReactBootstrap.Panel; var Combobox = require('react-widgets').Combobox; var models = require('../models'); var Security = models.Security; var Account = models.Account; var AccountType = models.AccountType; var AccountTypeList = models.AccountTypeList; var AccountCombobox = require('./AccountCombobox'); var AccountRegister = require('./AccountRegister'); const AddEditAccountModal = React.createClass({ getInitialState: function() { var s = { accountid: -1, security: 1, parentaccountid: -1, type: 1, name: "", ofxurl: "", ofxorg: "", ofxfid: "", ofxuser: "", ofxbankid: "", ofxacctid: "", ofxaccttype: "CHECKING", ofxclientuid: "", ofxappid: "", ofxappver: "", ofxversion: "", ofxnoindent: false, }; if (this.props.editAccount != null) { s.accountid = this.props.editAccount.AccountId; s.name = this.props.editAccount.Name; s.security = this.props.editAccount.SecurityId; s.parentaccountid = this.props.editAccount.ParentAccountId; s.type = this.props.editAccount.Type; s.ofxurl = this.props.editAccount.OFXURL; s.ofxorg = this.props.editAccount.OFXORG; s.ofxfid = this.props.editAccount.OFXFID; s.ofxuser = this.props.editAccount.OFXUser; s.ofxbankid = this.props.editAccount.OFXBankID; s.ofxacctid = this.props.editAccount.OFXAcctID; s.ofxaccttype = this.props.editAccount.OFXAcctType; s.ofxclientuid = this.props.editAccount.OFXClientUID; s.ofxappid = this.props.editAccount.OFXAppID; s.ofxappver = this.props.editAccount.OFXAppVer; s.ofxversion = this.props.editAccount.OFXVersion; s.ofxnoindent = this.props.editAccount.OFXNoIndent; } else if (this.props.initialParentAccount != null) { s.security = this.props.initialParentAccount.SecurityId; s.parentaccountid = this.props.initialParentAccount.AccountId; s.type = this.props.initialParentAccount.Type; } return s; }, handleCancel: function() { if (this.props.onCancel != null) this.props.onCancel(); }, handleChange: function() { this.setState({ name: ReactDOM.findDOMNode(this.refs.name).value, ofxurl: ReactDOM.findDOMNode(this.refs.ofxurl).value, ofxorg: ReactDOM.findDOMNode(this.refs.ofxorg).value, ofxfid: ReactDOM.findDOMNode(this.refs.ofxfid).value, ofxuser: ReactDOM.findDOMNode(this.refs.ofxuser).value, ofxbankid: ReactDOM.findDOMNode(this.refs.ofxbankid).value, ofxacctid: ReactDOM.findDOMNode(this.refs.ofxacctid).value, ofxaccttype: ReactDOM.findDOMNode(this.refs.ofxaccttype).value, ofxclientuid: ReactDOM.findDOMNode(this.refs.ofxclientuid).value, ofxappid: ReactDOM.findDOMNode(this.refs.ofxappid).value, ofxappver: ReactDOM.findDOMNode(this.refs.ofxappver).value, ofxversion: ReactDOM.findDOMNode(this.refs.ofxversion).value, }); }, handleNoIndentClick: function() { this.setState({ofxnoindent: !this.state.ofxnoindent}); }, handleSecurityChange: function(security) { if (security.hasOwnProperty('SecurityId')) this.setState({ security: security.SecurityId }); }, handleTypeChange: function(type) { if (type.hasOwnProperty('TypeId')) this.setState({ type: type.TypeId }); }, handleParentChange: function(parentAccount) { this.setState({parentaccountid: parentAccount.AccountId}); }, handleSubmit: function() { var a = new Account(); if (this.props.editAccount != null) a.AccountId = this.state.accountid; a.Name = this.state.name; a.ParentAccountId = this.state.parentaccountid; a.SecurityId = this.state.security; a.Type = this.state.type; a.OFXURL = this.state.ofxurl; a.OFXORG = this.state.ofxorg; a.OFXFID = this.state.ofxfid; a.OFXUser = this.state.ofxuser; a.OFXBankID = this.state.ofxbankid; a.OFXAcctID = this.state.ofxacctid; a.OFXAcctType = this.state.ofxaccttype; a.OFXClientUID = this.state.ofxclientuid; a.OFXAppID = this.state.ofxappid; a.OFXAppVer = this.state.ofxappver; a.OFXVersion = this.state.ofxversion; a.OFXNoIndent = this.state.ofxnoindent; if (this.props.onSubmit != null) this.props.onSubmit(a); }, componentWillReceiveProps: function(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState()); } }, render: function() { var headerText = (this.props.editAccount != null) ? "Edit" : "Create New"; var buttonText = (this.props.editAccount != null) ? "Save Changes" : "Create Account"; var rootName = (this.props.editAccount != null) ? "Top-level Account" : "New Top-level Account"; var ofxBankIdName = "Broker ID"; var ofxAcctType = []; if (this.state.type != AccountType.Investment) { ofxBankIdName = "Bank ID"; ofxAcctType = ( Account Type ); } var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false; return ( {headerText} Account
Name Parent Account Security typeof item === 'string' ? item : item.Name + " - " + item.Description} defaultValue={this.state.security} onChange={this.handleSecurityChange} ref="security" /> Account Type
OFX URL ORG FID Username {ofxBankIdName} Account ID {ofxAcctType} Client UID App ID App Version OFX Version Don't indent OFX request files
); } }); const DeleteAccountModal = React.createClass({ getInitialState: function() { if (this.props.initialAccount != null) var accountid = this.props.initialAccount.AccountId; else if (this.props.accounts.length > 0) var accountid = this.props.accounts[0].AccountId; else var accountid = -1; return {error: "", accountid: accountid, checked: false, show: false}; }, handleCancel: function() { if (this.props.onCancel != null) this.props.onCancel(); }, handleChange: function(account) { this.setState({accountid: account.AccountId}); }, handleCheckboxClick: function() { this.setState({checked: !this.state.checked}); }, handleSubmit: function() { if (this.props.accounts.hasOwnProperty(this.state.accountid)) { if (this.state.checked) { if (this.props.onSubmit != null) this.props.onSubmit(this.props.accounts[this.state.accountid]); } else { this.setState({error: "You must confirm you wish to delete this account."}); } } else { this.setState({error: "You must select an account."}); } }, componentWillReceiveProps: function(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState()); } }, render: function() { var checkbox = []; if (this.props.accounts.hasOwnProperty(this.state.accountid)) { var parentAccountId = this.props.accounts[this.state.accountid].ParentAccountId; var parentAccount = "will be deleted and any child accounts will become top-level accounts."; if (parentAccountId != -1) parentAccount = "and any child accounts will be re-parented to: " + this.props.accounts[parentAccountId].Name; var warningString = "I understand that deleting this account cannot be undone and that all transactions " + parentAccount; checkbox = ( {warningString} ); } var warning = []; if (this.state.error.length != "") { warning = ( Error: {this.state.error} ); } return ( Delete Account {warning}
Delete Account {checkbox}
); } }); const AccountTreeNode = React.createClass({ getInitialState: function() { return {expanded: false}; }, handleToggle: function(e) { e.preventDefault(); this.setState({expanded:!this.state.expanded}); }, handleChildSelect: function(account) { if (this.props.onSelect != null) this.props.onSelect(account); }, handleSelect: function() { if (this.props.onSelect != null) this.props.onSelect(this.props.account); }, render: function() { var glyph = this.state.expanded ? 'minus' : 'plus'; var active = (this.props.selectedAccount != -1 && this.props.account.AccountId == this.props.selectedAccount); var buttonStyle = active ? "info" : "link"; var self = this; var children = this.props.accountChildren[this.props.account.AccountId].map(function(childId) { var account = self.props.accounts[childId]; return ( ); }); var accounttreeClasses = "accounttree" var expandButton = []; if (children.length > 0) { expandButton.push(( )); } else { accounttreeClasses += "-nochildren"; } return (
{expandButton}
{children}
); } }); const AccountTree = React.createClass({ getInitialState: function() { return {height: 0}; }, handleSelect: function(account) { if (this.props.onSelect != null) { this.props.onSelect(account); } }, resize: function() { var div = ReactDOM.findDOMNode(this); this.setState({height: div.parentElement.clientHeight - 73}); }, componentDidMount: function() { this.resize(); var self = this; $(window).resize(function() {self.resize();}); }, render: function() { var accounts = this.props.accounts; var children = []; for (var accountId in accounts) { if (accounts.hasOwnProperty(accountId) && accounts[accountId].isRootAccount()) { children.push(()); } } var style = {height: this.state.height + "px"}; return (
{children}
); } }); module.exports = React.createClass({ displayName: "AccountsTab", getInitialState: function() { return { creatingNewAccount: false, editingAccount: false, deletingAccount: false }; }, handleNewAccount: function() { this.setState({creatingNewAccount: true}); }, handleEditAccount: function() { this.setState({editingAccount: true}); }, handleDeleteAccount: function() { this.setState({deletingAccount: true}); }, handleCreationCancel: function() { this.setState({creatingNewAccount: false}); }, handleEditingCancel: function() { this.setState({editingAccount: false}); }, handleDeletionCancel: function() { this.setState({deletingAccount: false}); }, handleCreateAccount: function(account) { if (this.props.onCreateAccount != null) this.props.onCreateAccount(account); this.setState({creatingNewAccount: false}); }, handleUpdateAccount: function(account) { if (this.props.onUpdateAccount != null) this.props.onUpdateAccount(account); this.setState({editingAccount: false}); }, handleRemoveAccount: function(account) { if (this.props.onDeleteAccount != null) this.props.onDeleteAccount(account); this.setState({deletingAccount: false}); }, handleAccountSelected: function(account) { this.props.onSelectAccount(account.AccountId); this.props.onFetchTransactionPage(account, 20, 0); }, render: function() { var disabled = (this.props.selectedAccount == -1) ? true : false; var selectedAccount = null; if (this.props.accounts.hasOwnProperty(this.props.selectedAccount)) selectedAccount = this.props.accounts[this.props.selectedAccount]; return ( ); } });