From b9671de1055e635aab27ff5b0750125e97a33a6e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 3 Sep 2025 10:33:06 +0700 Subject: [PATCH 1/5] fix: unable to sort expenses after split --- .../MoneyRequestReportTransactionList.tsx | 39 ++++++++++--------- 1 file changed, 21 insertions(+), 18 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index c7e7ffff192f..0d0a7e03ead4 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -22,11 +22,10 @@ import {setActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavi import {convertToDisplayString} from '@libs/CurrencyUtils'; import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; -import Parser from '@libs/Parser'; import {getIOUActionForTransactionID, getOriginalMessage, isMoneyRequestAction} from '@libs/ReportActionsUtils'; -import {generateReportID, getMoneyRequestSpendBreakdown} from '@libs/ReportUtils'; +import {generateReportID, getMoneyRequestSpendBreakdown, isExpenseReport} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; -import {getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; +import {getAmount, getCategory, getCreated, getMerchant, getTag, getTransactionPendingAction, isTransactionPendingDelete} from '@libs/TransactionUtils'; import shouldShowTransactionYear from '@libs/TransactionUtils/shouldShowTransactionYear'; import Navigation from '@navigation/Navigation'; import type {ReportsSplitNavigatorParamList} from '@navigation/types'; @@ -89,19 +88,6 @@ type SortedTransactions = { const isSortableColumnName = (key: unknown): key is SortableColumnName => !!sortableColumnNames.find((val) => val === key); -const getTransactionValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName) => { - if (key === CONST.SEARCH.TABLE_COLUMNS.DATE) { - const dateKey = transaction.modifiedCreated ? 'modifiedCreated' : 'created'; - return transaction[dateKey]; - } - - if (key === CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION) { - return Parser.htmlToText(transaction.comment?.comment ?? ''); - } - - return transaction[key]; -}; - function MoneyRequestReportTransactionList({ report, transactions, @@ -167,14 +153,31 @@ function MoneyRequestReportTransactionList({ const {sortBy, sortOrder} = sortConfig; + const getSortValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName, reportToSort: OnyxTypes.Report) => { + switch (key) { + case CONST.SEARCH.TABLE_COLUMNS.DATE: + return getCreated(transaction); + case CONST.SEARCH.TABLE_COLUMNS.MERCHANT: + return getMerchant(transaction); + case CONST.SEARCH.TABLE_COLUMNS.CATEGORY: + return getCategory(transaction); + case CONST.SEARCH.TABLE_COLUMNS.TAG: + return getTag(transaction); + case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: + return getAmount(transaction, isExpenseReport(reportToSort), transaction.reportID === CONST.REPORT.UNREPORTED_REPORT_ID); + default: + return ''; + } + }; + const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => { return [...transactions] - .sort((a, b) => compareValues(getTransactionValue(a, sortBy), getTransactionValue(b, sortBy), sortOrder, sortBy, localeCompare)) + .sort((a, b) => compareValues(getSortValue(a, sortBy, report), getSortValue(b, sortBy, report), sortOrder, sortBy, localeCompare)) .map((transaction) => ({ ...transaction, shouldBeHighlighted: newTransactions?.includes(transaction), })); - }, [newTransactions, sortBy, sortOrder, transactions, localeCompare]); + }, [newTransactions, sortBy, sortOrder, transactions, localeCompare, report]); const columnsToShow = useMemo(() => { const columns = getColumnsToShow(session?.accountID, transactions, true); From dc20c88a12e8cc6a12c97c6c1d4407c88172b0cb Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Wed, 3 Sep 2025 13:56:49 +0700 Subject: [PATCH 2/5] add shouldCompareOriginalValue parameter --- .../MoneyRequestReportTransactionList.tsx | 35 +++++++++---------- src/libs/SearchUIUtils.ts | 8 ++--- 2 files changed, 21 insertions(+), 22 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 0d0a7e03ead4..1f399b65ad2e 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -88,6 +88,22 @@ type SortedTransactions = { const isSortableColumnName = (key: unknown): key is SortableColumnName => !!sortableColumnNames.find((val) => val === key); +const getSortValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName, reportToSort: OnyxTypes.Report) => { + switch (key) { + case CONST.SEARCH.TABLE_COLUMNS.DATE: + return getCreated(transaction); + case CONST.SEARCH.TABLE_COLUMNS.MERCHANT: + return getMerchant(transaction); + case CONST.SEARCH.TABLE_COLUMNS.CATEGORY: + return getCategory(transaction); + case CONST.SEARCH.TABLE_COLUMNS.TAG: + return getTag(transaction); + case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: + return getAmount(transaction, isExpenseReport(reportToSort), transaction.reportID === CONST.REPORT.UNREPORTED_REPORT_ID); + default: + return ''; + } +}; function MoneyRequestReportTransactionList({ report, transactions, @@ -153,26 +169,9 @@ function MoneyRequestReportTransactionList({ const {sortBy, sortOrder} = sortConfig; - const getSortValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName, reportToSort: OnyxTypes.Report) => { - switch (key) { - case CONST.SEARCH.TABLE_COLUMNS.DATE: - return getCreated(transaction); - case CONST.SEARCH.TABLE_COLUMNS.MERCHANT: - return getMerchant(transaction); - case CONST.SEARCH.TABLE_COLUMNS.CATEGORY: - return getCategory(transaction); - case CONST.SEARCH.TABLE_COLUMNS.TAG: - return getTag(transaction); - case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: - return getAmount(transaction, isExpenseReport(reportToSort), transaction.reportID === CONST.REPORT.UNREPORTED_REPORT_ID); - default: - return ''; - } - }; - const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => { return [...transactions] - .sort((a, b) => compareValues(getSortValue(a, sortBy, report), getSortValue(b, sortBy, report), sortOrder, sortBy, localeCompare)) + .sort((a, b) => compareValues(getSortValue(a, sortBy, report), getSortValue(b, sortBy, report), sortOrder, sortBy, localeCompare, true)) .map((transaction) => ({ ...transaction, shouldBeHighlighted: newTransactions?.includes(transaction), diff --git a/src/libs/SearchUIUtils.ts b/src/libs/SearchUIUtils.ts index 51e4be39f1df..ea4ffd7acd32 100644 --- a/src/libs/SearchUIUtils.ts +++ b/src/libs/SearchUIUtils.ts @@ -1605,9 +1605,9 @@ function getSortedSections( /** * Compares two values based on a specified sorting order and column. - * Handles both string and numeric comparisons, with special handling for absolute values when sorting by total amount. + * Handles both string and numeric comparisons. */ -function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: string, localeCompare: LocaleContextProps['localeCompare']): number { +function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: string, localeCompare: LocaleContextProps['localeCompare'], shouldCompareOriginalValue = false): number { const isAsc = sortOrder === CONST.SEARCH.SORT_ORDER.ASC; if (a === undefined || b === undefined) { @@ -1619,8 +1619,8 @@ function compareValues(a: unknown, b: unknown, sortOrder: SortOrder, sortBy: str } if (typeof a === 'number' && typeof b === 'number') { - const aValue = sortBy === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT ? Math.abs(a) : a; - const bValue = sortBy === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT ? Math.abs(b) : b; + const aValue = sortBy === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT && !shouldCompareOriginalValue ? Math.abs(a) : a; + const bValue = sortBy === CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT && !shouldCompareOriginalValue ? Math.abs(b) : b; return isAsc ? aValue - bValue : bValue - aValue; } From 238287d96fc97baa5f85de55007c4bf0f020618f Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Thu, 4 Sep 2025 00:25:25 +0700 Subject: [PATCH 3/5] fix lint --- .../MoneyRequestReportView/MoneyRequestReportTransactionList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 5f48ea17aff2..3d155c15454b 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -22,7 +22,6 @@ import {setActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavi import {convertToDisplayString} from '@libs/CurrencyUtils'; import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; -import Parser from '@libs/Parser'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; import {getMoneyRequestSpendBreakdown, isExpenseReport} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; From 43c03d0c3fa4f2ab6982612992dc89fb7bb0954e Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 8 Sep 2025 12:37:43 +0700 Subject: [PATCH 4/5] resolve comment --- .../MoneyRequestReportTransactionList.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 3d155c15454b..2334a8a13117 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -37,6 +37,7 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; +import Parser from '@libs/Parser'; import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader'; import MoneyRequestReportTotalSpend from './MoneyRequestReportTotalSpend'; import MoneyRequestReportTransactionItem from './MoneyRequestReportTransactionItem'; @@ -89,7 +90,7 @@ type SortedTransactions = { const isSortableColumnName = (key: unknown): key is SortableColumnName => !!sortableColumnNames.find((val) => val === key); -const getSortValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName, reportToSort: OnyxTypes.Report) => { +const getTransactionValue = (transaction: OnyxTypes.Transaction, key: SortableColumnName, reportToSort: OnyxTypes.Report) => { switch (key) { case CONST.SEARCH.TABLE_COLUMNS.DATE: return getCreated(transaction); @@ -101,8 +102,10 @@ const getSortValue = (transaction: OnyxTypes.Transaction, key: SortableColumnNam return getTag(transaction); case CONST.SEARCH.TABLE_COLUMNS.TOTAL_AMOUNT: return getAmount(transaction, isExpenseReport(reportToSort), transaction.reportID === CONST.REPORT.UNREPORTED_REPORT_ID); + case CONST.SEARCH.TABLE_COLUMNS.DESCRIPTION: + return Parser.htmlToText(transaction.comment?.comment ?? ''); default: - return ''; + return transaction[key]; } }; function MoneyRequestReportTransactionList({ @@ -172,7 +175,7 @@ function MoneyRequestReportTransactionList({ const sortedTransactions: TransactionWithOptionalHighlight[] = useMemo(() => { return [...transactions] - .sort((a, b) => compareValues(getSortValue(a, sortBy, report), getSortValue(b, sortBy, report), sortOrder, sortBy, localeCompare, true)) + .sort((a, b) => compareValues(getTransactionValue(a, sortBy, report), getTransactionValue(b, sortBy, report), sortOrder, sortBy, localeCompare, true)) .map((transaction) => ({ ...transaction, shouldBeHighlighted: newTransactions?.includes(transaction), From 7da5cd657c6fe94ff0a923a928c7b85ef29dc655 Mon Sep 17 00:00:00 2001 From: nkdengineer Date: Mon, 8 Sep 2025 12:42:34 +0700 Subject: [PATCH 5/5] fix prettier --- .../MoneyRequestReportTransactionList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx index 2334a8a13117..444a7fd8e3ad 100644 --- a/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx +++ b/src/components/MoneyRequestReportView/MoneyRequestReportTransactionList.tsx @@ -22,6 +22,7 @@ import {setActiveTransactionThreadIDs} from '@libs/actions/TransactionThreadNavi import {convertToDisplayString} from '@libs/CurrencyUtils'; import {getThreadReportIDsForTransactions} from '@libs/MoneyRequestReportUtils'; import {navigationRef} from '@libs/Navigation/Navigation'; +import Parser from '@libs/Parser'; import {getIOUActionForTransactionID} from '@libs/ReportActionsUtils'; import {getMoneyRequestSpendBreakdown, isExpenseReport} from '@libs/ReportUtils'; import {compareValues, getColumnsToShow, isTransactionAmountTooLong, isTransactionTaxAmountTooLong} from '@libs/SearchUIUtils'; @@ -37,7 +38,6 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import type SCREENS from '@src/SCREENS'; import type * as OnyxTypes from '@src/types/onyx'; -import Parser from '@libs/Parser'; import MoneyRequestReportTableHeader from './MoneyRequestReportTableHeader'; import MoneyRequestReportTotalSpend from './MoneyRequestReportTotalSpend'; import MoneyRequestReportTransactionItem from './MoneyRequestReportTransactionItem';