Show activity updates (actualbudget#2408)

* Show activity changes

* notes

* adjust filter loading

* switch back

* adjust test

* lint fix

* budget test

* lint fix

* Filtered Balance

* flicker fix

* VRT updates

* remove test variables

* default category

* categoryId separated

packages/desktop-client/e2e/budget.test.js

@@ -59,12 +59,9 @@ test.describe('Budget', () => {
   });
 
   test('clicking on spent amounts opens a transaction page', async () => {
-    const categoryName = await budgetPage.getCategoryNameForRow(1);
     const accountPage = await budgetPage.clickOnSpentAmountForRow(1);
     expect(page.url()).toContain('/accounts');
-    expect(await accountPage.accountName.textContent()).toMatch(
-      new RegExp(String.raw`${categoryName} \(\w+ \d+\)`),
-    );
+    expect(await accountPage.accountName.textContent()).toMatch('All Accounts');
     await page.getByRole('button', { name: 'Back' }).click();
   });
 });

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

@@ -204,7 +204,7 @@ class AccountInternal extends PureComponent {
 
     this.state = {
       search: '',
-      filters: [],
+      filters: props.conditions || [],
       loading: true,
       workingHard: false,
       reconcileAmount: null,
@@ -280,7 +280,7 @@ class AccountInternal extends PureComponent {
     // Important that any async work happens last so that the
     // listeners are set up synchronously
     await this.props.initiallyLoadPayees();
-    await this.fetchTransactions();
+    await this.fetchTransactions(this.state.filters);
 
     // If there is a pending undo, apply it immediately (this happens
     // when an undo changes the location to this page)
@@ -337,29 +337,20 @@ class AccountInternal extends PureComponent {
     this.paged?.run();
   };
 
-  fetchTransactions = () => {
+  fetchTransactions = filters => {
     const query = this.makeRootQuery();
     this.rootQuery = this.currentQuery = query;
-    this.updateQuery(query);
+    if (filters) this.applyFilters(filters);
+    else this.updateQuery(query);
 
     if (this.props.accountId) {
       this.props.markAccountRead(this.props.accountId);
     }
   };
 
   makeRootQuery = () => {
-    const locationState = this.props.location.state;
     const accountId = this.props.accountId;
 
-    if (locationState && locationState.filter) {
-      return q('transactions')
-        .options({ splits: 'grouped' })
-        .filter({
-          'account.offbudget': false,
-          ...locationState.filter,
-        });
-    }
-
     return queries.makeTransactionsQuery(accountId);
   };
 
@@ -1603,6 +1594,10 @@ export function Account() {
   const modalShowing = useSelector(state => state.modals.modalStack.length > 0);
   const accountsSyncing = useSelector(state => state.account.accountsSyncing);
   const lastUndoState = useSelector(state => state.app.lastUndoState);
+  const conditions =
+    location.state && location.state.conditions
+      ? location.state.conditions
+      : [];
 
   const state = {
     newTransactions,
@@ -1619,6 +1614,7 @@ export function Account() {
     modalShowing,
     accountsSyncing,
     lastUndoState,
+    conditions,
   };
 
   const dispatch = useDispatch();
@@ -1629,21 +1625,12 @@ export function Account() {
   );
 
   const transform = useMemo(() => {
-    let filterByAccount = queries.getAccountFilter(params.id, '_account');
-    let filterByPayee = queries.getAccountFilter(
+    const filterByAccount = queries.getAccountFilter(params.id, '_account');
+    const filterByPayee = queries.getAccountFilter(
       params.id,
       '_payee.transfer_acct',
     );
 
-    // Never show schedules on these pages
-    if (
-      (location.state && location.state.filter) ||
-      params.id === 'uncategorized'
-    ) {
-      filterByAccount = { id: null };
-      filterByPayee = { id: null };
-    }
-
     return q => {
       q = q.filter({
         $and: [{ '_account.closed': false }],
@@ -1664,7 +1651,7 @@ export function Account() {
           {...actionCreators}
           modalShowing={state.modalShowing}
           accountId={params.id}
-          categoryId={location?.state?.filter?.category}
+          categoryId={location?.state?.categoryId}
           location={location}
           filtersList={filtersList}
         />

packages/desktop-client/src/components/accounts/Balance.jsx

@@ -104,6 +104,20 @@ function SelectedBalance({ selectedItems, account }) {
   );
 }
 
+function FilteredBalance({ selectedItems }) {
+  const balance = selectedItems
+    .filter(item => !item._unmatched && !item.is_parent)
+    .reduce((sum, product) => sum + product.amount, 0);
+
+  return (
+    <DetailedBalance
+      name="Filtered balance:"
+      balance={balance}
+      isExactBalance={true}
+    />
+  );
+}
+
 function MoreBalances({ balanceQuery }) {
   const cleared = useSheetValue({
     name: balanceQuery.name + '-cleared',
@@ -127,6 +141,8 @@ export function Balances({
   showExtraBalances,
   onToggleExtraBalances,
   account,
+  filteredItems,
+  transactions,
 }) {
   const selectedItems = useSelectedItems();
 
@@ -184,6 +200,9 @@ export function Balances({
       {selectedItems.size > 0 && (
         <SelectedBalance selectedItems={selectedItems} account={account} />
       )}
+      {filteredItems.length > 0 && (
+        <FilteredBalance selectedItems={transactions} />
+      )}
     </View>
   );
 }

packages/desktop-client/src/components/accounts/Header.jsx

@@ -212,6 +212,8 @@ export function AccountHeader({
           showExtraBalances={showExtraBalances}
           onToggleExtraBalances={onToggleExtraBalances}
           account={account}
+          filteredItems={filters}
+          transactions={transactions}
         />
 
         <Stack

packages/desktop-client/src/components/budget/BudgetTable.jsx

@@ -126,8 +126,8 @@ class BudgetTableInner extends Component {
     }
   };
 
-  onShowActivity = (catName, catId, monthIndex) => {
-    this.props.onShowActivity(catName, catId, this.resolveMonth(monthIndex));
+  onShowActivity = (catId, monthIndex) => {
+    this.props.onShowActivity(catId, this.resolveMonth(monthIndex));
   };
 
   onBudgetAction = (monthIndex, type, args) => {

packages/desktop-client/src/components/budget/ExpenseCategory.tsx

@@ -29,7 +29,7 @@ type ExpenseCategoryProps = {
   onDelete?: ComponentProps<typeof SidebarCategory>['onDelete'];
   onDragChange: OnDragChangeCallback<CategoryEntity>;
   onBudgetAction: (idx: number, action: string, arg: unknown) => void;
-  onShowActivity: (name: string, id: string, idx: number) => void;
+  onShowActivity: (id: string, idx: number) => void;
   onReorder: OnDropCallback;
 };
 

packages/desktop-client/src/components/budget/IncomeCategory.tsx

@@ -27,7 +27,7 @@ type IncomeCategoryProps = {
   onDragChange: OnDragChangeCallback<CategoryEntity>;
   onBudgetAction: (idx: number, action: string, arg: unknown) => void;
   onReorder: OnDropCallback;
-  onShowActivity: (name: string, id: string, idx: number) => void;
+  onShowActivity: (id: string, idx: number) => void;
 };
 
 export function IncomeCategory({

packages/desktop-client/src/components/budget/index.tsx

@@ -297,18 +297,22 @@ function BudgetInner(props: BudgetProps) {
     dispatch(applyBudgetAction(month, type, args));
   };
 
-  const onShowActivity = (categoryName, categoryId, month) => {
+  const onShowActivity = (categoryId, month) => {
+    const conditions = [
+      { field: 'category', op: 'is', value: categoryId, type: 'id' },
+      {
+        field: 'date',
+        op: 'is',
+        value: month,
+        options: { month: true },
+        type: 'date',
+      },
+    ];
     navigate('/accounts', {
       state: {
         goBack: true,
-        filterName: `${categoryName} (${monthUtils.format(
-          month,
-          'MMMM yyyy',
-        )})`,
-        filter: {
-          category: categoryId,
-          date: { $transform: '$month', $eq: month },
-        },
+        conditions,
+        categoryId,
       },
     });
   };

packages/desktop-client/src/components/budget/report/ReportComponents.tsx

@@ -147,7 +147,7 @@ type CategoryMonthProps = {
   editing: boolean;
   onEdit: (id: string | null, idx?: number) => void;
   onBudgetAction: (idx: number, action: string, arg: unknown) => void;
-  onShowActivity: (name: string, id: string, idx: number) => void;
+  onShowActivity: (id: string, idx: number) => void;
 };
 export const CategoryMonth = memo(function CategoryMonth({
   monthIndex,
@@ -301,7 +301,7 @@ export const CategoryMonth = memo(function CategoryMonth({
       <Field name="spent" width="flex" style={{ textAlign: 'right' }}>
         <span
           data-testid="category-month-spent"
-          onClick={() => onShowActivity(category.name, category.id, monthIndex)}
+          onClick={() => onShowActivity(category.id, monthIndex)}
         >
           <CellValue
             binding={reportBudget.catSumAmount(category.id)}

packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx

@@ -143,7 +143,7 @@ type ExpenseCategoryMonthProps = {
   editing: boolean;
   onEdit: (id: string | null, idx?: number) => void;
   onBudgetAction: (idx: number, action: string, arg?: unknown) => void;
-  onShowActivity: (name: string, id: string, idx: number) => void;
+  onShowActivity: (id: string, idx: number) => void;
 };
 export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   monthIndex,
@@ -297,7 +297,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       <Field name="spent" width="flex" style={{ textAlign: 'right' }}>
         <span
           data-testid="category-month-spent"
-          onClick={() => onShowActivity(category.name, category.id, monthIndex)}
+          onClick={() => onShowActivity(category.id, monthIndex)}
         >
           <CellValue
             binding={rolloverBudget.catSumAmount(category.id)}
@@ -367,7 +367,7 @@ type IncomeCategoryMonthProps = {
   category: { id: string; name: string };
   isLast: boolean;
   monthIndex: number;
-  onShowActivity: (name: string, id: string, idx: number) => void;
+  onShowActivity: (id: string, idx: number) => void;
 };
 export function IncomeCategoryMonth({
   category,
@@ -386,9 +386,7 @@ export function IncomeCategoryMonth({
           ...(isLast && { borderBottomWidth: 0 }),
         }}
       >
-        <span
-          onClick={() => onShowActivity(category.name, category.id, monthIndex)}
-        >
+        <span onClick={() => onShowActivity(category.id, monthIndex)}>
           <CellValue
             binding={rolloverBudget.catSumAmount(category.id)}
             type="financial"

upcoming-release-notes/2408.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [carkom]
+---
+
+Updating the way the "budget" page links to the "accounts" page when clicking on the "spent" column items to use the filters functionality