Add filtering of group name to autocomplete for transactions (#2861)

* Delete packages/desktop-client/e2e directory * Delete packages/desktop-client/e2e directory * Add toggleable option to autoCompleteCategories * Create 2861.md * Fixing typescript error & removing console.log * Added themesetting back in * Added filtering and separation for group name autocomplete * removed typescript error * another typescript error fixed * ts error * removed styling * Update 2861.md * Update prefs.d.ts * Update index.tsx removed toggleable settings * Update index.tsx * removed toggleablesettings * changed test tobe items = screen .getByTestId('autocomplete') .querySelectorAll('[data-testid$="category-item"]'); expect(items.length).toBe(3); }); * removed isChanged passdown * Added string followed by category name capability, moved sorting logic to categoryautocomplete, used toSorted, used Usememo, added TS. * Fix unnecessary changes * Apply suggestions from code review Co-authored-by: Robert Dyer <[email protected]> Co-authored-by: Matiss Janis Aboltins <[email protected]> * Fixed TS, sort, and memo to useCallback * fix tosorted -> sort * Apply suggestions from code review Co-authored-by: Matiss Janis Aboltins <[email protected]> * fix typescript issue --------- Co-authored-by: Robert Dyer <[email protected]> Co-authored-by: Matiss Janis Aboltins <[email protected]>
actualbudget · Jun 18, 2024 · 437e202 · 437e202
1 parent d34f5ec
commit 437e202
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 9 deletions.
diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -7,6 +7,7 @@ import React, {
   type ComponentType,
   type ComponentPropsWithoutRef,
   type ReactElement,
+  useCallback,
 } from 'react';
 
 import { css } from 'glamor';
@@ -135,6 +136,21 @@ function CategoryList({
   );
 }
 
+function customSort(obj: CategoryAutocompleteItem, value: string): number {
+  const name = obj.name.toLowerCase();
+  const groupName = obj.group ? obj.group.name.toLowerCase() : '';
+  if (obj.id === 'split') {
+    return -2;
+  }
+  if (name.includes(value)) {
+    return -1;
+  }
+  if (groupName.includes(value)) {
+    return 0;
+  }
+  return 1;
+}
+
 type CategoryAutocompleteProps = ComponentProps<
   typeof Autocomplete<CategoryAutocompleteItem>
 > & {
@@ -183,6 +199,33 @@ export function CategoryAutocomplete({
     [defaultCategoryGroups, categoryGroups, showSplitOption],
   );
 
+  const filterSuggestions = useCallback(
+    (
+      suggestions: CategoryAutocompleteItem[],
+      value: string,
+    ): CategoryAutocompleteItem[] => {
+      return suggestions
+        .filter(suggestion => {
+          return (
+            suggestion.id === 'split' ||
+            suggestion.group?.name
+              .toLowerCase()
+              .includes(value.toLowerCase()) ||
+            (suggestion.group?.name + ' ' + suggestion.name)
+              .toLowerCase()
+              .includes(value.toLowerCase()) ||
+            defaultFilterSuggestion(suggestion, value)
+          );
+        })
+        .sort(
+          (a, b) =>
+            customSort(a, value.toLowerCase()) -
+            customSort(b, value.toLowerCase()),
+        );
+    },
+    [],
+  );
+
   return (
     <Autocomplete
       strict={true}
@@ -197,14 +240,7 @@ export function CategoryAutocomplete({
         }
         return 0;
       }}
-      filterSuggestions={(suggestions, value) => {
-        return suggestions.filter(suggestion => {
-          return (
-            suggestion.id === 'split' ||
-            defaultFilterSuggestion(suggestion, value)
-          );
-        });
-      }}
+      filterSuggestions={filterSuggestions}
       suggestions={categorySuggestions}
       renderItems={(items, getItemProps, highlightedIndex) => (
         <CategoryList

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx b/packages/desktop-client/src/components/transactions/TransactionsTable.test.jsx
@@ -468,7 +468,7 @@ describe('Transactions', () => {
     items = screen
       .getByTestId('autocomplete')
       .querySelectorAll('[data-testid$="category-item"]');
-    expect(items.length).toBe(0);
+    expect(items.length).toBe(3);
   });
 
   test('dropdown selects an item with keyboard', async () => {

diff --git a/upcoming-release-notes/2861.md b/upcoming-release-notes/2861.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [Crazypkr]
+---
+
+Add autocomplete to include categories underneath the prioritized subcategory