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'); class AddEditAccountModal extends React.Component { getInitialState(props) { 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 (!props) { return s; } else if (props.editAccount != null) { s.accountid = props.editAccount.AccountId; s.name = props.editAccount.Name; s.security = props.editAccount.SecurityId; s.parentaccountid = props.editAccount.ParentAccountId; s.type = props.editAccount.Type; s.ofxurl = props.editAccount.OFXURL; s.ofxorg = props.editAccount.OFXORG; s.ofxfid = props.editAccount.OFXFID; s.ofxuser = props.editAccount.OFXUser; s.ofxbankid = props.editAccount.OFXBankID; s.ofxacctid = props.editAccount.OFXAcctID; s.ofxaccttype = props.editAccount.OFXAcctType; s.ofxclientuid = props.editAccount.OFXClientUID; s.ofxappid = props.editAccount.OFXAppID; s.ofxappver = props.editAccount.OFXAppVer; s.ofxversion = props.editAccount.OFXVersion; s.ofxnoindent = props.editAccount.OFXNoIndent; } else if (props.initialParentAccount != null) { s.security = props.initialParentAccount.SecurityId; s.parentaccountid = props.initialParentAccount.AccountId; s.type = props.initialParentAccount.Type; } return s; } constructor() { super(); this.state = this.getInitialState(); this.onCancel = this.handleCancel.bind(this); this.onChange = this.handleChange.bind(this); this.onNoIndentClick = this.handleNoIndentClick.bind(this); this.onSecurityChange = this.handleSecurityChange.bind(this); this.onTypeChange = this.handleTypeChange.bind(this); this.onParentChange = this.handleParentChange.bind(this); this.onSubmit = this.handleSubmit.bind(this); } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState(nextProps)); } } handleCancel() { if (this.props.onCancel != null) this.props.onCancel(); } handleChange() { 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() { this.setState({ofxnoindent: !this.state.ofxnoindent}); } handleSecurityChange(security) { if (security.hasOwnProperty('SecurityId')) this.setState({ security: security.SecurityId }); } handleTypeChange(type) { if (type.hasOwnProperty('TypeId')) this.setState({ type: type.TypeId }); } handleParentChange(parentAccount) { this.setState({parentaccountid: parentAccount.AccountId}); } handleSubmit() { 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); } render() { 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.onSecurityChange} 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
); } } class DeleteAccountModal extends React.Component { getInitialState(props) { if (!props) var accountid = -1; else if (props.initialAccount != null) var accountid = props.initialAccount.AccountId; else if (props.accounts.length > 0) var accountid = props.accounts[0].AccountId; else var accountid = -1; return { error: "", accountid: accountid, checked: false, show: false }; } constructor() { super(); this.state = this.getInitialState(); this.onCancel = this.handleCancel.bind(this); this.onChange = this.handleChange.bind(this); this.onCheckboxClick = this.handleCheckboxClick.bind(this); this.onSubmit = this.handleSubmit.bind(this); } componentWillReceiveProps(nextProps) { if (nextProps.show && !this.props.show) { this.setState(this.getInitialState(nextProps)); } } handleCancel() { if (this.props.onCancel != null) this.props.onCancel(); } handleChange(account) { this.setState({accountid: account.AccountId}); } handleCheckboxClick() { this.setState({checked: !this.state.checked}); } handleSubmit() { 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."}); } } render() { 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}
); } } class AccountTreeNode extends React.Component { constructor() { super(); this.state = {expanded: false}; this.onToggle = this.handleToggle.bind(this); this.onChildSelect = this.handleChildSelect.bind(this); this.onSelect = this.handleSelect.bind(this); } handleToggle(e) { e.preventDefault(); this.setState({expanded:!this.state.expanded}); } handleChildSelect(account) { if (this.props.onSelect != null) this.props.onSelect(account); } handleSelect() { if (this.props.onSelect != null) this.props.onSelect(this.props.account); } render() { 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}
); } } class AccountTree extends React.Component { constructor() { super(); this.state = {height: 0}; this.onSelect = this.handleSelect.bind(this); } handleSelect(account) { if (this.props.onSelect != null) { this.props.onSelect(account); } } resize() { var div = ReactDOM.findDOMNode(this); this.setState({height: div.parentElement.clientHeight - 73}); } componentDidMount() { this.resize(); var self = this; $(window).resize(function() {self.resize();}); } render() { 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}
); } } class AccountsTab extends React.Component { constructor() { super(); this.state = { creatingNewAccount: false, editingAccount: false, deletingAccount: false }; this.onNewAccount = this.handleNewAccount.bind(this); this.onEditAccount = this.handleEditAccount.bind(this); this.onDeleteAccount = this.handleDeleteAccount.bind(this); this.onCreationCancel = this.handleCreationCancel.bind(this); this.onEditingCancel = this.handleEditingCancel.bind(this); this.onDeletionCancel = this.handleDeletionCancel.bind(this); this.onCreateAccount = this.handleCreateAccount.bind(this); this.onUpdateAccount = this.handleUpdateAccount.bind(this); this.onRemoveAccount = this.handleRemoveAccount.bind(this); this.onAccountSelected = this.handleAccountSelected.bind(this); } handleNewAccount() { this.setState({creatingNewAccount: true}); } handleEditAccount() { this.setState({editingAccount: true}); } handleDeleteAccount() { this.setState({deletingAccount: true}); } handleCreationCancel() { this.setState({creatingNewAccount: false}); } handleEditingCancel() { this.setState({editingAccount: false}); } handleDeletionCancel() { this.setState({deletingAccount: false}); } handleCreateAccount(account) { if (this.props.onCreateAccount != null) this.props.onCreateAccount(account); this.setState({creatingNewAccount: false}); } handleUpdateAccount(account) { if (this.props.onUpdateAccount != null) this.props.onUpdateAccount(account); this.setState({editingAccount: false}); } handleRemoveAccount(account) { if (this.props.onDeleteAccount != null) this.props.onDeleteAccount(account); this.setState({deletingAccount: false}); } handleAccountSelected(account) { this.props.onSelectAccount(account.AccountId); this.props.onFetchTransactionPage(account, 20, 0); } render() { 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 ( ); } } module.exports = AccountsTab;