aclindsa
/
moneygo
mirror of https://github.com/aclindsa/moneygo.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Use ES6 classes instead of React.createClass and editing prototypes

This commit is contained in:
Aaron Lindsay 2017-06-07 19:12:53 -04:00
parent 29614c38c7
commit a08131b1ba
13 changed files with 1207 additions and 1074 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/actions/ReportActions.js
View File

@ -87,7 +87,7 @@ function select(report, seriesTraversal) {
// Add back in any values from the current level
if (series.hasOwnProperty('Values'))
flattenedSeries[report.topLevelAccountName] = series.Values;
flattenedSeries[Report.topLevelAccountName()] = series.Values;
var flattenedReport = new Report();

25
js/components/AccountCombobox.js
View File

@ -4,24 +4,25 @@ var Combobox = require('react-widgets').Combobox;
var getAccountDisplayList = require('../utils').getAccountDisplayList;
module.exports = React.createClass({
displayName: "AccountCombobox",
getDefaultProps: function() {
return {
class AccountCombobox extends React.Component {
constructor() {
super();
this.onAccountChange = this.handleAccountChange.bind(this);
this.defaultProps = {
includeRoot: true,
disabled: false,
rootName: "New Top-level Account"
};
},
handleAccountChange: function(account) {
}
}
handleAccountChange(account) {
if (this.props.onChange != null &&
account.hasOwnProperty('AccountId') &&
(this.props.accounts.hasOwnProperty([account.AccountId]) ||
account.AccountId == -1)) {
this.props.onChange(account)
}
},
render: function() {
}
render() {
var accounts = getAccountDisplayList(this.props.accounts, this.props.accountChildren, this.props.includeRoot, this.props.rootName);
var className = "";
if (this.props.className)
@ -32,7 +33,7 @@ module.exports = React.createClass({
valueField='AccountId'
textField='Name'
defaultValue={this.props.value}
onChange={this.handleAccountChange}
onChange={this.onAccountChange}
ref="account"
disabled={this.props.disabled}
suggest
@ -40,4 +41,6 @@ module.exports = React.createClass({
className={className} />
);
}
});
}
module.exports = AccountCombobox;

357
js/components/AccountRegister.js
View File

@ -46,8 +46,12 @@ var getAccountDisplayName = require('../utils').getAccountDisplayName;
var AccountCombobox = require('./AccountCombobox');
const TransactionRow = React.createClass({
handleClick: function(e) {
class TransactionRow extends React.Component {
constructor() {
super();
this.onClick = this.handleClick.bind(this);
}
handleClick(e) {
const refs = ["date", "number", "description", "account", "status", "amount"];
for (var ref in refs) {
if (this.refs[refs[ref]] == e.target) {
@ -55,8 +59,8 @@ const TransactionRow = React.createClass({
return;
}
}
},
render: function() {
}
render() {
var date = this.props.transaction.Date;
var dateString = date.getFullYear() + "/" + (date.getMonth()+1) + "/" + date.getDate();
var number = ""
@ -97,19 +101,25 @@ const TransactionRow = React.createClass({
return (
<tr>
<td ref="date" onClick={this.handleClick}>{dateString}</td>
<td ref="number" onClick={this.handleClick}>{number}</td>
<td ref="description" onClick={this.handleClick}>{this.props.transaction.Description}</td>
<td ref="account" onClick={this.handleClick}>{accountName}</td>
<td ref="status" onClick={this.handleClick}>{status}</td>
<td ref="amount" onClick={this.handleClick}>{amount}</td>
<td ref="date" onClick={this.onClick}>{dateString}</td>
<td ref="number" onClick={this.onClick}>{number}</td>
<td ref="description" onClick={this.onClick}>{this.props.transaction.Description}</td>
<td ref="account" onClick={this.onClick}>{accountName}</td>
<td ref="status" onClick={this.onClick}>{status}</td>
<td ref="amount" onClick={this.onClick}>{amount}</td>
<td>{balance}</td>
</tr>);
}
});
}
class AmountInput extends React.Component {
getInitialState(props) {
if (!props)
return {
LastGoodAmount: "0",
Amount: "0"
}
const AmountInput = React.createClass({
_getInitialState: function(props) {
// Ensure we can edit this without screwing up other copies of it
var a;
if (props.security)
@ -121,21 +131,23 @@ const AmountInput = React.createClass({
LastGoodAmount: a,
Amount: a
};
},
getInitialState: function() {
return this._getInitialState(this.props);
},
componentWillReceiveProps: function(nextProps) {
}
constructor() {
super();
this.onChange = this.handleChange.bind(this);
this.state = this.getInitialState();
}
componentWillReceiveProps(nextProps) {
if ((!nextProps.value.eq(this.props.value) &&
!nextProps.value.eq(this.getValue())) ||
nextProps.security !== this.props.security) {
this.setState(this._getInitialState(nextProps));
this.setState(this.getInitialState(nextProps));
}
},
componentDidMount: function() {
ReactDOM.findDOMNode(this.refs.amount).onblur = this.onBlur;
},
onBlur: function() {
}
componentDidMount() {
ReactDOM.findDOMNode(this.refs.amount).onblur = this.handleBlur.bind(this);
}
handleBlur() {
var a;
if (this.props.security)
a = (new Big(this.getValue())).toFixed(this.props.security.Precision);
@ -144,13 +156,13 @@ const AmountInput = React.createClass({
this.setState({
Amount: a
});
},
onChange: function() {
}
handleChange() {
this.setState({Amount: ReactDOM.findDOMNode(this.refs.amount).value});
if (this.props.onChange)
this.props.onChange();
},
getValue: function() {
}
getValue() {
try {
var value = ReactDOM.findDOMNode(this.refs.amount).value;
var ret = new Big(value);
@ -159,8 +171,8 @@ const AmountInput = React.createClass({
} catch(err) {
return new Big(this.state.LastGoodAmount);
}
},
render: function() {
}
render() {
var symbol = "?";
if (this.props.security)
symbol = this.props.security.Symbol;
@ -177,37 +189,54 @@ const AmountInput = React.createClass({
</FormGroup>
);
}
});
}
const AddEditTransactionModal = React.createClass({
_getInitialState: function(props) {
class AddEditTransactionModal extends React.Component {
getInitialState(props) {
// Ensure we can edit this without screwing up other copies of it
var t = props.transaction.deepCopy();
if (props)
var t = props.transaction.deepCopy();
else
var t = new Transaction();
return {
errorAlert: [],
transaction: t
};
},
getInitialState: function() {
return this._getInitialState(this.props);
},
componentWillReceiveProps: function(nextProps) {
}
constructor() {
super();
this.state = this.getInitialState();
this.onCancel = this.handleCancel.bind(this);
this.onDescriptionChange = this.handleDescriptionChange.bind(this);
this.onDateChange = this.handleDateChange.bind(this);
this.onAddSplit = this.handleAddSplit.bind(this);
this.onDeleteSplit = this.handleDeleteSplit.bind(this);
this.onUpdateNumber = this.handleUpdateNumber.bind(this);
this.onUpdateStatus = this.handleUpdateStatus.bind(this);
this.onUpdateMemo = this.handleUpdateMemo.bind(this);
this.onUpdateAccount = this.handleUpdateAccount.bind(this);
this.onUpdateAmount = this.handleUpdateAmount.bind(this);
this.onSubmit = this.handleSubmit.bind(this);
this.onDelete = this.handleDelete.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this._getInitialState(nextProps));
this.setState(this.getInitialState(nextProps));
}
},
handleCancel: function() {
}
handleCancel() {
if (this.props.onCancel != null)
this.props.onCancel();
},
handleDescriptionChange: function() {
}
handleDescriptionChange() {
this.setState({
transaction: react_update(this.state.transaction, {
Description: {$set: ReactDOM.findDOMNode(this.refs.description).value}
})
});
},
handleDateChange: function(date, string) {
}
handleDateChange(date, string) {
if (date == null)
return;
this.setState({
@ -215,8 +244,8 @@ const AddEditTransactionModal = React.createClass({
Date: {$set: date}
})
});
},
handleAddSplit: function() {
}
handleAddSplit() {
var split = new Split();
split.Status = SplitStatus.Entered;
this.setState({
@ -224,15 +253,15 @@ const AddEditTransactionModal = React.createClass({
Splits: {$push: [split]}
})
});
},
handleDeleteSplit: function(split) {
}
handleDeleteSplit(split) {
this.setState({
transaction: react_update(this.state.transaction, {
Splits: {$splice: [[split, 1]]}
})
});
},
handleUpdateNumber: function(split) {
}
handleUpdateNumber(split) {
var transaction = this.state.transaction;
transaction.Splits[split] = react_update(transaction.Splits[split], {
Number: {$set: ReactDOM.findDOMNode(this.refs['number-'+split]).value}
@ -240,8 +269,8 @@ const AddEditTransactionModal = React.createClass({
this.setState({
transaction: transaction
});
},
handleUpdateStatus: function(status, split) {
}
handleUpdateStatus(status, split) {
var transaction = this.state.transaction;
transaction.Splits[split] = react_update(transaction.Splits[split], {
Status: {$set: status.StatusId}
@ -249,8 +278,8 @@ const AddEditTransactionModal = React.createClass({
this.setState({
transaction: transaction
});
},
handleUpdateMemo: function(split) {
}
handleUpdateMemo(split) {
var transaction = this.state.transaction;
transaction.Splits[split] = react_update(transaction.Splits[split], {
Memo: {$set: ReactDOM.findDOMNode(this.refs['memo-'+split]).value}
@ -258,8 +287,8 @@ const AddEditTransactionModal = React.createClass({
this.setState({
transaction: transaction
});
},
handleUpdateAccount: function(account, split) {
}
handleUpdateAccount(account, split) {
var transaction = this.state.transaction;
transaction.Splits[split] = react_update(transaction.Splits[split], {
SecurityId: {$set: -1},
@ -268,8 +297,8 @@ const AddEditTransactionModal = React.createClass({
this.setState({
transaction: transaction
});
},
handleUpdateAmount: function(split) {
}
handleUpdateAmount(split) {
var transaction = this.state.transaction;
transaction.Splits[split] = react_update(transaction.Splits[split], {
Amount: {$set: new Big(this.refs['amount-'+split].getValue())}
@ -277,8 +306,8 @@ const AddEditTransactionModal = React.createClass({
this.setState({
transaction: transaction
});
},
handleSubmit: function() {
}
handleSubmit() {
var errorString = ""
var imbalancedSecurityList = this.state.transaction.imbalancedSplitSecurities(this.props.accounts);
if (imbalancedSecurityList.length > 0)
@ -299,19 +328,19 @@ const AddEditTransactionModal = React.createClass({
if (this.props.onSubmit != null)
this.props.onSubmit(this.state.transaction);
},
handleDelete: function() {
}
handleDelete() {
if (this.props.onDelete != null)
this.props.onDelete(this.state.transaction);
},
render: function() {
}
render() {
var editing = this.props.transaction != null && this.props.transaction.isTransaction();
var headerText = editing ? "Edit" : "Create New";
var buttonText = editing ? "Save Changes" : "Create Transaction";
var deleteButton = [];
if (editing) {
deleteButton = (
<Button key={1} onClick={this.handleDelete} bsStyle="danger">Delete Transaction</Button>
<Button key={1} onClick={this.onDelete} bsStyle="danger">Delete Transaction</Button>
);
}
@ -320,7 +349,7 @@ const AddEditTransactionModal = React.createClass({
for (i = 0; i < imbalancedSecurityList.length; i++)
imbalancedSecurityMap[imbalancedSecurityList[i]] = i;
splits = [];
var splits = [];
for (var i = 0; i < this.state.transaction.Splits.length; i++) {
var self = this;
var s = this.state.transaction.Splits[i];
@ -341,27 +370,27 @@ const AddEditTransactionModal = React.createClass({
// Define all closures for calling split-updating functions
var deleteSplitFn = (function() {
var j = i;
return function() {self.handleDeleteSplit(j);};
return function() {self.onDeleteSplit(j);};
})();
var updateNumberFn = (function() {
var j = i;
return function() {self.handleUpdateNumber(j);};
return function() {self.onUpdateNumber(j);};
})();
var updateStatusFn = (function() {
var j = i;
return function(status) {self.handleUpdateStatus(status, j);};
return function(status) {self.onUpdateStatus(status, j);};
})();
var updateMemoFn = (function() {
var j = i;
return function() {self.handleUpdateMemo(j);};
return function() {self.onUpdateMemo(j);};
})();
var updateAccountFn = (function() {
var j = i;
return function(account) {self.handleUpdateAccount(account, j);};
return function(account) {self.onUpdateAccount(account, j);};
})();
var updateAmountFn = (function() {
var j = i;
return function() {self.handleUpdateAmount(j);};
return function() {self.onUpdateAmount(j);};
})();
var deleteSplitButton = [];
@ -415,20 +444,20 @@ const AddEditTransactionModal = React.createClass({
}
return (
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
<Modal show={this.props.show} onHide={this.onCancel} bsSize="large">
<Modal.Header closeButton>
<Modal.Title>{headerText} Transaction</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form horizontal
onSubmit={this.handleSubmit}>
onSubmit={this.onSubmit}>
<FormGroup>
<Col componentClass={ControlLabel} xs={2}>Date</Col>
<Col xs={10}>
<DateTimePicker
time={false}
defaultValue={this.state.transaction.Date}
onChange={this.handleDateChange} />
onChange={this.onDateChange} />
</Col>
</FormGroup>
<FormGroup>
@ -436,7 +465,7 @@ const AddEditTransactionModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.transaction.Description}
onChange={this.handleDescriptionChange}
onChange={this.onDescriptionChange}
ref="description"/>
</Col>
</FormGroup>
@ -451,7 +480,7 @@ const AddEditTransactionModal = React.createClass({
{splits}
<Row>
<span className="col-xs-11"></span>
<Col xs={1}><Button onClick={this.handleAddSplit}
<Col xs={1}><Button onClick={this.onAddSplit}
bsStyle="success">
<Glyphicon glyph='plus-sign' /></Button></Col>
</Row>
@ -461,15 +490,15 @@ const AddEditTransactionModal = React.createClass({
</Modal.Body>
<Modal.Footer>
<ButtonGroup>
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
{deleteButton}
<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
);
}
});
}
const ImportType = {
OFX: 1,
@ -485,8 +514,8 @@ for (var type in ImportType) {
}
}
const ImportTransactionsModal = React.createClass({
getInitialState: function() {
class ImportTransactionsModal extends React.Component {
getInitialState() {
var startDate = new Date();
startDate.setMonth(startDate.getMonth() - 1);
return {
@ -496,41 +525,56 @@ const ImportTransactionsModal = React.createClass({
endDate: new Date(),
password: "",
};
},
handleCancel: function() {
this.setState(this.getInitialState());
}
constructor() {
super();
this.state = this.getInitialState();
this.onCancel = this.handleCancel.bind(this);
this.onImportChange = this.handleImportChange.bind(this);
this.onTypeChange = this.handleTypeChange.bind(this);
this.onPasswordChange = this.handlePasswordChange.bind(this);
this.onStartDateChange = this.handleStartDateChange.bind(this);
this.onEndDateChange = this.handleEndDateChange.bind(this);
this.onSubmit = this.handleSubmit.bind(this);
this.onImportTransactions = this.handleImportTransactions.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this.getInitialState());
}
}
handleCancel() {
if (this.props.onCancel != null)
this.props.onCancel();
},
handleImportChange: function() {
}
handleImportChange() {
this.setState({importFile: ReactDOM.findDOMNode(this.refs.importfile).value});
},
handleTypeChange: function(type) {
}
handleTypeChange(type) {
this.setState({importType: type.TypeId});
},
handlePasswordChange: function() {
}
handlePasswordChange() {
this.setState({password: ReactDOM.findDOMNode(this.refs.password).value});
},
handleStartDateChange: function(date, string) {
}
handleStartDateChange(date, string) {
if (date == null)
return;
this.setState({
startDate: date
});
},
handleEndDateChange: function(date, string) {
}
handleEndDateChange(date, string) {
if (date == null)
return;
this.setState({
endDate: date
});
},
handleSubmit: function() {
this.setState(this.getInitialState());
}
handleSubmit() {
if (this.props.onSubmit != null)
this.props.onSubmit(this.props.account);
},
handleImportTransactions: function() {
}
handleImportTransactions() {
if (this.state.importType == ImportType.OFX) {
this.props.onImportOFX(this.props.account, this.state.password, this.state.startDate, this.state.endDate);
} else if (this.state.importType == ImportType.OFXFile) {
@ -538,8 +582,8 @@ const ImportTransactionsModal = React.createClass({
} else if (this.state.importType == ImportType.Gnucash) {
this.props.onImportGnucash(ReactDOM.findDOMNode(this.refs.importfile));
}
},
render: function() {
}
render() {
var accountNameLabel = "Performing global import:"
if (this.props.account != null && this.state.importType != ImportType.Gnucash)
accountNameLabel = "Importing to '" + getAccountDisplayName(this.props.account, this.props.accounts) + "' account:";
@ -565,10 +609,10 @@ const ImportTransactionsModal = React.createClass({
var button2 = [];
if (!this.props.imports.importFinished && !this.props.imports.importFailed) {
var importingDisabled = this.props.imports.importing || (this.state.importType != ImportType.OFX && this.state.importFile == "") || (this.state.importType == ImportType.OFX && this.state.password == "");
button1 = (<Button onClick={this.handleCancel} disabled={this.props.imports.importing} bsStyle="warning">Cancel</Button>);
button2 = (<Button onClick={this.handleImportTransactions} disabled={importingDisabled} bsStyle="success">Import</Button>);
button1 = (<Button onClick={this.onCancel} disabled={this.props.imports.importing} bsStyle="warning">Cancel</Button>);
button2 = (<Button onClick={this.onImportTransactions} disabled={importingDisabled} bsStyle="success">Import</Button>);
} else {
button1 = (<Button onClick={this.handleSubmit} disabled={this.props.imports.importing} bsStyle="success">OK</Button>);
button1 = (<Button onClick={this.onSubmit} disabled={this.props.imports.importing} bsStyle="success">OK</Button>);
}
var inputDisabled = (this.props.imports.importing || this.props.imports.importFailed || this.props.imports.importFinished) ? true : false;
@ -588,7 +632,7 @@ const ImportTransactionsModal = React.createClass({
value={this.state.password}
placeholder="Password..."
ref="password"
onChange={this.handlePasswordChange} />
onChange={this.onPasswordChange} />
</Col>
</FormGroup>
<FormGroup>
@ -597,7 +641,7 @@ const ImportTransactionsModal = React.createClass({
<DateTimePicker
time={false}
defaultValue={this.state.startDate}
onChange={this.handleStartDateChange} />
onChange={this.onStartDateChange} />
</Col>
</FormGroup>
<FormGroup>
@ -606,7 +650,7 @@ const ImportTransactionsModal = React.createClass({
<DateTimePicker
time={false}
defaultValue={this.state.endDate}
onChange={this.handleEndDateChange} />
onChange={this.onEndDateChange} />
</Col>
</FormGroup>
</div>
@ -620,7 +664,7 @@ const ImportTransactionsModal = React.createClass({
ref="importfile"
disabled={inputDisabled}
value={this.state.importFile}
onChange={this.handleImportChange} />
onChange={this.onImportChange} />
<HelpBlock>Select a file to upload.</HelpBlock>
</Col>
</FormGroup>
@ -628,12 +672,12 @@ const ImportTransactionsModal = React.createClass({
}
return (
<Modal show={this.props.show} onHide={this.handleCancel}>
<Modal show={this.props.show} onHide={this.onCancel}>
<Modal.Header closeButton>
<Modal.Title>Import Transactions</Modal.Title>
</Modal.Header>
<Modal.Body>
<Form horizontal onSubmit={this.handleImportTransactions}
<Form horizontal onSubmit={this.onImportTransactions}
encType="multipart/form-data"
ref="importform">
<FormGroup>
@ -648,7 +692,7 @@ const ImportTransactionsModal = React.createClass({
data={ImportTypeList}
valueField='TypeId'
textField='Name'
onSelect={this.handleTypeChange}
onSelect={this.onTypeChange}
defaultValue={this.state.importType}
disabled={disabledTypes}
ref="importtype" />
@ -668,40 +712,47 @@ const ImportTransactionsModal = React.createClass({
</Modal>
);
}
});
}
module.exports = React.createClass({
displayName: "AccountRegister",
getInitialState: function() {
return {
class AccountRegister extends React.Component {
constructor() {
super();
this.state = {
newTransaction: null,
height: 0
};
},
resize: function() {
this.onEditTransaction = this.handleEditTransaction.bind(this);
this.onEditingCancel = this.handleEditingCancel.bind(this);
this.onNewTransactionClicked = this.handleNewTransactionClicked.bind(this);
this.onSelectPage = this.handleSelectPage.bind(this);
this.onImportComplete = this.handleImportComplete.bind(this);
this.onUpdateTransaction = this.handleUpdateTransaction.bind(this);
this.onDeleteTransaction = this.handleDeleteTransaction.bind(this);
}
resize() {
var div = ReactDOM.findDOMNode(this);
this.setState({height: div.parentElement.clientHeight - 64});
},
componentWillReceiveProps: function(nextProps) {
}
componentWillReceiveProps(nextProps) {
if (!nextProps.transactionPage.upToDate && nextProps.selectedAccount != -1) {
nextProps.onFetchTransactionPage(nextProps.accounts[nextProps.selectedAccount], nextProps.transactionPage.pageSize, nextProps.transactionPage.page);
}
},
componentDidMount: function() {
}
componentDidMount() {
this.resize();
var self = this;
$(window).resize(function() {self.resize();});
},
handleEditTransaction: function(transaction) {
}
handleEditTransaction(transaction) {
this.props.onSelectTransaction(transaction.TransactionId);
},
handleEditingCancel: function() {
}
handleEditingCancel() {
this.setState({
newTransaction: null
});
this.props.onUnselectTransaction();
},
handleNewTransactionClicked: function() {
}
handleNewTransactionClicked() {
var newTransaction = new Transaction();
newTransaction.Date = new Date();
newTransaction.Splits.push(new Split());
@ -713,14 +764,8 @@ module.exports = React.createClass({
this.setState({
newTransaction: newTransaction
});
},
ajaxError: function(jqXHR, status, error) {
var e = new Error();
e.ErrorId = 5;
e.ErrorString = "Request Failed: " + status + error;
this.setState({error: e});
},
handleSelectPage: function(eventKey) {
}
handleSelectPage(eventKey) {
var newpage = eventKey - 1;
// Don't do pages that don't make sense
if (newpage < 0)
@ -732,17 +777,17 @@ module.exports = React.createClass({
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, newpage);
}
}
},
handleImportComplete: function() {
}
handleImportComplete() {
this.props.onCloseImportModal();
this.props.onFetchAllAccounts();
this.props.onFetchTransactionPage(this.props.accounts[this.props.selectedAccount], this.props.pageSize, this.props.transactionPage.page);
},
handleDeleteTransaction: function(transaction) {
}
handleDeleteTransaction(transaction) {
this.props.onDeleteTransaction(transaction);
this.props.onUnselectTransaction();
},
handleUpdateTransaction: function(transaction) {
}
handleUpdateTransaction(transaction) {
if (transaction.TransactionId != -1) {
this.props.onUpdateTransaction(transaction);
} else {
@ -752,10 +797,10 @@ module.exports = React.createClass({
this.setState({
newTransaction: null
});
},
render: function() {
}
render() {
var name = "Please select an account";
register = [];
var register = [];
if (this.props.selectedAccount != -1) {
name = this.props.accounts[this.props.selectedAccount].Name;
@ -815,9 +860,9 @@ module.exports = React.createClass({
transaction={selectedTransaction}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
onCancel={this.handleEditingCancel}
onSubmit={this.handleUpdateTransaction}
onDelete={this.handleDeleteTransaction}
onCancel={this.onEditingCancel}
onSubmit={this.onUpdateTransaction}
onDelete={this.onDeleteTransaction}
securities={this.props.securities} />
<ImportTransactionsModal
imports={this.props.imports}
@ -826,7 +871,7 @@ module.exports = React.createClass({
accounts={this.props.accounts}
onCancel={this.props.onCloseImportModal}
onHide={this.props.onCloseImportModal}
onSubmit={this.handleImportComplete}
onSubmit={this.onImportComplete}
onImportOFX={this.props.onImportOFX}
onImportOFXFile={this.props.onImportOFXFile}
onImportGnucash={this.props.onImportGnucash} />
@ -840,11 +885,11 @@ module.exports = React.createClass({
items={this.props.transactionPage.numPages}
maxButtons={Math.min(5, this.props.transactionPage.numPages)}
activePage={this.props.transactionPage.page + 1}
onSelect={this.handleSelectPage} />
onSelect={this.onSelectPage} />
</ButtonGroup>
<ButtonGroup>
<Button
onClick={this.handleNewTransactionClicked}
onClick={this.onNewTransactionClicked}
bsStyle="success"
disabled={disabled}>
<Glyphicon glyph='plus-sign' /> New Transaction
@ -861,4 +906,6 @@ module.exports = React.createClass({
</div>
);
}
});
}
module.exports = AccountRegister;

77
js/components/AccountSettingsModal.js
View File

@ -14,27 +14,32 @@ var Col = ReactBootstrap.Col;
var User = require('../models').User;
module.exports = React.createClass({
displayName: "AccountSettingsModal",
_getInitialState: function(props) {
return {error: "",
name: props.user.Name,
username: props.user.Username,
email: props.user.Email,
class AccountSettingsModal extends React.Component {
_getInitialState(props) {
return {
error: "",
name: props ? props.user.Name: "",
username: props ? props.user.Username : "",
email: props ? props.user.Email : "",
password: models.BogusPassword,
confirm_password: models.BogusPassword,
passwordChanged: false,
initial_password: models.BogusPassword};
},
getInitialState: function() {
return this._getInitialState(this.props);
},
componentWillReceiveProps: function(nextProps) {
initial_password: models.BogusPassword
};
}
constructor() {
super();
this.state = this._getInitialState();
this.onCancel = this.handleCancel.bind(this);
this.onChange = this.handleChange.bind(this);
this.onSubmit = this.handleSubmit.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this._getInitialState(nextProps));
}
},
passwordValidationState: function() {
}
passwordValidationState() {
if (this.state.passwordChanged) {
if (this.state.password.length >= 10)
return "success";
@ -43,20 +48,20 @@ module.exports = React.createClass({
else
return "error";
}
},
confirmPasswordValidationState: function() {
}
confirmPasswordValidationState() {
if (this.state.confirm_password.length > 0) {
if (this.state.confirm_password == this.state.password)
return "success";
else
return "error";
}
},
handleCancel: function() {
}
handleCancel() {
if (this.props.onCancel != null)
this.props.onCancel();
},
handleChange: function() {
}
handleChange() {
if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
this.setState({passwordChanged: true});
this.setState({
@ -66,8 +71,8 @@ module.exports = React.createClass({
password: ReactDOM.findDOMNode(this.refs.password).value,
confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
});
},
handleSubmit: function(e) {
}
handleSubmit(e) {
var u = new User();
e.preventDefault();
@ -87,22 +92,22 @@ module.exports = React.createClass({
this.props.onUpdateUser(u);
this.props.onSubmit();
},
render: function() {
}
render() {
return (
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
<Modal show={this.props.show} onHide={this.onCancel} bsSize="large">
<Modal.Header closeButton>
<Modal.Title>Edit Account Settings</Modal.Title>
</Modal.Header>
<Modal.Body>
<span color="red">{this.state.error}</span>
<Form horizontal onSubmit={this.handleSubmit}>
<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.handleChange}
onChange={this.onChange}
ref="name"/>
</Col>
</FormGroup>
@ -111,7 +116,7 @@ module.exports = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.username}
onChange={this.handleChange}
onChange={this.onChange}
ref="username"/>
</Col>
</FormGroup>
@ -120,7 +125,7 @@ module.exports = React.createClass({
<Col xs={10}>
<FormControl type="email"
value={this.state.email}
onChange={this.handleChange}
onChange={this.onChange}
ref="email"/>
</Col>
</FormGroup>
@ -129,7 +134,7 @@ module.exports = React.createClass({
<Col xs={10}>
<FormControl type="password"
value={this.state.password}
onChange={this.handleChange}
onChange={this.onChange}
ref="password"/>
<FormControl.Feedback/>
</Col>
@ -139,7 +144,7 @@ module.exports = React.createClass({
<Col xs={10}>
<FormControl type="password"
value={this.state.confirm_password}
onChange={this.handleChange}
onChange={this.onChange}
ref="confirm_password"/>
<FormControl.Feedback/>
</Col>
@ -148,11 +153,13 @@ module.exports = React.createClass({
</Modal.Body>
<Modal.Footer>
<ButtonGroup>
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.handleSubmit} bsStyle="success">Save Settings</Button>
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.onSubmit} bsStyle="success">Save Settings</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
);
}
});
}
module.exports = AccountSettingsModal;

368
js/components/AccountsTab.js
View File

@ -33,8 +33,8 @@ var AccountTypeList = models.AccountTypeList;
var AccountCombobox = require('./AccountCombobox');
var AccountRegister = require('./AccountRegister');
const AddEditAccountModal = React.createClass({
getInitialState: function() {
class AddEditAccountModal extends React.Component {
getInitialState(props) {
var s = {
accountid: -1,
security: 1,
@ -54,36 +54,54 @@ const AddEditAccountModal = React.createClass({
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;
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;
},
handleCancel: function() {
}
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: function() {
}
handleChange() {
this.setState({
name: ReactDOM.findDOMNode(this.refs.name).value,
ofxurl: ReactDOM.findDOMNode(this.refs.ofxurl).value,
@ -98,27 +116,27 @@ const AddEditAccountModal = React.createClass({
ofxappver: ReactDOM.findDOMNode(this.refs.ofxappver).value,
ofxversion: ReactDOM.findDOMNode(this.refs.ofxversion).value,
});
},
}
handleNoIndentClick: function() {
handleNoIndentClick() {
this.setState({ofxnoindent: !this.state.ofxnoindent});
},
handleSecurityChange: function(security) {
}
handleSecurityChange(security) {
if (security.hasOwnProperty('SecurityId'))
this.setState({
security: security.SecurityId
});
},
handleTypeChange: function(type) {
}
handleTypeChange(type) {
if (type.hasOwnProperty('TypeId'))
this.setState({
type: type.TypeId
});
},
handleParentChange: function(parentAccount) {
}
handleParentChange(parentAccount) {
this.setState({parentaccountid: parentAccount.AccountId});
},
handleSubmit: function() {
}
handleSubmit() {
var a = new Account();
if (this.props.editAccount != null)
@ -143,13 +161,8 @@ const AddEditAccountModal = React.createClass({
if (this.props.onSubmit != null)
this.props.onSubmit(a);
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this.getInitialState());
}
},
render: function() {
}
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";
@ -165,7 +178,7 @@ const AddEditAccountModal = React.createClass({
componentClass="select"
placeholder="select"
value={this.state.ofxaccttype}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxaccttype">
<option value="CHECKING">Checking</option>
<option value="SAVINGS">Savings</option>
@ -180,20 +193,20 @@ const AddEditAccountModal = React.createClass({
}
var bankIdDisabled = (this.state.type != AccountType.Investment && this.state.ofxaccttype == "CC") ? true : false;
return (
<Modal show={this.props.show} onHide={this.handleCancel}>
<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.handleSubmit}>
<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.handleChange}
onChange={this.onChange}
ref="name"/>
</Col>
</FormGroup>
@ -205,7 +218,7 @@ const AddEditAccountModal = React.createClass({
accountChildren={this.props.accountChildren}
value={this.state.parentaccountid}
rootName={rootName}
onChange={this.handleParentChange}
onChange={this.onParentChange}
ref="parent" />
</Col>
</FormGroup>
@ -218,7 +231,7 @@ const AddEditAccountModal = React.createClass({
valueField='SecurityId'
textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
defaultValue={this.state.security}
onChange={this.handleSecurityChange}
onChange={this.onSecurityChange}
ref="security" />
</Col>
</FormGroup>
@ -231,20 +244,20 @@ const AddEditAccountModal = React.createClass({
valueField='TypeId'
textField='Name'
defaultValue={this.state.type}
onChange={this.handleTypeChange}
onChange={this.onTypeChange}
ref="type" />
</Col>
</FormGroup>
</Form>
</Tab>
<Tab eventKey={2} title="Sync (OFX)">
<Form horizontal onSubmit={this.handleSubmit}>
<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.handleChange}
onChange={this.onChange}
ref="ofxurl"/>
</Col>
</FormGroup>
@ -253,7 +266,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxorg}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxorg"/>
</Col>
</FormGroup>
@ -262,7 +275,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxfid}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxfid"/>
</Col>
</FormGroup>
@ -271,7 +284,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxuser}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxuser"/>
</Col>
</FormGroup>
@ -281,7 +294,7 @@ const AddEditAccountModal = React.createClass({
<FormControl type="text"
disabled={bankIdDisabled}
value={this.state.ofxbankid}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxbankid"/>
</Col>
</FormGroup>
@ -290,7 +303,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxacctid}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxacctid"/>
</Col>
</FormGroup>
@ -301,7 +314,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxclientuid}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxclientuid"/>
</Col>
</FormGroup>
@ -310,7 +323,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxappid}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxappid"/>
</Col>
</FormGroup>
@ -319,7 +332,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxappver}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxappver"/>
</Col>
</FormGroup>
@ -328,7 +341,7 @@ const AddEditAccountModal = React.createClass({
<Col xs={10}>
<FormControl type="text"
value={this.state.ofxversion}
onChange={this.handleChange}
onChange={this.onChange}
ref="ofxversion"/>
</Col>
</FormGroup>
@ -336,7 +349,7 @@ const AddEditAccountModal = React.createClass({
<Col xsOffset={2} xs={10}>
<Checkbox
checked={this.state.ofxnoindent ? "checked" : ""}
onClick={this.handleNoIndentClick}>
onClick={this.onNoIndentClick}>
Don't indent OFX request files
</Checkbox>
</Col>
@ -348,40 +361,58 @@ const AddEditAccountModal = React.createClass({
</Modal.Body>
<Modal.Footer>
<ButtonGroup className="pull-right">
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
);
}
});
}
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;
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: "",
return {
error: "",
accountid: accountid,
checked: false,
show: false};
},
handleCancel: function() {
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: function(account) {
}
handleChange(account) {
this.setState({accountid: account.AccountId});
},
handleCheckboxClick: function() {
}
handleCheckboxClick() {
this.setState({checked: !this.state.checked});
},
handleSubmit: function() {
}
handleSubmit() {
if (this.props.accounts.hasOwnProperty(this.state.accountid)) {
if (this.state.checked) {
if (this.props.onSubmit != null)
@ -392,13 +423,8 @@ const DeleteAccountModal = React.createClass({
} else {
this.setState({error: "You must select an account."});
}
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this.getInitialState());
}
},
render: function() {
}
render() {
var checkbox = [];
if (this.props.accounts.hasOwnProperty(this.state.accountid)) {
var parentAccountId = this.props.accounts[this.state.accountid].ParentAccountId;
@ -412,7 +438,7 @@ const DeleteAccountModal = React.createClass({
<Col xsOffset={2} sm={10}>
<Checkbox
checked={this.state.checked ? "checked" : ""}
onClick={this.handleCheckboxClick}>
onClick={this.onCheckboxClick}>
{warningString}
</Checkbox>
</Col>
@ -428,14 +454,14 @@ const DeleteAccountModal = React.createClass({
return (
<Modal
show={this.props.show}
onHide={this.handleCancel}
onHide={this.onCancel}
ref="modal">
<Modal.Header closeButton>
<Modal.Title>Delete Account</Modal.Title>
</Modal.Header>
<Modal.Body>
{warning}
<Form horizontal onSubmit={this.handleSubmit}>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup>
<Col componentClass={ControlLabel} xs={2}>Delete Account</Col>
<Col xs={10}>
@ -444,7 +470,7 @@ const DeleteAccountModal = React.createClass({
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
value={this.state.accountid}
onChange={this.handleChange}/>
onChange={this.onChange}/>
</Col>
</FormGroup>
{checkbox}
@ -452,32 +478,36 @@ const DeleteAccountModal = React.createClass({
</Modal.Body>
<Modal.Footer>
<ButtonGroup className="pull-right">
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.handleSubmit} bsStyle="success">Delete Account</Button>
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.onSubmit} bsStyle="success">Delete Account</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
);
}
});
}
const AccountTreeNode = React.createClass({
getInitialState: function() {
return {expanded: false};
},
handleToggle: function(e) {
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: function(account) {
}
handleChildSelect(account) {
if (this.props.onSelect != null)
this.props.onSelect(account);
},
handleSelect: function() {
}
handleSelect() {
if (this.props.onSelect != null)
this.props.onSelect(this.props.account);
},
render: function() {
}
render() {
var glyph = this.state.expanded ? 'minus' : 'plus';
var active = (this.props.selectedAccount != -1 &&
this.props.account.AccountId == this.props.selectedAccount);
@ -493,14 +523,14 @@ const AccountTreeNode = React.createClass({
selectedAccount={self.props.selectedAccount}
accounts={self.props.accounts}
accountChildren={self.props.accountChildren}
onSelect={self.handleChildSelect}/>
onSelect={self.onChildSelect}/>
);
});
var accounttreeClasses = "accounttree"
var expandButton = [];
if (children.length > 0) {
expandButton.push((
<Button onClick={this.handleToggle}
<Button onClick={this.onToggle}
key={1}
bsSize="xsmall"
bsStyle="link"
@ -514,7 +544,7 @@ const AccountTreeNode = React.createClass({
return (
<div className={accounttreeClasses}>
{expandButton}
<Button onClick={this.handleSelect}
<Button onClick={this.onSelect}
bsStyle={buttonStyle}
className="accounttree-name">
{this.props.account.Name}
@ -527,27 +557,29 @@ const AccountTreeNode = React.createClass({
</div>
);
}
});
}
const AccountTree = React.createClass({
getInitialState: function() {
return {height: 0};
},
handleSelect: function(account) {
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: function() {
}
resize() {
var div = ReactDOM.findDOMNode(this);
this.setState({height: div.parentElement.clientHeight - 73});
},
componentDidMount: function() {
}
componentDidMount() {
this.resize();
var self = this;
$(window).resize(function() {self.resize();});
},
render: function() {
}
render() {
var accounts = this.props.accounts;
var children = [];
@ -560,7 +592,7 @@ const AccountTree = React.createClass({
selectedAccount={this.props.selectedAccount}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
onSelect={this.handleSelect}/>));
onSelect={this.onSelect}/>));
}
}
@ -572,55 +604,65 @@ const AccountTree = React.createClass({
</div>
);
}
});
}
module.exports = React.createClass({
displayName: "AccountsTab",
getInitialState: function() {
return {
class AccountsTab extends React.Component {
constructor() {
super();
this.state = {
creatingNewAccount: false,
editingAccount: false,
deletingAccount: false
};
},
handleNewAccount: function() {
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: function() {
}
handleEditAccount() {
this.setState({editingAccount: true});
},
handleDeleteAccount: function() {
}
handleDeleteAccount() {
this.setState({deletingAccount: true});
},
handleCreationCancel: function() {
}
handleCreationCancel() {
this.setState({creatingNewAccount: false});
},
handleEditingCancel: function() {
}
handleEditingCancel() {
this.setState({editingAccount: false});
},
handleDeletionCancel: function() {
}
handleDeletionCancel() {
this.setState({deletingAccount: false});
},
handleCreateAccount: function(account) {
}
handleCreateAccount(account) {
if (this.props.onCreateAccount != null)
this.props.onCreateAccount(account);
this.setState({creatingNewAccount: false});
},
handleUpdateAccount: function(account) {
}
handleUpdateAccount(account) {
if (this.props.onUpdateAccount != null)
this.props.onUpdateAccount(account);
this.setState({editingAccount: false});
},
handleRemoveAccount: function(account) {
}
handleRemoveAccount(account) {
if (this.props.onDeleteAccount != null)
this.props.onDeleteAccount(account);
this.setState({deletingAccount: false});
},
handleAccountSelected: function(account) {
}
handleAccountSelected(account) {
this.props.onSelectAccount(account.AccountId);
this.props.onFetchTransactionPage(account, 20, 0);
},
render: function() {
}
render() {
var disabled = (this.props.selectedAccount == -1) ? true : false;
var selectedAccount = null;
@ -635,36 +677,36 @@ module.exports = React.createClass({
initialParentAccount={selectedAccount}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
onCancel={this.handleCreationCancel}
onSubmit={this.handleCreateAccount}
onCancel={this.onCreationCancel}
onSubmit={this.onCreateAccount}
security_list={this.props.security_list}/>
<AddEditAccountModal
show={this.state.editingAccount}
editAccount={selectedAccount}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
onCancel={this.handleEditingCancel}
onSubmit={this.handleUpdateAccount}
onCancel={this.onEditingCancel}
onSubmit={this.onUpdateAccount}
security_list={this.props.security_list}/>
<DeleteAccountModal
show={this.state.deletingAccount}
initialAccount={selectedAccount}
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
onCancel={this.handleDeletionCancel}
onSubmit={this.handleRemoveAccount}/>
onCancel={this.onDeletionCancel}
onSubmit={this.onRemoveAccount}/>
<AccountTree
accounts={this.props.accounts}
accountChildren={this.props.accountChildren}
selectedAccount={this.props.selectedAccount}
onSelect={this.handleAccountSelected}/>
onSelect={this.onAccountSelected}/>
<ButtonGroup className="account-buttongroup">
<Button onClick={this.handleNewAccount} bsStyle="success">
<Button onClick={this.onNewAccount} bsStyle="success">
<Glyphicon glyph='plus-sign' /></Button>
<Button onClick={this.handleEditAccount}
<Button onClick={this.onEditAccount}
bsStyle="primary" disabled={disabled}>
<Glyphicon glyph='cog' /></Button>
<Button onClick={this.handleDeleteAccount}
<Button onClick={this.onDeleteAccount}
bsStyle="danger" disabled={disabled}>
<Glyphicon glyph='trash' /></Button>
</ButtonGroup>
@ -694,4 +736,6 @@ module.exports = React.createClass({
</Row></Grid>
);
}
});
}
module.exports = AccountsTab;

58
js/components/MoneyGoApp.js
View File

@ -13,36 +13,34 @@ var AccountsTabContainer = require('../containers/AccountsTabContainer');
var SecuritiesTabContainer = require('../containers/SecuritiesTabContainer');
var ReportsTabContainer = require('../containers/ReportsTabContainer');
module.exports = React.createClass({
displayName: "MoneyGoApp",
getInitialState: function() {
return {
class MoneyGoApp extends React.Component {
constructor() {
super();
this.state = {
showNewUserModal: false,
showAccountSettingsModal: false
};
},
componentDidMount: function() {
this.onShowSettings = this.handleShowSettings.bind(this);
this.onHideSettings = this.handleHideSettings.bind(this);
this.onShowNewUser = this.handleShowNewUser.bind(this);
this.onHideNewUser = this.handleHideNewUser.bind(this);
}
componentDidMount() {
this.props.tryResumingSession();
},
handleAccountSettings: function() {
}
handleShowSettings() {
this.setState({showAccountSettingsModal: true});
},
handleSettingsSubmitted: function(user) {
}
handleHideSettings(user) {
this.setState({showAccountSettingsModal: false});
},
handleSettingsCanceled: function() {
this.setState({showAccountSettingsModal: false});
},
handleCreateNewUser: function() {
}
handleShowNewUser() {
this.setState({showNewUserModal: true});
},
handleNewUserCreated: function() {
}
handleHideNewUser() {
this.setState({showNewUserModal: false});
},
handleNewUserCanceled: function() {
this.setState({showNewUserModal: false});
},
render: function() {
}
render() {
var mainContent;
if (this.props.user.isUser())
mainContent = (
@ -74,18 +72,20 @@ module.exports = React.createClass({
return (
<div className="fullheight ui">
<TopBarContainer
onCreateNewUser={this.handleCreateNewUser}
onAccountSettings={this.handleAccountSettings} />
onCreateNewUser={this.onShowNewUser}
onAccountSettings={this.onShowSettings} />
{mainContent}
<NewUserModalContainer
show={this.state.showNewUserModal}
onSubmit={this.handleNewUserCreated}
onCancel={this.handleNewUserCanceled}/>
onSubmit={this.onHideNewUser}
onCancel={this.onHideNewUser}/>
<AccountSettingsModalContainer
show={this.state.showAccountSettingsModal}
onSubmit={this.handleSettingsSubmitted}
onCancel={this.handleSettingsCanceled}/>
onSubmit={this.onHideSettings}
onCancel={this.onHideSettings}/>
</div>
);
}
});
}
module.exports = MoneyGoApp;

40
js/components/NewUserModal.js
View File

@ -14,19 +14,21 @@ var ButtonGroup = ReactBootstrap.ButtonGroup;
var models = require('../models');
var User = models.User;
module.exports = React.createClass({
displayName: "NewUserModal",
getInitialState: function() {
return {error: "",
class NewUserModal extends React.Component {
constructor() {
super();
this.state = {
error: "",
name: "",
username: "",
email: "",
password: "",
confirm_password: "",
passwordChanged: false,
initial_password: ""};
},
passwordValidationState: function() {
initial_password: ""
};
}
passwordValidationState() {
if (this.state.passwordChanged) {
if (this.state.password.length >= 10)
return "success";
@ -35,20 +37,20 @@ module.exports = React.createClass({
else
return "error";
}
},
confirmPasswordValidationState: function() {
}
confirmPasswordValidationState() {
if (this.state.confirm_password.length > 0) {
if (this.state.confirm_password == this.state.password)
return "success";
else
return "error";
}
},
handleCancel: function() {
}
handleCancel() {
if (this.props.onCancel != null)
this.props.onCancel();
},
handleChange: function() {
}
handleChange() {
if (ReactDOM.findDOMNode(this.refs.password).value != this.state.initial_password)
this.setState({passwordChanged: true});
this.setState({
@ -58,8 +60,8 @@ module.exports = React.createClass({
password: ReactDOM.findDOMNode(this.refs.password).value,
confirm_password: ReactDOM.findDOMNode(this.refs.confirm_password).value
});
},
handleSubmit: function(e) {
}
handleSubmit(e) {
var u = new User();
var error = "";
e.preventDefault();
@ -76,8 +78,8 @@ module.exports = React.createClass({
this.props.createNewUser(u);
if (this.props.onSubmit != null)
this.props.onSubmit(u);
},
render: function() {
}
render() {
return (
<Modal show={this.props.show} onHide={this.handleCancel} bsSize="large">
<Modal.Header closeButton>
@ -146,4 +148,6 @@ module.exports = React.createClass({
</Modal>
);
}
});
}
module.exports = NewUserModal;

32
js/components/PieChart.js
View File

@ -1,9 +1,8 @@
var d3 = require('d3');
var React = require('react');
var Slice = React.createClass({
displayName: "Slice",
render: function() {
class Slice extends React.Component {
render() {
if (this.props.angle > Math.PI*2 - 0.00001) {
var slice = (<circle cx={this.props.cx} cy={this.props.cy} r={this.props.radius}
className={this.props.className}
@ -15,7 +14,7 @@ var Slice = React.createClass({
var large_arc_flag = this.props.angle > Math.PI ? 1 : 0;
var rotateDegrees = this.props.startAngle * 180 / Math.PI;
slice = (<path d={"M" + center + " l " + this.props.radius + " 0 a " + this.props.radius + " " + this.props.radius + ", 0, " + large_arc_flag + ", 1, " + dx + " " + dy + " Z"}
var slice = (<path d={"M" + center + " l " + this.props.radius + " 0 a " + this.props.radius + " " + this.props.radius + ", 0, " + large_arc_flag + ", 1, " + dx + " " + dy + " Z"}
className={this.props.className}
onClick={this.props.onClick} />);
}
@ -26,11 +25,10 @@ var Slice = React.createClass({
</g>
);
}
});
}
module.exports = React.createClass({
displayName: "PieChart",
sortedSeries: function(series) {
class PieChart extends React.Component {
sortedSeries(series) {
// Return an array of the series names, from highest to lowest sums (in
// absolute terms)
@ -49,13 +47,13 @@ module.exports = React.createClass({
});
return [seriesNames, seriesValues];
},
render: function() {
height = 400;
width = 600;
legendWidth = 100;
xMargin = 70;
yMargin = 70;
}
render() {
var height = 400;
var width = 600;
var legendWidth = 100;
var xMargin = 70;
var yMargin = 70;
height -= yMargin*2;
width -= xMargin*2;
var radius = Math.min(height, width)/2;
@ -133,4 +131,6 @@ module.exports = React.createClass({
</svg>
);
}
});
}
module.exports = PieChart;

33
js/components/ReportsTab.js
View File

@ -7,27 +7,30 @@ var Panel = ReactBootstrap.Panel;
var StackedBarChart = require('../components/StackedBarChart');
module.exports = React.createClass({
displayName: "ReportsTab",
getInitialState: function() {
return { };
},
componentWillMount: function() {
var models = require('../models')
var Report = models.Report;
class ReportsTab extends React.Component {
constructor() {
super();
this.onSelectSeries = this.handleSelectSeries.bind(this);
}
componentWillMount() {
this.props.onFetchReport("monthly_expenses");
},
componentWillReceiveProps: function(nextProps) {
}
componentWillReceiveProps(nextProps) {
if (nextProps.reports['monthly_expenses'] && !nextProps.selectedReport.report) {
this.props.onSelectReport(nextProps.reports['monthly_expenses'], []);
}
},
onSelectSeries: function(series) {
if (series == this.props.selectedReport.report.topLevelAccountName)
}
handleSelectSeries(series) {
if (series == Report.topLevelAccountName())
return;
var seriesTraversal = this.props.selectedReport.seriesTraversal.slice();
seriesTraversal.push(series);
this.props.onSelectReport(this.props.reports[this.props.selectedReport.report.ReportId], seriesTraversal);
},
render: function() {
}
render() {
var report = [];
if (this.props.selectedReport.report) {
var titleTracks = [];
@ -86,4 +89,6 @@ module.exports = React.createClass({
</div>
);
}
});
}
module.exports = ReportsTab;

220
js/components/SecuritiesTab.js
View File

@ -25,11 +25,15 @@ var Security = models.Security;
var SecurityType = models.SecurityType;
var SecurityTypeList = models.SecurityTypeList;
const SecurityTemplatePanel = React.createClass({
handleSearchChange: function(){
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: function() {
}
renderTemplateList() {
var templates = this.props.securityTemplates;
if (this.props.search != "") {
var items = [];
@ -70,23 +74,23 @@ const SecurityTemplatePanel = React.createClass({
</div>
);
}
},
render: function() {
}
render() {
return (
<Panel collapsible header="Populate Security from Template...">
<FormControl type="text"
placeholder="Search..."
value={this.props.search}
onChange={this.handleSearchChange}
onChange={this.onSearchChange}
ref="search"/>
{this.renderTemplateList()}
</Panel>
);
}
});
}
const AddEditSecurityModal = React.createClass({
getInitialState: function() {
class AddEditSecurityModal extends React.Component {
getInitialState(props) {
var s = {
securityid: -1,
name: "",
@ -96,18 +100,36 @@ const AddEditSecurityModal = React.createClass({
type: 1,
alternateid: ""
};
if (this.props.editSecurity != null) {
s.securityid = this.props.editSecurity.SecurityId;
s.name = this.props.editSecurity.Name;
s.description = this.props.editSecurity.Description;
s.symbol = this.props.editSecurity.Symbol;
s.precision = this.props.editSecurity.Precision;
s.type = this.props.editSecurity.Type;
s.alternateid = this.props.editSecurity.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;
},
onSelectTemplate: function(template) {
}
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,
@ -116,43 +138,43 @@ const AddEditSecurityModal = React.createClass({
type: template.Type,
alternateid: template.AlternateId
});
},
handleCancel: function() {
}
handleCancel() {
if (this.props.onCancel != null)
this.props.onCancel();
},
handleNameChange: function() {
}
handleNameChange() {
this.setState({
name: ReactDOM.findDOMNode(this.refs.name).value,
});
},
handleDescriptionChange: function() {
}
handleDescriptionChange() {
this.setState({
description: ReactDOM.findDOMNode(this.refs.description).value,
});
},
handleSymbolChange: function() {
}
handleSymbolChange() {
this.setState({
symbol: ReactDOM.findDOMNode(this.refs.symbol).value,
});
},
handlePrecisionChange: function() {
}
handlePrecisionChange() {
this.setState({
precision: +ReactDOM.findDOMNode(this.refs.precision).value,
});
},
handleTypeChange: function(type) {
}
handleTypeChange(type) {
if (type.hasOwnProperty('TypeId'))
this.setState({
type: type.TypeId
});
},
handleAlternateIdChange: function() {
}
handleAlternateIdChange() {
this.setState({
alternateid: ReactDOM.findDOMNode(this.refs.alternateid).value,
});
},
handleSubmit: function() {
}
handleSubmit() {
var s = new Security();
if (this.props.editSecurity != null)
@ -166,18 +188,13 @@ const AddEditSecurityModal = React.createClass({
if (this.props.onSubmit != null)
this.props.onSubmit(s);
},
componentWillReceiveProps: function(nextProps) {
if (nextProps.show && !this.props.show) {
this.setState(this.getInitialState());
}
},
render: function() {
}
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 (
<Modal show={this.props.show} onHide={this.handleCancel}>
<Modal show={this.props.show} onHide={this.onCancel}>
<Modal.Header closeButton>
<Modal.Title>{headerText} Security</Modal.Title>
</Modal.Header>
@ -188,13 +205,13 @@ const AddEditSecurityModal = React.createClass({
onSearchTemplates={this.props.onSearchTemplates}
maxResults={15}
onSelectTemplate={this.onSelectTemplate} />
<Form horizontal onSubmit={this.handleSubmit}>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup>
<Col componentClass={ControlLabel} xs={3}>Name</Col>
<Col xs={9}>
<FormControl type="text"
value={this.state.name}
onChange={this.handleNameChange}
onChange={this.onNameChange}
ref="name"/>
</Col>
</FormGroup>
@ -203,7 +220,7 @@ const AddEditSecurityModal = React.createClass({
<Col xs={9}>
<FormControl type="text"
value={this.state.description}
onChange={this.handleDescriptionChange}
onChange={this.onDescriptionChange}
ref="description"/>
</Col>
</FormGroup>
@ -212,7 +229,7 @@ const AddEditSecurityModal = React.createClass({
<Col xs={9}>
<FormControl type="text"
value={this.state.symbol}
onChange={this.handleSymbolChange}
onChange={this.onSymbolChange}
ref="symbol"/>
</Col>
</FormGroup>
@ -222,7 +239,7 @@ const AddEditSecurityModal = React.createClass({
<FormControl componentClass="select"
placeholder={this.state.precision}
value={this.state.precision}
onChange={this.handlePrecisionChange}
onChange={this.onPrecisionChange}
ref="precision">
<option value={0}>1</option>
<option value={1}>0.1 (1/10)</option>
@ -242,7 +259,7 @@ const AddEditSecurityModal = React.createClass({
valueField='TypeId'
textField='Name'
value={this.state.type}
onChange={this.handleTypeChange}
onChange={this.onTypeChange}
ref="type" />
</Col>
</FormGroup>
@ -251,7 +268,7 @@ const AddEditSecurityModal = React.createClass({
<Col xs={9}>
<FormControl type="text"
value={this.state.alternateid}
onChange={this.handleAlternateIdChange}
onChange={this.onAlternateIdChange}
ref="alternateid"/>
</Col>
</FormGroup>
@ -259,17 +276,17 @@ const AddEditSecurityModal = React.createClass({
</Modal.Body>
<Modal.Footer>
<ButtonGroup className="pull-right">
<Button onClick={this.handleCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.handleSubmit} bsStyle="success">{buttonText}</Button>
<Button onClick={this.onCancel} bsStyle="warning">Cancel</Button>
<Button onClick={this.onSubmit} bsStyle="success">{buttonText}</Button>
</ButtonGroup>
</Modal.Footer>
</Modal>
);
}
});
}
const DeletionFailedModal = React.createClass({
render: function() {
class DeletionFailedModal extends React.Component {
render() {
return (
<Modal show={this.props.show} onHide={this.props.onClose}>
<Modal.Header closeButton>
@ -286,10 +303,10 @@ const DeletionFailedModal = React.createClass({
</Modal>
);
}
});
}
const SecurityList = React.createClass({
render: function() {
class SecurityList extends React.Component {
render() {
var children = [];
var self = this;
for (var securityId in this.props.securities) {
@ -314,55 +331,64 @@ const SecurityList = React.createClass({
</div>
);
}
});
}
module.exports = React.createClass({
displayName: "SecuritiesTab",
getInitialState: function() {
return {
class SecuritiesTab extends React.Component {
constructor() {
super();
this.state = {
creatingNewSecurity: false,
editingSecurity: false,
deletionFailedModal: false
};
},
componentWillReceiveProps: function(nextProps) {
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: function(security) {
}
handleSelectSecurity(security) {
this.props.onSelectSecurity(security.SecurityId);
},
handleNewSecurity: function() {
}
handleNewSecurity() {
this.setState({creatingNewSecurity: true});
},
handleEditSecurity: function() {
}
handleEditSecurity() {
this.setState({editingSecurity: true});
},
handleDeleteSecurity: function() {
}
handleDeleteSecurity() {
if (this.props.selectedSecurityAccounts.length == 0)
this.props.onDeleteSecurity(this.props.securities[this.props.selectedSecurity]);
else
this.setState({deletionFailedModal: true});
},
handleCreationCancel: function() {
}
handleCreationCancel() {
this.setState({creatingNewSecurity: false});
},
handleCreationSubmit: function(security) {
}
handleCreationSubmit(security) {
this.setState({creatingNewSecurity: false});
this.props.onCreateSecurity(security);
},
handleEditingCancel: function() {
}
handleEditingCancel() {
this.setState({editingSecurity: false});
},
handleEditingSubmit: function(security) {
}
handleEditingSubmit(security) {
this.setState({editingSecurity: false});
this.props.onUpdateSecurity(security);
},
closeDeletionFailedModal: function() {
}
handleCloseDeletionFailed() {
this.setState({deletionFailedModal: false});
},
render: function() {
}
render() {
var noSecuritySelected = this.props.selectedSecurity == -1;
var selectedSecurity = -1;
@ -373,25 +399,25 @@ module.exports = React.createClass({
<div>
<AddEditSecurityModal
show={this.state.creatingNewSecurity}
onCancel={this.handleCreationCancel}
onSubmit={this.handleCreationSubmit}
onCancel={this.onCreationCancel}
onSubmit={this.onCreationSubmit}
onSearchTemplates={this.props.onSearchTemplates}
securityTemplates={this.props.securityTemplates} />
<AddEditSecurityModal
show={this.state.editingSecurity}
editSecurity={selectedSecurity}
onCancel={this.handleEditingCancel}
onSubmit={this.handleEditingSubmit}
onCancel={this.onEditingCancel}
onSubmit={this.onEditingSubmit}
onSearchTemplates={this.props.onSearchTemplates}
securityTemplates={this.props.securityTemplates} />
<DeletionFailedModal
show={this.state.deletionFailedModal}
deletingSecurity={selectedSecurity}
onClose={this.closeDeletionFailedModal}
onClose={this.onCloseDeletionFailed}
securityAccounts={this.props.selectedSecurityAccounts} />
<ButtonToolbar>
<ButtonGroup>
<Button onClick={this.handleNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button>
<Button onClick={this.onNewSecurity} bsStyle="success"><Glyphicon glyph='plus-sign'/> New Security</Button>
</ButtonGroup>
<ButtonGroup>
<Combobox
@ -399,16 +425,18 @@ module.exports = React.createClass({
valueField='SecurityId'
textField={item => typeof item === 'string' ? item : item.Name + " - " + item.Description}
value={selectedSecurity}
onChange={this.handleSelectSecurity}
onChange={this.onSelectSecurity}
suggest
filter='contains'
ref="security" />
</ButtonGroup>
<ButtonGroup>
<Button onClick={this.handleEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button>
<Button onClick={this.handleDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
<Button onClick={this.onEditSecurity} bsStyle="primary" disabled={noSecuritySelected}><Glyphicon glyph='cog'/> Edit Security</Button>
<Button onClick={this.onDeleteSecurity} bsStyle="danger" disabled={noSecuritySelected}><Glyphicon glyph='trash'/> Delete Security</Button>
</ButtonGroup></ButtonToolbar>
</div>
);
}
});
}
module.exports = SecuritiesTab;

31
js/components/StackedBarChart.js
View File

@ -1,9 +1,8 @@
var d3 = require('d3');
var React = require('react');
module.exports = React.createClass({
displayName: "StackedBarChart",
calcMinMax: function(series) {
class StackedBarChart extends React.Component {
calcMinMax(series) {
var children = [];
for (var child in series) {
if (series.hasOwnProperty(child))
@ -28,8 +27,8 @@ module.exports = React.createClass({
}
return [Math.min.apply(Math, negativeValues), Math.max.apply(Math, positiveValues)];
},
sortedSeries: function(series) {
}
sortedSeries(series) {
// Return an array of the series names, from highest to lowest sums (in
// absolute terms)
@ -48,21 +47,21 @@ module.exports = React.createClass({
});
return seriesNames;
},
calcAxisMarkSeparation: function(minMax, height, ticksPerHeight) {
}
calcAxisMarkSeparation(minMax, height, ticksPerHeight) {
var targetTicks = height / ticksPerHeight;
var range = minMax[1]-minMax[0];
var rangePerTick = range/targetTicks;
var roundOrder = Math.floor(Math.log(rangePerTick) / Math.LN10);
var roundTo = Math.pow(10, roundOrder);
return Math.ceil(rangePerTick/roundTo)*roundTo;
},
render: function() {
height = 400;
width = 600;
legendWidth = 100;
xMargin = 70;
yMargin = 70;
}
render() {
var height = 400;
var width = 1000;
var legendWidth = 100;
var xMargin = 70;
var yMargin = 70;
height -= yMargin*2;
width -= xMargin*2;
@ -189,4 +188,6 @@ module.exports = React.createClass({
</svg>
);
}
});
}
module.exports = StackedBarChart;

60
js/components/TopBar.js
View File

@ -14,36 +14,39 @@ var ReactDOM = require('react-dom');
var User = require('../models').User;
const LoginBar = React.createClass({
getInitialState: function() {
return {username: '', password: ''};
},
onUsernameChange: function(e) {
class LoginBar extends React.Component {
constructor() {
super();
this.state = {username: '', password: ''};
this.onSubmit = this.handleSubmit.bind(this);
this.onNewUserSubmit = this.handleNewUserSubmit.bind(this);
}
onUsernameChange(e) {
this.setState({username: e.target.value});
},
onPasswordChange: function(e) {
}
onPasswordChange(e) {
this.setState({password: e.target.value});
},
handleSubmit: function(e) {
}
handleSubmit(e) {
var user = new User();
e.preventDefault();
user.Username = ReactDOM.findDOMNode(this.refs.username).value;
user.Password = ReactDOM.findDOMNode(this.refs.password).value;
this.props.onLogin(user);
},
handleNewUserSubmit: function(e) {
}
handleNewUserSubmit(e) {
e.preventDefault();
this.props.onCreateNewUser();
},
render: function() {
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<form onSubmit={this.onSubmit}>
<FormGroup>
<Row>
<Col xs={4}></Col>
<Col xs={2}>
<Button bsStyle="link"
onClick={this.handleNewUserSubmit}>Create New User</Button>
onClick={this.onNewUserSubmit}>Create New User</Button>
</Col>
<Col xs={2}>
<FormControl type="text"
@ -64,18 +67,22 @@ const LoginBar = React.createClass({
</form>
);
}
});
}
const LogoutBar = React.createClass({
handleOnSelect: function(key) {
class LogoutBar extends React.Component {
constructor() {
super();
this.onSelect = this.handleOnSelect.bind(this);
}
handleOnSelect(key) {
if (key == 1) {
if (this.props.onAccountSettings != null)
this.props.onAccountSettings();
} else if (key == 2) {
this.props.onLogout();
}
},
render: function() {
}
render() {
var signedInString = "Signed in as "+this.props.user.Name;
return (
<FormGroup>
@ -84,7 +91,7 @@ const LogoutBar = React.createClass({
<Col xs={6}></Col>
<Col xs={4}>
<div className="pull-right">
<DropdownButton id="logout-settings-dropdown" title={signedInString} onSelect={this.handleOnSelect} bsStyle="info">
<DropdownButton id="logout-settings-dropdown" title={signedInString} onSelect={this.onSelect} bsStyle="info">
<MenuItem eventKey={1}>Account Settings</MenuItem>
<MenuItem eventKey={2}>Logout</MenuItem>
</DropdownButton>
@ -94,11 +101,10 @@ const LogoutBar = React.createClass({
</FormGroup>
);
}
});
}
module.exports = React.createClass({
displayName: "TopBar",
render: function() {
class TopBar extends React.Component {
render() {
var barContents;
var errorAlert;
if (!this.props.user.isUser())
@ -120,4 +126,6 @@ module.exports = React.createClass({
</div>
);
}
});
}
module.exports = TopBar;

978
js/models.js
View File

File diff suppressed because it is too large Load Diff