-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #18806 from Expensify/jack-completeTask
Complete Task Front End
- Loading branch information
Showing
12 changed files
with
348 additions
and
120 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| import React from 'react'; | ||
| import {View, Pressable} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import {withOnyx} from 'react-native-onyx'; | ||
| import Navigation from '../../libs/Navigation/Navigation'; | ||
| import withLocalize, {withLocalizePropTypes} from '../withLocalize'; | ||
| import ROUTES from '../../ROUTES'; | ||
| import compose from '../../libs/compose'; | ||
| import ONYXKEYS from '../../ONYXKEYS'; | ||
| import Text from '../Text'; | ||
| import styles from '../../styles/styles'; | ||
| import Icon from '../Icon'; | ||
| import * as Expensicons from '../Icon/Expensicons'; | ||
| import * as StyleUtils from '../../styles/StyleUtils'; | ||
| import getButtonState from '../../libs/getButtonState'; | ||
| import CONST from '../../CONST'; | ||
|
|
||
| const propTypes = { | ||
| /** The ID of the associated taskReport */ | ||
| taskReportID: PropTypes.string.isRequired, | ||
|
|
||
| /** Whether the task preview is hovered so we can modify its style */ | ||
| isHovered: PropTypes.bool, | ||
|
|
||
| /** Name of the reportAction action */ | ||
| actionName: PropTypes.string.isRequired, | ||
|
|
||
| /* Onyx Props */ | ||
|
|
||
| taskReport: PropTypes.shape({ | ||
| /** Title of the task */ | ||
| reportName: PropTypes.string, | ||
|
|
||
| /** Email address of the manager in this iou report */ | ||
| managerEmail: PropTypes.string, | ||
|
|
||
| /** Email address of the creator of this iou report */ | ||
| ownerEmail: PropTypes.string, | ||
| }), | ||
|
|
||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| const defaultProps = { | ||
| taskReport: {}, | ||
| isHovered: false, | ||
| }; | ||
| const TaskAction = (props) => { | ||
| const taskReportID = props.taskReportID; | ||
| const taskReportName = props.taskReport.reportName || ''; | ||
|
|
||
| const messageLinkText = props.actionName === CONST.REPORT.ACTIONS.TYPE.TASKCOMPLETED ? props.translate('task.messages.completed') : props.translate('newTaskPage.task'); | ||
| return ( | ||
| <Pressable | ||
| onPress={() => Navigation.navigate(ROUTES.getReportRoute(taskReportID))} | ||
| style={[styles.flexRow, styles.justifyContentBetween]} | ||
| > | ||
| <View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter]}> | ||
| <Text style={styles.chatItemMessageLink}>{messageLinkText}</Text> | ||
| <Text style={[styles.chatItemMessage]}>{` ${taskReportName}`}</Text> | ||
| </View> | ||
| <Icon | ||
| src={Expensicons.ArrowRight} | ||
| fill={StyleUtils.getIconFillColor(getButtonState(props.isHovered))} | ||
| /> | ||
| </Pressable> | ||
| ); | ||
| }; | ||
|
|
||
| TaskAction.propTypes = propTypes; | ||
| TaskAction.defaultProps = defaultProps; | ||
| TaskAction.displayName = 'TaskAction'; | ||
|
|
||
| export default compose( | ||
| withLocalize, | ||
| withOnyx({ | ||
| taskReport: { | ||
| key: ({taskReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${taskReportID}`, | ||
| }, | ||
| }), | ||
| )(TaskAction); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,120 @@ | ||
| import React, {useEffect} from 'react'; | ||
| import {View, TouchableOpacity} from 'react-native'; | ||
| import PropTypes from 'prop-types'; | ||
| import lodashGet from 'lodash/get'; | ||
| import reportPropTypes from '../pages/reportPropTypes'; | ||
| import withLocalize, {withLocalizePropTypes} from './withLocalize'; | ||
| import * as ReportUtils from '../libs/ReportUtils'; | ||
| import * as Expensicons from './Icon/Expensicons'; | ||
| import Text from './Text'; | ||
| import participantPropTypes from './participantPropTypes'; | ||
| import Avatar from './Avatar'; | ||
| import styles from '../styles/styles'; | ||
| import themeColors from '../styles/themes/default'; | ||
| import CONST from '../CONST'; | ||
| import withWindowDimensions from './withWindowDimensions'; | ||
| import compose from '../libs/compose'; | ||
| import Navigation from '../libs/Navigation/Navigation'; | ||
| import ROUTES from '../ROUTES'; | ||
| import Icon from './Icon'; | ||
| import MenuItemWithTopDescription from './MenuItemWithTopDescription'; | ||
| import Button from './Button'; | ||
| import * as TaskUtils from '../libs/actions/Task'; | ||
|
|
||
| const propTypes = { | ||
| /** The report currently being looked at */ | ||
| report: reportPropTypes.isRequired, | ||
|
|
||
| /** Personal details so we can get the ones for the report participants */ | ||
| personalDetails: PropTypes.objectOf(participantPropTypes).isRequired, | ||
|
|
||
| ...withLocalizePropTypes, | ||
| }; | ||
|
|
||
| function TaskHeader(props) { | ||
| const title = ReportUtils.getReportName(props.report); | ||
| const assigneeName = ReportUtils.getDisplayNameForParticipant(props.report.managerEmail); | ||
| const assigneeAvatar = ReportUtils.getAvatar(lodashGet(props.personalDetails, [props.report.managerEmail, 'avatar']), props.report.managerEmail); | ||
| const isOpen = props.report.stateNum === CONST.REPORT.STATE_NUM.OPEN && props.report.statusNum === CONST.REPORT.STATUS.OPEN; | ||
| const isCompleted = props.report.stateNum === CONST.REPORT.STATE_NUM.SUBMITTED && props.report.statusNum === CONST.REPORT.STATUS.APPROVED; | ||
| const parentReportID = props.report.parentReportID; | ||
|
|
||
| useEffect(() => { | ||
| TaskUtils.setTaskReport(props.report); | ||
| }, [props.report]); | ||
|
|
||
| return ( | ||
| <View style={styles.borderBottom}> | ||
| <View style={[{backgroundColor: themeColors.highlightBG}, styles.pl0]}> | ||
| <View style={[styles.ph5, styles.pb5]}> | ||
| <Text style={[styles.textLabelSupporting, styles.lh16]}>{props.translate('common.to')}</Text> | ||
| <TouchableOpacity | ||
| onPress={() => Navigation.navigate(ROUTES.getTaskReportAssigneeRoute(props.report.reportID))} | ||
| disabled={!isOpen} | ||
| > | ||
| <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, styles.pv3]}> | ||
| <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}> | ||
| {props.report.managerEmail && ( | ||
| <> | ||
| <Avatar | ||
| source={assigneeAvatar} | ||
| type={CONST.ICON_TYPE_AVATAR} | ||
| name={assigneeName} | ||
| size={CONST.AVATAR_SIZE.HEADER} | ||
| /> | ||
| <View style={[styles.flexColumn, styles.ml3]}> | ||
| <Text | ||
| style={[styles.headerText, styles.pre]} | ||
| numberOfLines={1} | ||
| > | ||
| {assigneeName} | ||
| </Text> | ||
| </View> | ||
| </> | ||
| )} | ||
| </View> | ||
| <View style={[styles.flexRow]}> | ||
| {isCompleted ? ( | ||
| <> | ||
| <Text>{props.translate('task.completed')}</Text> | ||
| <View style={styles.moneyRequestHeaderCheckmark}> | ||
| <Icon | ||
| src={Expensicons.Checkmark} | ||
| fill={themeColors.iconSuccessFill} | ||
| /> | ||
| </View> | ||
| </> | ||
| ) : ( | ||
| <Button | ||
| success | ||
| medium | ||
| text={props.translate('newTaskPage.markAsDone')} | ||
| onPress={() => TaskUtils.completeTask(props.report.reportID, parentReportID, title)} | ||
| /> | ||
| )} | ||
| </View> | ||
| </View> | ||
| </TouchableOpacity> | ||
| </View> | ||
| </View> | ||
| <MenuItemWithTopDescription | ||
| shouldShowHeaderTitle | ||
| title={props.report.reportName} | ||
| description="Task" | ||
| onPress={() => Navigation.navigate(ROUTES.getTaskReportTitleRoute(props.report.reportID))} | ||
| disabled={!isOpen} | ||
| /> | ||
| <MenuItemWithTopDescription | ||
| title={lodashGet(props.report, 'description', '')} | ||
| description="Description" | ||
| onPress={() => Navigation.navigate(ROUTES.getTaskReportDescriptionRoute(props.report.reportID))} | ||
| disabled={!isOpen} | ||
| /> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| TaskHeader.propTypes = propTypes; | ||
| TaskHeader.displayName = 'TaskHeader'; | ||
|
|
||
| export default compose(withWindowDimensions, withLocalize)(TaskHeader); |
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
Oops, something went wrong.