Show/hide reconciled transactions in the account view (#2542)

* Show/hide reconciled transactions * Adding release note * Fixing lint issues * Filters should still apply after hiding/showing reconciled * Using fetch transactions with filter parameter
actualbudget · Apr 4, 2024 · 66dc593 · 66dc593
1 parent 8b34ba3
commit 66dc593
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Account.jsx b/packages/desktop-client/src/components/accounts/Account.jsx
@@ -213,6 +213,7 @@ class AccountInternal extends PureComponent {
       showBalances: props.showBalances,
       balances: null,
       showCleared: props.showCleared,
+      showReconciled: props.showReconciled,
       editingName: false,
       isAdding: false,
       latestDate: null,
@@ -359,6 +360,11 @@ class AccountInternal extends PureComponent {
       this.paged.unsubscribe();
     }
 
+    // Filter out reconciled transactions if necessary.
+    if (!this.state.showReconciled) {
+      query = query.filter({ reconciled: { $eq: false } });
+    }
+
     this.paged = pagedQuery(
       query.select('*'),
       async (data, prevData) => {
@@ -420,6 +426,7 @@ class AccountInternal extends PureComponent {
           showBalances: nextProps.showBalances,
           balances: null,
           showCleared: nextProps.showCleared,
+          showReconciled: nextProps.showReconciled,
           reconcileAmount: null,
         },
         () => {
@@ -651,6 +658,19 @@ class AccountInternal extends PureComponent {
           this.setState({ showCleared: true });
         }
         break;
+      case 'toggle-reconciled':
+        if (this.state.showReconciled) {
+          this.props.savePrefs({ ['hide-reconciled-' + accountId]: true });
+          this.setState({ showReconciled: false }, () =>
+            this.fetchTransactions(this.state.filters),
+          );
+        } else {
+          this.props.savePrefs({ ['hide-reconciled-' + accountId]: false });
+          this.setState({ showReconciled: true }, () =>
+            this.fetchTransactions(this.state.filters),
+          );
+        }
+        break;
       default:
     }
   };
@@ -1404,6 +1424,7 @@ class AccountInternal extends PureComponent {
       showBalances,
       balances,
       showCleared,
+      showReconciled,
     } = this.state;
 
     const account = accounts.find(account => account.id === accountId);
@@ -1462,6 +1483,7 @@ class AccountInternal extends PureComponent {
                 showBalances={showBalances}
                 showExtraBalances={showExtraBalances}
                 showCleared={showCleared}
+                showReconciled={showReconciled}
                 showEmptyMessage={showEmptyMessage}
                 balanceQuery={balanceQuery}
                 canCalculateBalance={this.canCalculateBalance}
@@ -1605,6 +1627,7 @@ export function Account() {
   const [expandSplits] = useLocalPref('expand-splits');
   const [showBalances] = useLocalPref(`show-balances-${params.id}`);
   const [hideCleared] = useLocalPref(`hide-cleared-${params.id}`);
+  const [hideReconciled] = useLocalPref(`hide-reconciled-${params.id}`);
   const [showExtraBalances] = useLocalPref(
     `show-extra-balances-${params.id || 'all-accounts'}`,
   );
@@ -1626,6 +1649,7 @@ export function Account() {
     expandSplits,
     showBalances,
     showCleared: !hideCleared,
+    showReconciled: !hideReconciled,
     showExtraBalances,
     payees,
     modalShowing,

diff --git a/packages/desktop-client/src/components/accounts/Header.jsx b/packages/desktop-client/src/components/accounts/Header.jsx
@@ -46,6 +46,7 @@ export function AccountHeader({
   showBalances,
   showExtraBalances,
   showCleared,
+  showReconciled,
   showEmptyMessage,
   balanceQuery,
   reconcileAmount,
@@ -323,6 +324,7 @@ export function AccountHeader({
                   isSorted={isSorted}
                   showBalances={showBalances}
                   showCleared={showCleared}
+                  showReconciled={showReconciled}
                   onMenuSelect={item => {
                     setMenuOpen(false);
                     onMenuSelect(item);
@@ -382,6 +384,7 @@ function AccountMenu({
   showBalances,
   canShowBalances,
   showCleared,
+  showReconciled,
   onClose,
   isSorted,
   onReconcile,
@@ -419,6 +422,11 @@ function AccountMenu({
             name: 'toggle-cleared',
             text: (showCleared ? 'Hide' : 'Show') + ' “cleared” checkboxes',
           },
+          {
+            name: 'toggle-reconciled',
+            text:
+              (showReconciled ? 'Hide' : 'Show') + ' reconciled transactions',
+          },
           { name: 'export', text: 'Export' },
           { name: 'reconcile', text: 'Reconcile' },
           account &&

diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
@@ -26,6 +26,7 @@ export type LocalPrefs = Partial<
     'expand-splits': boolean;
     [key: `show-extra-balances-${string}`]: boolean;
     [key: `hide-cleared-${string}`]: boolean;
+    [key: `hide-reconciled-${string}`]: boolean;
     'budget.collapsed': string[];
     'budget.summaryCollapsed': boolean;
     'budget.showHiddenCategories': boolean;

diff --git a/upcoming-release-notes/2542.md b/upcoming-release-notes/2542.md
@@ -0,0 +1,6 @@
+---
+category: Features
+authors: [davidkus]
+---
+
+Adding menu item to show/hide reconciled transactions in the account view.