From 2202bd4b79a0bc5f97723ad77678b8559ebae774 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 17 Jun 2024 15:13:21 -0600 Subject: [PATCH 1/3] add dynamic columns --- src/components/Search.tsx | 3 ++- .../SelectionList/SearchTableHeader.tsx | 13 ++++++------ src/libs/SearchUtils.ts | 20 +++++++++---------- src/types/onyx/SearchResults.ts | 17 +++++++++++++++- 4 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/components/Search.tsx b/src/components/Search.tsx index 2de6aa8cfcef..051a73c410d7 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -110,7 +110,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) { const ListItem = SearchUtils.getListItem(type); - const data = SearchUtils.getSections(searchResults?.data ?? {}, type); + const data = SearchUtils.getSections(searchResults?.data ?? {}, searchResults?.search ?? {}, type); const sortedData = SearchUtils.getSortedSections(type, data, sortBy, sortOrder); const onSortPress = (column: SearchColumnType, order: SortOrder) => { @@ -129,6 +129,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) { customListHeader={ boolean; + shouldShow: (data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']) => boolean; }; const SearchColumns: SearchColumnConfig[] = [ @@ -53,17 +53,17 @@ const SearchColumns: SearchColumnConfig[] = [ { columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY, translationKey: 'common.category', - shouldShow: () => true, + shouldShow: ({metadata}): OnyxTypes.SearchResults['search'] => metadata?.columnsToShow.shouldShowCategoryColumn, }, { columnName: CONST.SEARCH_TABLE_COLUMNS.TAG, translationKey: 'common.tag', - shouldShow: () => true, + shouldShow: ({metadata}) => metadata?.columnsToShow.shouldShowTagColumn, }, { columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT, translationKey: 'common.tax', - shouldShow: () => true, + shouldShow: ({metadata}) => metadata?.columnsToShow.shouldShowTaxColumn, isColumnSortable: false, }, { @@ -87,6 +87,7 @@ const SearchColumns: SearchColumnConfig[] = [ type SearchTableHeaderProps = { data: OnyxTypes.SearchResults['data']; + metadata: OnyxTypes.SearchResults['search']; sortBy?: SearchColumnType; sortOrder?: SortOrder; isSortingAllowed: boolean; @@ -94,7 +95,7 @@ type SearchTableHeaderProps = { shouldShowYear: boolean; }; -function SearchTableHeader({data, sortBy, sortOrder, isSortingAllowed, onSortPress, shouldShowYear}: SearchTableHeaderProps) { +function SearchTableHeader({data, metadata, sortBy, sortOrder, isSortingAllowed, onSortPress, shouldShowYear}: SearchTableHeaderProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {isSmallScreenWidth, isMediumScreenWidth} = useWindowDimensions(); @@ -109,7 +110,7 @@ function SearchTableHeader({data, sortBy, sortOrder, isSortingAllowed, onSortPre {SearchColumns.map(({columnName, translationKey, shouldShow, isColumnSortable}) => { - if (!shouldShow(data)) { + if (!shouldShow(data, metadata)) { return null; } diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 2f90918a78b0..73dc2389f57b 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -112,7 +112,7 @@ function shouldShowYear(data: TransactionListItemType[] | ReportListItemType[] | return false; } -function getTransactionsSections(data: OnyxTypes.SearchResults['data']): TransactionListItemType[] { +function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): TransactionListItemType[] { const shouldShowMerchant = getShouldShowMerchant(data); const doesDataContainAPastYearTransaction = shouldShowYear(data); @@ -138,16 +138,16 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data']): Transac formattedMerchant, date, shouldShowMerchant, - shouldShowCategory: true, - shouldShowTag: true, - shouldShowTax: true, + shouldShowCategory: metadata.columnsToShow.shouldShowCategoryColumn, + shouldShowTag: metadata.columnsToShow.shouldShowTagColumn, + shouldShowTax: metadata.columnsToShow.shouldShowTaxColumn, keyForList: transactionItem.transactionID, shouldShowYear: doesDataContainAPastYearTransaction, }; }); } -function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListItemType[] { +function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']): ReportListItemType[] { const shouldShowMerchant = getShouldShowMerchant(data); const doesDataContainAPastYearTransaction = shouldShowYear(data); @@ -183,9 +183,9 @@ function getReportSections(data: OnyxTypes.SearchResults['data']): ReportListIte formattedMerchant, date, shouldShowMerchant, - shouldShowCategory: true, - shouldShowTag: true, - shouldShowTax: true, + shouldShowCategory: metadata.columnsToShow.shouldShowCategoryColumn, + shouldShowTag: metadata.columnsToShow.shouldShowTagColumn, + shouldShowTax: metadata.columnsToShow.shouldShowTaxColumn, keyForList: transactionItem.transactionID, shouldShowYear: doesDataContainAPastYearTransaction, }; @@ -218,8 +218,8 @@ function getListItem(type: K): SearchTypeTo return searchTypeToItemMap[type].listItem; } -function getSections(data: OnyxTypes.SearchResults['data'], type: K): ReturnType { - return searchTypeToItemMap[type].getSections(data) as ReturnType; +function getSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], type: K): ReturnType { + return searchTypeToItemMap[type].getSections(data, metadata) as ReturnType; } function getSortedSections( diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts index 52afaa44f8d2..b647708db0bc 100644 --- a/src/types/onyx/SearchResults.ts +++ b/src/types/onyx/SearchResults.ts @@ -29,13 +29,25 @@ type SearchTypeToItemMap = { listItem: ListItemType; /** Returns search results sections based on search results data */ - getSections: (data: SearchResults['data']) => SectionsType; + getSections: (data: SearchResults['data'], metadata: SearchResults['search']) => SectionsType; /** Returns sorted search results sections based on search results data */ getSortedSections: (data: SectionsType, sortBy?: SearchColumnType, sortOrder?: SortOrder) => SectionsType; }; }; +/** Model of columns to show for search results */ +type ColumnsToShow = { + /** Whether the category column should be shown */ + shouldShowCategoryColumn: boolean; + + /** Whether the tag column should be shown */ + shouldShowTagColumn: boolean; + + /** Whether the tax column should be shown */ + shouldShowTaxColumn: boolean; +} + /** Model of search result state */ type SearchResultsInfo = { /** Current search results offset/cursor */ @@ -49,6 +61,9 @@ type SearchResultsInfo = { /** Whether the search results are currently loading */ isLoading: boolean; + + /** The optional columns that should be shown according to policy settings */ + columnsToShow: ColumnsToShow; }; /** Model of personal details search result */ From faa1b9a4cd780c250fac0a359f2694e3322e1969 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 17 Jun 2024 15:18:04 -0600 Subject: [PATCH 2/3] fix types --- src/components/SelectionList/SearchTableHeader.tsx | 6 +++--- src/libs/SearchUtils.ts | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/SelectionList/SearchTableHeader.tsx b/src/components/SelectionList/SearchTableHeader.tsx index 748a8b687b1c..9cb7bb940bd5 100644 --- a/src/components/SelectionList/SearchTableHeader.tsx +++ b/src/components/SelectionList/SearchTableHeader.tsx @@ -53,17 +53,17 @@ const SearchColumns: SearchColumnConfig[] = [ { columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY, translationKey: 'common.category', - shouldShow: ({metadata}): OnyxTypes.SearchResults['search'] => metadata?.columnsToShow.shouldShowCategoryColumn, + shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowCategoryColumn ?? false, }, { columnName: CONST.SEARCH_TABLE_COLUMNS.TAG, translationKey: 'common.tag', - shouldShow: ({metadata}) => metadata?.columnsToShow.shouldShowTagColumn, + shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTagColumn ?? false, }, { columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT, translationKey: 'common.tax', - shouldShow: ({metadata}) => metadata?.columnsToShow.shouldShowTaxColumn, + shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTaxColumn ?? false, isColumnSortable: false, }, { diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 73dc2389f57b..35c96cdb22bb 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -138,9 +138,9 @@ function getTransactionsSections(data: OnyxTypes.SearchResults['data'], metadata formattedMerchant, date, shouldShowMerchant, - shouldShowCategory: metadata.columnsToShow.shouldShowCategoryColumn, - shouldShowTag: metadata.columnsToShow.shouldShowTagColumn, - shouldShowTax: metadata.columnsToShow.shouldShowTaxColumn, + shouldShowCategory: metadata?.columnsToShow.shouldShowCategoryColumn, + shouldShowTag: metadata?.columnsToShow.shouldShowTagColumn, + shouldShowTax: metadata?.columnsToShow.shouldShowTaxColumn, keyForList: transactionItem.transactionID, shouldShowYear: doesDataContainAPastYearTransaction, }; @@ -183,9 +183,9 @@ function getReportSections(data: OnyxTypes.SearchResults['data'], metadata: Onyx formattedMerchant, date, shouldShowMerchant, - shouldShowCategory: metadata.columnsToShow.shouldShowCategoryColumn, - shouldShowTag: metadata.columnsToShow.shouldShowTagColumn, - shouldShowTax: metadata.columnsToShow.shouldShowTaxColumn, + shouldShowCategory: metadata?.columnsToShow.shouldShowCategoryColumn, + shouldShowTag: metadata?.columnsToShow.shouldShowTagColumn, + shouldShowTax: metadata?.columnsToShow.shouldShowTaxColumn, keyForList: transactionItem.transactionID, shouldShowYear: doesDataContainAPastYearTransaction, }; From 1e037781dff621102de3cc38b5add2ef13730058 Mon Sep 17 00:00:00 2001 From: Carlos Martins Date: Mon, 17 Jun 2024 16:04:04 -0600 Subject: [PATCH 3/3] fix lint --- src/libs/SearchUtils.ts | 6 +++++- src/types/onyx/SearchResults.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/libs/SearchUtils.ts b/src/libs/SearchUtils.ts index 35c96cdb22bb..2f19f7f2717a 100644 --- a/src/libs/SearchUtils.ts +++ b/src/libs/SearchUtils.ts @@ -218,7 +218,11 @@ function getListItem(type: K): SearchTypeTo return searchTypeToItemMap[type].listItem; } -function getSections(data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search'], type: K): ReturnType { +function getSections( + data: OnyxTypes.SearchResults['data'], + metadata: OnyxTypes.SearchResults['search'], + type: K, +): ReturnType { return searchTypeToItemMap[type].getSections(data, metadata) as ReturnType; } diff --git a/src/types/onyx/SearchResults.ts b/src/types/onyx/SearchResults.ts index b647708db0bc..676a1d3873d9 100644 --- a/src/types/onyx/SearchResults.ts +++ b/src/types/onyx/SearchResults.ts @@ -46,7 +46,7 @@ type ColumnsToShow = { /** Whether the tax column should be shown */ shouldShowTaxColumn: boolean; -} +}; /** Model of search result state */ type SearchResultsInfo = {