diff --git a/src/CONST/index.ts b/src/CONST/index.ts index 3d9c9cb45b31..643d2a341ec2 100755 --- a/src/CONST/index.ts +++ b/src/CONST/index.ts @@ -6696,6 +6696,8 @@ const CONST = { TO: this.TABLE_COLUMNS.TO, CATEGORY: this.TABLE_COLUMNS.CATEGORY, TAG: this.TABLE_COLUMNS.TAG, + REPORT_ID: this.TABLE_COLUMNS.REPORT_ID, + BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID, REIMBURSABLE: this.TABLE_COLUMNS.REIMBURSABLE, BILLABLE: this.TABLE_COLUMNS.BILLABLE, STATUS: this.TABLE_COLUMNS.STATUS, @@ -6710,6 +6712,8 @@ const CONST = { TITLE: this.TABLE_COLUMNS.TITLE, FROM: this.TABLE_COLUMNS.FROM, TO: this.TABLE_COLUMNS.TO, + REPORT_ID: this.TABLE_COLUMNS.REPORT_ID, + BASE_62_REPORT_ID: this.TABLE_COLUMNS.BASE_62_REPORT_ID, ACTION: this.TABLE_COLUMNS.ACTION, }, INVOICE: {}, @@ -6807,6 +6811,8 @@ const CONST = { WITHDRAWAL_ID: 'withdrawalID', AVATAR: 'avatar', STATUS: 'status', + REPORT_ID: 'reportID', + BASE_62_REPORT_ID: 'base62ReportID', TAX: 'tax', }, SYNTAX_OPERATORS: { diff --git a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx index 4ebaeac803bb..28faa0dc1e88 100644 --- a/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx +++ b/src/components/SelectionListWithSections/Search/ExpenseReportListItemRow.tsx @@ -12,13 +12,14 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import getBase62ReportID from '@libs/getBase62ReportID'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type {Policy} from '@src/types/onyx'; import ActionCell from './ActionCell'; import DateCell from './DateCell'; import StatusCell from './StatusCell'; -import TitleCell from './TitleCell'; +import TextCell from './TextCell'; import TotalCell from './TotalCell'; import UserInfoAndActionButtonRow from './UserInfoAndActionButtonRow'; import UserInfoCell from './UserInfoCell'; @@ -116,7 +117,7 @@ function ExpenseReportListItemRow({ ), [CONST.SEARCH.TABLE_COLUMNS.TITLE]: ( - @@ -152,6 +153,16 @@ function ExpenseReportListItemRow({ /> ), + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: ( + + + + ), + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: ( + + + + ), [CONST.SEARCH.TABLE_COLUMNS.ACTION]: ( [ columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT, translationKey: groupBy ? 'common.total' : 'iou.amount', }, + { + columnName: CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID, + translationKey: 'common.reportID', + }, + { + columnName: CONST.SEARCH.TABLE_COLUMNS.REPORT_ID, + translationKey: 'common.longID', + }, { columnName: CONST.SEARCH.TABLE_COLUMNS.TITLE, translationKey: 'common.title', @@ -200,6 +208,14 @@ const getExpenseReportHeaders = (profileIcon?: IconAsset): SearchColumnConfig[] columnName: CONST.SEARCH.TABLE_COLUMNS.TOTAL, translationKey: 'common.total', }, + { + columnName: CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID, + translationKey: 'common.reportID', + }, + { + columnName: CONST.SEARCH.TABLE_COLUMNS.REPORT_ID, + translationKey: 'common.longID', + }, { columnName: CONST.SEARCH.TABLE_COLUMNS.ACTION, translationKey: 'common.action', diff --git a/src/components/TransactionItemRow/index.tsx b/src/components/TransactionItemRow/index.tsx index 329ee0aa0be8..79bfe14aeecd 100644 --- a/src/components/TransactionItemRow/index.tsx +++ b/src/components/TransactionItemRow/index.tsx @@ -10,7 +10,7 @@ import type {SearchColumnType, TableColumnSize} from '@components/Search/types'; import ActionCell from '@components/SelectionListWithSections/Search/ActionCell'; import DateCell from '@components/SelectionListWithSections/Search/DateCell'; import StatusCell from '@components/SelectionListWithSections/Search/StatusCell'; -import TitleCell from '@components/SelectionListWithSections/Search/TitleCell'; +import TextCell from '@components/SelectionListWithSections/Search/TextCell'; import UserInfoCell from '@components/SelectionListWithSections/Search/UserInfoCell'; import Text from '@components/Text'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; @@ -20,6 +20,7 @@ import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {isCategoryMissing} from '@libs/CategoryUtils'; +import getBase62ReportID from '@libs/getBase62ReportID'; import {isSettled} from '@libs/ReportUtils'; import StringUtils from '@libs/StringUtils'; import { @@ -429,6 +430,16 @@ function TransactionItemRow({ /> ), + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: ( + + + + ), + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: ( + + + + ), [CONST.SEARCH.TABLE_COLUMNS.TAX]: ( - diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 673f1b9f610f..ddaf1598d739 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -2040,6 +2040,14 @@ function getSortedTransactionData( return data; } + if (sortBy === CONST.SEARCH.TABLE_COLUMNS.REPORT_ID || sortBy === CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID) { + return data.sort((a, b) => { + const aValue = a.reportID; + const bValue = b.reportID; + return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare, true); + }); + } + const sortingProperty = transactionColumnNamesToSortingProperty[sortBy]; if (sortBy === CONST.SEARCH.TABLE_COLUMNS.TITLE) { @@ -2134,6 +2142,14 @@ function getSortedReportData( }); } + if (sortBy === CONST.SEARCH.TABLE_COLUMNS.REPORT_ID || sortBy === CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID) { + return data.sort((a, b) => { + const aValue = a.reportID; + const bValue = b.reportID; + return compareValues(aValue, bValue, sortOrder, sortBy, localeCompare, true); + }); + } + const sortingProperty = expenseReportColumnNamesToSortingProperty[sortBy]; if (!sortingProperty) { @@ -2297,6 +2313,10 @@ function getSearchColumnTranslationKey(columnId: SearchCustomColumnIds): Transla return 'common.title'; case CONST.SEARCH.TABLE_COLUMNS.STATUS: return 'common.status'; + case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID: + return 'common.longID'; + case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID: + return 'common.reportID'; } } @@ -2684,6 +2704,8 @@ function getColumnsToShow( [CONST.SEARCH.TABLE_COLUMNS.FROM]: true, [CONST.SEARCH.TABLE_COLUMNS.TO]: true, [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true, + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false, + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false, [CONST.SEARCH.TABLE_COLUMNS.ACTION]: true, }; @@ -2760,6 +2782,8 @@ function getColumnsToShow( [CONST.SEARCH.TABLE_COLUMNS.BILLABLE]: false, [CONST.SEARCH.TABLE_COLUMNS.TAX_AMOUNT]: false, [CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT]: true, + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false, + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false, [CONST.SEARCH.TABLE_COLUMNS.TITLE]: false, [CONST.SEARCH.TABLE_COLUMNS.STATUS]: false, [CONST.SEARCH.TABLE_COLUMNS.ACTION]: true, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index ad0a69a8b65f..cf2c98c9f2ee 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -1778,6 +1778,8 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({ case CONST.SEARCH.TABLE_COLUMNS.ACTION: columnWidth = {...getWidthStyle(variables.w80), ...styles.alignItemsCenter}; break; + case CONST.SEARCH.TABLE_COLUMNS.REPORT_ID: + case CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID: case CONST.SEARCH.TABLE_COLUMNS.MERCHANT: case CONST.SEARCH.TABLE_COLUMNS.FROM: case CONST.SEARCH.TABLE_COLUMNS.TO: diff --git a/tests/unit/Search/SearchUIUtilsTest.ts b/tests/unit/Search/SearchUIUtilsTest.ts index 97c46b3549e6..a4338dceae28 100644 --- a/tests/unit/Search/SearchUIUtilsTest.ts +++ b/tests/unit/Search/SearchUIUtilsTest.ts @@ -2770,6 +2770,8 @@ describe('SearchUIUtils', () => { [CONST.SEARCH.TABLE_COLUMNS.TO]: true, [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true, [CONST.SEARCH.TABLE_COLUMNS.ACTION]: true, + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false, + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false, }); }); @@ -2789,6 +2791,8 @@ describe('SearchUIUtils', () => { // Total should always be visible [CONST.SEARCH.TABLE_COLUMNS.TOTAL]: true, [CONST.SEARCH.TABLE_COLUMNS.ACTION]: false, + [CONST.SEARCH.TABLE_COLUMNS.BASE_62_REPORT_ID]: false, + [CONST.SEARCH.TABLE_COLUMNS.REPORT_ID]: false, }); });