-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: Create the main WorkspaceReportFieldsPage page #43943
Merged
mountiny
merged 8 commits into
Expensify:main
from
waterim:feat-43677-report-fields-main-page
Jun 24, 2024
Merged
Changes from all commits
Commits
Show all changes
8 commits
Select commit
Hold shift + click to select a range
b206430
report fields main page
waterim 67563a1
changed icons
waterim 18999b8
fix UI
waterim 321b15b
fix selection
waterim 526ba21
tranlsations
waterim 959b774
Merge remote-tracking branch 'upstream/main' into feat-43677-report-f…
waterim 25fe2d2
remove tag code
waterim 505ea66
updated CONST for report fields
waterim File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains 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 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 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 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 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 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 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 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 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 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 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
171 changes: 171 additions & 0 deletions
171
src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx
This file contains 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,171 @@ | ||
| import {useIsFocused} from '@react-navigation/native'; | ||
| import type {StackScreenProps} from '@react-navigation/stack'; | ||
| import {Str} from 'expensify-common'; | ||
| import React, {useEffect, useMemo, useState} from 'react'; | ||
| import {ActivityIndicator, View} from 'react-native'; | ||
| import {useOnyx} from 'react-native-onyx'; | ||
| import Button from '@components/Button'; | ||
| import HeaderWithBackButton from '@components/HeaderWithBackButton'; | ||
| import * as Expensicons from '@components/Icon/Expensicons'; | ||
| import * as Illustrations from '@components/Icon/Illustrations'; | ||
| import ScreenWrapper from '@components/ScreenWrapper'; | ||
| import SelectionList from '@components/SelectionList'; | ||
| import ListItemRightCaretWithLabel from '@components/SelectionList/ListItemRightCaretWithLabel'; | ||
| import TableListItem from '@components/SelectionList/TableListItem'; | ||
| import type {ListItem} from '@components/SelectionList/types'; | ||
| import Text from '@components/Text'; | ||
| import WorkspaceEmptyStateSection from '@components/WorkspaceEmptyStateSection'; | ||
| import useLocalize from '@hooks/useLocalize'; | ||
| import useTheme from '@hooks/useTheme'; | ||
| import useThemeStyles from '@hooks/useThemeStyles'; | ||
| import useWindowDimensions from '@hooks/useWindowDimensions'; | ||
| import * as DeviceCapabilities from '@libs/DeviceCapabilities'; | ||
| import type {FullScreenNavigatorParamList} from '@libs/Navigation/types'; | ||
| import * as ReportUtils from '@libs/ReportUtils'; | ||
| import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper'; | ||
| import CONST from '@src/CONST'; | ||
| import ONYXKEYS from '@src/ONYXKEYS'; | ||
| import type SCREENS from '@src/SCREENS'; | ||
| import type {PolicyReportField} from '@src/types/onyx/Policy'; | ||
|
|
||
| type ReportFieldForList = ListItem & {value: string; fieldID: string}; | ||
|
|
||
| type WorkspaceReportFieldsPageProps = StackScreenProps<FullScreenNavigatorParamList, typeof SCREENS.WORKSPACE.REPORT_FIELDS>; | ||
|
|
||
| function WorkspaceReportFieldsPage({ | ||
| route: { | ||
| params: {policyID}, | ||
| }, | ||
| }: WorkspaceReportFieldsPageProps) { | ||
| const {isSmallScreenWidth} = useWindowDimensions(); | ||
| const styles = useThemeStyles(); | ||
| const theme = useTheme(); | ||
| const {translate} = useLocalize(); | ||
| const isFocused = useIsFocused(); | ||
| const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`); | ||
| const filteredPolicyFieldList = useMemo(() => { | ||
| if (!policy?.fieldList) { | ||
| return {}; | ||
| } | ||
| return Object.fromEntries(Object.entries(policy.fieldList).filter(([key]) => key !== 'text_title')); | ||
| }, [policy]); | ||
| const [selectedReportFields, setSelectedReportFields] = useState<PolicyReportField[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| if (isFocused) { | ||
| return; | ||
| } | ||
| setSelectedReportFields([]); | ||
| }, [isFocused]); | ||
|
|
||
| const reportFieldsList = useMemo<ReportFieldForList[]>(() => { | ||
| if (!policy) { | ||
| return []; | ||
| } | ||
| return Object.values(filteredPolicyFieldList).map((reportField) => ({ | ||
| value: reportField.name, | ||
| fieldID: reportField.fieldID, | ||
| keyForList: String(reportField.orderWeight), | ||
| orderWeight: reportField.orderWeight, | ||
| isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined, | ||
| text: reportField.name, | ||
| rightElement: <ListItemRightCaretWithLabel labelText={Str.recapitalize(reportField.type)} />, | ||
| })); | ||
| }, [filteredPolicyFieldList, policy, selectedReportFields]); | ||
|
|
||
| const updateSelectedReportFields = (item: ReportFieldForList) => { | ||
| const fieldKey = ReportUtils.getReportFieldKey(item.fieldID); | ||
| const updatedReportFields = selectedReportFields.find((selectedReportField) => selectedReportField.name === item.value) | ||
| ? selectedReportFields.filter((selectedReportField) => selectedReportField.name !== item.value) | ||
| : [...selectedReportFields, filteredPolicyFieldList[fieldKey]]; | ||
| setSelectedReportFields(updatedReportFields); | ||
| }; | ||
|
|
||
| const isLoading = reportFieldsList === undefined; | ||
| const shouldShowEmptyState = Object.values(filteredPolicyFieldList).length <= 0 && !isLoading; | ||
|
|
||
| const getHeaderButtons = () => ( | ||
| <View style={[styles.w100, styles.flexRow, styles.gap2, isSmallScreenWidth && styles.mb3]}> | ||
| <Button | ||
| medium | ||
| success | ||
| onPress={() => {}} | ||
| icon={Expensicons.Plus} | ||
| text={translate('workspace.reportFields.addField')} | ||
| style={[isSmallScreenWidth && styles.flex1]} | ||
| /> | ||
| </View> | ||
| ); | ||
|
|
||
| const getCustomListHeader = () => ( | ||
| <View style={[styles.flex1, styles.flexRow, styles.justifyContentBetween, styles.pl3, styles.pr9]}> | ||
| <Text style={styles.searchInputStyle}>{translate('common.name')}</Text> | ||
| <Text style={[styles.searchInputStyle, styles.textAlignCenter]}>{translate('common.type')}</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| const getHeaderText = () => ( | ||
| <View style={[styles.ph5, styles.pb5, styles.pt3]}> | ||
| <Text style={[styles.textNormal, styles.colorMuted]}>{translate('workspace.reportFields.subtitle')}</Text> | ||
| </View> | ||
| ); | ||
|
|
||
| return ( | ||
| <AccessOrNotFoundWrapper | ||
| policyID={policyID} | ||
| accessVariants={[CONST.POLICY.ACCESS_VARIANTS.ADMIN, CONST.POLICY.ACCESS_VARIANTS.PAID]} | ||
| featureName={CONST.POLICY.MORE_FEATURES.ARE_REPORT_FIELDS_ENABLED} | ||
| > | ||
| <ScreenWrapper | ||
| includeSafeAreaPaddingBottom={false} | ||
| style={[styles.defaultModalContainer]} | ||
| testID={WorkspaceReportFieldsPage.displayName} | ||
| shouldShowOfflineIndicatorInWideScreen | ||
| offlineIndicatorStyle={styles.mtAuto} | ||
| > | ||
| <HeaderWithBackButton | ||
| icon={Illustrations.Pencil} | ||
| title={translate('workspace.common.reportFields')} | ||
| shouldShowBackButton={isSmallScreenWidth} | ||
| > | ||
| {!isSmallScreenWidth && getHeaderButtons()} | ||
| </HeaderWithBackButton> | ||
| {isSmallScreenWidth && <View style={[styles.pl5, styles.pr5]}>{getHeaderButtons()}</View>} | ||
| {(!isSmallScreenWidth || reportFieldsList.length === 0 || isLoading) && getHeaderText()} | ||
| {isLoading && ( | ||
| <ActivityIndicator | ||
| size={CONST.ACTIVITY_INDICATOR_SIZE.LARGE} | ||
| style={[styles.flex1]} | ||
| color={theme.spinner} | ||
| /> | ||
| )} | ||
| {shouldShowEmptyState && ( | ||
| <WorkspaceEmptyStateSection | ||
| title={translate('workspace.reportFields.emptyReportFields.title')} | ||
| icon={Illustrations.EmptyStateExpenses} | ||
| subtitle={translate('workspace.reportFields.emptyReportFields.subtitle')} | ||
| /> | ||
| )} | ||
| {!shouldShowEmptyState && !isLoading && ( | ||
| <SelectionList | ||
| canSelectMultiple | ||
| sections={[{data: reportFieldsList, isDisabled: false}]} | ||
| onCheckboxPress={updateSelectedReportFields} | ||
| onSelectRow={() => {}} | ||
| onSelectAll={() => {}} | ||
| ListItem={TableListItem} | ||
| customListHeader={getCustomListHeader()} | ||
| listHeaderContent={isSmallScreenWidth ? getHeaderText() : null} | ||
| shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()} | ||
| listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} | ||
| showScrollIndicator={false} | ||
| /> | ||
| )} | ||
| </ScreenWrapper> | ||
| </AccessOrNotFoundWrapper> | ||
| ); | ||
| } | ||
|
|
||
| WorkspaceReportFieldsPage.displayName = 'WorkspaceReportFieldsPage'; | ||
|
|
||
| export default WorkspaceReportFieldsPage; | ||
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why we didn't use the
WorkspacePageWithSectionscomponent? It is used in almost every workspace-related page.