diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
index c94190e647003083e23ef29526b8990553490ddc..9f1c91b53395f00a0199f309bf26e860f43e140c 100644
--- a/packages/desktop-client/src/components/accounts/Account.js
+++ b/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;
diff --git a/packages/desktop-client/src/components/accounts/TransactionList.js b/packages/desktop-client/src/components/accounts/TransactionList.js
index f31eae02f44a3a083df61026b168f71ad7a142b8..0ad01b0fb96880cf4833e90c741502fcf381d1ef 100644
--- a/packages/desktop-client/src/components/accounts/TransactionList.js
+++ b/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}
/>
);
}
diff --git a/packages/desktop-client/src/components/accounts/TransactionsTable.js b/packages/desktop-client/src/components/accounts/TransactionsTable.js
index c0482a777fd2ca0c349f05a4943f726b16759c5d..e6a26461fab0c6d0b20e0e17de3df15dc3e2908f 100644
--- a/packages/desktop-client/src/components/accounts/TransactionsTable.js
+++ b/packages/desktop-client/src/components/accounts/TransactionsTable.js
@@ -276,11 +276,6 @@ 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={{
@@ -288,7 +283,6 @@ function getPayeePretty(transaction, payee, transferAcct) {
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>
)}
diff --git a/upcoming-release-notes/1228.md b/upcoming-release-notes/1228.md
new file mode 100644
index 0000000000000000000000000000000000000000..c24ab6cb51728a0b4371b96da75e9d5c6ff35ea9
--- /dev/null
+++ b/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