Add onClick handlers to the schedule and transaction icons in the transaction list (#547)

packages/desktop-client/src/components/accounts/Account.js

@@ -381,10 +381,11 @@ function SelectedBalance({ selectedItems, account }) {
 
   let scheduleBalance = null;
   let scheduleData = useCachedSchedules();
+  let schedules = scheduleData ? scheduleData.schedules : [];
   let previewIds = [...selectedItems]
     .filter(id => isPreviewId(id))
     .map(id => id.slice(8));
-  for (let s of scheduleData.schedules) {
+  for (let s of schedules) {
     if (previewIds.includes(s.id)) {
       if (!account || account.id === s._account) {
         scheduleBalance += s._amount;

packages/desktop-client/src/components/accounts/TransactionList.js

@@ -11,6 +11,8 @@ import {
 } from 'loot-core/src/shared/transactions';
 import { getChangedValues, applyChanges } from 'loot-core/src/shared/util';
 
+import { usePushModal } from '../../util/router-tools';
+
 import { TransactionTable } from './TransactionsTable';
 
 // When data changes, there are two ways to update the UI:
@@ -82,6 +84,7 @@ export default function TransactionList({
 }) {
   let transactionsLatest = useRef();
   let navigate = useNavigate();
+  let pushModal = usePushModal();
 
   useLayoutEffect(() => {
     transactionsLatest.current = transactions;
@@ -150,6 +153,14 @@ export default function TransactionList({
     navigate('/payees', { selectedPayee: id });
   });
 
+  let onNavigateToTransferAccount = useCallback(accountId => {
+    navigate(`/accounts/${accountId}`);
+  });
+
+  let onNavigateToSchedule = useCallback(scheduleId => {
+    pushModal(`/schedule/edit/${scheduleId}`);
+  });
+
   return (
     <TransactionTable
       ref={tableRef}
@@ -183,6 +194,8 @@ export default function TransactionList({
       onManagePayees={onManagePayees}
       onCreatePayee={onCreatePayee}
       style={{ backgroundColor: 'white' }}
+      onNavigateToTransferAccount={onNavigateToTransferAccount}
+      onNavigateToSchedule={onNavigateToSchedule}
     />
   );
 }

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

@@ -276,19 +276,13 @@ function getPayeePretty(transaction, payee, transferAcct) {
   let { payee: payeeId } = transaction;
 
   if (transferAcct) {
-    const Icon =
-      (transaction._inverse ? -1 : 1) * transaction.amount > 0
-        ? LeftArrow2
-        : RightArrow2;
-
     return (
       <View
         style={{
           flexDirection: 'row',
           alignItems: 'center',
         }}
       >
-        <Icon width={10} height={8} style={{ marginRight: 5, flexShrink: 0 }} />
         <div
           style={{
             overflow: 'hidden',
@@ -460,37 +454,75 @@ function PayeeCell({
   );
 }
 
-function CellWithScheduleIcon({ scheduleId, children }) {
+function PayeeIcons({
+  transaction,
+  transferAccount,
+  onNavigateToTransferAccount,
+  onNavigateToSchedule,
+  children,
+}) {
+  let scheduleId = transaction.schedule;
   let scheduleData = useCachedSchedules();
+  let schedule = scheduleData
+    ? scheduleData.schedules.find(s => s.id === scheduleId)
+    : null;
 
-  let schedule = scheduleData.schedules.find(s => s.id === scheduleId);
-
-  if (schedule == null) {
-    // This must be a deleted schedule
+  if (schedule == null && transferAccount == null) {
+    // Neither a valid scheduled transaction nor a transfer.
     return children;
   }
 
-  let recurring = schedule._date && !!schedule._date.frequency;
+  let buttonStyle = {
+    width: 23,
+    height: 23,
+    color: 'inherit',
+  };
 
-  let style = {
+  let scheduleIconStyle = {
     width: 13,
     height: 13,
-    marginLeft: 5,
-    marginRight: 3,
     color: 'inherit',
   };
 
+  let transferIconStyle = {
+    width: 10,
+    height: 10,
+    color: 'inherit',
+  };
+
+  let onScheduleIconClick = () => onNavigateToSchedule(scheduleId);
+
+  let recurring = schedule && schedule._date && !!schedule._date.frequency;
+  let ScheduledIcon = () => (
+    <Button bare style={buttonStyle} onClick={onScheduleIconClick}>
+      {recurring ? (
+        <ArrowsSynchronize style={scheduleIconStyle} />
+      ) : (
+        <CalendarIcon style={scheduleIconStyle} />
+      )}
+    </Button>
+  );
+
+  let onTransferIconClick = () =>
+    !isTemporaryId(transaction.id) &&
+    onNavigateToTransferAccount(transferAccount.id);
+
+  let TransferDirectionIcon = () => (
+    <Button bare style={buttonStyle} onClick={onTransferIconClick}>
+      {(transaction._inverse ? -1 : 1) * transaction.amount > 0 ? (
+        <LeftArrow2 style={transferIconStyle} />
+      ) : (
+        <RightArrow2 style={transferIconStyle} />
+      )}
+    </Button>
+  );
+
   return (
     <View style={{ flex: 1, flexDirection: 'row', alignItems: 'stretch' }}>
-      <Cell exposed={true}>
-        {() =>
-          recurring ? (
-            <ArrowsSynchronize style={style} />
-          ) : (
-            <CalendarIcon style={{ ...style, transform: 'translateY(-1px)' }} />
-          )
-        }
-      </Cell>
+      {schedule && <Cell exposed={true}>{ScheduledIcon}</Cell>}
+      {!schedule && transferAccount && (
+        <Cell exposed={true}>{TransferDirectionIcon}</Cell>
+      )}
 
       {children}
     </View>
@@ -529,6 +561,8 @@ const Transaction = memo(function Transaction(props) {
     onManagePayees,
     onCreatePayee,
     onToggleSplit,
+    onNavigateToTransferAccount,
+    onNavigateToSchedule,
   } = props;
 
   let dispatchSelected = useSelectedDispatch();
@@ -809,14 +843,16 @@ const Transaction = memo(function Transaction(props) {
           />
         );
 
-        if (transaction.schedule) {
-          return (
-            <CellWithScheduleIcon scheduleId={transaction.schedule}>
-              {cell}
-            </CellWithScheduleIcon>
-          );
-        }
-        return cell;
+        return (
+          <PayeeIcons
+            transaction={transaction}
+            transferAccount={transferAcct}
+            onNavigateToTransferAccount={onNavigateToTransferAccount}
+            onNavigateToSchedule={onNavigateToSchedule}
+          >
+            {cell}
+          </PayeeIcons>
+        );
       })()}
 
       {isPreview ? (
@@ -1157,6 +1193,8 @@ function NewTransaction({
   onAddSplit,
   onManagePayees,
   onCreatePayee,
+  onNavigateToTransferAccount,
+  onNavigateToSchedule,
 }) {
   const error = transactions[0].error;
   const isDeposit = transactions[0].amount > 0;
@@ -1203,6 +1241,8 @@ function NewTransaction({
           onManagePayees={onManagePayees}
           onCreatePayee={onCreatePayee}
           style={{ marginTop: -1 }}
+          onNavigateToTransferAccount={onNavigateToTransferAccount}
+          onNavigateToSchedule={onNavigateToSchedule}
         />
       ))}
       <View
@@ -1255,6 +1295,22 @@ function TransactionTableInner({
   const containerRef = createRef();
   const isAddingPrev = usePrevious(props.isAdding);
 
+  let onNavigateToTransferAccount = useCallback(
+    accountId => {
+      props.onCloseAddTransaction();
+      props.onNavigateToTransferAccount(accountId);
+    },
+    [props.onCloseAddTransaction, props.onNavigateToTransferAccount],
+  );
+
+  let onNavigateToSchedule = useCallback(
+    scheduleId => {
+      props.onCloseAddTransaction();
+      props.onNavigateToSchedule(scheduleId);
+    },
+    [props.onCloseAddTransaction, props.onNavigateToSchedule],
+  );
+
   useEffect(() => {
     if (!isAddingPrev && props.isAdding) {
       newNavigator.onEdit('temp', 'date');
@@ -1347,6 +1403,8 @@ function TransactionTableInner({
           onManagePayees={props.onManagePayees}
           onCreatePayee={props.onCreatePayee}
           onToggleSplit={props.onToggleSplit}
+          onNavigateToTransferAccount={onNavigateToTransferAccount}
+          onNavigateToSchedule={onNavigateToSchedule}
         />
       </>
     );
@@ -1396,6 +1454,8 @@ function TransactionTableInner({
               onHover={onHover}
               onManagePayees={props.onManagePayees}
               onCreatePayee={props.onCreatePayee}
+              onNavigateToTransferAccount={onNavigateToTransferAccount}
+              onNavigateToSchedule={onNavigateToTransferAccount}
             />
           </View>
         )}

upcoming-release-notes/1228.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [joel-jeremy]
+---
+
+Show schedule page when clicking on the calendar icon/recurring icon and the account page when clicking on the arrow icon in transaction list's Payee column