From 299df1e48f75a9fc363a3514814378c7922e2fe4 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 9 Jan 2024 20:02:36 +0500 Subject: [PATCH 01/11] feat: add policy report picker fields --- src/ONYXKEYS.ts | 3 +- src/ROUTES.ts | 4 + src/SCREENS.ts | 1 + .../ReportActionItem/MoneyReportView.tsx | 4 +- .../AppNavigator/ModalStackNavigators.tsx | 1 + src/libs/Navigation/linkingConfig.ts | 1 + src/libs/Permissions.ts | 2 +- src/pages/EditReportFieldDatePage.tsx | 80 ++++++++++++++++ src/pages/EditReportFieldDropdownPage.tsx | 76 +++++++++++++++ src/pages/EditReportFieldPage.tsx | 96 +++++++++++++++++++ src/pages/EditReportFieldTextPage.tsx | 78 +++++++++++++++ src/types/onyx/PolicyReportField.ts | 3 +- src/types/onyx/index.ts | 3 +- 13 files changed, 346 insertions(+), 6 deletions(-) create mode 100644 src/pages/EditReportFieldDatePage.tsx create mode 100644 src/pages/EditReportFieldDropdownPage.tsx create mode 100644 src/pages/EditReportFieldPage.tsx create mode 100644 src/pages/EditReportFieldTextPage.tsx diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 89ddbdc06883..9b7c235fecd2 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -350,6 +350,7 @@ const ONYXKEYS = { REPORT_VIRTUAL_CARD_FRAUD_DRAFT: 'reportVirtualCardFraudFormDraft', GET_PHYSICAL_CARD_FORM: 'getPhysicalCardForm', GET_PHYSICAL_CARD_FORM_DRAFT: 'getPhysicalCardFormDraft', + POLICY_REPORT_FIELD_EDIT_FORM: 'policyReportFieldEditForm', }, } as const; @@ -442,7 +443,7 @@ type OnyxValues = { [ONYXKEYS.COLLECTION.POLICY_MEMBERS]: OnyxTypes.PolicyMembers; [ONYXKEYS.COLLECTION.POLICY_MEMBERS_DRAFTS]: OnyxTypes.PolicyMember; [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES]: OnyxTypes.RecentlyUsedCategories; - [ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS]: OnyxTypes.PolicyReportField; + [ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS]: OnyxTypes.PolicyReportFields; [ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_REPORT_FIELDS]: OnyxTypes.RecentlyUsedReportFields; [ONYXKEYS.COLLECTION.DEPRECATED_POLICY_MEMBER_LIST]: OnyxTypes.PolicyMembers; [ONYXKEYS.COLLECTION.WORKSPACE_INVITE_MEMBERS_DRAFT]: Record; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index e8a860582bb1..b98c3771fe58 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -163,6 +163,10 @@ const ROUTES = { route: 'r/:threadReportID/edit/currency', getRoute: (threadReportID: string, currency: string, backTo: string) => `r/${threadReportID}/edit/currency?currency=${currency}&backTo=${backTo}` as const, }, + EDIT_REPORT_FIELD_REQUEST: { + route: 'r/:reportID/edit/policyField/:policyID/:fieldID', + getRoute: (reportID: string, policyID: string, fieldID: string) => `r/${reportID}/edit/policyField/${policyID}/${fieldID}` as const, + }, REPORT_WITH_ID_DETAILS_SHARE_CODE: { route: 'r/:reportID/details/shareCode', getRoute: (reportID: string) => `r/${reportID}/details/shareCode` as const, diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 703cb309d641..e2f4a849d4aa 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -208,6 +208,7 @@ const SCREENS = { EDIT_REQUEST: { ROOT: 'EditRequest_Root', CURRENCY: 'EditRequest_Currency', + REPORT_FIELD: 'EditRequest_ReportField', }, NEW_CHAT: { diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 4fcca3e518a5..894aa30b0d54 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -18,6 +18,8 @@ import * as ReportUtils from '@libs/ReportUtils'; import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import variables from '@styles/variables'; import type {PolicyReportField, Report} from '@src/types/onyx'; +import Navigation from '@libs/Navigation/Navigation'; +import ROUTES from '@src/ROUTES'; type MoneyReportViewProps = { /** The report currently being looked at */ @@ -73,7 +75,7 @@ function MoneyReportView({report, policyReportFields, shouldShowHorizontalRule}: {}} + onPress={() => Navigation.navigate(ROUTES.EDIT_REPORT_FIELD_REQUEST.getRoute(report.reportID, report.policyID ?? '', reportField.fieldID))} shouldShowRightIcon disabled={false} wrapperStyle={[styles.pv2, styles.taskDescriptionMenuItem]} diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 4be1c988561b..7ded2a07d0d1 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -267,6 +267,7 @@ const FlagCommentStackNavigator = createModalStackNavigator({ [SCREENS.EDIT_REQUEST.ROOT]: () => require('../../../pages/EditRequestPage').default as React.ComponentType, [SCREENS.EDIT_REQUEST.CURRENCY]: () => require('../../../pages/iou/IOUCurrencySelection').default as React.ComponentType, + [SCREENS.EDIT_REQUEST.REPORT_FIELD]: () => require('../../../pages/EditReportFieldPage').default as React.ComponentType, }); const PrivateNotesModalStackNavigator = createModalStackNavigator({ diff --git a/src/libs/Navigation/linkingConfig.ts b/src/libs/Navigation/linkingConfig.ts index 5f2a607b5f78..2b14bbd89956 100644 --- a/src/libs/Navigation/linkingConfig.ts +++ b/src/libs/Navigation/linkingConfig.ts @@ -480,6 +480,7 @@ const linkingConfig: LinkingOptions = { screens: { [SCREENS.EDIT_REQUEST.ROOT]: ROUTES.EDIT_REQUEST.route, [SCREENS.EDIT_REQUEST.CURRENCY]: ROUTES.EDIT_CURRENCY_REQUEST.route, + [SCREENS.EDIT_REQUEST.REPORT_FIELD]: ROUTES.EDIT_REPORT_FIELD_REQUEST.route, }, }, [SCREENS.RIGHT_MODAL.SIGN_IN]: { diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index ce5e0e674c59..47c6ae0f9a2d 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -19,7 +19,7 @@ function canUseCommentLinking(betas: OnyxEntry): boolean { } function canUseReportFields(betas: OnyxEntry): boolean { - return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas); + return true; // !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas); } function canUseViolations(betas: OnyxEntry): boolean { diff --git a/src/pages/EditReportFieldDatePage.tsx b/src/pages/EditReportFieldDatePage.tsx new file mode 100644 index 000000000000..a98cc0d60822 --- /dev/null +++ b/src/pages/EditReportFieldDatePage.tsx @@ -0,0 +1,80 @@ +import React, {useCallback, useRef} from 'react'; +import {View} from 'react-native'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import DatePicker from '@components/DatePicker'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +type EditReportFieldDatePageProps = { + /** Value of the policy report field */ + fieldValue: string; + + /** Name of the policy report field */ + fieldName: string; + + /** ID of the policy report field */ + fieldID: string; + + /** Callback to fire when the Save button is pressed */ + onSubmit: () => void, +}; + +function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: EditReportFieldDatePageProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const inputRef = useRef(null); + + const validate = useCallback( + (value) => { + const errors: Record = {}; + if (value[fieldID].trim() === '') { + errors[fieldID] = 'common.error.fieldRequired'; + } + return errors; + }, + [fieldID], + ); + + return ( + inputRef.current?.focus()} + testID={EditReportFieldDatePage.displayName} + > + + + + + + + + ); +} + +EditReportFieldDatePage.displayName = 'EditReportFieldDatePage'; + +export default EditReportFieldDatePage; diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx new file mode 100644 index 000000000000..ff6af14e212d --- /dev/null +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -0,0 +1,76 @@ +import React, { useState, useMemo } from 'react'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import OptionsSelector from '@components/OptionsSelector'; +import ScreenWrapper from '@components/ScreenWrapper'; +import useThemeStyles from '@hooks/useThemeStyles'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useLocalize from '@hooks/useLocalize'; + +type EditReportFieldDropdownPageProps = { + /** Value of the policy report field */ + fieldValue: string; + + /** Name of the policy report field */ + fieldName: string; + + /** Options of the policy report field */ + fieldOptions: string[]; + + /** Callback to fire when the Save button is pressed */ + onSubmit: () => void, +}; + +function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOptions}: EditReportFieldDropdownPageProps) { + const [searchValue, setSearchValue] = useState(''); + const styles = useThemeStyles(); + const {getSafeAreaMargins} = useStyleUtils(); + const {translate} = useLocalize(); + + const sections = useMemo(() => { + const filteredOptions = fieldOptions.filter((option) => option.includes(searchValue)); + return [ + { + title: translate('common.recents'), + shouldShow: true, + data: [] + }, + { + title: translate('common.all'), + shouldShow: true, + data: filteredOptions.map((option) => ({text: option})) + } + ]; + }, [fieldOptions, searchValue, translate]); + + return ( + + {({insets}) => ( + <> + + + + )} + + ); +} + +EditReportFieldDropdownPage.displayName = 'EditReportFieldDropdownPage'; + +export default EditReportFieldDropdownPage; diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx new file mode 100644 index 000000000000..b763e088380f --- /dev/null +++ b/src/pages/EditReportFieldPage.tsx @@ -0,0 +1,96 @@ +import React, {useEffect} from 'react'; +import {withOnyx} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; +import type {PolicyReportFields, Report} from '@src/types/onyx'; +import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; +import ScreenWrapper from '@components/ScreenWrapper'; +import ONYXKEYS from '@src/ONYXKEYS'; +import EditReportFieldTextPage from './EditReportFieldTextPage'; +import EditReportFieldDropdownPage from './EditReportFieldDropdownPage'; +import EditReportFieldDatePage from './EditReportFieldDatePage'; + +type EditReportFieldPageOnyxProps = { + /** The report object for the expense report */ + report: OnyxEntry, + + /** Policy report fields */ + policyReportFields: OnyxEntry, +}; + +type EditReportFieldPageProps = EditReportFieldPageOnyxProps & { + /** Route from navigation */ + route: { + /** Params from the route */ + params: { + /** Which field we are editing */ + fieldID: string, + + /** reportID for the expense report */ + reportID: string + + /** policyID for the expense report */ + policyID: string + }, + }, +}; + +function EditReportFieldPage({ route, report, policyReportFields }: EditReportFieldPageProps) { + const policyReportField = policyReportFields?.[route.params.fieldID]; + const reportFieldValue = report?.reportFields?.[policyReportField?.fieldID ?? '']; + + // Decides whether to allow or disallow editing a money request + useEffect(() => { + + }, []); + + + if (policyReportField) { + if (policyReportField.type === 'text' || policyReportField.type === 'formula') { + return {}} + />; + } + + if (policyReportField.type === 'date') { + return {}} + />; + } + + if (policyReportField.type === 'dropdown') { + return {}} + />; + } + }; + + return ( + + {}} onLinkPress={() => {}} /> + + ); +} + +EditReportFieldPage.displayName = 'EditReportFieldPage'; + +export default withOnyx({ + report: { + key: ({route}) => `${ONYXKEYS.COLLECTION.REPORT}${route.params.reportID}`, + }, + policyReportFields: { + key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS}${route.params.policyID}`, + } +})(EditReportFieldPage); diff --git a/src/pages/EditReportFieldTextPage.tsx b/src/pages/EditReportFieldTextPage.tsx new file mode 100644 index 000000000000..c18564c59c11 --- /dev/null +++ b/src/pages/EditReportFieldTextPage.tsx @@ -0,0 +1,78 @@ +import React, {useCallback, useRef} from 'react'; +import {View} from 'react-native'; +import FormProvider from '@components/Form/FormProvider'; +import InputWrapper from '@components/Form/InputWrapper'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import ScreenWrapper from '@components/ScreenWrapper'; +import TextInput from '@components/TextInput'; +import useLocalize from '@hooks/useLocalize'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; + +type EditReportFieldTextPageProps = { + /** Value of the policy report field */ + fieldValue: string; + + /** Name of the policy report field */ + fieldName: string; + + /** ID of the policy report field */ + fieldID: string; + + /** Callback to fire when the Save button is pressed */ + onSubmit: () => void, +}; + +function EditReportFieldTextPage({fieldName, onSubmit, fieldValue, fieldID}: EditReportFieldTextPageProps) { + const styles = useThemeStyles(); + const {translate} = useLocalize(); + const inputRef = useRef(null); + + const validate = useCallback( + (value) => { + const errors: Record = {}; + if (value[fieldID].trim() === '') { + errors[fieldID] = 'common.error.fieldRequired'; + } + return errors; + }, + [fieldID], + ); + + return ( + inputRef.current?.focus()} + testID={EditReportFieldTextPage.displayName} + > + + + + + + + + ); +} + +EditReportFieldTextPage.displayName = 'EditReportFieldTextPage'; + +export default EditReportFieldTextPage; diff --git a/src/types/onyx/PolicyReportField.ts b/src/types/onyx/PolicyReportField.ts index 6a3be23c0a0b..a1724a9ff52f 100644 --- a/src/types/onyx/PolicyReportField.ts +++ b/src/types/onyx/PolicyReportField.ts @@ -24,5 +24,4 @@ type PolicyReportField = { }; type PolicyReportFields = Record; -export default PolicyReportField; -export type {PolicyReportFields}; +export type {PolicyReportField, PolicyReportFields}; diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index 7bd9c321be5e..5960118d69ff 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -30,8 +30,8 @@ import type Policy from './Policy'; import type {PolicyCategories, PolicyCategory} from './PolicyCategory'; import type {PolicyMembers} from './PolicyMember'; import type PolicyMember from './PolicyMember'; -import type PolicyReportField from './PolicyReportField'; import type {PolicyTag, PolicyTags} from './PolicyTag'; +import type {PolicyReportField, PolicyReportFields} from './PolicyReportField'; import type PrivatePersonalDetails from './PrivatePersonalDetails'; import type RecentlyUsedCategories from './RecentlyUsedCategories'; import type RecentlyUsedReportFields from './RecentlyUsedReportFields'; @@ -136,5 +136,6 @@ export type { WalletTransfer, ReportUserIsTyping, PolicyReportField, + PolicyReportFields, RecentlyUsedReportFields, }; From 03c23a5764ab0c4c6c93922d4f67c72340f01871 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 9 Jan 2024 20:03:24 +0500 Subject: [PATCH 02/11] fix: prettier --- .../ReportActionItem/MoneyReportView.tsx | 4 +- src/pages/EditReportFieldDatePage.tsx | 6 +- src/pages/EditReportFieldDropdownPage.tsx | 16 ++-- src/pages/EditReportFieldPage.tsx | 87 ++++++++++--------- src/pages/EditReportFieldTextPage.tsx | 2 +- src/types/onyx/index.ts | 2 +- 6 files changed, 62 insertions(+), 55 deletions(-) diff --git a/src/components/ReportActionItem/MoneyReportView.tsx b/src/components/ReportActionItem/MoneyReportView.tsx index 894aa30b0d54..8c6e818d2411 100644 --- a/src/components/ReportActionItem/MoneyReportView.tsx +++ b/src/components/ReportActionItem/MoneyReportView.tsx @@ -14,12 +14,12 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as CurrencyUtils from '@libs/CurrencyUtils'; +import Navigation from '@libs/Navigation/Navigation'; import * as ReportUtils from '@libs/ReportUtils'; import AnimatedEmptyStateBackground from '@pages/home/report/AnimatedEmptyStateBackground'; import variables from '@styles/variables'; -import type {PolicyReportField, Report} from '@src/types/onyx'; -import Navigation from '@libs/Navigation/Navigation'; import ROUTES from '@src/ROUTES'; +import type {PolicyReportField, Report} from '@src/types/onyx'; type MoneyReportViewProps = { /** The report currently being looked at */ diff --git a/src/pages/EditReportFieldDatePage.tsx b/src/pages/EditReportFieldDatePage.tsx index a98cc0d60822..8aea7a891fba 100644 --- a/src/pages/EditReportFieldDatePage.tsx +++ b/src/pages/EditReportFieldDatePage.tsx @@ -1,10 +1,10 @@ import React, {useCallback, useRef} from 'react'; import {View} from 'react-native'; +import DatePicker from '@components/DatePicker'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; -import DatePicker from '@components/DatePicker'; import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -21,7 +21,7 @@ type EditReportFieldDatePageProps = { fieldID: string; /** Callback to fire when the Save button is pressed */ - onSubmit: () => void, + onSubmit: () => void; }; function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: EditReportFieldDatePageProps) { @@ -66,7 +66,7 @@ function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: Edi accessibilityLabel={fieldName} role={CONST.ROLE.PRESENTATION} maxDate={CONST.CALENDAR_PICKER.MAX_DATE} - minDate={CONST.CALENDAR_PICKER.MIN_DATE} + minDate={CONST.CALENDAR_PICKER.MIN_DATE} ref={inputRef} /> diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index ff6af14e212d..91aa65a1eefd 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -1,10 +1,10 @@ -import React, { useState, useMemo } from 'react'; +import React, {useMemo, useState} from 'react'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import OptionsSelector from '@components/OptionsSelector'; import ScreenWrapper from '@components/ScreenWrapper'; -import useThemeStyles from '@hooks/useThemeStyles'; -import useStyleUtils from '@hooks/useStyleUtils'; import useLocalize from '@hooks/useLocalize'; +import useStyleUtils from '@hooks/useStyleUtils'; +import useThemeStyles from '@hooks/useThemeStyles'; type EditReportFieldDropdownPageProps = { /** Value of the policy report field */ @@ -17,7 +17,7 @@ type EditReportFieldDropdownPageProps = { fieldOptions: string[]; /** Callback to fire when the Save button is pressed */ - onSubmit: () => void, + onSubmit: () => void; }; function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOptions}: EditReportFieldDropdownPageProps) { @@ -32,13 +32,13 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti { title: translate('common.recents'), shouldShow: true, - data: [] + data: [], }, { title: translate('common.all'), shouldShow: true, - data: filteredOptions.map((option) => ({text: option})) - } + data: filteredOptions.map((option) => ({text: option})), + }, ]; }, [fieldOptions, searchValue, translate]); @@ -63,7 +63,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti onSelectRow={onSubmit} onChangeText={setSearchValue} highlightSelectedOptions - isRowMultilineSupported + isRowMultilineSupported /> )} diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx index b763e088380f..d74582708995 100644 --- a/src/pages/EditReportFieldPage.tsx +++ b/src/pages/EditReportFieldPage.tsx @@ -1,77 +1,80 @@ import React, {useEffect} from 'react'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; -import type {PolicyReportFields, Report} from '@src/types/onyx'; import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView'; import ScreenWrapper from '@components/ScreenWrapper'; import ONYXKEYS from '@src/ONYXKEYS'; -import EditReportFieldTextPage from './EditReportFieldTextPage'; -import EditReportFieldDropdownPage from './EditReportFieldDropdownPage'; +import type {PolicyReportFields, Report} from '@src/types/onyx'; import EditReportFieldDatePage from './EditReportFieldDatePage'; +import EditReportFieldDropdownPage from './EditReportFieldDropdownPage'; +import EditReportFieldTextPage from './EditReportFieldTextPage'; type EditReportFieldPageOnyxProps = { /** The report object for the expense report */ - report: OnyxEntry, + report: OnyxEntry; /** Policy report fields */ - policyReportFields: OnyxEntry, + policyReportFields: OnyxEntry; }; type EditReportFieldPageProps = EditReportFieldPageOnyxProps & { - /** Route from navigation */ - route: { + /** Route from navigation */ + route: { /** Params from the route */ params: { /** Which field we are editing */ - fieldID: string, + fieldID: string; /** reportID for the expense report */ - reportID: string + reportID: string; /** policyID for the expense report */ - policyID: string - }, - }, + policyID: string; + }; + }; }; -function EditReportFieldPage({ route, report, policyReportFields }: EditReportFieldPageProps) { +function EditReportFieldPage({route, report, policyReportFields}: EditReportFieldPageProps) { const policyReportField = policyReportFields?.[route.params.fieldID]; const reportFieldValue = report?.reportFields?.[policyReportField?.fieldID ?? '']; // Decides whether to allow or disallow editing a money request - useEffect(() => { - - }, []); - + useEffect(() => {}, []); if (policyReportField) { if (policyReportField.type === 'text' || policyReportField.type === 'formula') { - return {}} - />; + return ( + {}} + /> + ); } - + if (policyReportField.type === 'date') { - return {}} - />; + return ( + {}} + /> + ); } - + if (policyReportField.type === 'dropdown') { - return {}} - />; + return ( + {}} + /> + ); } - }; + } return ( - {}} onLinkPress={() => {}} /> + {}} + onLinkPress={() => {}} + /> ); } @@ -92,5 +99,5 @@ export default withOnyx( }, policyReportFields: { key: ({route}) => `${ONYXKEYS.COLLECTION.POLICY_REPORT_FIELDS}${route.params.policyID}`, - } + }, })(EditReportFieldPage); diff --git a/src/pages/EditReportFieldTextPage.tsx b/src/pages/EditReportFieldTextPage.tsx index c18564c59c11..45e5199d0460 100644 --- a/src/pages/EditReportFieldTextPage.tsx +++ b/src/pages/EditReportFieldTextPage.tsx @@ -21,7 +21,7 @@ type EditReportFieldTextPageProps = { fieldID: string; /** Callback to fire when the Save button is pressed */ - onSubmit: () => void, + onSubmit: () => void; }; function EditReportFieldTextPage({fieldName, onSubmit, fieldValue, fieldID}: EditReportFieldTextPageProps) { diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts index 5960118d69ff..a4f79b641f91 100644 --- a/src/types/onyx/index.ts +++ b/src/types/onyx/index.ts @@ -30,8 +30,8 @@ import type Policy from './Policy'; import type {PolicyCategories, PolicyCategory} from './PolicyCategory'; import type {PolicyMembers} from './PolicyMember'; import type PolicyMember from './PolicyMember'; -import type {PolicyTag, PolicyTags} from './PolicyTag'; import type {PolicyReportField, PolicyReportFields} from './PolicyReportField'; +import type {PolicyTag, PolicyTags} from './PolicyTag'; import type PrivatePersonalDetails from './PrivatePersonalDetails'; import type RecentlyUsedCategories from './RecentlyUsedCategories'; import type RecentlyUsedReportFields from './RecentlyUsedReportFields'; From 74ea0d70c25b3eeb9021d803115827bd0374a13f Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 9 Jan 2024 20:23:16 +0500 Subject: [PATCH 03/11] fix: key errors --- src/pages/EditReportFieldDropdownPage.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 91aa65a1eefd..e4373249de3b 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -37,7 +37,12 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti { title: translate('common.all'), shouldShow: true, - data: filteredOptions.map((option) => ({text: option})), + data: filteredOptions.map((option) => ({ + text: option, + keyForList: option, + searchText: option, + tooltipText: option + })), }, ]; }, [fieldOptions, searchValue, translate]); From 1341d40270dbfc87ce7e1b774f1e5d5a4e931a43 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 9 Jan 2024 20:47:41 +0500 Subject: [PATCH 04/11] fix: revert canUseReportField beta --- src/libs/Permissions.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Permissions.ts b/src/libs/Permissions.ts index 47c6ae0f9a2d..ce5e0e674c59 100644 --- a/src/libs/Permissions.ts +++ b/src/libs/Permissions.ts @@ -19,7 +19,7 @@ function canUseCommentLinking(betas: OnyxEntry): boolean { } function canUseReportFields(betas: OnyxEntry): boolean { - return true; // !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas); + return !!betas?.includes(CONST.BETAS.REPORT_FIELDS) || canUseAllBetas(betas); } function canUseViolations(betas: OnyxEntry): boolean { From ca9ab3ac62178e8f64064cac1b8e35c794e7e617 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Tue, 9 Jan 2024 20:53:49 +0500 Subject: [PATCH 05/11] fix: lint issues --- src/pages/EditReportFieldDropdownPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index e4373249de3b..a9058820bb3e 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -41,7 +41,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti text: option, keyForList: option, searchText: option, - tooltipText: option + tooltipText: option, })), }, ]; From ae92f62f73ac8167e1c7a325712735224dacc0cc Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 11 Jan 2024 00:33:51 +0500 Subject: [PATCH 06/11] add comment for getReportFieldTitle function --- src/libs/ReportUtils.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/libs/ReportUtils.ts b/src/libs/ReportUtils.ts index 2e92f8690abe..dcf2c1bfc1c6 100644 --- a/src/libs/ReportUtils.ts +++ b/src/libs/ReportUtils.ts @@ -4322,6 +4322,10 @@ function navigateToPrivateNotes(report: Report, session: Session) { Navigation.navigate(ROUTES.PRIVATE_NOTES_LIST.getRoute(report.reportID)); } +/** + * Given a report field and a report, get the title of the field. + * This is specially useful when we have a report field of type formula. + */ function getReportFieldTitle(report: OnyxEntry, reportField: PolicyReportField) { const value = report?.reportFields?.[reportField.fieldID] ?? reportField.defaultValue; From 1a2dc382d086743fe4cc6e0a8525b24e4c72dfb2 Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Thu, 11 Jan 2024 01:02:05 +0500 Subject: [PATCH 07/11] fix: ts errors --- src/ONYXKEYS.ts | 3 +++ src/pages/EditReportFieldDatePage.tsx | 4 +++- src/pages/EditReportFieldDropdownPage.tsx | 1 + src/pages/EditReportFieldTextPage.tsx | 4 +++- 4 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts index 9b7c235fecd2..007a793d5ea5 100755 --- a/src/ONYXKEYS.ts +++ b/src/ONYXKEYS.ts @@ -351,6 +351,7 @@ const ONYXKEYS = { GET_PHYSICAL_CARD_FORM: 'getPhysicalCardForm', GET_PHYSICAL_CARD_FORM_DRAFT: 'getPhysicalCardFormDraft', POLICY_REPORT_FIELD_EDIT_FORM: 'policyReportFieldEditForm', + POLICY_REPORT_FIELD_EDIT_FORM_DRAFT: 'policyReportFieldEditFormDraft', }, } as const; @@ -527,6 +528,8 @@ type OnyxValues = { [ONYXKEYS.FORMS.REPORT_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form; [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM]: OnyxTypes.Form; [ONYXKEYS.FORMS.GET_PHYSICAL_CARD_FORM_DRAFT]: OnyxTypes.Form | undefined; + [ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM]: OnyxTypes.Form; + [ONYXKEYS.FORMS.POLICY_REPORT_FIELD_EDIT_FORM_DRAFT]: OnyxTypes.Form | undefined; }; type OnyxKeyValue = OnyxEntry; diff --git a/src/pages/EditReportFieldDatePage.tsx b/src/pages/EditReportFieldDatePage.tsx index 8aea7a891fba..f40ae41edd49 100644 --- a/src/pages/EditReportFieldDatePage.tsx +++ b/src/pages/EditReportFieldDatePage.tsx @@ -30,7 +30,7 @@ function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: Edi const inputRef = useRef(null); const validate = useCallback( - (value) => { + (value: Record) => { const errors: Record = {}; if (value[fieldID].trim() === '') { errors[fieldID] = 'common.error.fieldRequired'; @@ -48,6 +48,7 @@ function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: Edi testID={EditReportFieldDatePage.displayName} > + { /* @ts-expect-error TODO: TS migration */ } (null); const validate = useCallback( - (value) => { + (value: Record) => { const errors: Record = {}; if (value[fieldID].trim() === '') { errors[fieldID] = 'common.error.fieldRequired'; @@ -48,6 +48,7 @@ function EditReportFieldTextPage({fieldName, onSubmit, fieldValue, fieldID}: Edi testID={EditReportFieldTextPage.displayName} > + { /* @ts-expect-error TODO: TS migration */ } Date: Thu, 11 Jan 2024 01:02:39 +0500 Subject: [PATCH 08/11] prettier --- src/pages/EditReportFieldDatePage.tsx | 2 +- src/pages/EditReportFieldTextPage.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/EditReportFieldDatePage.tsx b/src/pages/EditReportFieldDatePage.tsx index f40ae41edd49..5ee86b2bf8e6 100644 --- a/src/pages/EditReportFieldDatePage.tsx +++ b/src/pages/EditReportFieldDatePage.tsx @@ -48,7 +48,7 @@ function EditReportFieldDatePage({fieldName, onSubmit, fieldValue, fieldID}: Edi testID={EditReportFieldDatePage.displayName} > - { /* @ts-expect-error TODO: TS migration */ } + {/* @ts-expect-error TODO: TS migration */} - { /* @ts-expect-error TODO: TS migration */ } + {/* @ts-expect-error TODO: TS migration */} Date: Sun, 14 Jan 2024 20:12:36 +0500 Subject: [PATCH 09/11] fix console error on dropdown field --- src/pages/EditReportFieldDropdownPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 4f1e16fab380..7c16a3dad3f6 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -61,7 +61,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti contentContainerStyles={[{paddingBottom: getSafeAreaMargins(insets).marginBottom}]} optionHoveredStyle={styles.hoveredComponentBG} sectionHeaderStyle={styles.mt5} - selectedOptions={[fieldValue]} + selectedOptions={[{text: fieldValue}]} textInputLabel={translate('common.search')} boldStyle sections={sections} From 048d69f9dc2389f0f3e80344f02a3053d837de0e Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Wed, 17 Jan 2024 01:27:46 +0500 Subject: [PATCH 10/11] fix: show checkmark on the selected option in the dropdown --- src/pages/EditReportFieldDropdownPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index 7c16a3dad3f6..d7ee9e85256b 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -61,7 +61,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti contentContainerStyles={[{paddingBottom: getSafeAreaMargins(insets).marginBottom}]} optionHoveredStyle={styles.hoveredComponentBG} sectionHeaderStyle={styles.mt5} - selectedOptions={[{text: fieldValue}]} + selectedOptions={[{name: fieldValue}]} textInputLabel={translate('common.search')} boldStyle sections={sections} From cfa4ceaf57318c06b235ceefa554a4f61f1558ea Mon Sep 17 00:00:00 2001 From: Sibtain Ali Date: Mon, 22 Jan 2024 19:41:50 +0500 Subject: [PATCH 11/11] Update src/pages/EditReportFieldDropdownPage.tsx Co-authored-by: Joel Davies --- src/pages/EditReportFieldDropdownPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/EditReportFieldDropdownPage.tsx b/src/pages/EditReportFieldDropdownPage.tsx index d7ee9e85256b..a1d76e13f261 100644 --- a/src/pages/EditReportFieldDropdownPage.tsx +++ b/src/pages/EditReportFieldDropdownPage.tsx @@ -27,7 +27,7 @@ function EditReportFieldDropdownPage({fieldName, onSubmit, fieldValue, fieldOpti const {translate} = useLocalize(); const sections = useMemo(() => { - const filteredOptions = fieldOptions.filter((option) => option.includes(searchValue)); + const filteredOptions = fieldOptions.filter((option) => option.toLowerCase().includes(searchValue.toLowerCase())); return [ { title: translate('common.recents'),