diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx index 320f2b9f9..26210ec92 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/ListCardItem.tsx @@ -1,72 +1,72 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useMemo, useState } from 'react'; -import { View, TouchableNativeFeedback, TouchableOpacity, StyleSheet, Image } from 'react-native'; -import { Ionicons, Entypo } from '@expo/vector-icons'; -import { Card, Text } from 'react-native-paper'; -import { LinearGradient } from 'expo-linear-gradient'; -import { AnimatedCircularProgress } from 'react-native-circular-progress'; +import React, { FC, useMemo, useState } from "react" +import { View, TouchableNativeFeedback, TouchableOpacity, StyleSheet, Image } from "react-native" +import { Ionicons, Entypo } from "@expo/vector-icons" +import { Card, Text } from "react-native-paper" +import { LinearGradient } from "expo-linear-gradient" +import { AnimatedCircularProgress } from "react-native-circular-progress" // COMPONENTS -import { ListItem } from '../../../../components'; -import { GLOBAL_STYLE as GS } from '../../../../../assets/ts/styles'; -import { spacing, typography, useAppTheme } from '../../../../theme'; -import { ITeamTask } from '../../../../services/interfaces/ITask'; -import WorkedOnTask from '../../../../components/WorkedOnTask'; -import TaskStatus from '../../../../components/TaskStatus'; -import TimerButton from './TimerButton'; -import { observer } from 'mobx-react-lite'; -import { IUserProfile } from '../logics/useProfileScreenLogic'; -import TaskTitleDisplay from './TaskTitleDisplay'; -import AllTaskStatuses from '../../../../components/AllTaskStatuses'; -import WorkedOnTaskHours from '../../../../components/WorkedDayHours'; -import EstimateTime from '../../TimerScreen/components/EstimateTime'; -import { secondsToTime } from '../../../../helpers/date'; -import { useTaskStatistics } from '../../../../services/hooks/features/useTaskStatics'; -import { useStores } from '../../../../models'; -import IssuesModal from '../../../../components/IssuesModal'; +import { ListItem } from "../../../../components" +import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles" +import { spacing, typography, useAppTheme } from "../../../../theme" +import { ITeamTask } from "../../../../services/interfaces/ITask" +import WorkedOnTask from "../../../../components/WorkedOnTask" +import TaskStatus from "../../../../components/TaskStatus" +import TimerButton from "./TimerButton" +import { observer } from "mobx-react-lite" +import { IUserProfile } from "../logics/useProfileScreenLogic" +import TaskTitleDisplay from "./TaskTitleDisplay" +import AllTaskStatuses from "../../../../components/AllTaskStatuses" +import WorkedOnTaskHours from "../../../../components/WorkedDayHours" +import EstimateTime from "../../TimerScreen/components/EstimateTime" +import { secondsToTime } from "../../../../helpers/date" +import { useTaskStatistics } from "../../../../services/hooks/features/useTaskStatics" +import { useStores } from "../../../../models" +import IssuesModal from "../../../../components/IssuesModal" export type ListItemProps = { - active?: boolean; - task?: ITeamTask; - isAssigned?: boolean; - isAuthUser: boolean; - activeAuthTask: boolean; - viewType?: 'default' | 'unassign'; - profile?: IUserProfile; - isNowTab?: boolean; -}; + active?: boolean + task?: ITeamTask + isAssigned?: boolean + isAuthUser: boolean + activeAuthTask: boolean + viewType?: "default" | "unassign" + profile?: IUserProfile + isNowTab?: boolean +} export interface Props extends ListItemProps {} export const ListItemContent: React.FC = observer((props) => { - const { colors } = useAppTheme(); + const { colors } = useAppTheme() const { - TimerStore: { timerStatus } - } = useStores(); + TimerStore: { timerStatus }, + } = useStores() - const [editTitle, setEditTitle] = useState(false); - const [enableEstimate, setEnableEstimate] = useState(false); - const [showMenu, setShowMenu] = React.useState(false); + const [editTitle, setEditTitle] = useState(false) + const [enableEstimate, setEnableEstimate] = useState(false) + const [showMenu, setShowMenu] = React.useState(false) - const { h, m } = secondsToTime(props.task.estimate || 0); - const { getTaskStat, activeTaskTotalStat } = useTaskStatistics(); - const { taskTotalStat } = getTaskStat(props.task); + const { h, m } = secondsToTime(props.task.estimate || 0) + const { getTaskStat, activeTaskTotalStat } = useTaskStatistics() + const { taskTotalStat } = getTaskStat(props.task) const progress = useMemo(() => { if (!props.isAuthUser) { - return (taskTotalStat?.duration * 100) / props.task?.estimate; + return (taskTotalStat?.duration * 100) / props.task?.estimate } - return (activeTaskTotalStat?.duration * 100) / props.task?.estimate || 0; - }, [timerStatus, props.activeAuthTask, activeTaskTotalStat]); + return (activeTaskTotalStat?.duration * 100) / props.task?.estimate || 0 + }, [timerStatus, props.activeAuthTask, activeTaskTotalStat]) return ( { - setShowMenu(false); - setEditTitle(false); - setEnableEstimate(false); + setShowMenu(false) + setEditTitle(false) + setEnableEstimate(false) }} > = observer((props) => { ...GS.p3, ...GS.positionRelative, backgroundColor: colors.background, - borderRadius: 14 + borderRadius: 14, }} > @@ -82,13 +82,17 @@ export const ListItemContent: React.FC = observer((props) => { memberTask={props.task} isAuthUser={props.profile.isAuthUser} isActiveTask={props.activeAuthTask} - title={'Total time'} - containerStyle={{ flexDirection: 'row', alignItems: 'center' }} + title={"Total time"} + containerStyle={{ flexDirection: "row", alignItems: "center" }} totalTimeText={{ color: colors.primary }} /> setShowMenu(!showMenu)}> {!showMenu ? ( - + ) : ( )} @@ -97,11 +101,15 @@ export const ListItemContent: React.FC = observer((props) => { - + - + {!enableEstimate ? ( setEnableEstimate(true)}> @@ -113,14 +121,19 @@ export const ListItemContent: React.FC = observer((props) => { backgroundColor="#F0F0F0" > {() => ( - - {h !== 0 ? h + 'h' : m !== 0 ? m + 'm' : h + 'h'} + + {h !== 0 ? h + "h" : m !== 0 ? m + "m" : h + "h"} )} ) : ( - + )} @@ -132,26 +145,30 @@ export const ListItemContent: React.FC = observer((props) => { )} {!props.isAssigned && !props.isAuthUser && ( props.profile.assignTask(props.task)} > )} {props.isAssigned ? ( ) : ( - - Assigned + + + Assigned + {props.task.members.length} people @@ -170,18 +187,18 @@ export const ListItemContent: React.FC = observer((props) => { )} - ); -}); + ) +}) interface IMenuProps { - setShowMenu: () => unknown; - setEditTitle: (value: boolean) => unknown; - setEnableEstimate: (value: boolean) => unknown; - props: ListItemProps; + setShowMenu: () => unknown + setEditTitle: (value: boolean) => unknown + setEnableEstimate: (value: boolean) => unknown + props: ListItemProps } const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnableEstimate }) => { - const { colors } = useAppTheme(); - const { isAssigned, task, profile } = props; + const { colors } = useAppTheme() + const { isAssigned, task, profile } = props return ( = ({ props, setShowMenu, setEditTitle, setEnable shadowColor: colors.border, marginRight: 27, backgroundColor: colors.background, - minWidth: spacing.huge * 2 + minWidth: spacing.huge * 2, }} > { - setEditTitle(true); - setShowMenu(); + setEditTitle(true) + setShowMenu() }} > Edit Task @@ -215,8 +232,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - setEnableEstimate(true); - setShowMenu(); + setEnableEstimate(true) + setShowMenu() }} > Estimate @@ -226,8 +243,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - profile.assignTask(task); - setShowMenu(); + profile.assignTask(task) + setShowMenu() }} > Assign Task @@ -238,8 +255,8 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable { - profile.unassignTask(task); - setShowMenu(); + profile.unassignTask(task) + setShowMenu() }} > Unassign Task @@ -247,25 +264,27 @@ const SidePopUp: FC = ({ props, setShowMenu, setEditTitle, setEnable )} - ); -}; + ) +} const ListCardItem: React.FC = (props) => { - const { colors, dark } = useAppTheme(); + const { colors, dark } = useAppTheme() // STATS - const { activeAuthTask } = props; + const { activeAuthTask } = props return ( {dark ? ( = (props) => { )} - ); -}; + ) +} -export default ListCardItem; +export default ListCardItem const styles = StyleSheet.create({ cardContainer: { borderRadius: 14, elevation: 24, - shadowColor: '#000', + shadowColor: "#000", shadowOffset: { width: 0, height: 12 }, shadowOpacity: 0.05, - shadowRadius: 5 + shadowRadius: 5, }, dropdownTxt: { - color: '#282048', + color: "#282048", fontFamily: typography.primary.semiBold, - fontSize: 14 + fontSize: 14, }, firstContainer: { - alignItems: 'center', - flexDirection: 'row', - justifyContent: 'space-between', - marginBottom: 10 + alignItems: "center", + flexDirection: "row", + justifyContent: "space-between", + marginBottom: 10, }, progessText: { fontFamily: typography.primary.semiBold, - fontSize: 12 + fontSize: 12, }, statusContainer: { - alignItems: 'center', - borderColor: 'transparent', + alignItems: "center", + borderColor: "transparent", height: 33, paddingHorizontal: 9, - width: 120 + width: 120, }, timeHeading: { - color: '#7E7991', + color: "#7E7991", fontFamily: typography.fonts.PlusJakartaSans.medium, - fontSize: 10 + fontSize: 10, }, timeNumber: { - color: '#282048', + color: "#282048", fontFamily: typography.fonts.PlusJakartaSans.semiBold, - fontSize: 14 + fontSize: 14, }, timerBtn: { - alignItems: 'center', - borderColor: 'rgba(0, 0, 0, 0.4)', + alignItems: "center", + borderColor: "rgba(0, 0, 0, 0.4)", borderRadius: 20, borderWidth: 1, elevation: 10, height: 42, - justifyContent: 'center', + justifyContent: "center", marginRight: 10, // shadowColor: "rgba(0,0,0,0.16)", // shadowOffset: { width: 5, height: 10 }, // shadowOpacity: 1, // shadowRadius: 10, ...GS.shadowSm, - width: 42 + width: 42, }, timerIcon: { height: 21, - width: 21 + width: 21, }, times: { - alignItems: 'center', - borderTopColor: 'rgba(0, 0, 0, 0.06)', + alignItems: "center", + borderTopColor: "rgba(0, 0, 0, 0.06)", borderTopWidth: 1, - flexDirection: 'row', - justifyContent: 'space-between', - paddingTop: 14 + flexDirection: "row", + justifyContent: "space-between", + paddingTop: 14, }, wrapButton: { - alignItems: 'center', - flexDirection: 'row' + alignItems: "center", + flexDirection: "row", }, wrapperTask: { - alignItems: 'center', - flexDirection: 'row', + alignItems: "center", + flexDirection: "row", height: 42, - justifyContent: 'space-between', + justifyContent: "space-between", paddingRight: 10, - width: '100%' - } -}); + width: "100%", + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/UserProfileTasks.tsx b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/UserProfileTasks.tsx index 412604e55..a506d96bb 100644 --- a/apps/mobile/app/screens/Authenticated/ProfileScreen/components/UserProfileTasks.tsx +++ b/apps/mobile/app/screens/Authenticated/ProfileScreen/components/UserProfileTasks.tsx @@ -1,73 +1,74 @@ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import { Dimensions, FlatList, ScrollView, Text, TextStyle, View } from 'react-native'; -import React, { FC, useMemo } from 'react'; -import { IUserProfile } from '../logics/useProfileScreenLogic'; -import { ITaskFilter } from '../../../../services/hooks/features/useTaskFilters'; -import ListCardItem from './ListCardItem'; -import { translate } from '../../../../i18n'; -import { typography, useAppTheme } from '../../../../theme'; -import { GLOBAL_STYLE as GS } from '../../../../../assets/ts/styles'; -import { observer } from 'mobx-react-lite'; -import { useTimer } from '../../../../services/hooks/useTimer'; -import WorkedOnTaskHours from '../../../../components/WorkedDayHours'; -import { useStores } from '../../../../models'; +import { Dimensions, FlatList, ScrollView, Text, TextStyle, View } from "react-native" +import React, { FC, useMemo } from "react" +import { IUserProfile } from "../logics/useProfileScreenLogic" +import { ITaskFilter } from "../../../../services/hooks/features/useTaskFilters" +import ListCardItem from "./ListCardItem" +import { translate } from "../../../../i18n" +import { typography, useAppTheme } from "../../../../theme" +import { GLOBAL_STYLE as GS } from "../../../../../assets/ts/styles" +import { observer } from "mobx-react-lite" +import { useTimer } from "../../../../services/hooks/useTimer" +import WorkedOnTaskHours from "../../../../components/WorkedDayHours" +import { useStores } from "../../../../models" interface IUserProfileTasks { - profile: IUserProfile; - content: ITaskFilter; + profile: IUserProfile + content: ITaskFilter } const UserProfileTasks: FC = observer(({ profile, content }) => { const { - TaskStore: { activeTaskId } - } = useStores(); - const { colors, dark } = useAppTheme(); - const { timerStatus } = useTimer(); + TaskStore: { activeTaskId }, + } = useStores() + const { colors, dark } = useAppTheme() + const { timerStatus } = useTimer() const tasks = useMemo(() => { - return content.tasksFiltered; - }, [content, profile]); + return content.tasksFiltered + }, [content, profile]) return ( <> - {content.tab === 'worked' && ( + {content.tab === "worked" && ( - {content.tab === 'worked' && + {content.tab === "worked" && profile.activeUserTeamTask && - (profile.member?.timerStatus === 'running' || (profile.isAuthUser && timerStatus?.running)) ? ( + (profile.member?.timerStatus === "running" || + (profile.isAuthUser && timerStatus?.running)) ? ( <> - {translate('tasksScreen.now')} + {translate("tasksScreen.now")} - + - {translate('tasksScreen.totalTimeLabel')}: + {translate("tasksScreen.totalTimeLabel")}: = observer(({ profile, content }) marginLeft: 5, color: colors.primary, fontFamily: typography.primary.semiBold, - fontSize: 12 - } + fontSize: 12, + }, ]} > @@ -98,25 +99,25 @@ const UserProfileTasks: FC = observer(({ profile, content }) ) : null} - {content.tab === 'worked' && ( + {content.tab === "worked" && ( - {translate('tasksScreen.last24hours')} ({tasks.length}) + {translate("tasksScreen.last24hours")} ({tasks.length}) @@ -136,15 +137,15 @@ const UserProfileTasks: FC = observer(({ profile, content }) )} - {(content.tab === 'assigned' || content.tab === 'unassigned') && ( + {(content.tab === "assigned" || content.tab === "unassigned") && ( - {content.tab === 'assigned' && ( + {content.tab === "assigned" && ( = observer(({ profile, content }) renderItem={({ item, index }) => ( = observer(({ profile, content }) /> )} - {content.tab === 'unassigned' && ( + {content.tab === "unassigned" && ( = observer(({ profile, content }) renderItem={({ item, index }) => ( = observer(({ profile, content }) )} - ); -}); + ) +}) -export default UserProfileTasks; +export default UserProfileTasks -const { width } = Dimensions.get('window'); +const { width } = Dimensions.get("window") const $textLabel: TextStyle = { fontFamily: typography.primary.semiBold, - fontSize: 12 -}; + fontSize: 12, +}