Improve/task screen time block group time (#1777)

* added the show more to load more members * added translations
ever-co · Nov 14, 2023 · 05a558e · 05a558e
1 parent 738aee8
commit 05a558e
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 1 deletion.
diff --git a/apps/mobile/app/components/Task/TimeBlock/index.tsx b/apps/mobile/app/components/Task/TimeBlock/index.tsx
@@ -253,6 +253,7 @@ interface ITotalGroupTime {
 
 const TotalGroupTime: React.FC<ITotalGroupTime> = ({ totalTime, activeTeam, task }) => {
 	const [expanded, setExpanded] = useState(false)
+	const [numMembersToShow, setNumMembersToShow] = useState<number>(5)
 	const { colors } = useAppTheme()
 
 	function toggleItem() {
@@ -280,7 +281,7 @@ const TotalGroupTime: React.FC<ITotalGroupTime> = ({ totalTime, activeTeam, task
 			{expanded && <View style={{ marginBottom: 5 }} />}
 			<View style={{ gap: 7 }}>
 				{expanded &&
-					matchingMembers?.map((member, idx) => {
+					matchingMembers?.slice(0, numMembersToShow).map((member, idx) => {
 						const taskDurationInSeconds = findUserTotalWorked(member, task?.id)
 
 						const { h, m } = secondsToTime(taskDurationInSeconds)
@@ -297,6 +298,20 @@ const TotalGroupTime: React.FC<ITotalGroupTime> = ({ totalTime, activeTeam, task
 							/>
 						)
 					})}
+				{task?.members.length > 0 &&
+					task?.members?.length - 2 >= numMembersToShow &&
+					expanded && (
+						<TouchableOpacity
+							onPress={() => setNumMembersToShow((prev) => prev + 5)}
+							style={{ marginLeft: "auto" }}
+						>
+							<Text
+								style={{ fontSize: 10, fontWeight: "600", color: colors.primary }}
+							>
+								{translate("taskDetailsScreen.showMore")}
+							</Text>
+						</TouchableOpacity>
+					)}
 			</View>
 		</View>
 	)

diff --git a/apps/mobile/app/i18n/ar.ts b/apps/mobile/app/i18n/ar.ts
@@ -137,6 +137,7 @@ const ar: Translations = {
 		description: "الوصف",
 		descriptionBlockPlaceholder: "اكتب وصفاً كاملاً لمشروعك...",
 		copyDescription: "تم نسخ الوصف.",
+		showMore: "أظهر المزيد",
 	},
 	tasksScreen: {
 		name: "مهام",

diff --git a/apps/mobile/app/i18n/bg.ts b/apps/mobile/app/i18n/bg.ts
@@ -133,6 +133,7 @@ const bg = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Write a complete description of your project...",
 		copyDescription: "Description Copied.",
+		showMore: "Show More",
 	},
 	tasksScreen: {
 		name: "Tasks",

diff --git a/apps/mobile/app/i18n/en.ts b/apps/mobile/app/i18n/en.ts
@@ -134,6 +134,7 @@ const en = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Write a complete description of your project...",
 		copyDescription: "Description Copied.",
+		showMore: "Show More",
 	},
 	tasksScreen: {
 		name: "Tasks",

diff --git a/apps/mobile/app/i18n/es.ts b/apps/mobile/app/i18n/es.ts
@@ -133,6 +133,7 @@ const es = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Write a complete description of your project...",
 		copyDescription: "Description Copied.",
+		showMore: "Show More",
 	},
 	tasksScreen: {
 		name: "Tasks",

diff --git a/apps/mobile/app/i18n/fr.ts b/apps/mobile/app/i18n/fr.ts
@@ -136,6 +136,7 @@ const fr = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Écrivez une description complète de votre projet...",
 		copyDescription: "Description copiée.",
+		showMore: "Afficher plus",
 	},
 	tasksScreen: {
 		name: "Tâches",

diff --git a/apps/mobile/app/i18n/he.ts b/apps/mobile/app/i18n/he.ts
@@ -133,6 +133,7 @@ const he = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Write a complete description of your project...",
 		copyDescription: "Description Copied.",
+		showMore: "Show More",
 	},
 	tasksScreen: {
 		name: "Tasks",

diff --git a/apps/mobile/app/i18n/ko.ts b/apps/mobile/app/i18n/ko.ts
@@ -136,6 +136,7 @@ const ko: Translations = {
 		description: "설명",
 		descriptionBlockPlaceholder: "프로젝트에 대한 완전한 설명을 작성하세요...",
 		copyDescription: "설명이 복사되었습니다.",
+		showMore: "더 보기",
 	},
 	tasksScreen: {
 		name: "작업",

diff --git a/apps/mobile/app/i18n/ru.ts b/apps/mobile/app/i18n/ru.ts
@@ -133,6 +133,7 @@ const ru = {
 		description: "Description",
 		descriptionBlockPlaceholder: "Write a complete description of your project...",
 		copyDescription: "Description Copied.",
+		showMore: "Show More",
 	},
 	tasksScreen: {
 		name: "Tasks",