[Better Expense Report View] Keep the Report fields at the top of the table report view #59724
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| import {Str} from 'expensify-common'; | ||
| import React, {useMemo} from 'react'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import type {OnyxEntry} from 'react-native-onyx'; | ||
| import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription'; | ||
| import OfflineWithFeedback from '@components/OfflineWithFeedback'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import {clearReportFieldKeyErrors} from '@libs/actions/Report'; | ||
| import Navigation from '@libs/Navigation/Navigation'; | ||
| import { | ||
| getAvailableReportFields, | ||
| getFieldViolation, | ||
| getFieldViolationTranslation, | ||
| getReportFieldKey, | ||
| isInvoiceReport as isInvoiceReportUtils, | ||
| isPaidGroupPolicyExpenseReport as isPaidGroupPolicyExpenseReportUtils, | ||
| isReportFieldDisabled, | ||
| isReportFieldOfTypeTitle, | ||
| } from '@libs/ReportUtils'; | ||
| import type {ThemeStyles} from '@styles/index'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import ROUTES from '@src/ROUTES'; | ||
| import type {Policy, PolicyReportField, Report, ReportViolationName} from '@src/types/onyx'; | ||
| import type {PendingAction} from '@src/types/onyx/OnyxCommon'; | ||
|
|
||
| type MoneyRequestViewReportFieldsProps = { | ||
| /** The report currently being looked at */ | ||
| report: OnyxEntry<Report>; | ||
|
|
||
| /** Policy that the report belongs to */ | ||
| policy: OnyxEntry<Policy>; | ||
|
|
||
| /** Indicates whether the IOU report is a combined report */ | ||
| isCombinedReport?: boolean; | ||
|
|
||
| /** Indicates whether we have any pending actions from parent component */ | ||
| pendingAction?: PendingAction; | ||
|
borys3kk marked this conversation as resolved.
|
||
| }; | ||
|
|
||
| type EnrichedPolicyReportField = { | ||
| fieldValue: string; | ||
| isFieldDisabled: boolean; | ||
| fieldKey: string; | ||
| violation: ReportViolationName | undefined; | ||
| violationTranslation: string; | ||
| } & PolicyReportField; | ||
|
|
||
| function ReportFieldView(reportField: EnrichedPolicyReportField, report: OnyxEntry<Report>, styles: ThemeStyles, pendingAction?: PendingAction) { | ||
| return ( | ||
| <OfflineWithFeedback | ||
| // Need to return undefined when we have pendingAction to avoid the duplicate pending action | ||
| pendingAction={pendingAction ? undefined : report?.pendingFields?.[reportField.fieldKey as keyof typeof report.pendingFields]} | ||
| errorRowStyles={styles.ph5} | ||
| key={`menuItem-${reportField.fieldKey}`} | ||
| onClose={() => clearReportFieldKeyErrors(report?.reportID, reportField.fieldKey)} | ||
| > | ||
| <MenuItemWithTopDescription | ||
| description={Str.UCFirst(reportField.name)} | ||
| title={reportField.fieldValue} | ||
| onPress={() => { | ||
| Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report?.reportID, report?.policyID, reportField.fieldID, Navigation.getActiveRoute())); | ||
| }} | ||
| shouldShowRightIcon | ||
| disabled={reportField.isFieldDisabled} | ||
|
Comment on lines
+64
to
+65
|
||
| wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} | ||
| shouldGreyOutWhenDisabled={false} | ||
| numberOfLinesTitle={0} | ||
| interactive={!reportField.isFieldDisabled} | ||
| shouldStackHorizontally={false} | ||
| onSecondaryInteraction={() => {}} | ||
| titleWithTooltips={[]} | ||
| brickRoadIndicator={reportField.violation ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined} | ||
| errorText={reportField.violationTranslation} | ||
| /> | ||
| </OfflineWithFeedback> | ||
| ); | ||
| } | ||
|
|
||
| function MoneyRequestViewReportFields({report, policy, isCombinedReport = false, pendingAction}: MoneyRequestViewReportFieldsProps) { | ||
| const styles = useThemeStyles(); | ||
|
|
||
| const [violations] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_VIOLATIONS}${report?.reportID}`, {canBeMissing: true}); | ||
|
|
||
| const shouldHideSingleReportField = (reportField: PolicyReportField) => { | ||
| const fieldValue = reportField.value ?? reportField.defaultValue; | ||
| const hasEnableOption = reportField.type !== CONST.REPORT_FIELD_TYPES.LIST || reportField.disabledOptions.some((option) => !option); | ||
|
|
||
| return isReportFieldOfTypeTitle(reportField) || (!fieldValue && !hasEnableOption); | ||
| }; | ||
|
|
||
| const sortedPolicyReportFields = useMemo<EnrichedPolicyReportField[]>((): EnrichedPolicyReportField[] => { | ||
| const fields = getAvailableReportFields(report, Object.values(policy?.fieldList ?? {})); | ||
| return fields | ||
| .filter((field) => field.target === report?.type) | ||
|
borys3kk marked this conversation as resolved.
|
||
| .filter((reportField) => !shouldHideSingleReportField(reportField)) | ||
| .sort(({orderWeight: firstOrderWeight}, {orderWeight: secondOrderWeight}) => firstOrderWeight - secondOrderWeight) | ||
| .map((field): EnrichedPolicyReportField => { | ||
| const fieldValue = field.value ?? field.defaultValue; | ||
| const isFieldDisabled = isReportFieldDisabled(report, field, policy); | ||
| const fieldKey = getReportFieldKey(field.fieldID); | ||
|
|
||
| const violation = getFieldViolation(violations, field); | ||
| const violationTranslation = getFieldViolationTranslation(field, violation); | ||
|
|
||
| return { | ||
| ...field, | ||
| fieldValue, | ||
| isFieldDisabled, | ||
| fieldKey, | ||
| violation, | ||
| violationTranslation, | ||
| }; | ||
| }); | ||
| }, [policy, report, violations]); | ||
|
|
||
| const enabledReportFields = sortedPolicyReportFields.filter((reportField) => !isReportFieldDisabled(report, reportField, policy)); | ||
| const isOnlyTitleFieldEnabled = enabledReportFields.length === 1 && isReportFieldOfTypeTitle(enabledReportFields.at(0)); | ||
| const isPaidGroupPolicyExpenseReport = isPaidGroupPolicyExpenseReportUtils(report); | ||
| const isInvoiceReport = isInvoiceReportUtils(report); | ||
|
borys3kk marked this conversation as resolved.
|
||
|
|
||
| const shouldDisplayReportFields = (isPaidGroupPolicyExpenseReport || isInvoiceReport) && policy?.areReportFieldsEnabled && (!isOnlyTitleFieldEnabled || !isCombinedReport); | ||
|
Contributor
There was a problem hiding this comment. I wonder if in general it would be cleaner to refactor this method to do early returns so we can stop the execution immediately we know the report fields should not be displayed, for example if |
||
|
|
||
| return ( | ||
| shouldDisplayReportFields && | ||
| sortedPolicyReportFields.map((reportField) => { | ||
| return ReportFieldView(reportField, report, styles, pendingAction); | ||
| }) | ||
| ); | ||
| } | ||
| MoneyRequestViewReportFields.displayName = 'MoneyRequestViewReportFields'; | ||
|
|
||
| export default MoneyRequestViewReportFields; | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.