1
0
mirror of https://github.com/aclindsa/moneygo.git synced 2024-10-30 15:50:04 -04:00
moneygo/js/components/AddEditAccountModal.js

369 lines
11 KiB
JavaScript

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;