Merge pull request #1735 from ever-co/feat/task-screen-estimations

Feat/task screen estimations

apps/mobile/app/components/Accordion.tsx

@@ -45,6 +45,7 @@ export default Accordion
 const styles = StyleSheet.create({
 	accordContainer: {
 		borderRadius: 8,
+		marginVertical: 5,
 		width: "100%",
 	},
 	accordHeader: {

apps/mobile/app/components/Task/EstimateBlock/components/ProfileInfoWithTime.tsx

@@ -0,0 +1,91 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+import { Text, StyleSheet, TouchableOpacity, View } from "react-native"
+import React from "react"
+import { Avatar } from "react-native-paper"
+import { imgTitleProfileAvatar } from "../../../../helpers/img-title-profile-avatar"
+import { typography, useAppTheme } from "../../../../theme"
+import { limitTextCharaters } from "../../../../helpers/sub-text"
+import { useNavigation } from "@react-navigation/native"
+import {
+	DrawerNavigationProp,
+	SettingScreenNavigationProp,
+} from "../../../../navigators/AuthenticatedNavigator"
+
+interface IProfileInfo {
+	names: string
+	profilePicSrc: string
+	userId?: string
+	largerProfileInfo?: boolean
+	estimationsBlock?: boolean
+}
+
+const ProfileInfoWithTime: React.FC<IProfileInfo> = ({
+	profilePicSrc,
+	names,
+	userId,
+	largerProfileInfo,
+}) => {
+	const { colors } = useAppTheme()
+
+	const alternateNavigation = useNavigation<DrawerNavigationProp<"AuthenticatedTab">>()
+	const navigation = useNavigation<SettingScreenNavigationProp<"Profile">>()
+
+	const navigateToProfile = () => {
+		alternateNavigation.navigate("AuthenticatedTab")
+		setTimeout(() => {
+			navigation.navigate("Profile", { userId, activeTab: "worked" })
+		}, 50)
+	}
+	return (
+		<View style={{ flexDirection: "row", justifyContent: "space-between", paddingRight: 12 }}>
+			<TouchableOpacity onPress={userId && navigateToProfile} style={styles.container}>
+				{profilePicSrc ? (
+					<Avatar.Image
+						source={{ uri: profilePicSrc }}
+						size={largerProfileInfo ? 30 : 20}
+						style={styles.profileImage}
+					/>
+				) : (
+					<Avatar.Text
+						label={imgTitleProfileAvatar(names.replace(" ", ""))}
+						size={largerProfileInfo ? 30 : 20}
+						style={[styles.profileImage, { backgroundColor: "#82c9e0" }]}
+						labelStyle={[styles.prefix, { fontSize: 14 }]}
+					/>
+				)}
+
+				<Text
+					style={{
+						fontSize: largerProfileInfo ? 16 : 12,
+						color: colors.primary,
+						fontWeight: "600",
+					}}
+				>
+					{limitTextCharaters({
+						text: names.trim(),
+						numChars: 12,
+					})}
+				</Text>
+			</TouchableOpacity>
+			<Text style={{ fontSize: 12, fontWeight: "600", color: "#938FA3" }}>6 h: 40 m</Text>
+		</View>
+	)
+}
+
+export default ProfileInfoWithTime
+
+const styles = StyleSheet.create({
+	container: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 7,
+	},
+	prefix: {
+		color: "#FFFFFF",
+		fontFamily: typography.fonts.PlusJakartaSans.light,
+	},
+	profileImage: {
+		borderRadius: 100,
+	},
+})

apps/mobile/app/components/Task/EstimateBlock/index.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-native/no-inline-styles  */
+/* eslint-disable react-native/no-color-literals  */
+import { View, Text, StyleSheet } from "react-native"
+import React from "react"
+import Accordion from "../../Accordion"
+import TaskRow from "../DetailsBlock/components/TaskRow"
+import { useStores } from "../../../models"
+import ProfileInfoWithTime from "./components/ProfileInfoWithTime"
+import { useAppTheme } from "../../../theme"
+import { translate } from "../../../i18n"
+
+const EstimateBlock = () => {
+	const {
+		TaskStore: { detailedTask: task },
+	} = useStores()
+
+	const { colors } = useAppTheme()
+	return (
+		<Accordion title={translate("taskDetailsScreen.estimate")}>
+			<View style={{ paddingBottom: 12 }}>
+				<TaskRow
+					labelComponent={
+						<View style={[styles.labelComponent, { marginLeft: 12 }]}>
+							<Text style={styles.labelText}>
+								{translate("taskDetailsScreen.estimations")}
+							</Text>
+						</View>
+					}
+				>
+					<Text
+						style={{
+							fontWeight: "600",
+							fontSize: 14,
+							marginLeft: 5,
+							color: colors.primary,
+						}}
+					>
+						6 h: 40 m
+					</Text>
+					{task?.members?.map((member, index) => (
+						<ProfileInfoWithTime
+							key={index}
+							userId={member?.userId || member?.user?.id}
+							profilePicSrc={member?.user?.imageUrl}
+							names={`${member?.user?.firstName || ""} ${
+								member?.user?.lastName || ""
+							}`}
+						/>
+					))}
+				</TaskRow>
+			</View>
+		</Accordion>
+	)
+}
+
+export default EstimateBlock
+
+const styles = StyleSheet.create({
+	labelComponent: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: 7,
+	},
+	labelText: {
+		color: "#A5A2B2",
+		fontSize: 12,
+	},
+})

apps/mobile/app/i18n/ar.ts

@@ -119,6 +119,8 @@ const ar: Translations = {
 		setDueDate: "تحديد تاريخ الاستحقاق",
 		setStartDate: "تحديد تاريخ البدء",
 		items: "أغراض",
+		estimate: "تقدير",
+		estimations: "التقديرات",
 	},
 	tasksScreen: {
 		name: "مهام",

apps/mobile/app/i18n/bg.ts

@@ -115,6 +115,8 @@ const bg = {
 		setDueDate: "Set Due Date",
 		setStartDate: "Set Start Date",
 		items: "Items",
+		estimate: "Estimate",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tasks",

apps/mobile/app/i18n/en.ts

@@ -116,6 +116,8 @@ const en = {
 		setDueDate: "Set Due Date",
 		setStartDate: "Set Start Date",
 		items: "Items",
+		estimate: "Estimate",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tasks",

apps/mobile/app/i18n/es.ts

@@ -115,6 +115,8 @@ const es = {
 		setDueDate: "Set Due Date",
 		setStartDate: "Set Start Date",
 		items: "Items",
+		estimate: "Estimate",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tasks",

apps/mobile/app/i18n/fr.ts

@@ -118,6 +118,8 @@ const fr = {
 		setDueDate: "Définir la date d'échéance",
 		setStartDate: "Définir la date de début",
 		items: "Articles",
+		estimate: "Estimation",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tâches",

apps/mobile/app/i18n/he.ts

@@ -115,6 +115,8 @@ const he = {
 		setDueDate: "Set Due Date",
 		setStartDate: "Set Start Date",
 		items: "Items",
+		estimate: "Estimate",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tasks",

apps/mobile/app/i18n/ko.ts

@@ -118,6 +118,8 @@ const ko: Translations = {
 		setDueDate: "마감일 설정",
 		setStartDate: "시작일 설정",
 		items: "품목",
+		estimate: "견적",
+		estimations: "견적들",
 	},
 	tasksScreen: {
 		name: "작업",

apps/mobile/app/i18n/ru.ts

@@ -115,6 +115,8 @@ const ru = {
 		setDueDate: "Set Due Date",
 		setStartDate: "Set Start Date",
 		items: "Items",
+		estimate: "Estimate",
+		estimations: "Estimations",
 	},
 	tasksScreen: {
 		name: "Tasks",

apps/mobile/app/screens/Authenticated/TaskScreen/index.tsx

@@ -9,6 +9,7 @@ import { useTeamTasks } from "../../../services/hooks/features/useTeamTasks"
 import TaskTitleBlock from "../../../components/Task/TitleBlock"
 import DetailsBlock from "../../../components/Task/DetailsBlock"
 import { translate } from "../../../i18n"
+import EstimateBlock from "../../../components/Task/EstimateBlock"
 
 export const AuthenticatedTaskScreen: FC<AuthenticatedDrawerScreenProps<"TaskScreen">> = (
 	_props,
@@ -52,6 +53,7 @@ export const AuthenticatedTaskScreen: FC<AuthenticatedDrawerScreenProps<"TaskScr
 					>
 						<TaskTitleBlock />
 						<DetailsBlock />
+						<EstimateBlock />
 					</ScrollView>
 				</View>
 			</View>