diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js index c0288def8a9..6ede1051a0b 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.js @@ -1345,7 +1345,13 @@ const Transaction = memo(function Transaction(props) { ); }); -function TransactionError({ error, isDeposit, onAddSplit, style }) { +function TransactionError({ + error, + isDeposit, + onAddSplit, + style, + onBalanceLastSplit, +}) { switch (error.type) { case 'SplitTransactionError': if (error.version === 1) { @@ -1361,17 +1367,25 @@ function TransactionError({ error, isDeposit, onAddSplit, style }) { > Amount left:{' '} - + @@ -1433,6 +1447,7 @@ function NewTransaction({ onCreatePayee, onNavigateToTransferAccount, onNavigateToSchedule, + onBalanceLastSplit, balance, }) { const error = transactions[0].error; @@ -1503,6 +1518,7 @@ function NewTransaction({ onAddSplit(transactions[0].id)} /> ) : ( @@ -1527,6 +1543,7 @@ function TransactionTableInner({ newNavigator, renderEmpty, onScroll, + onBalanceLastSplit, ...props }) { const containerRef = createRef(); @@ -1609,6 +1626,7 @@ function TransactionTableInner({ error={error} isDeposit={isChildDeposit} onAddSplit={() => props.onAddSplit(trans.id)} + onBalanceLastSplit={onBalanceLastSplit} /> )} @@ -1701,6 +1719,7 @@ function TransactionTableInner({ onManagePayees={props.onManagePayees} onCreatePayee={props.onCreatePayee} onNavigateToTransferAccount={onNavigateToTransferAccount} + onBalanceLastSplit={onBalanceLastSplit} onNavigateToSchedule={onNavigateToSchedule} balance={ props.transactions?.length > 0 @@ -2091,6 +2110,56 @@ export let TransactionTable = forwardRef((props, ref) => { [splitsExpanded.dispatch], ); + let onBalanceLastSplit = useCallback(async () => { + let { tableNavigator, newTransactions } = latestState.current; + + if (newTransactions === null) { + let editingTransaction = latestState.current.transactions.filter( + t => t.id === tableNavigator.editingId, + ); + newTransactions = latestState.current.transactions.filter( + t => t.parent_id === editingTransaction.parent_id, + ); + } + + const parentTransaction = newTransactions[0]; + const allSubTransactions = newTransactions.filter( + t => t.parent_id === parentTransaction.id, + ); + + const emptyTransactions = allSubTransactions.filter(t => t.amount === 0); + const remainingAmount = + parentTransaction.amount - + allSubTransactions.reduce((acc, t) => acc + t.amount, 0); + + const amountPerTransaction = Math.floor( + remainingAmount / emptyTransactions.length, + ); + let remainingCents = + remainingAmount - amountPerTransaction * emptyTransactions.length; + + let amounts = new Array(emptyTransactions.length).fill( + amountPerTransaction, + ); + for (let amountIndex in amounts) { + if (remainingCents === 0) break; + + amounts[amountIndex] += 1; + remainingCents--; + } + + for (const transactionIndex in emptyTransactions) { + await onSave({ + ...emptyTransactions[transactionIndex], + amount: amounts[transactionIndex], + error: null, + }); + } + + // cancel focused field + // tableNavigator.onEdit(null, null); + }, [latestState]); + return ( { newTransactions={newTransactions} tableNavigator={tableNavigator} newNavigator={newNavigator} + onBalanceLastSplit={onBalanceLastSplit} /> ); }); diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.js b/packages/desktop-client/src/components/transactions/TransactionsTable.test.js index 63ec402a49c..22083e6a8aa 100644 --- a/packages/desktop-client/src/components/transactions/TransactionsTable.test.js +++ b/packages/desktop-client/src/components/transactions/TransactionsTable.test.js @@ -677,7 +677,9 @@ describe('Transactions', () => { await waitForAutocomplete(); await userEvent.click( - container.querySelector('[data-testid="transaction-error"] button'), + container.querySelector( + '[data-testid="transaction-error"] [data-testid="add-split-button"]', + ), ); input = await editNewField(container, 'debit', 1); @@ -825,7 +827,9 @@ describe('Transactions', () => { // Add another split transaction and make sure everything is // updated properly - await userEvent.click(toolbar.querySelector('button')); + await userEvent.click( + toolbar.querySelector('[data-testid="add-split-button"]'), + ); expect(getTransactions().length).toBe(7); expect(getTransactions()[2].amount).toBe(0); expectErrorToExist(getTransactions().slice(0, 3)); @@ -919,7 +923,9 @@ describe('Transactions', () => { await userEvent.click(splitButton); await waitForAutocomplete(); await userEvent.click( - container.querySelector('[data-testid="transaction-error"] button'), + container.querySelector( + '[data-testid="transaction-error"] [data-testid="add-split-button"]', + ), ); expect(getTransactions().length).toBe(7); diff --git a/upcoming-release-notes/1271.md b/upcoming-release-notes/1271.md new file mode 100644 index 00000000000..760a186338f --- /dev/null +++ b/upcoming-release-notes/1271.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [Shazib,NikxDa] +--- + +Allow clicking on 'Amount Left' value to auto-fill the last empty split(s).