diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx index 5f699e59b..fd11307d5 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx @@ -1,178 +1,155 @@ /* eslint-disable camelcase */ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { useState } from "react" -import { - View, - ViewStyle, - TouchableOpacity, - StyleSheet, - TouchableWithoutFeedback, -} from "react-native" -import { Ionicons, Entypo } from "@expo/vector-icons" +import React, { useState } from 'react'; +import { View, ViewStyle, TouchableOpacity, StyleSheet, TouchableWithoutFeedback } from 'react-native'; +import { Ionicons, Entypo } from '@expo/vector-icons'; // COMPONENTS -import { Card, ListItem } from "../../../../components" +import { Card, ListItem } from '../../../../components'; // STYLES -import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles" -import { spacing, typography, useAppTheme } from "../../../../theme" -import EstimateTime from "../../TimerScreen/components/EstimateTime" -import AllTaskStatuses from "../../../../components/AllTaskStatuses" -import { - IOrganizationTeamWithMStatus, - OT_Member, -} from "../../../../services/interfaces/IOrganizationTeam" +import { GLOBAL_STYLE as GS } from '../../../../../assets/ts/styles'; +import { spacing, typography, useAppTheme } from '../../../../theme'; +import EstimateTime from '../../TimerScreen/components/EstimateTime'; +import AllTaskStatuses from '../../../../components/AllTaskStatuses'; +import { IOrganizationTeamWithMStatus, OT_Member } from '../../../../services/interfaces/IOrganizationTeam'; import { I_TeamMemberCardHook, I_TMCardTaskEditHook, useTeamMemberCard, - useTMCardTaskEdit, -} from "../../../../services/hooks/features/useTeamMemberCard" -import UserHeaderCard from "./UserHeaderCard" -import TaskInfo from "./TaskInfo" -import { observer } from "mobx-react-lite" -import { TodayWorkedTime } from "./TodayWorkTime" -import { TimeProgressBar } from "./TimeProgressBar" -import { useNavigation } from "@react-navigation/native" -import { WorkedOnTask } from "./WorkedOnTask" -import UnassignedTasksList from "./UnassignedTaskList" -import { translate } from "../../../../i18n" -import { useTimer } from "../../../../services/hooks/useTimer" -import { SettingScreenNavigationProp } from "../../../../navigators/AuthenticatedNavigator" -import { getTimerStatusValue } from "../../../../helpers/get-timer-status" + useTMCardTaskEdit +} from '../../../../services/hooks/features/useTeamMemberCard'; +import UserHeaderCard from './UserHeaderCard'; +import TaskInfo from './TaskInfo'; +import { observer } from 'mobx-react-lite'; +import { TodayWorkedTime } from './TodayWorkTime'; +import { TimeProgressBar } from './TimeProgressBar'; +import { useNavigation } from '@react-navigation/native'; +import { WorkedOnTask } from './WorkedOnTask'; +import UnassignedTasksList from './UnassignedTaskList'; +import { translate } from '../../../../i18n'; +import { useTimer } from '../../../../services/hooks/useTimer'; +import { SettingScreenNavigationProp } from '../../../../navigators/AuthenticatedNavigator'; +import { getTimerStatusValue } from '../../../../helpers/get-timer-status'; export type ListItemProps = { - member: OT_Member -} + member: OT_Member; +}; interface IcontentProps { - memberInfo: I_TeamMemberCardHook - taskEdition: I_TMCardTaskEditHook - onPressIn?: (isTaskScreen?: boolean) => void + memberInfo: I_TeamMemberCardHook; + taskEdition: I_TMCardTaskEditHook; + onPressIn?: (isTaskScreen?: boolean) => void; } export interface Props extends ListItemProps { - index: number - openMenuIndex: number | null - setOpenMenuIndex: React.Dispatch> - currentTeam: IOrganizationTeamWithMStatus | null - canNavigate: boolean + index: number; + openMenuIndex: number | null; + setOpenMenuIndex: React.Dispatch>; + currentTeam: IOrganizationTeamWithMStatus | null; + canNavigate: boolean; } -export const ListItemContent: React.FC = observer( - ({ memberInfo, taskEdition, onPressIn }) => { - // HOOKS - const { colors, dark } = useAppTheme() - return ( - - - onPressIn()}> - - - - +export const ListItemContent: React.FC = observer(({ memberInfo, taskEdition, onPressIn }) => { + // HOOKS + const { colors, dark } = useAppTheme(); + return ( + + + onPressIn()}> + + + + + + onPressIn(true)} + /> + taskEdition.editMode && taskEdition.setEditMode(false)}> + {memberInfo.memberTask ? : null} + + + onPressIn(true)} + style={{ + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', + height: 48, + width: '100%' + }} > - - {memberInfo.memberTask ? ( - - ) : null} - - - - - - + + + - - - + + + - {memberInfo.memberTask && taskEdition.estimateEditMode ? ( - - - - ) : ( - taskEdition.setEstimateEditMode(true)} + {memberInfo.memberTask && taskEdition.estimateEditMode ? ( + + - )} - + + ) : ( + taskEdition.setEstimateEditMode(true)} + /> + )} - - ) - }, -) + + + ); +}); const ListCardItem: React.FC = observer((props) => { - const { colors } = useAppTheme() + const { colors } = useAppTheme(); // // STATS - const memberInfo = useTeamMemberCard(props.member) - const taskEdition = useTMCardTaskEdit(memberInfo.memberTask) - const { timerStatus } = useTimer() - const [showUnassignedList, setShowUnassignedList] = useState(false) + const memberInfo = useTeamMemberCard(props.member); + const taskEdition = useTMCardTaskEdit(memberInfo.memberTask); + const { timerStatus } = useTimer(); + const [showUnassignedList, setShowUnassignedList] = useState(false); - const navigation = useNavigation>() + const navigation = useNavigation>(); const onPressIn = (isTaskScreen?: boolean) => { - taskEdition.setEditMode(false) - taskEdition.setEstimateEditMode(false) - props.setOpenMenuIndex(null) + taskEdition.setEditMode(false); + taskEdition.setEstimateEditMode(false); + props.setOpenMenuIndex(null); if (props.canNavigate) { isTaskScreen - ? memberInfo.memberTask && - navigation.navigate("TaskScreen", { taskId: memberInfo.memberTask?.id }) - : navigation.navigate("Profile", { + ? memberInfo.memberTask && navigation.navigate('TaskScreen', { taskId: memberInfo.memberTask?.id }) + : navigation.navigate('Profile', { userId: memberInfo.memberUser.id, - activeTab: "worked", - }) + activeTab: 'worked' + }); } - } - const currentMember = props.currentTeam?.members.find( - (currentMember) => currentMember.id === props.member.id, - ) + }; + const currentMember = props.currentTeam?.members.find((currentMember) => currentMember.id === props.member.id); - const timerStatusValue = getTimerStatusValue( - timerStatus, - currentMember, - props.currentTeam?.public, - ) + const timerStatusValue = getTimerStatusValue(timerStatus, currentMember, props.currentTeam?.public); return ( = observer((props) => { ...GS.mt5, paddingTop: 4, backgroundColor: - timerStatusValue === "idle" - ? "#F1A2A2" - : timerStatusValue === "pause" - ? "#EBC386" - : timerStatusValue === "online" - ? "#88D1A5" - : "#DCD6D6", + timerStatusValue === 'idle' + ? '#F1A2A2' + : timerStatusValue === 'pause' + ? '#EBC386' + : timerStatusValue === 'online' + ? '#88D1A5' + : '#DCD6D6' }} HeadingComponent={ = observer((props) => { ...GS.r0, ...GS.pt5, ...GS.pr3, - ...GS.zIndexFront, + ...GS.zIndexFront }} > = observer((props) => { ...GS.r0, ...GS.zIndexFront, ...GS.shadowLg, - shadowColor: "rgba(0, 0, 0, 0.52)", + shadowColor: 'rgba(0, 0, 0, 0.52)', borderRadius: 14, width: 172, marginTop: -5, marginRight: 17, backgroundColor: colors.background, minWidth: spacing.huge * 2, - ...(props.index !== props.openMenuIndex ? { display: "none" } : {}), + ...(props.index !== props.openMenuIndex ? { display: 'none' } : {}) }} > - {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && - taskEdition.task && ( - { - taskEdition.setEditMode(true) - props.setOpenMenuIndex(null) - }} - > - {translate("tasksScreen.editTaskLabel")} - - )} - {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && - taskEdition.task && ( - { - taskEdition.setEstimateEditMode(true) - props.setOpenMenuIndex(null) - }} - > - {translate("myWorkScreen.estimateLabel")} - - )} + {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && taskEdition.task && ( + { + taskEdition.setEditMode(true); + props.setOpenMenuIndex(null); + }} + > + {translate('tasksScreen.editTaskLabel')} + + )} + {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && taskEdition.task && ( + { + taskEdition.setEstimateEditMode(true); + props.setOpenMenuIndex(null); + }} + > + {translate('myWorkScreen.estimateLabel')} + + )} {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && memberInfo.memberUnassignTasks.length > 0 && ( { - setShowUnassignedList(true) - props.setOpenMenuIndex(null) - }} - > - {translate("tasksScreen.assignTaskButton")} - - )} - {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && - !!memberInfo.memberTask && ( - { - memberInfo.unassignTask(taskEdition.task) - props.setOpenMenuIndex(null) + setShowUnassignedList(true); + props.setOpenMenuIndex(null); }} > - {translate("tasksScreen.unassignTaskLabel")} + {translate('tasksScreen.assignTaskButton')} )} + {(memberInfo.isAuthTeamManager || memberInfo.isAuthUser) && !!memberInfo.memberTask && ( + { + memberInfo.unassignTask(taskEdition.task); + props.setOpenMenuIndex(null); + }} + > + {translate('tasksScreen.unassignTaskLabel')} + + )} {memberInfo.isAuthTeamManager && !memberInfo.isAuthUser && @@ -293,43 +255,37 @@ const ListCardItem: React.FC = observer((props) => { <> {memberInfo.isTeamManager ? ( { - props.setOpenMenuIndex(null) - memberInfo.unMakeMemberManager() + props.setOpenMenuIndex(null); + memberInfo.unMakeMemberManager(); }} > - {translate("tasksScreen.unMakeManager")} + {translate('tasksScreen.unMakeManager')} ) : ( { - props.setOpenMenuIndex(null) - memberInfo.makeMemberManager() + props.setOpenMenuIndex(null); + memberInfo.makeMemberManager(); }} > - {translate("tasksScreen.makeManager")} + {translate('tasksScreen.makeManager')} )} )} {!memberInfo.isTeamOwner && ( { - props.setOpenMenuIndex(null) - memberInfo.removeMemberFromTeam() + props.setOpenMenuIndex(null); + memberInfo.removeMemberFromTeam(); }} > - {translate("tasksScreen.remove")} + {translate('tasksScreen.remove')} )} @@ -337,7 +293,7 @@ const ListCardItem: React.FC = observer((props) => { {showUnassignedList ? ( { - setShowUnassignedList(false) + setShowUnassignedList(false); }} > @@ -345,17 +301,11 @@ const ListCardItem: React.FC = observer((props) => { ) : ( - props.setOpenMenuIndex( - props.openMenuIndex === props.index ? null : props.index, - ) + props.setOpenMenuIndex(props.openMenuIndex === props.index ? null : props.index) } > {props.openMenuIndex !== props.index ? ( - + ) : ( )} @@ -373,18 +323,15 @@ const ListCardItem: React.FC = observer((props) => { onPressIn={(isTaskScreen?: boolean) => onPressIn(isTaskScreen)} /> ) : ( - + )} } /> - ) -}) + ); +}); -export default ListCardItem +export default ListCardItem; const $listCard: ViewStyle = { ...GS.flex1, @@ -393,52 +340,52 @@ const $listCard: ViewStyle = { ...GS.shadowSm, ...GS.roundedMd, minHeight: null, - shadowOffset: { width: 0, height: 0 }, -} + shadowOffset: { width: 0, height: 0 } +}; const styles = StyleSheet.create({ dropdownTxt: { - color: "#282048", + color: '#282048', fontFamily: typography.primary.semiBold, fontSize: 14, height: 38, - width: "100%", + width: '100%' }, estimate: { - alignItems: "center", - backgroundColor: "#E8EBF8", + alignItems: 'center', + backgroundColor: '#E8EBF8', borderRadius: 5, - flexDirection: "row", - justifyContent: "space-between", - marginLeft: "auto", + flexDirection: 'row', + justifyContent: 'space-between', + marginLeft: 'auto', marginRight: 10, - paddingVertical: 2, + paddingVertical: 2 }, firstContainer: { - alignItems: "center", - flexDirection: "row", - width: "95%", + alignItems: 'center', + flexDirection: 'row', + width: '95%' }, times: { - alignItems: "center", + alignItems: 'center', borderTopWidth: 1, - flexDirection: "row", - justifyContent: "space-between", - paddingTop: 16, + flexDirection: 'row', + justifyContent: 'space-between', + paddingTop: 16 }, wrapTaskTitle: { borderTopWidth: 1, marginTop: 16, paddingVertical: 16, - width: "98%", + width: '98%' }, wrapTotalTime: { - alignItems: "center", - justifyContent: "center", + alignItems: 'center', + justifyContent: 'center', marginRight: 30, - position: "absolute", - right: 0, - }, -}) + position: 'absolute', + right: 0 + } +}); diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/TaskInfo.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/TaskInfo.tsx index 1c6382081..cac6b7229 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/TaskInfo.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/TaskInfo.tsx @@ -13,11 +13,13 @@ import IssuesModal from '../../../../components/IssuesModal'; const TaskInfo = ({ memberInfo, editMode, - setEditMode + setEditMode, + onPressIn }: { memberInfo: I_TeamMemberCardHook; editMode: boolean; setEditMode: (value: boolean) => unknown; + onPressIn: () => void; }) => { const task = memberInfo.memberTask; const { colors } = useAppTheme(); @@ -62,7 +64,7 @@ const TaskInfo = ({ } return ( - setEditMode(true)}> + setEditMode(true)} onPress={onPressIn}>