From 437e202d274ffd64614678a1f1926b1c4076cfcc Mon Sep 17 00:00:00 2001
From: Crazypkr1099 <nicholas.lacasse430@gmail.com>
Date: Tue, 18 Jun 2024 16:27:49 -0400
Subject: [PATCH] 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 <rdyer@unl.edu>
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

* Fixed TS, sort, and memo to useCallback

* fix tosorted -> sort

* Apply suggestions from code review

Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>

* fix typescript issue

---------

Co-authored-by: Robert Dyer <rdyer@unl.edu>
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
 .../autocomplete/CategoryAutocomplete.tsx     | 52 ++++++++++++++++---
 .../transactions/TransactionsTable.test.jsx   |  2 +-
 upcoming-release-notes/2861.md                |  6 +++
 3 files changed, 51 insertions(+), 9 deletions(-)
 create mode 100644 upcoming-release-notes/2861.md

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
index 3f1d16cdade..3782d2f92ae 100644
--- 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
index 1a2f3b06c1d..c0d133f3a3a 100644
--- 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
new file mode 100644
index 00000000000..773373e9b91
--- /dev/null
+++ b/upcoming-release-notes/2861.md
@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [Crazypkr]
+---
+
+Add autocomplete to include categories underneath the prioritized subcategory
\ No newline at end of file