Skip to content

Commit

Permalink
Merge pull request #43869 from Expensify/cmartins-addDynamicColumns
Browse files Browse the repository at this point in the history 
Add dynamic columns
  • Loading branch information
@carlosmiceli
carlosmiceli authored Jun 21, 2024
2 parents c3b8629 + 5c4ab77 commit 0d97a12
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 18 deletions.
3 changes: 2 additions & 1 deletion src/components/Search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,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) => {
Expand All @@ -156,6 +156,7 @@ function Search({query, policyIDs, sortBy, sortOrder}: SearchProps) {
customListHeader={
<SearchTableHeader
data={searchResults?.data}
metadata={searchResults?.search}
onSortPress={onSortPress}
sortOrder={sortOrder}
isSortingAllowed={isSortingAllowed}
Expand Down
13 changes: 7 additions & 6 deletions src/components/SelectionList/SearchTableHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ type SearchColumnConfig = {
columnName: SearchColumnType;
translationKey: TranslationPaths;
isColumnSortable?: boolean;
shouldShow: (data: OnyxTypes.SearchResults['data']) => boolean;
shouldShow: (data: OnyxTypes.SearchResults['data'], metadata: OnyxTypes.SearchResults['search']) => boolean;
};

const SearchColumns: SearchColumnConfig[] = [
Expand Down Expand Up @@ -53,17 +53,17 @@ const SearchColumns: SearchColumnConfig[] = [
{
columnName: CONST.SEARCH_TABLE_COLUMNS.CATEGORY,
translationKey: 'common.category',
shouldShow: () => true,
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowCategoryColumn ?? false,
},
{
columnName: CONST.SEARCH_TABLE_COLUMNS.TAG,
translationKey: 'common.tag',
shouldShow: () => true,
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTagColumn ?? false,
},
{
columnName: CONST.SEARCH_TABLE_COLUMNS.TAX_AMOUNT,
translationKey: 'common.tax',
shouldShow: () => true,
shouldShow: (data, metadata) => metadata?.columnsToShow.shouldShowTaxColumn ?? false,
isColumnSortable: false,
},
{
Expand All @@ -87,14 +87,15 @@ const SearchColumns: SearchColumnConfig[] = [

type SearchTableHeaderProps = {
data: OnyxTypes.SearchResults['data'];
metadata: OnyxTypes.SearchResults['search'];
sortBy?: SearchColumnType;
sortOrder?: SortOrder;
isSortingAllowed: boolean;
onSortPress: (column: SearchColumnType, order: SortOrder) => void;
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();
Expand All @@ -109,7 +110,7 @@ function SearchTableHeader({data, sortBy, sortOrder, isSortingAllowed, onSortPre
<View style={[styles.ph5, styles.pb3]}>
<View style={[styles.flex1, styles.flexRow, styles.gap3, styles.ph4]}>
{SearchColumns.map(({columnName, translationKey, shouldShow, isColumnSortable}) => {
if (!shouldShow(data)) {
if (!shouldShow(data, metadata)) {
return null;
}

Expand Down
24 changes: 14 additions & 10 deletions src/libs/SearchUtils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -185,9 +185,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,
};
Expand Down Expand Up @@ -220,8 +220,12 @@ function getListItem<K extends keyof SearchTypeToItemMap>(type: K): SearchTypeTo
return searchTypeToItemMap[type].listItem;
}

function getSections<K extends keyof SearchTypeToItemMap>(data: OnyxTypes.SearchResults['data'], type: K): ReturnType<SearchTypeToItemMap[K]['getSections']> {
return searchTypeToItemMap[type].getSections(data) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
function getSections<K extends keyof SearchTypeToItemMap>(
data: OnyxTypes.SearchResults['data'],
metadata: OnyxTypes.SearchResults['search'],
type: K,
): ReturnType<SearchTypeToItemMap[K]['getSections']> {
return searchTypeToItemMap[type].getSections(data, metadata) as ReturnType<SearchTypeToItemMap[K]['getSections']>;
}

function getSortedSections<K extends keyof SearchTypeToItemMap>(
Expand Down
17 changes: 16 additions & 1 deletion src/types/onyx/SearchResults.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,25 @@ type SearchTypeToItemMap = {
listItem: ListItemType<K>;

/** Returns search results sections based on search results data */
getSections: (data: SearchResults['data']) => SectionsType<K>;
getSections: (data: SearchResults['data'], metadata: SearchResults['search']) => SectionsType<K>;

/** Returns sorted search results sections based on search results data */
getSortedSections: (data: SectionsType<K>, sortBy?: SearchColumnType, sortOrder?: SortOrder) => SectionsType<K>;
};
};

/** 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 */
Expand All @@ -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 */
Expand Down

0 comments on commit 0d97a12

Please sign in to comment.