useTransactionsFilter hook

actualbudget · Dec 11, 2024 · 80c9f88 · 80c9f88
1 parent 62d1f16
commit 80c9f88
Show file tree

Hide file tree

Showing 19 changed files with 428 additions and 285 deletions.
diff --git a/packages/desktop-client/src/components/accounts/Account.tsx b/packages/desktop-client/src/components/accounts/Account.tsx
diff --git a/packages/desktop-client/src/components/accounts/Header.tsx b/packages/desktop-client/src/components/accounts/Header.tsx
@@ -43,7 +43,6 @@ import { Stack } from '../common/Stack';
 import { View } from '../common/View';
 import { FilterButton } from '../filters/FiltersMenu';
 import { FiltersStack } from '../filters/FiltersStack';
-import { type SavedFilter } from '../filters/SavedFilterMenuButton';
 import { NotesButton } from '../NotesButton';
 import { SelectedTransactionsButton } from '../transactions/SelectedTransactionsButton';
 
@@ -59,8 +58,8 @@ type AccountHeaderProps = {
   accountId: AccountEntity['id'] | string;
   accountName: string;
   account: AccountEntity;
-  filterId?: SavedFilter;
-  savedFilters: TransactionFilterEntity[];
+  activeFilter?: TransactionFilterEntity;
+  dirtyFilter?: TransactionFilterEntity;
   accountsSyncing: string[];
   failedAccounts: AccountSyncSidebarProps['failedAccounts'];
   accounts: AccountEntity[];
@@ -71,15 +70,12 @@ type AccountHeaderProps = {
   showReconciled: boolean;
   showEmptyMessage: boolean;
   balanceQuery: Query;
-  filteredQuery: Query;
   reconcileAmount: number;
-  canCalculateBalance: () => boolean;
   showFilteredBalance: boolean;
   filteredBalance: number;
   isSorted: boolean;
-  search: string;
-  filterConditions: RuleConditionEntity[];
-  filterConditionsOp: 'and' | 'or';
+  filterConditions: readonly RuleConditionEntity[];
+  filterConditionsOp: RuleConditionEntity['conditionsOp'];
   onSearch: (newSearch: string) => void;
   onAddTransaction: () => void;
   onShowTransactions: ComponentProps<
@@ -136,8 +132,8 @@ export function AccountHeader({
   accountId,
   accountName,
   account,
-  filterId,
-  savedFilters,
+  activeFilter,
+  dirtyFilter,
   accountsSyncing,
   failedAccounts,
   accounts,
@@ -147,14 +143,11 @@ export function AccountHeader({
   showCleared,
   showReconciled,
   showEmptyMessage,
-  // transactionsQuery,
   balanceQuery,
   reconcileAmount,
-  // canCalculateBalance,
   showFilteredBalance,
   filteredBalance,
   isSorted,
-  // search,
   filterConditions,
   filterConditionsOp,
   onSearch,
@@ -515,8 +508,8 @@ export function AccountHeader({
             onDeleteFilter={onDeleteFilter}
             onClearFilters={onClearFilters}
             onReloadSavedFilter={onReloadSavedFilter}
-            filterId={filterId}
-            savedFilters={savedFilters}
+            filter={activeFilter}
+            dirtyFilter={dirtyFilter}
             onConditionsOpChange={onConditionsOpChange}
           />
         )}

diff --git a/packages/desktop-client/src/components/filters/AppliedFilters.tsx b/packages/desktop-client/src/components/filters/AppliedFilters.tsx
@@ -8,14 +8,16 @@ import { ConditionsOpMenu } from './ConditionsOpMenu';
 import { FilterExpression } from './FilterExpression';
 
 type AppliedFiltersProps = {
-  conditions: RuleConditionEntity[];
+  conditions: readonly RuleConditionEntity[];
   onUpdate: (
-    filter: RuleConditionEntity,
-    newFilter: RuleConditionEntity,
+    filterCondition: RuleConditionEntity,
+    newFilterCondition: RuleConditionEntity,
+  ) => void;
+  onDelete: (filterCondition: RuleConditionEntity) => void;
+  conditionsOp: RuleConditionEntity['conditionsOp'];
+  onConditionsOpChange: (
+    filterConditionsOp: RuleConditionEntity['conditionsOp'],
   ) => void;
-  onDelete: (filter: RuleConditionEntity) => void;
-  conditionsOp: string;
-  onConditionsOpChange: (value: 'and' | 'or') => void;
 };
 
 export function AppliedFilters({

diff --git a/packages/desktop-client/src/components/filters/ConditionsOpMenu.tsx b/packages/desktop-client/src/components/filters/ConditionsOpMenu.tsx
@@ -12,9 +12,9 @@ export function ConditionsOpMenu({
   onChange,
   conditions,
 }: {
-  conditionsOp: string;
-  onChange: (value: 'and' | 'or') => void;
-  conditions: RuleConditionEntity[];
+  conditionsOp: RuleConditionEntity['conditionsOp'];
+  onChange: (op: RuleConditionEntity['conditionsOp']) => void;
+  conditions: readonly RuleConditionEntity[];
 }) {
   return conditions.length > 1 ? (
     <Text style={{ color: theme.pageText, marginTop: 11, marginRight: 5 }}>

diff --git a/packages/desktop-client/src/components/filters/FilterMenu.tsx b/packages/desktop-client/src/components/filters/FilterMenu.tsx
@@ -1,15 +1,17 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { Menu } from '../common/Menu';
+import { type TransactionFilterEntity } from 'loot-core/types/models';
 
-import { type SavedFilter } from './SavedFilterMenuButton';
+import { Menu } from '../common/Menu';
 
 export function FilterMenu({
-  filterId,
+  filter,
+  dirtyFilter,
   onFilterMenuSelect,
 }: {
-  filterId?: SavedFilter;
+  filter?: TransactionFilterEntity;
+  dirtyFilter?: TransactionFilterEntity;
   onFilterMenuSelect: (item: string) => void;
 }) {
   const { t } = useTranslation();
@@ -20,12 +22,12 @@ export function FilterMenu({
         onFilterMenuSelect(item);
       }}
       items={
-        !filterId?.id
+        !filter?.id
           ? [
               { name: 'save-filter', text: t('Save new filter') },
-              { name: 'clear-filter', text: t('Clear all conditions') },
+              { name: 'clear-filter', text: t('Clear all filter conditions') },
             ]
-          : filterId?.id !== null && filterId?.status === 'saved'
+          : filter?.id !== null && !dirtyFilter
             ? [
                 { name: 'rename-filter', text: t('Rename') },
                 { name: 'delete-filter', text: t('Delete') },
@@ -35,16 +37,22 @@ export function FilterMenu({
                   text: t('Save new filter'),
                   disabled: true,
                 },
-                { name: 'clear-filter', text: t('Clear all conditions') },
+                {
+                  name: 'clear-filter',
+                  text: t('Clear all filter conditions'),
+                },
               ]
             : [
                 { name: 'rename-filter', text: t('Rename') },
-                { name: 'update-filter', text: t('Update condtions') },
+                { name: 'update-filter', text: t('Update filter conditions') },
                 { name: 'reload-filter', text: t('Revert changes') },
                 { name: 'delete-filter', text: t('Delete') },
                 Menu.line,
                 { name: 'save-filter', text: t('Save new filter') },
-                { name: 'clear-filter', text: t('Clear all conditions') },
+                {
+                  name: 'clear-filter',
+                  text: t('Clear all filter conditions'),
+                },
               ]
       }
     />

diff --git a/packages/desktop-client/src/components/filters/FiltersStack.tsx b/packages/desktop-client/src/components/filters/FiltersStack.tsx
@@ -7,10 +7,27 @@ import { Stack } from '../common/Stack';
 import { View } from '../common/View';
 
 import { AppliedFilters } from './AppliedFilters';
-import {
-  type SavedFilter,
-  SavedFilterMenuButton,
-} from './SavedFilterMenuButton';
+import { SavedFilterMenuButton } from './SavedFilterMenuButton';
+
+type FiltersStackProps = {
+  conditions: readonly RuleConditionEntity[];
+  conditionsOp: RuleConditionEntity['conditionsOp'];
+  onUpdateFilter: (
+    filterCondition: RuleConditionEntity,
+    newFilterCondition: RuleConditionEntity,
+  ) => void;
+  onDeleteFilter: (filterCondition: RuleConditionEntity) => void;
+  onClearFilters: () => void;
+  onReloadSavedFilter: (
+    savedFilter: TransactionFilterEntity,
+    action?: 'reload' | 'update',
+  ) => void;
+  filter?: TransactionFilterEntity;
+  dirtyFilter?: TransactionFilterEntity;
+  onConditionsOpChange: (
+    conditionsOp: RuleConditionEntity['conditionsOp'],
+  ) => void;
+};
 
 export function FiltersStack({
   conditions,
@@ -19,23 +36,10 @@ export function FiltersStack({
   onDeleteFilter,
   onClearFilters,
   onReloadSavedFilter,
-  filterId,
-  savedFilters,
+  filter,
+  dirtyFilter,
   onConditionsOpChange,
-}: {
-  conditions: RuleConditionEntity[];
-  conditionsOp: 'and' | 'or';
-  onUpdateFilter: (
-    filter: RuleConditionEntity,
-    newFilter: RuleConditionEntity,
-  ) => void;
-  onDeleteFilter: (filter: RuleConditionEntity) => void;
-  onClearFilters: () => void;
-  onReloadSavedFilter: (savedFilter: SavedFilter, value?: string) => void;
-  filterId?: SavedFilter;
-  savedFilters: TransactionFilterEntity[];
-  onConditionsOpChange: (value: 'and' | 'or') => void;
-}) {
+}: FiltersStackProps) {
   return (
     <View>
       <Stack
@@ -55,10 +59,10 @@ export function FiltersStack({
         <SavedFilterMenuButton
           conditions={conditions}
           conditionsOp={conditionsOp}
-          filterId={filterId}
+          filter={filter}
+          dirtyFilter={dirtyFilter}
           onClearFilters={onClearFilters}
           onReloadSavedFilter={onReloadSavedFilter}
-          savedFilters={savedFilters}
         />
       </Stack>
     </View>