Merge pull request #44 from dsaltares/feat/42

feat: 42 - transactions table supports filtering by multiple accounts and categories

src/components/AccountLink.tsx

@@ -10,7 +10,7 @@ export default function AccountLink({ id, name }: Props) {
   return (
     <LinkWithSearchParams
       pathname={Routes.transactions}
-      searchParam="filterByAccountId"
+      searchParam="filterByAccounts"
       searchValue={id}
     >
       {name}

src/components/CategoryChip.tsx

@@ -14,7 +14,7 @@ export default function CategoryChip({ id, name }: Props) {
   return id && name ? (
     <LinkWithSearchParams
       pathname={Routes.transactions}
-      searchParam="filterByCategoryId"
+      searchParam="filterByCategories"
       searchValue={id}
     >
       <Chip

src/components/CreateUpdateTransactionDialog.tsx

@@ -83,7 +83,9 @@ export default function CreateUpdateTransactionDialog({
       label: category.name,
       id: `${category.id}`,
     }));
-    const filteredAccountId = filtersByField.accountId;
+    const filteredAccounts = filtersByField.accounts?.split(',');
+    const filteredAccountId =
+      filteredAccounts?.length === 1 ? filteredAccounts[0] : '';
     const account = transaction
       ? accountOptions.find(
           (option) => `${transaction.accountId}` === option.id,

src/components/TransactionFilterChips.tsx

@@ -4,7 +4,7 @@ import Chip from '@mui/material/Chip';
 import PaymentIcon from '@mui/icons-material/Payment';
 import PaidIcon from '@mui/icons-material/Paid';
 import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useTheme } from '@mui/material/styles';
 import client from '@lib/client';
 import useFiltersFromUrl from '@lib/useFiltersFromUrl';
@@ -44,9 +44,30 @@ export default function TransactionFilterChips() {
     [categories],
   );
 
-  const handleClearType = () => setFilters({ type: undefined });
-  const handleClearAccount = () => setFilters({ accountId: undefined });
-  const handleClearCategory = () => setFilters({ categoryId: undefined });
+  const handleClearType = useCallback(
+    () => setFilters({ type: undefined }),
+    [setFilters],
+  );
+  const handleClearAccount = useCallback(
+    (accountId: string) =>
+      setFilters({
+        accounts: filtersByField.accounts
+          ?.split(',')
+          .filter((id) => id !== accountId)
+          .join(','),
+      }),
+    [setFilters, filtersByField],
+  );
+  const handleClearCategory = useCallback(
+    (categoryId: string) =>
+      setFilters({
+        categories: filtersByField.categories
+          ?.split(',')
+          .filter((id) => id !== categoryId)
+          .join(','),
+      }),
+    [filtersByField, setFilters],
+  );
   const handleClearDescription = () => setFilters({ description: undefined });
   const handleClearAmount = () =>
     setFilters({ minAmount: undefined, maxAmount: undefined });
@@ -112,13 +133,16 @@ export default function TransactionFilterChips() {
           onDelete={handleClearAmount}
         />
       )}
-      {!!filtersByField.accountId && accountsById[filtersByField.accountId] && (
-        <Chip
-          variant="outlined"
-          label={accountsById[filtersByField.accountId].name}
-          onDelete={handleClearAccount}
-        />
-      )}
+      {filtersByField.accounts
+        ?.split(',')
+        .map((accountId) => (
+          <Chip
+            key={`account-${accountId}`}
+            variant="outlined"
+            label={accountsById[accountId].name}
+            onDelete={() => handleClearAccount(accountId)}
+          />
+        ))}
       {!!filtersByField.type &&
         TransactionTypes.includes(filtersByField.type as TransactionType) && (
           <Chip
@@ -136,22 +160,23 @@ export default function TransactionFilterChips() {
             onDelete={handleClearType}
           />
         )}
-      {!!filtersByField.categoryId &&
-        categoriesById[filtersByField.categoryId] && (
-          <Chip
-            sx={{
-              backgroundColor: stringToColor(
-                categoriesById[filtersByField.categoryId].name,
-              ),
-              color: theme.palette.getContrastText(
-                stringToColor(categoriesById[filtersByField.categoryId].name),
-              ),
-            }}
-            variant="outlined"
-            label={categoriesById[filtersByField.categoryId].name}
-            onDelete={handleClearCategory}
-          />
-        )}
+      {filtersByField.categories?.split(',').map(
+        (categoryId) =>
+          categoriesById[categoryId] && (
+            <Chip
+              key={`category-${categoryId}`}
+              sx={{
+                backgroundColor: stringToColor(categoriesById[categoryId].name),
+                color: theme.palette.getContrastText(
+                  stringToColor(categoriesById[categoryId].name),
+                ),
+              }}
+              variant="outlined"
+              label={categoriesById[categoryId].name}
+              onDelete={() => handleClearCategory(categoryId)}
+            />
+          ),
+      )}
       {!!filtersByField.description && (
         <Chip
           variant="outlined"

src/components/TransactionFilterDialog.tsx

@@ -5,8 +5,7 @@ import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import Autocomplete from '@mui/material/Autocomplete';
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import DialogActions from '@mui/material/DialogActions';
 import Button from '@mui/material/Button';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
@@ -15,12 +14,13 @@ import { endOfDay } from 'date-fns/endOfDay';
 import createUTCDate from '@lib/createUTCDate';
 import useFiltersFromUrl from '@lib/useFiltersFromUrl';
 import type { Category } from '@server/category/types';
-import { isOptionEqualToValue } from '@lib/autoCompleteOptions';
 import { isPeriod, type Period } from '@server/types';
 import type { Account } from '@server/accounts/types';
 import type { TransactionType } from '@server/transactions/types';
 import PeriodSelect from './PeriodSelect';
 import TransactionTypeSelect from './TransactionTypeSelect';
+import AccountAutocomplete from './AccountAutocomplete';
+import CategoryAutocomplete from './CategoryAutocomplete';
 
 type Props = {
   open: boolean;
@@ -40,36 +40,19 @@ export default function TransactionFilterDialog({
   const theme = useTheme();
   const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
   const { filtersByField, setFilters } = useFiltersFromUrl();
-  const accountOptions = useMemo(
-    () =>
-      accounts.map((account) => ({
-        label: account.name,
-        id: `${account.id}`,
-      })),
-    [accounts],
+  const [selectedAccounts, setSelectedAccounts] = useState<number[]>(
+    filtersByField.accounts
+      ? filtersByField.accounts.split(',').map(Number)
+      : [],
   );
-  const categoryOptions = useMemo(
-    () =>
-      categories.map((category) => ({
-        label: category.name,
-        id: `${category.id}`,
-      })),
-    [categories],
-  );
-  const [account, setAccount] = useState(
-    () =>
-      accountOptions.find((option) => option.id === filtersByField.accountId) ||
-      null,
+  const [selectedCategories, setSelectedCategories] = useState<number[]>(
+    filtersByField.categories
+      ? filtersByField.categories.split(',').map(Number)
+      : [],
   );
   const [type, setType] = useState<TransactionType | ''>(() =>
     filtersByField.type ? (filtersByField.type as TransactionType) : '',
   );
-  const [category, setCategory] = useState(
-    () =>
-      categoryOptions.find(
-        (option) => option.id === filtersByField.categoryId,
-      ) || null,
-  );
   const [description, setDescription] = useState(filtersByField.description);
   const [period, setPeriod] = useState<Period | ''>(
     isPeriod(filtersByField.period) ? filtersByField.period : '',
@@ -94,8 +77,15 @@ export default function TransactionFilterDialog({
       minAmount,
       maxAmount,
       type: type || undefined,
-      accountId: account?.id,
-      categoryId: category?.id,
+      accounts:
+        selectedAccounts.length > 0 && selectedAccounts.length < accounts.length
+          ? selectedAccounts.join(',')
+          : undefined,
+      categories:
+        selectedCategories.length > 0 &&
+        selectedCategories.length < categories.length
+          ? selectedCategories.join(',')
+          : undefined,
       description: description || undefined,
     });
     onClose();
@@ -188,22 +178,16 @@ export default function TransactionFilterDialog({
               }}
             />
           </Stack>
-          <Autocomplete
-            id="account-autocomplete"
-            value={account}
-            onChange={(_event, newValue) => setAccount(newValue)}
-            options={accountOptions}
-            isOptionEqualToValue={isOptionEqualToValue}
-            renderInput={(params) => <TextField {...params} label="Account" />}
+          <AccountAutocomplete
+            accounts={accounts}
+            selected={selectedAccounts}
+            onChange={setSelectedAccounts}
           />
           <TransactionTypeSelect value={type} onChange={setType} clearable />
-          <Autocomplete
-            id="category-autocomplete"
-            value={category}
-            onChange={(_event, newValue) => setCategory(newValue)}
-            options={categoryOptions}
-            isOptionEqualToValue={isOptionEqualToValue}
-            renderInput={(params) => <TextField {...params} label="Category" />}
+          <CategoryAutocomplete
+            categories={categories}
+            selected={selectedCategories}
+            onChange={setSelectedCategories}
           />
           <TextField
             label="Description"

src/lib/routes.ts

@@ -4,9 +4,9 @@ const Routes = {
   transactions: '/transactions',
   recentTransactions: '/transactions?filterByPeriod=lastMonth',
   transactionsForCategory: (categoryId: number) =>
-    `/transactions?filterByCategoryId=${categoryId}&filterByPeriod=lastMonth`,
+    `/transactions?filterByCategories=${categoryId}&filterByPeriod=lastMonth`,
   transactionsForAccount: (accountId: number) =>
-    `/transactions?filterByAccountId=${accountId}&filterByPeriod=lastMonth`,
+    `/transactions?filterByAccounts=${accountId}&filterByPeriod=lastMonth`,
   accounts: '/accounts',
   insights: '/insights?filterByPeriod=lastMonth',
   budget: '/budget',

src/routes/TransactionsPage.tsx

@@ -62,13 +62,9 @@ export default function TransactionsPage() {
       maxAmount: filtersByField.maxAmount
         ? parseFloat(filtersByField.maxAmount)
         : undefined,
-      accountId: filtersByField.accountId
-        ? parseInt(filtersByField.accountId, 10)
-        : undefined,
+      accounts: filtersByField.accounts?.split(',').map(Number),
       type: filtersByField.type as TransactionType | undefined,
-      categoryId: filtersByField.categoryId
-        ? parseInt(filtersByField.categoryId, 10)
-        : undefined,
+      categories: filtersByField.categories?.split(',').map(Number),
       description: filtersByField.description,
     });
   const { data, isLoading: isLoadingAccounts } = client.getAccounts.useQuery();

src/server/transactions/getTransactions.ts

@@ -12,9 +12,9 @@ const getTransactions: Procedure<
     date,
     minAmount,
     maxAmount,
-    accountId,
+    accounts,
     type,
-    categoryId,
+    categories,
     description,
   },
 }) => {
@@ -31,8 +31,8 @@ const getTransactions: Procedure<
     .where('deletedAt', 'is', null)
     .$narrowType<{ numAttachments: NotNull }>();
 
-  if (accountId) {
-    query = query.where('accountId', 'is', accountId);
+  if (accounts && accounts.length > 0) {
+    query = query.where('accountId', 'in', accounts);
   }
 
   const dateFilter = getDateWhereFromFilter(date);
@@ -62,8 +62,8 @@ const getTransactions: Procedure<
     query = query.where('type', 'is', type);
   }
 
-  if (categoryId) {
-    query = query.where('categoryId', 'is', categoryId);
+  if (categories && categories.length > 0) {
+    query = query.where('categoryId', 'in', categories);
   }
 
   if (description) {

src/server/transactions/types.ts

@@ -21,9 +21,9 @@ export const GetTransactionsInput = z.object({
   date: DateFilter.optional(),
   minAmount: z.number().optional(),
   maxAmount: z.number().optional(),
-  accountId: z.number().optional(),
+  accounts: z.number().array().optional(),
   type: TransactionType.optional(),
-  categoryId: z.number().optional(),
+  categories: z.number().array().optional(),
   description: z.string().optional(),
 });
 export const GetTransactionsOutput = z.array(Transaction);