From 01f0f9e68f1e2faf0e3ee45f4339a1a2c144adf8 Mon Sep 17 00:00:00 2001 From: Aaron Lindsay Date: Wed, 26 Aug 2015 07:16:57 -0400 Subject: [PATCH] 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. --- static/account_register.js | 116 ++++++++++++++++++++++++++++--------- static/index.html | 2 +- 2 files changed, 89 insertions(+), 29 deletions(-) diff --git a/static/account_register.js b/static/account_register.js index 6df7939..e0c8749 100644 --- a/static/account_register.js +++ b/static/account_register.js @@ -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 ( + + ); + } +}); + 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} /> - {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}/>
Transactions for '{name}' diff --git a/static/index.html b/static/index.html index 6989126..78758f4 100644 --- a/static/index.html +++ b/static/index.html @@ -9,7 +9,7 @@ - +