mirror of
https://github.com/aclindsa/moneygo.git
synced 2024-12-25 23:23:21 -05:00
Fixup transaction editing modal
* Only update the field that was modified when one is changed instead of deep-copying the entire Transaction object * Create a new AmountInput text box to allow for more intuitive editing of amounts.
This commit is contained in:
parent
770cd384a7
commit
01f0f9e68f
@ -71,6 +71,56 @@ const TransactionRow = React.createClass({
|
||||
}
|
||||
});
|
||||
|
||||
const AmountInput = React.createClass({
|
||||
_getInitialState: function(props) {
|
||||
// Ensure we can edit this without screwing up other copies of it
|
||||
var a = props.value.toFixed(this.props.security.Precision);
|
||||
return {
|
||||
LastGoodAmount: a,
|
||||
Amount: a
|
||||
};
|
||||
},
|
||||
getInitialState: function() {
|
||||
return this._getInitialState(this.props);
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if (!nextProps.value.eq(this.props.value) && !nextProps.value.eq(this.getValue())) {
|
||||
this.setState(this._getInitialState(nextProps));
|
||||
}
|
||||
},
|
||||
componentDidMount: function() {
|
||||
this.refs.amount.getInputDOMNode().onblur = this.onBlur;
|
||||
},
|
||||
onBlur: function() {
|
||||
this.setState({
|
||||
Amount: (new Big(this.getValue())).toFixed(this.props.security.Precision)
|
||||
});
|
||||
},
|
||||
onChange: function() {
|
||||
this.setState({Amount: this.refs.amount.getValue()});
|
||||
if (this.props.onChange)
|
||||
this.props.onChange();
|
||||
},
|
||||
getValue: function() {
|
||||
try {
|
||||
var value = this.refs.amount.getValue();
|
||||
var ret = new Big(value);
|
||||
this.setState({LastGoodAmount: value});
|
||||
return ret;
|
||||
} catch(err) {
|
||||
return new Big(this.state.LastGoodAmount);
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<Input type="text"
|
||||
value={this.state.Amount}
|
||||
onChange={this.onChange}
|
||||
ref="amount"/>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
const AddEditTransactionModal = React.createClass({
|
||||
_getInitialState: function(props) {
|
||||
// Ensure we can edit this without screwing up other copies of it
|
||||
@ -80,66 +130,79 @@ const AddEditTransactionModal = React.createClass({
|
||||
getInitialState: function() {
|
||||
return this._getInitialState(this.props);
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if (nextProps.show && !this.props.show) {
|
||||
this.setState(this._getInitialState(nextProps));
|
||||
}
|
||||
},
|
||||
handleCancel: function() {
|
||||
if (this.props.onCancel != null)
|
||||
this.props.onCancel();
|
||||
},
|
||||
handleDescriptionChange: function() {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Description = this.refs.description.getValue();
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
transaction: React.addons.update(this.state.transaction, {
|
||||
Description: {$set: this.refs.description.getValue()}
|
||||
})
|
||||
});
|
||||
},
|
||||
handleDateChange: function(date, string) {
|
||||
if (date == null)
|
||||
return;
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Date = date;
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
transaction: React.addons.update(this.state.transaction, {
|
||||
Date: {$set: date}
|
||||
})
|
||||
});
|
||||
},
|
||||
handleStatusChange: function(status) {
|
||||
if (status.hasOwnProperty('StatusId')) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Status = status.StatusId;
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
transaction: React.addons.update(this.state.transaction, {
|
||||
Status: {$set: status.StatusId}
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
handleDeleteSplit: function(split) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Splits.splice(split, 1);
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
transaction: React.addons.update(this.state.transaction, {
|
||||
Splits: {$splice: [[split, 1]]}
|
||||
})
|
||||
});
|
||||
},
|
||||
handleUpdateNumber: function(split) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Splits[split].Number = this.refs['number-'+split].getValue();
|
||||
var transaction = this.state.transaction;
|
||||
transaction.Splits[split] = React.addons.update(transaction.Splits[split], {
|
||||
Number: {$set: this.refs['number-'+split].getValue()}
|
||||
});
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
});
|
||||
},
|
||||
handleUpdateMemo: function(split) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Splits[split].Memo = this.refs['memo-'+split].getValue();
|
||||
var transaction = this.state.transaction;
|
||||
transaction.Splits[split] = React.addons.update(transaction.Splits[split], {
|
||||
Memo: {$set: this.refs['memo-'+split].getValue()}
|
||||
});
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
});
|
||||
},
|
||||
handleUpdateAccount: function(account, split) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Splits[split].AccountId = account.AccountId;
|
||||
var transaction = this.state.transaction;
|
||||
transaction.Splits[split] = React.addons.update(transaction.Splits[split], {
|
||||
AccountId: {$set: account.AccountId}
|
||||
});
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
});
|
||||
},
|
||||
handleUpdateAmount: function(split) {
|
||||
var transaction = this.state.transaction.deepCopy();
|
||||
transaction.Splits[split].Amount = new Big(this.refs['amount-'+split].getValue());
|
||||
var transaction = this.state.transaction;
|
||||
transaction.Splits[split] = React.addons.update(transaction.Splits[split], {
|
||||
Amount: {$set: new Big(this.refs['amount-'+split].getValue())}
|
||||
});
|
||||
this.setState({
|
||||
transaction: transaction
|
||||
});
|
||||
@ -152,11 +215,6 @@ const AddEditTransactionModal = React.createClass({
|
||||
if (this.props.onDelete != null)
|
||||
this.props.onDelete(this.state.transaction);
|
||||
},
|
||||
componentWillReceiveProps: function(nextProps) {
|
||||
if (nextProps.show && !this.props.show) {
|
||||
this.setState(this._getInitialState(nextProps));
|
||||
}
|
||||
},
|
||||
render: function() {
|
||||
var editing = this.props.transaction != null && this.props.transaction.isTransaction();
|
||||
var headerText = editing ? "Edit" : "Create New";
|
||||
@ -172,6 +230,7 @@ const AddEditTransactionModal = React.createClass({
|
||||
for (var i = 0; i < this.state.transaction.Splits.length; i++) {
|
||||
var self = this;
|
||||
var s = this.state.transaction.Splits[i];
|
||||
var security = this.props.security_map[this.props.account_map[s.AccountId].SecurityId];
|
||||
|
||||
// Define all closures for calling split-updating functions
|
||||
var deleteSplitFn = (function() {
|
||||
@ -223,8 +282,9 @@ const AddEditTransactionModal = React.createClass({
|
||||
includeRoot={false}
|
||||
onSelect={updateAccountFn}
|
||||
ref={"account-"+i} /></Col>
|
||||
<Col xs={2}><Input type="text"
|
||||
<Col xs={2}><AmountInput type="text"
|
||||
value={s.Amount}
|
||||
security={security}
|
||||
onChange={updateAmountFn}
|
||||
ref={"amount-"+i} /></Col>
|
||||
{deleteSplitButton}
|
||||
@ -444,7 +504,6 @@ const AccountRegister = React.createClass({
|
||||
});
|
||||
},
|
||||
deleteTransaction: function(transaction) {
|
||||
console.log("handleDeleteTransaction", transaction);
|
||||
$.ajax({
|
||||
type: "DELETE",
|
||||
dataType: "json",
|
||||
@ -542,7 +601,8 @@ const AccountRegister = React.createClass({
|
||||
onCancel={this.handleEditingCancel}
|
||||
onSubmit={this.handleUpdateTransaction}
|
||||
onDelete={this.handleDeleteTransaction}
|
||||
securities={this.props.securities}/>
|
||||
securities={this.props.securities}
|
||||
security_map={this.props.security_map}/>
|
||||
<div className="transactions-register-toolbar">
|
||||
Transactions for '{name}'
|
||||
<ButtonToolbar className="pull-right">
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react-with-addons.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/globalize/0.1.1/globalize.min.js"></script>
|
||||
<script src="static/external/react-bootstrap/react-bootstrap.min.js"></script>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user