diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 4c23cb89743f4..0ffef6df24374 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -7179,8 +7179,6 @@ const CONST = { VIEW: { TABLE: 'table', BAR: 'bar', - LINE: 'line', - PIE: 'pie', }, SYNTAX_FILTER_KEYS: { TYPE: 'type', diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 11dded9802f0d..163ed53e0f9eb 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -53,6 +53,7 @@ const SCREENS = { ADVANCED_FILTERS_RHP: 'Search_Advanced_Filters_RHP', ADVANCED_FILTERS_TYPE_RHP: 'Search_Advanced_Filters_Type_RHP', ADVANCED_FILTERS_GROUP_BY_RHP: 'Search_Advanced_Filters_GroupBy_RHP', + ADVANCED_FILTERS_VIEW_RHP: 'Search_Advanced_Filters_View_RHP', ADVANCED_FILTERS_STATUS_RHP: 'Search_Advanced_Filters_Status_RHP', ADVANCED_FILTERS_DATE_RHP: 'Search_Advanced_Filters_Date_RHP', ADVANCED_FILTERS_SUBMITTED_RHP: 'Search_Advanced_Filters_Submitted_RHP', diff --git a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx index 8d1bc9313f1db..7e34fcdc3462f 100644 --- a/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx +++ b/src/components/Search/SearchPageHeader/SearchFiltersBar.tsx @@ -44,7 +44,17 @@ import {getDisplayNameOrDefault} from '@libs/PersonalDetailsUtils'; import {getActiveAdminWorkspaces, isPaidGroupPolicy} from '@libs/PolicyUtils'; import {isExpenseReport} from '@libs/ReportUtils'; import {buildQueryStringFromFilterFormValues, getQueryWithUpdatedValues, isFilterSupported, isSearchDatePreset} from '@libs/SearchQueryUtils'; -import {getDatePresets, getFeedOptions, getGroupByOptions, getGroupCurrencyOptions, getHasOptions, getStatusOptions, getTypeOptions, getWithdrawalTypeOptions} from '@libs/SearchUIUtils'; +import { + getDatePresets, + getFeedOptions, + getGroupByOptions, + getGroupCurrencyOptions, + getHasOptions, + getStatusOptions, + getTypeOptions, + getViewOptions, + getWithdrawalTypeOptions, +} from '@libs/SearchUIUtils'; import shouldAdjustScroll from '@libs/shouldAdjustScroll'; import CONST from '@src/CONST'; import type {TranslationPaths} from '@src/languages/types'; @@ -88,8 +98,8 @@ function SearchFiltersBar({ const currentPolicy = usePolicy(currentSelectedPolicyID); const [isUserValidated] = useOnyx(ONYXKEYS.ACCOUNT, {selector: isUserValidatedSelector, canBeMissing: true}); const [searchAdvancedFiltersForm = getEmptyObject>()] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true}); - // type, groupBy and status values are not guaranteed to respect the ts type as they come from user input - const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, flatFilters} = queryJSON; + // type, groupBy, status, and view values are not guaranteed to respect the ts type as they come from user input + const {type: unsafeType, groupBy: unsafeGroupBy, status: unsafeStatus, view: unsafeView, flatFilters} = queryJSON; const [selectedIOUReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${currentSelectedReportID}`, {canBeMissing: true}); const isCurrentSelectedExpenseReport = isExpenseReport(currentSelectedReportID); const theme = useTheme(); @@ -188,6 +198,12 @@ function SearchFiltersBar({ return [options, value]; }, [translate, unsafeGroupBy]); + const [viewOptions, viewValue] = useMemo(() => { + const options = getViewOptions(translate); + const value = options.find((option) => option.value === unsafeView) ?? options.at(0) ?? null; + return [options, value]; + }, [translate, unsafeView]); + const [groupCurrencyOptions, groupCurrency] = useMemo(() => { const options = getGroupCurrencyOptions(currencyList, getCurrencySymbol); const value = options.find((option) => option.value === searchAdvancedFiltersForm.groupCurrency) ?? null; @@ -373,6 +389,21 @@ function SearchFiltersBar({ [translate, groupByOptions, groupBy, updateFilterForm], ); + const viewComponent = useCallback( + ({closeOverlay}: PopoverComponentProps) => { + return ( + updateFilterForm({view: item?.value ?? CONST.SEARCH.VIEW.TABLE})} + /> + ); + }, + [translate, viewOptions, viewValue, updateFilterForm], + ); + const groupCurrencyComponent = useCallback( ({closeOverlay}: PopoverComponentProps) => { return ( @@ -666,6 +697,16 @@ function SearchFiltersBar({ }, ] : []), + ...(shouldDisplayGroupByFilter + ? [ + { + label: translate('search.view.label'), + PopoverComponent: viewComponent, + value: viewValue?.text ?? null, + filterKey: FILTER_KEYS.VIEW, + }, + ] + : []), ].filter((filterItem) => isFilterSupported(filterItem.filterKey, type?.value ?? CONST.SEARCH.DATA_TYPES.EXPENSE)); return filterList; @@ -674,6 +715,7 @@ function SearchFiltersBar({ type?.text, groupBy?.value, groupBy?.text, + viewValue?.text, groupCurrency?.value, withdrawalType?.text, displayDate, @@ -693,6 +735,7 @@ function SearchFiltersBar({ isComponent, typeComponent, groupByComponent, + viewComponent, groupCurrencyComponent, statusComponent, datePickerComponent, diff --git a/src/components/Search/types.ts b/src/components/Search/types.ts index b8b454259b9d0..7faab6847ef1e 100644 --- a/src/components/Search/types.ts +++ b/src/components/Search/types.ts @@ -230,6 +230,7 @@ type SearchFilterKey = | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.TYPE | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.STATUS | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY + | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.COLUMNS | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT | typeof CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW; diff --git a/src/hooks/useAdvancedSearchFilters.ts b/src/hooks/useAdvancedSearchFilters.ts index 228db859d845a..107a7b90c6c68 100644 --- a/src/hooks/useAdvancedSearchFilters.ts +++ b/src/hooks/useAdvancedSearchFilters.ts @@ -27,6 +27,7 @@ const typeFiltersKeys = { CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS, CONST.SEARCH.SYNTAX_FILTER_KEYS.POLICY_ID, CONST.SEARCH.SYNTAX_ROOT_KEYS.GROUP_BY, + CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW, CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY, CONST.SEARCH.SYNTAX_FILTER_KEYS.HAS, CONST.SEARCH.SYNTAX_ROOT_KEYS.LIMIT, @@ -253,6 +254,7 @@ function useAdvancedSearchFilters() { const shouldDisplayTaxFilter = shouldDisplayFilter(Object.keys(taxRates).length, areTaxEnabled); const shouldDisplayWorkspaceFilter = workspaces.some((section) => section.data.length > 1); const shouldDisplayGroupCurrencyFilter = !!searchAdvancedFilters.groupBy; + const shouldDisplayViewFilter = !!searchAdvancedFilters.groupBy; const shouldDisplayReportFieldFilter = Object.values(policies).some((policy): policy is NonNullable => { return Object.values(policy?.fieldList ?? {}).some((val) => val.type !== CONST.POLICY.DEFAULT_FIELD_LIST_TYPE); }); @@ -287,6 +289,9 @@ function useAdvancedSearchFilters() { if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.GROUP_CURRENCY && !shouldDisplayGroupCurrencyFilter) { return; } + if (key === CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW && !shouldDisplayViewFilter) { + return; + } if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.ATTENDEE && !shouldDisplayAttendeeFilter) { return; } diff --git a/src/languages/de.ts b/src/languages/de.ts index 0939052021ae6..d70ea13e17e11 100644 --- a/src/languages/de.ts +++ b/src/languages/de.ts @@ -7074,6 +7074,7 @@ Fordere Spesendetails wie Belege und Beschreibungen an, lege Limits und Standard allMatchingItemsSelected: 'Alle passenden Elemente ausgewählt', }, topSpenders: 'Top-Ausgaben', + view: {label: 'Ansehen', table: 'Tabelle', bar: 'Bar'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'Von', [CONST.SEARCH.GROUP_BY.CARD]: 'Karten', diff --git a/src/languages/en.ts b/src/languages/en.ts index d9f0e9b5c04d4..67a23a2202c86 100644 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -6960,6 +6960,11 @@ const translations = { }, has: 'Has', groupBy: 'Group by', + view: { + label: 'View', + table: 'Table', + bar: 'Bar', + }, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'From', [CONST.SEARCH.GROUP_BY.CARD]: 'Cards', diff --git a/src/languages/es.ts b/src/languages/es.ts index d8a447d72b506..b3b326cdee224 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -6623,6 +6623,7 @@ ${amount} para ${merchant} - ${date}`, unapprovedCard: 'Tarjeta no aprobada', reconciliation: 'Conciliación', topSpenders: 'Mayores gastadores', + view: {label: 'Ver', table: 'Tabla', bar: 'Barra'}, saveSearch: 'Guardar búsqueda', savedSearchesMenuItemTitle: 'Guardadas', topCategories: 'Categorías principales', diff --git a/src/languages/fr.ts b/src/languages/fr.ts index be2cf9679641e..705a887210632 100644 --- a/src/languages/fr.ts +++ b/src/languages/fr.ts @@ -7086,6 +7086,7 @@ Exigez des informations de dépense comme les reçus et les descriptions, défin allMatchingItemsSelected: 'Tous les éléments correspondants sont sélectionnés', }, topSpenders: 'Plus gros dépensiers', + view: {label: 'Afficher', table: 'Tableau', bar: 'Barre'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'De', [CONST.SEARCH.GROUP_BY.CARD]: 'Cartes', diff --git a/src/languages/it.ts b/src/languages/it.ts index 1643f4f518030..be5e13746805b 100644 --- a/src/languages/it.ts +++ b/src/languages/it.ts @@ -7063,6 +7063,7 @@ Richiedi dettagli di spesa come ricevute e descrizioni, imposta limiti e valori allMatchingItemsSelected: 'Tutti gli elementi corrispondenti selezionati', }, topSpenders: 'Maggiori spenditori', + view: {label: 'Visualizza', table: 'Tabella', bar: 'Bar'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'Da', [CONST.SEARCH.GROUP_BY.CARD]: 'Carte', diff --git a/src/languages/ja.ts b/src/languages/ja.ts index 10473355950de..5dbca0285a9f6 100644 --- a/src/languages/ja.ts +++ b/src/languages/ja.ts @@ -7002,6 +7002,7 @@ ${reportName} allMatchingItemsSelected: '一致する項目をすべて選択済み', }, topSpenders: 'トップ支出者', + view: {label: '表示', table: 'テーブル', bar: 'バー'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: '差出人', [CONST.SEARCH.GROUP_BY.CARD]: 'カード', diff --git a/src/languages/nl.ts b/src/languages/nl.ts index 133f395cc24ed..f694f0bfdf763 100644 --- a/src/languages/nl.ts +++ b/src/languages/nl.ts @@ -7046,6 +7046,7 @@ Vraag verplichte uitgavedetails zoals bonnetjes en beschrijvingen, stel limieten allMatchingItemsSelected: 'Alle overeenkomende items geselecteerd', }, topSpenders: 'Grootste uitgaven', + view: {label: 'Bekijken', table: 'Tabel', bar: 'Bar'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'Van', [CONST.SEARCH.GROUP_BY.CARD]: 'Kaarten', diff --git a/src/languages/pl.ts b/src/languages/pl.ts index 304e2b37a471a..3a850e4cd0aa9 100644 --- a/src/languages/pl.ts +++ b/src/languages/pl.ts @@ -7034,6 +7034,7 @@ Wymagaj szczegółów wydatków, takich jak paragony i opisy, ustawiaj limity i allMatchingItemsSelected: 'Wybrano wszystkie pasujące elementy', }, topSpenders: 'Najwięksi wydający', + view: {label: 'Zobacz', table: 'Tabela', bar: 'Pasek'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'Od', [CONST.SEARCH.GROUP_BY.CARD]: 'Karty', diff --git a/src/languages/pt-BR.ts b/src/languages/pt-BR.ts index 1c23c194810af..78b5e6e2b5075 100644 --- a/src/languages/pt-BR.ts +++ b/src/languages/pt-BR.ts @@ -7035,6 +7035,7 @@ Exija detalhes de despesas como recibos e descrições, defina limites e padrõe allMatchingItemsSelected: 'Todos os itens correspondentes selecionados', }, topSpenders: 'Maiores gastadores', + view: {label: 'Ver', table: 'Tabela', bar: 'Bar'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: 'De', [CONST.SEARCH.GROUP_BY.CARD]: 'Cartões', diff --git a/src/languages/zh-hans.ts b/src/languages/zh-hans.ts index e9f2e9a8cbde3..e36081014ec4b 100644 --- a/src/languages/zh-hans.ts +++ b/src/languages/zh-hans.ts @@ -6882,6 +6882,7 @@ ${reportName} allMatchingItemsSelected: '已选择所有匹配的项目', }, topSpenders: '最高支出者', + view: {label: '查看', table: '表格', bar: '栏'}, chartTitles: { [CONST.SEARCH.GROUP_BY.FROM]: '来自', [CONST.SEARCH.GROUP_BY.CARD]: '卡片', diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx index f3538fbe231d7..7388ab4e234c4 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx @@ -939,6 +939,7 @@ const SearchAdvancedFiltersModalStackNavigator = createModalStackNavigator require('../../../../pages/Search/SearchAdvancedFiltersPage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersTypePage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_GROUP_BY_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage').default, + [SCREENS.SEARCH.ADVANCED_FILTERS_VIEW_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersViewPage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersStatusPage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersDatePage').default, [SCREENS.SEARCH.ADVANCED_FILTERS_SUBMITTED_RHP]: () => require('../../../../pages/Search/SearchAdvancedFiltersPage/SearchFiltersSubmittedPage').default, diff --git a/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts b/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts index aecf8e5770f68..fb3964849ea89 100644 --- a/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts +++ b/src/libs/Navigation/linkingConfig/RELATIONS/SEARCH_TO_RHP.ts @@ -7,6 +7,7 @@ const SEARCH_TO_RHP: Partial['config'] = { [SCREENS.SEARCH.ADVANCED_FILTERS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(), [SCREENS.SEARCH.ADVANCED_FILTERS_TYPE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.TYPE), [SCREENS.SEARCH.ADVANCED_FILTERS_GROUP_BY_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.GROUP_BY), + [SCREENS.SEARCH.ADVANCED_FILTERS_VIEW_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.VIEW), [SCREENS.SEARCH.ADVANCED_FILTERS_STATUS_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS), [SCREENS.SEARCH.ADVANCED_FILTERS_DATE_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.DATE), [SCREENS.SEARCH.ADVANCED_FILTERS_SUBMITTED_RHP]: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SYNTAX_FILTER_KEYS.SUBMITTED), diff --git a/src/libs/SearchQueryUtils.ts b/src/libs/SearchQueryUtils.ts index 0f05ace1ae863..72cb118b07036 100644 --- a/src/libs/SearchQueryUtils.ts +++ b/src/libs/SearchQueryUtils.ts @@ -599,7 +599,7 @@ function buildQueryStringFromFilterFormValues(filterValues: Partial>((value) => ({text: translate(`search.filters.groupBy.${value}`), value})); } +function getViewOptions(translate: LocalizedTranslate) { + return Object.values(CONST.SEARCH.VIEW).map>((value) => ({text: translate(`search.view.${value}`), value})); +} + function getGroupCurrencyOptions(currencyList: OnyxTypes.CurrencyList, getCurrencySymbol: CurrencyListContextProps['getCurrencySymbol']) { return Object.keys(currencyList).reduce( (options, currencyCode) => { @@ -4499,6 +4504,7 @@ export { getStatusOptions, getTypeOptions, getGroupByOptions, + getViewOptions, getGroupCurrencyOptions, getFeedOptions, getWideAmountIndicators, diff --git a/src/pages/Search/AdvancedSearchFilters.tsx b/src/pages/Search/AdvancedSearchFilters.tsx index ba254dd159d38..8c77d9f28cb02 100644 --- a/src/pages/Search/AdvancedSearchFilters.tsx +++ b/src/pages/Search/AdvancedSearchFilters.tsx @@ -72,6 +72,11 @@ const baseFilterConfig = { description: 'search.groupBy' as const, route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.GROUP_BY), }, + view: { + getTitle: getFilterViewDisplayTitle, + description: 'search.view.label' as const, + route: ROUTES.SEARCH_ADVANCED_FILTERS.getRoute(CONST.SEARCH.SEARCH_USER_FRIENDLY_KEYS.VIEW), + }, status: { getTitle: getStatusFilterDisplayTitle, description: 'common.status' as const, @@ -490,6 +495,14 @@ function getFilterDisplayTitle( return Array.isArray(filterValue) ? filterValue.join(', ') : filterValue; } +function getFilterViewDisplayTitle(filters: Partial, translate: LocaleContextProps['translate']) { + const filterValue = filters[CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW]; + if (!filterValue) { + return translate('search.view.table'); + } + return translate(`search.view.${filterValue as ValueOf}`); +} + function getStatusFilterDisplayTitle(filters: Partial, type: SearchDataTypes, translate: LocaleContextProps['translate']) { const statusOptions = getStatusOptions(translate, type).concat({text: translate('common.all'), value: CONST.SEARCH.STATUS.EXPENSE.ALL}); let filterValue = filters?.status; @@ -633,6 +646,8 @@ function AdvancedSearchFilters() { filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, workspacesData); } else if (key === CONST.SEARCH.SYNTAX_FILTER_KEYS.STATUS) { filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, currentType, translate); + } else if (key === CONST.SEARCH.SYNTAX_ROOT_KEYS.VIEW) { + filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, translate); } else { filterTitle = baseFilterConfig[key].getTitle(searchAdvancedFilters, key, translate, localeCompare); } diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx index b8f2c34987f0d..db3af09b0b13f 100644 --- a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersGroupByPage.tsx @@ -40,7 +40,9 @@ function SearchFiltersGroupByPage() { }, []); const applyChanges = useCallback(() => { - updateAdvancedFilters({groupBy: selectedItem ?? null}); + // When groupBy is cleared, also clear the view since view is only valid when groupBy is set + const updates = selectedItem ? {groupBy: selectedItem} : {groupBy: null, view: null}; + updateAdvancedFilters(updates); Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute()); }, [selectedItem]); diff --git a/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersViewPage.tsx b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersViewPage.tsx new file mode 100644 index 0000000000000..95f64f15ea2ab --- /dev/null +++ b/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersViewPage.tsx @@ -0,0 +1,91 @@ +import React, {useCallback, useMemo, useState} from 'react'; +import {View} from 'react-native'; +import Button from '@components/Button'; +import FixedFooter from '@components/FixedFooter'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import type {SearchView} from '@components/Search/types'; +import SelectionList from '@components/SelectionList'; +import SingleSelectListItem from '@components/SelectionList/ListItem/SingleSelectListItem'; +import type {ListItem} from '@components/SelectionList/types'; +import useLocalize from '@hooks/useLocalize'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {updateAdvancedFilters} from '@libs/actions/Search'; +import Navigation from '@libs/Navigation/Navigation'; +import {getViewOptions} from '@libs/SearchUIUtils'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ROUTES from '@src/ROUTES'; + +function SearchFiltersViewPage() { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const [searchAdvancedFiltersForm] = useOnyx(ONYXKEYS.FORMS.SEARCH_ADVANCED_FILTERS_FORM, {canBeMissing: true}); + + // Default to 'table' if no view is set + const [selectedItem, setSelectedItem] = useState(searchAdvancedFiltersForm?.view ?? CONST.SEARCH.VIEW.TABLE); + + const listData: Array> = useMemo(() => { + return getViewOptions(translate).map((viewOption) => ({ + text: viewOption.text, + keyForList: viewOption.value, + isSelected: selectedItem === viewOption.value, + })); + }, [translate, selectedItem]); + + const updateSelectedItem = useCallback((item: ListItem) => { + setSelectedItem(item?.keyForList ?? CONST.SEARCH.VIEW.TABLE); + }, []); + + const resetChanges = useCallback(() => { + setSelectedItem(CONST.SEARCH.VIEW.TABLE); + }, []); + + const applyChanges = useCallback(() => { + updateAdvancedFilters({view: selectedItem}); + Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute()); + }, [selectedItem]); + + return ( + + { + Navigation.goBack(ROUTES.SEARCH_ADVANCED_FILTERS.getRoute()); + }} + /> + + + + +