Merge pull request #46799 from software-mansion-labs/289Adam289/46027…

…-advanced-filters-keyword Add keyword advanced filter for Search
Expensify · Aug 8, 2024 · 86efffb · 86efffb
2 parents e9be304 + 463f360
commit 86efffb
Show file tree

Hide file tree

Showing 11 changed files with 95 additions and 1 deletion.
diff --git a/src/ROUTES.ts b/src/ROUTES.ts
@@ -56,6 +56,7 @@ const ROUTES = {
     SEARCH_ADVANCED_FILTERS_REPORT_ID: 'search/filters/reportID',
 
     SEARCH_ADVANCED_FILTERS_CATEGORY: 'search/filters/category',
+    SEARCH_ADVANCED_FILTERS_KEYWORD: 'search/filters/keyword',
     SEARCH_ADVANCED_FILTERS_CARD: 'search/filters/card',
 
     SEARCH_REPORT: {

diff --git a/src/SCREENS.ts b/src/SCREENS.ts
@@ -40,6 +40,7 @@ const SCREENS = {
         ADVANCED_FILTERS_MERCHANT_RHP: 'Search_Advanced_Filters_Merchant_RHP',
         ADVANCED_FILTERS_REPORT_ID_RHP: 'Search_Advanced_Filters_ReportID_RHP',
         ADVANCED_FILTERS_CATEGORY_RHP: 'Search_Advanced_Filters_Category_RHP',
+        ADVANCED_FILTERS_KEYWORD_RHP: 'Search_Advanced_Filters_Keyword_RHP',
         ADVANCED_FILTERS_CARD_RHP: 'Search_Advanced_Filters_Card_RHP',
         TRANSACTION_HOLD_REASON_RHP: 'Search_Transaction_Hold_Reason_RHP',
         BOTTOM_TAB: 'Search_Bottom_Tab',

diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -3662,6 +3662,8 @@ export default {
                 after: (date?: string) => `After ${date ?? ''}`,
             },
             status: 'Status',
+            keyword: 'Keyword',
+            hasKeywords: 'Has keywords',
             currency: 'Currency',
         },
     },

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -3716,6 +3716,8 @@ export default {
                 after: (date?: string) => `Después de ${date ?? ''}`,
             },
             status: 'Estado',
+            keyword: 'Palabra clave',
+            hasKeywords: 'Tiene palabras clave',
             currency: 'Divisa',
         },
     },

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx
@@ -520,6 +520,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator<Searc
     [SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersMerchantPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersReportIDPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCategoryPage').default,
+    [SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersKeywordPage').default,
     [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: () => require<ReactComponentModule>('../../../../pages/Search/SearchFiltersCardPage').default,
 });
 

diff --git a/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts b/src/libs/Navigation/linkingConfig/CENTRAL_PANE_TO_RHP_MAPPING.ts
@@ -50,6 +50,7 @@ const CENTRAL_PANE_TO_RHP_MAPPING: Partial<Record<CentralPaneName, string[]>> =
         SCREENS.SEARCH.ADVANCED_FILTERS_MERCHANT_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP,
         SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP,
+        SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP,
     ],
     [SCREENS.SETTINGS.SUBSCRIPTION.ROOT]: [
         SCREENS.SETTINGS.SUBSCRIPTION.ADD_PAYMENT_CARD,

diff --git a/src/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts
@@ -1023,6 +1023,7 @@ const config: LinkingOptions<RootStackParamList>['config'] = {
                         [SCREENS.SEARCH.ADVANCED_FILTERS_DESCRIPTION_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_DESCRIPTION,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_REPORT_ID_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_REPORT_ID,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_CATEGORY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CATEGORY,
+                        [SCREENS.SEARCH.ADVANCED_FILTERS_KEYWORD_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_KEYWORD,
                         [SCREENS.SEARCH.ADVANCED_FILTERS_CARD_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS_CARD,
                     },
                 },

diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts
@@ -465,6 +465,10 @@ function buildQueryStringFromFilters(filterValues: Partial<SearchAdvancedFilters
                 return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID}:${cardIDs.join(',')}`;
             }
 
+            if (filterKey === INPUT_IDS.KEYWORD && filterValue) {
+                return `${CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD}:${filterValue as string}`;
+            }
+
             return undefined;
         })
         .filter(Boolean)
@@ -521,7 +525,7 @@ function buildFilterString(filterName: string, queryFilters: QueryFilter[]) {
     queryFilters.forEach((queryFilter, index) => {
         // If the previous queryFilter has the same operator (this rule applies only to eq and neq operators) then append the current value
         if ((queryFilter.operator === 'eq' && queryFilters[index - 1]?.operator === 'eq') || (queryFilter.operator === 'neq' && queryFilters[index - 1]?.operator === 'neq')) {
-            filterValueString += `,${sanitizeString(queryFilter.value.toString())}`;
+            filterValueString += ` ${sanitizeString(queryFilter.value.toString())}`;
         } else {
             filterValueString += ` ${filterName}${operatorToSignMap[queryFilter.operator]}${queryFilter.value}`;
         }

diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx
@@ -119,6 +119,11 @@ function AdvancedSearchFilters() {
                 description: 'common.category' as const,
                 route: ROUTES.SEARCH_ADVANCED_FILTERS_CATEGORY,
             },
+            {
+                title: getFilterDisplayTitle(searchAdvancedFilters, CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, translate),
+                description: 'search.filters.hasKeywords' as const,
+                route: ROUTES.SEARCH_ADVANCED_FILTERS_KEYWORD,
+            },
             {
                 title: getFilterCardDisplayTitle(searchAdvancedFilters, cardList),
                 description: 'common.card' as const,

diff --git a/src/pages/Search/SearchFiltersKeywordPage.tsx b/src/pages/Search/SearchFiltersKeywordPage.tsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import {View} from 'react-native';
+import {useOnyx} from 'react-native-onyx';
+import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
+import FormProvider from '@components/Form/FormProvider';
+import InputWrapper from '@components/Form/InputWrapper';
+import type {FormOnyxValues} from '@components/Form/types';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
+import TextInput from '@components/TextInput';
+import useAutoFocusInput from '@hooks/useAutoFocusInput';
+import useLocalize from '@hooks/useLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
+import {updateAdvancedFilters} from '@libs/actions/Search';
+import Navigation from '@libs/Navigation/Navigation';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import ROUTES from '@src/ROUTES';
+import INPUT_IDS from '@src/types/form/SearchAdvancedFiltersForm';
+
+function SearchFiltersKeywordPage() {
+    const styles = useThemeStyles();
+    const {translate} = useLocalize();
+
+    const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM);
+    const keyword = searchAdvancedFiltersForm?.[INPUT_IDS.KEYWORD];
+    const {inputCallbackRef} = useAutoFocusInput();
+
+    const updateKeywordFilter = (values: FormOnyxValues<typeof ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM>) => {
+        updateAdvancedFilters(values);
+        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+    };
+
+    return (
+        <ScreenWrapper
+            testID={SearchFiltersKeywordPage.displayName}
+            shouldShowOfflineIndicatorInWideScreen
+            offlineIndicatorStyle={styles.mtAuto}
+        >
+            <FullPageNotFoundView shouldShow={false}>
+                <HeaderWithBackButton
+                    title={translate('search.filters.keyword')}
+                    onBackButtonPress={() => {
+                        Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS);
+                    }}
+                />
+                <FormProvider
+                    style={[styles.flex1, styles.ph5]}
+                    formID={ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM}
+                    onSubmit={updateKeywordFilter}
+                    submitButtonText={translate('common.save')}
+                    enabledWhenOffline
+                >
+                    <View style={styles.mb4}>
+                        <InputWrapper
+                            InputComponent={TextInput}
+                            inputID={INPUT_IDS.KEYWORD}
+                            name={INPUT_IDS.KEYWORD}
+                            defaultValue={keyword}
+                            label={translate('search.filters.keyword')}
+                            accessibilityLabel={translate('search.filters.keyword')}
+                            role={CONST.ROLE.PRESENTATION}
+                            ref={inputCallbackRef}
+                        />
+                    </View>
+                </FormProvider>
+            </FullPageNotFoundView>
+        </ScreenWrapper>
+    );
+}
+
+SearchFiltersKeywordPage.displayName = 'SearchFiltersKeywordPage';
+
+export default SearchFiltersKeywordPage;
diff --git a/src/types/form/SearchAdvancedFiltersForm.ts b/src/types/form/SearchAdvancedFiltersForm.ts
@@ -13,6 +13,7 @@ const INPUT_IDS = {
     MERCHANT: 'merchant',
     DESCRIPTION: 'description',
     REPORT_ID: 'reportID',
+    KEYWORD: 'keyword',
 } as const;
 
 type InputID = ValueOf<typeof INPUT_IDS>;
@@ -31,6 +32,7 @@ type SearchAdvancedFiltersForm = Form<
         [INPUT_IDS.MERCHANT]: string;
         [INPUT_IDS.DESCRIPTION]: string;
         [INPUT_IDS.REPORT_ID]: string;
+        [INPUT_IDS.KEYWORD]: string;
     }
 >;