mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-10-30 07:40:05 -04:00
Split AddEditAccountModal and AccountTree into separate files
This commit is contained in:
parent
5989cce991
commit
9dd32d4d14
118
js/components/AccountTree.js
Normal file
118
js/components/AccountTree.js
Normal file
@ -0,0 +1,118 @@
|
|||||||
|
var React = require('react');
|
||||||
|
|
||||||
|
var ReactBootstrap = require('react-bootstrap');
|
||||||
|
var Button = ReactBootstrap.Button;
|
||||||
|
var Collapse = ReactBootstrap.Collapse;
|
||||||
|
var Glyphicon = ReactBootstrap.Glyphicon;
|
||||||
|
|
||||||
|
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 self = this;
|
||||||
|
var children = this.props.accountChildren[this.props.account.AccountId].map(function(childId) {
|
||||||
|
var account = self.props.accounts[childId];
|
||||||
|
return (
|
||||||
|
<AccountTreeNode
|
||||||
|
key={account.AccountId}
|
||||||
|
account={account}
|
||||||
|
selectedAccount={self.props.selectedAccount}
|
||||||
|
accounts={self.props.accounts}
|
||||||
|
accountChildren={self.props.accountChildren}
|
||||||
|
onSelect={self.onChildSelect}/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
var accounttreeClasses = "accounttree"
|
||||||
|
var expandButton = [];
|
||||||
|
if (children.length > 0) {
|
||||||
|
expandButton.push((
|
||||||
|
<Button onClick={this.onToggle}
|
||||||
|
key={1}
|
||||||
|
bsSize="xsmall"
|
||||||
|
bsStyle="link"
|
||||||
|
className="accounttree-expandbutton">
|
||||||
|
<Glyphicon glyph={glyph} bsSize="xsmall"/>
|
||||||
|
</Button>
|
||||||
|
));
|
||||||
|
} else {
|
||||||
|
accounttreeClasses += "-nochildren";
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className={accounttreeClasses}>
|
||||||
|
{expandButton}
|
||||||
|
<Button onClick={this.onSelect}
|
||||||
|
active={active}
|
||||||
|
bsStyle="link"
|
||||||
|
className="accounttree-name">
|
||||||
|
{this.props.account.Name}
|
||||||
|
</Button>
|
||||||
|
<Collapse in={this.state.expanded}>
|
||||||
|
<div>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</Collapse>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class AccountTree extends React.Component {
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
this.onSelect = this.handleSelect.bind(this);
|
||||||
|
}
|
||||||
|
handleSelect(account) {
|
||||||
|
if (this.props.onSelectAccount != null) {
|
||||||
|
this.props.onSelectAccount(account);
|
||||||
|
}
|
||||||
|
if (this.props.onSelect != null && this.props.onSelectKey != null) {
|
||||||
|
this.props.onSelect(this.props.onSelectKey);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
render() {
|
||||||
|
var accounts = this.props.accounts;
|
||||||
|
|
||||||
|
var children = [];
|
||||||
|
for (var accountId in accounts) {
|
||||||
|
if (accounts.hasOwnProperty(accountId) &&
|
||||||
|
accounts[accountId].isRootAccount()) {
|
||||||
|
children.push((<AccountTreeNode
|
||||||
|
key={accounts[accountId].AccountId}
|
||||||
|
account={accounts[accountId]}
|
||||||
|
selectedAccount={this.props.selectedAccount}
|
||||||
|
accounts={this.props.accounts}
|
||||||
|
accountChildren={this.props.accountChildren}
|
||||||
|
onSelect={this.onSelect}/>));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="accounttree-root">
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = AccountTree;
|
||||||
@ -30,350 +30,10 @@ var Account = models.Account;
|
|||||||
var AccountType = models.AccountType;
|
var AccountType = models.AccountType;
|
||||||
var AccountTypeList = models.AccountTypeList;
|
var AccountTypeList = models.AccountTypeList;
|
||||||
|
|
||||||
|
var AccountTree = require('./AccountTree');
|
||||||
var AccountCombobox = require('./AccountCombobox');
|
var AccountCombobox = require('./AccountCombobox');
|
||||||
var AccountRegister = require('./AccountRegister');
|
var AccountRegister = require('./AccountRegister');
|
||||||
|
var AddEditAccountModal = require('./AddEditAccountModal');
|
||||||
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,
|
|
||||||
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,
|
|
||||||
});
|
|
||||||
if (this.state.type != AccountType.Investment) {
|
|
||||||
this.setState({
|
|
||||||
ofxaccttype: ReactDOM.findDOMNode(this.refs.ofxaccttype).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 = (
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl
|
|
||||||
componentClass="select"
|
|
||||||
placeholder="select"
|
|
||||||
value={this.state.ofxaccttype}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxaccttype">
|
|
||||||
<option value="CHECKING">Checking</option>
|
|
||||||
<option value="SAVINGS">Savings</option>
|
|
||||||
<option value="CC">Credit Card</option>
|
|
||||||
<option value="MONEYMRKT">Money Market</option>
|
|
||||||
<option value="CREDITLINE">Credit Line</option>
|
|
||||||
<option value="CD">CD</option>
|
|
||||||
</FormControl>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
|
|
||||||
return (
|
|
||||||
<Modal show={this.props.show} onHide={this.onCancel}>
|
|
||||||
<Modal.Header closeButton>
|
|
||||||
<Modal.Title>{headerText} Account</Modal.Title>
|
|
||||||
</Modal.Header>
|
|
||||||
<Modal.Body>
|
|
||||||
<Tabs defaultActiveKey={1} id="editAccountTabs">
|
|
||||||
<Tab eventKey={1} title="General">
|
|
||||||
<Form horizontal onSubmit={this.onSubmit}>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Name</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.name}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="name"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Parent Account</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<AccountCombobox
|
|
||||||
accounts={this.props.accounts}
|
|
||||||
accountChildren={this.props.accountChildren}
|
|
||||||
value={this.state.parentaccountid}
|
|
||||||
rootName={rootName}
|
|
||||||
onChange={this.onParentChange}
|
|
||||||
ref="parent" />
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Security</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<Combobox
|
|
||||||
suggest
|
|
||||||
data={this.props.security_list}
|
|
||||||
valueField='SecurityId'
|
|
||||||
textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
|
|
||||||
defaultValue={this.state.security}
|
|
||||||
onChange={this.onSecurityChange}
|
|
||||||
ref="security" />
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<Combobox
|
|
||||||
suggest
|
|
||||||
data={AccountTypeList}
|
|
||||||
valueField='TypeId'
|
|
||||||
textField='Name'
|
|
||||||
defaultValue={this.state.type}
|
|
||||||
onChange={this.onTypeChange}
|
|
||||||
ref="type" />
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
</Form>
|
|
||||||
</Tab>
|
|
||||||
<Tab eventKey={2} title="Sync (OFX)">
|
|
||||||
<Form horizontal onSubmit={this.onSubmit}>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>OFX URL</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxurl}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxurl"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>ORG</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxorg}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxorg"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>FID</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxfid}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxfid"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Username</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxuser}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxuser"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>{ofxBankIdName}</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
disabled={bankIdDisabled}
|
|
||||||
value={this.state.ofxbankid}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxbankid"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Account ID</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxacctid}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxacctid"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
{ofxAcctType}
|
|
||||||
<Panel collapsible header="Advanced Settings">
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>Client UID</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxclientuid}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxclientuid"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>App ID</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxappid}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxappid"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>App Version</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxappver}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxappver"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col componentClass={ControlLabel} xs={2}>OFX Version</Col>
|
|
||||||
<Col xs={10}>
|
|
||||||
<FormControl type="text"
|
|
||||||
value={this.state.ofxversion}
|
|
||||||
onChange={this.onChange}
|
|
||||||
ref="ofxversion"/>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
<FormGroup>
|
|
||||||
<Col xsOffset={2} xs={10}>
|
|
||||||
<Checkbox
|
|
||||||
checked={this.state.ofxnoindent ? "checked" : ""}
|
|
||||||
onClick={this.onNoIndentClick}>
|
|
||||||
Don't indent OFX request files
|
|
||||||
</Checkbox>
|
|
||||||
</Col>
|
|
||||||
</FormGroup>
|
|
||||||
</Panel>
|
|
||||||
</Form>
|
|
||||||
</Tab>
|
|
||||||
</Tabs>
|
|
||||||
</Modal.Body>
|
|
||||||
<Modal.Footer>
|
|
||||||
<ButtonGroup className="pull-right">
|
|
||||||
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
|
|
||||||
<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</Modal.Footer>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
class DeleteAccountModal extends React.Component {
|
class DeleteAccountModal extends React.Component {
|
||||||
getInitialState(props) {
|
getInitialState(props) {
|
||||||
@ -491,125 +151,6 @@ class DeleteAccountModal extends React.Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
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 (
|
|
||||||
<AccountTreeNode
|
|
||||||
key={account.AccountId}
|
|
||||||
account={account}
|
|
||||||
selectedAccount={self.props.selectedAccount}
|
|
||||||
accounts={self.props.accounts}
|
|
||||||
accountChildren={self.props.accountChildren}
|
|
||||||
onSelect={self.onChildSelect}/>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
var accounttreeClasses = "accounttree"
|
|
||||||
var expandButton = [];
|
|
||||||
if (children.length > 0) {
|
|
||||||
expandButton.push((
|
|
||||||
<Button onClick={this.onToggle}
|
|
||||||
key={1}
|
|
||||||
bsSize="xsmall"
|
|
||||||
bsStyle="link"
|
|
||||||
className="accounttree-expandbutton">
|
|
||||||
<Glyphicon glyph={glyph} bsSize="xsmall"/>
|
|
||||||
</Button>
|
|
||||||
));
|
|
||||||
} else {
|
|
||||||
accounttreeClasses += "-nochildren";
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
<div className={accounttreeClasses}>
|
|
||||||
{expandButton}
|
|
||||||
<Button onClick={this.onSelect}
|
|
||||||
bsStyle={buttonStyle}
|
|
||||||
className="accounttree-name">
|
|
||||||
{this.props.account.Name}
|
|
||||||
</Button>
|
|
||||||
<Collapse in={this.state.expanded}>
|
|
||||||
<div>
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</Collapse>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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((<AccountTreeNode
|
|
||||||
key={accounts[accountId].AccountId}
|
|
||||||
account={accounts[accountId]}
|
|
||||||
selectedAccount={this.props.selectedAccount}
|
|
||||||
accounts={this.props.accounts}
|
|
||||||
accountChildren={this.props.accountChildren}
|
|
||||||
onSelect={this.onSelect}/>));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var style = {height: this.state.height + "px"};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="accounttree-root" style={style} >
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class AccountsTab extends React.Component {
|
class AccountsTab extends React.Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
|
|||||||
368
js/components/AddEditAccountModal.js
Normal file
368
js/components/AddEditAccountModal.js
Normal file
@ -0,0 +1,368 @@
|
|||||||
|
var React = require('react');
|
||||||
|
var ReactDOM = require('react-dom');
|
||||||
|
|
||||||
|
var ReactBootstrap = require('react-bootstrap');
|
||||||
|
var Col = ReactBootstrap.Col;
|
||||||
|
var Tabs = ReactBootstrap.Tabs;
|
||||||
|
var Tab = ReactBootstrap.Tab;
|
||||||
|
var Panel = ReactBootstrap.Panel;
|
||||||
|
var Modal = ReactBootstrap.Modal;
|
||||||
|
var Form = ReactBootstrap.Form;
|
||||||
|
var FormGroup = ReactBootstrap.FormGroup;
|
||||||
|
var FormControl = ReactBootstrap.FormControl;
|
||||||
|
var ControlLabel = ReactBootstrap.ControlLabel;
|
||||||
|
var Checkbox = ReactBootstrap.Checkbox;
|
||||||
|
var Button = ReactBootstrap.Button;
|
||||||
|
var ButtonGroup = ReactBootstrap.ButtonGroup;
|
||||||
|
|
||||||
|
var Combobox = require('react-widgets').Combobox;
|
||||||
|
|
||||||
|
var AccountCombobox = require('./AccountCombobox');
|
||||||
|
|
||||||
|
var models = require('../models');
|
||||||
|
var Account = models.Account;
|
||||||
|
var AccountType = models.AccountType;
|
||||||
|
var AccountTypeList = models.AccountTypeList;
|
||||||
|
|
||||||
|
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,
|
||||||
|
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,
|
||||||
|
});
|
||||||
|
if (this.state.type != AccountType.Investment) {
|
||||||
|
this.setState({
|
||||||
|
ofxaccttype: ReactDOM.findDOMNode(this.refs.ofxaccttype).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 = (
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl
|
||||||
|
componentClass="select"
|
||||||
|
placeholder="select"
|
||||||
|
value={this.state.ofxaccttype}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxaccttype">
|
||||||
|
<option value="CHECKING">Checking</option>
|
||||||
|
<option value="SAVINGS">Savings</option>
|
||||||
|
<option value="CC">Credit Card</option>
|
||||||
|
<option value="MONEYMRKT">Money Market</option>
|
||||||
|
<option value="CREDITLINE">Credit Line</option>
|
||||||
|
<option value="CD">CD</option>
|
||||||
|
</FormControl>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
|
||||||
|
return (
|
||||||
|
<Modal show={this.props.show} onHide={this.onCancel}>
|
||||||
|
<Modal.Header closeButton>
|
||||||
|
<Modal.Title>{headerText} Account</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
<Modal.Body>
|
||||||
|
<Tabs defaultActiveKey={1} id="editAccountTabs">
|
||||||
|
<Tab eventKey={1} title="General">
|
||||||
|
<Form horizontal onSubmit={this.onSubmit}>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Name</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.name}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="name"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Parent Account</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<AccountCombobox
|
||||||
|
accounts={this.props.accounts}
|
||||||
|
accountChildren={this.props.accountChildren}
|
||||||
|
value={this.state.parentaccountid}
|
||||||
|
rootName={rootName}
|
||||||
|
onChange={this.onParentChange}
|
||||||
|
ref="parent" />
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Security</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<Combobox
|
||||||
|
suggest
|
||||||
|
data={this.props.security_list}
|
||||||
|
valueField='SecurityId'
|
||||||
|
textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
|
||||||
|
defaultValue={this.state.security}
|
||||||
|
onChange={this.onSecurityChange}
|
||||||
|
ref="security" />
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Account Type</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<Combobox
|
||||||
|
suggest
|
||||||
|
data={AccountTypeList}
|
||||||
|
valueField='TypeId'
|
||||||
|
textField='Name'
|
||||||
|
defaultValue={this.state.type}
|
||||||
|
onChange={this.onTypeChange}
|
||||||
|
ref="type" />
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
</Form>
|
||||||
|
</Tab>
|
||||||
|
<Tab eventKey={2} title="Sync (OFX)">
|
||||||
|
<Form horizontal onSubmit={this.onSubmit}>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>OFX URL</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxurl}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxurl"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>ORG</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxorg}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxorg"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>FID</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxfid}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxfid"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Username</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxuser}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxuser"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>{ofxBankIdName}</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
disabled={bankIdDisabled}
|
||||||
|
value={this.state.ofxbankid}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxbankid"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Account ID</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxacctid}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxacctid"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
{ofxAcctType}
|
||||||
|
<Panel collapsible header="Advanced Settings">
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>Client UID</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxclientuid}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxclientuid"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>App ID</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxappid}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxappid"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>App Version</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxappver}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxappver"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col componentClass={ControlLabel} xs={2}>OFX Version</Col>
|
||||||
|
<Col xs={10}>
|
||||||
|
<FormControl type="text"
|
||||||
|
value={this.state.ofxversion}
|
||||||
|
onChange={this.onChange}
|
||||||
|
ref="ofxversion"/>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
<FormGroup>
|
||||||
|
<Col xsOffset={2} xs={10}>
|
||||||
|
<Checkbox
|
||||||
|
checked={this.state.ofxnoindent ? "checked" : ""}
|
||||||
|
onClick={this.onNoIndentClick}>
|
||||||
|
Don't indent OFX request files
|
||||||
|
</Checkbox>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
|
</Panel>
|
||||||
|
</Form>
|
||||||
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
</Modal.Body>
|
||||||
|
<Modal.Footer>
|
||||||
|
<ButtonGroup className="pull-right">
|
||||||
|
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
|
||||||
|
<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = AddEditAccountModal;
|
||||||
Loading…
Reference in New Issue
Block a user