[WIP] Auto-fill empty split transaction with outstanding amount on click.

packages/desktop-client/src/components/transactions/TransactionsTable.js

@@ -1296,7 +1296,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) {
@@ -1312,17 +1318,25 @@ function TransactionError({ error, isDeposit, onAddSplit, style }) {
           >
             <Text>
               Amount left:{' '}
-              <Text style={{ fontWeight: 500 }}>
+              <Button
+                bare
+                onClick={onBalanceLastSplit}
+                style={{
+                  display: 'inline',
+                  fontWeight: 500,
+                }}
+              >
                 {integerToCurrency(
                   isDeposit ? error.difference : -error.difference,
                 )}
-              </Text>
+              </Button>
             </Text>
             <View style={{ flex: 1 }} />
             <Button
               type="primary"
               style={{ marginLeft: 15, padding: '4px 10px' }}
               onClick={onAddSplit}
+              data-testid="add-split-button"
             >
               Add Split
             </Button>
@@ -1384,6 +1398,7 @@ function NewTransaction({
   onCreatePayee,
   onNavigateToTransferAccount,
   onNavigateToSchedule,
+  onBalanceLastSplit,
   balance,
 }) {
   const error = transactions[0].error;
@@ -1454,6 +1469,7 @@ function NewTransaction({
           <TransactionError
             error={error}
             isDeposit={isDeposit}
+            onBalanceLastSplit={onBalanceLastSplit}
             onAddSplit={() => onAddSplit(transactions[0].id)}
           />
         ) : (
@@ -1478,6 +1494,7 @@ function TransactionTableInner({
   newNavigator,
   renderEmpty,
   onScroll,
+  onBalanceLastSplit,
   ...props
 }) {
   const containerRef = createRef();
@@ -1651,6 +1668,7 @@ function TransactionTableInner({
               onManagePayees={props.onManagePayees}
               onCreatePayee={props.onCreatePayee}
               onNavigateToTransferAccount={onNavigateToTransferAccount}
+              onBalanceLastSplit={onBalanceLastSplit}
               onNavigateToSchedule={onNavigateToSchedule}
               balance={
                 props.transactions?.length > 0
@@ -2041,6 +2059,46 @@ export let TransactionTable = forwardRef((props, ref) => {
     [splitsExpanded.dispatch],
   );
 
+  let onBalanceLastSplit = useCallback(async () => {
+    const { tableNavigator, newTransactions } = latestState.current;
+    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],
+      });
+    }
+
+    // cancel focused field
+    tableNavigator.onEdit(null, null);
+  }, [latestState]);
+
   return (
     <TransactionTableInner
       tableRef={mergedRef}
@@ -2061,6 +2119,7 @@ export let TransactionTable = forwardRef((props, ref) => {
       newTransactions={newTransactions}
       tableNavigator={tableNavigator}
       newNavigator={newNavigator}
+      onBalanceLastSplit={onBalanceLastSplit}
     />
   );
 });

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

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