Skip to content

Add grouping to RHP Filters #61432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 13, 2025
Merged

Add grouping to RHP Filters #61432

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
51619e1
Add grouping to RHP Filters
nyomanjyotisa May 6, 2025
13d3fd0
ESLint fix
nyomanjyotisa May 6, 2025
52c07c8
ESLint fix
nyomanjyotisa May 6, 2025
bb49d6d
Add grouping to RHP Filters
nyomanjyotisa May 6, 2025
40ffb0b
minor fix
nyomanjyotisa May 9, 2025
be5ec3c
sort filter items alphabetically
nyomanjyotisa May 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions src/languages/en.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -554,6 +554,7 @@ const translations = {
comments: 'Comments',
sharedIn: 'Shared in',
unreported: 'Unreported',
general: 'General',
},
supportalNoAccess: {
title: 'Not so fast',
Expand Down Expand Up @@ -5253,11 +5254,11 @@ const translations = {
},
current: 'Current',
past: 'Past',
submitted: 'Submitted',
approved: 'Approved',
paid: 'Paid',
exported: 'Exported',
posted: 'Posted',
submitted: 'Submitted date',
approved: 'Approved date',
paid: 'Paid date',
exported: 'Exported date',
posted: 'Posted date',
billable: 'Billable',
reimbursable: 'Reimbursable',
},
Expand Down
11 changes: 6 additions & 5 deletions src/languages/es.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -545,6 +545,7 @@ const translations = {
comments: 'Comentarios',
sharedIn: 'Compartido en',
unreported: 'No reportado',
general: 'General',
},
supportalNoAccess: {
title: 'No tan rápido',
Expand Down Expand Up @@ -5310,11 +5311,11 @@ const translations = {
},
current: 'Actual',
past: 'Anterior',
submitted: 'Enviado',
approved: 'Aprobado',
paid: 'Pagado',
exported: 'Exportado',
posted: 'Contabilizado',
submitted: 'Fecha de envío',
approved: 'Fecha de aprobación',
paid: 'Fecha de pago',
exported: 'Fecha de exportación',
posted: 'Fecha de contabilización',
billable: 'Facturable',
reimbursable: 'Reembolsable',
},
Expand Down
55 changes: 45 additions & 10 deletions src/pages/Search/AdvancedSearchFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {usePersonalDetails} from '@components/OnyxProvider';
import ScrollView from '@components/ScrollView';
import type {SearchDateFilterKeys, SearchFilterKey} from '@components/Search/types';
import SpacerView from '@components/SpacerView';
import Text from '@components/Text';
import useLocalize from '@hooks/useLocalize';
import useSingleExecution from '@hooks/useSingleExecution';
import useThemeStyles from '@hooks/useThemeStyles';
Expand All @@ -29,6 +30,7 @@ import {getReportName} from '@libs/ReportUtils';
import {buildCannedSearchQuery, buildQueryStringFromFilterFormValues, buildSearchQueryJSON, isCannedSearchQuery} from '@libs/SearchQueryUtils';
import {getExpenseTypeTranslationKey} from '@libs/SearchUIUtils';
import CONST from '@src/CONST';
import type {TranslationPaths} from '@src/languages/types';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
import type {SearchAdvancedFiltersForm} from '@src/types/form';
Expand All @@ -37,6 +39,16 @@ import type {CardList, PersonalDetailsList, Policy, PolicyTagLists, Report, Work
import type {PolicyFeatureName} from '@src/types/onyx/Policy';
import {isEmptyObject} from '@src/types/utils/EmptyObject';

type SectionType = {
titleTranslationKey: TranslationPaths;
items: Array<{
key: SearchFilterKey;
title: string | undefined;
description: string;
onPress: () => void;
}>;
};

const baseFilterConfig = {
date: {
getTitle: getFilterDisplayTitle,
Expand Down Expand Up @@ -176,7 +188,7 @@ const baseFilterConfig = {
*/
const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SYNTAX_FILTER_KEYS>>>> = {
[CONST.SEARCH.DATA_TYPES.EXPENSE]: [
[CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.EXPENSE_TYPE,
CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
Expand All @@ -186,11 +198,12 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
CONST.SEARCH.SYNTAX_FILTER_KEYS.REIMBURSABLE,
CONST.SEARCH.SYNTAX_FILTER_KEYS.BILLABLE,
],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED,
Expand All @@ -200,7 +213,7 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
],
],
[CONST.SEARCH.DATA_TYPES.INVOICE]: [
[CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE,
Expand All @@ -209,9 +222,10 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED,
Expand All @@ -221,7 +235,7 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
],
],
[CONST.SEARCH.DATA_TYPES.TRIP]: [
[CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM, CONST.SEARCH.SYNTAX_FILTER_KEYS.TO, CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.MERCHANT,
CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE,
Expand All @@ -230,9 +244,10 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
CONST.SEARCH.SYNTAX_FILTER_KEYS.CATEGORY,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAG,
CONST.SEARCH.SYNTAX_FILTER_KEYS.DESCRIPTION,
CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TAX_RATE,
],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.CARD_ID, CONST.SEARCH.SYNTAX_FILTER_KEYS.POSTED],
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.REPORT_ID,
CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED,
Expand All @@ -243,10 +258,10 @@ const typeFiltersKeys: Record<string, Array<Array<ValueOf<typeof CONST.SEARCH.SY
],
[CONST.SEARCH.DATA_TYPES.CHAT]: [
[
CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD,
CONST.SEARCH.SYNTAX_FILTER_KEYS.FROM,
CONST.SEARCH.SYNTAX_FILTER_KEYS.TO,
CONST.SEARCH.SYNTAX_FILTER_KEYS.IN,
CONST.SEARCH.SYNTAX_FILTER_KEYS.KEYWORD,
CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID,
],
[CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE],
Expand Down Expand Up @@ -626,21 +641,41 @@ function AdvancedSearchFilters() {
.filter((section) => !!section.length);
const displaySearchButton = queryJSON && !isCannedSearchQuery(queryJSON);

const sections: SectionType[] = [
{
titleTranslationKey: 'common.general',
items: filters.at(0) ?? [],
},
{
titleTranslationKey: 'common.expenses',
items: filters.at(1) ?? [],
},
{
titleTranslationKey: 'common.reports',
items: filters.at(2) ?? [],
},
];

return (
<>
<ScrollView contentContainerStyle={[styles.flexGrow1, styles.justifyContentBetween]}>
<View>
{filters.map((section, index) => {
{sections.map((section, index) => {
if (section.items.length === 0) {
return;
}

return (
// eslint-disable-next-line react/no-array-index-key
<View key={`${section.at(0)?.key}-${index}`}>
<View key={`${section.items.at(0)?.key}-${index}`}>
{index !== 0 && (
<SpacerView
shouldShow
style={[styles.reportHorizontalRule]}
/>
)}
{section.map((item) => {
<Text style={[styles.headerText, styles.reportHorizontalRule, index === 0 ? null : styles.mt4, styles.mb2]}>{translate(section.titleTranslationKey)}</Text>
{section.items.map((item) => {
return (
<MenuItemWithTopDescription
key={item.description}
Expand Down