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).