Merge branch 'develop' of https://github.com/ever-co/ever-gauzy-teams …

…into fix/#734-re-rendering-member-page
ever-co · May 9, 2023 · 37c9263 · 37c9263
2 parents 712e104 + ccb07db
commit 37c9263
Show file tree

Hide file tree

Showing 36 changed files with 1,897 additions and 2,089 deletions.
diff --git a/apps/mobile/app/components/AllTaskStatuses.tsx b/apps/mobile/app/components/AllTaskStatuses.tsx
@@ -0,0 +1,118 @@
+/* eslint-disable react-native/no-inline-styles */
+/* eslint-disable react-native/no-color-literals */
+import React, { useEffect, useRef, useState } from "react"
+import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native"
+import { AntDesign } from "@expo/vector-icons"
+import { colors } from "../theme"
+import LabelItem from "./LabelItem"
+import {
+	useTaskLabelValue,
+	useTaskPriorityValue,
+	useTaskSizeValue,
+	useTaskStatusValue,
+} from "./StatusType"
+import { ITeamTask } from "../services/interfaces/ITask"
+
+const AllTaskStatuses = ({ task }: { task: ITeamTask }) => {
+	const flatListRef = useRef<FlatList>(null)
+	const [labelIndex, setLabelIndex] = useState(0)
+
+	const allStatuses = useTaskStatusValue()
+	const allSizes = useTaskSizeValue()
+	const allPriorities = useTaskPriorityValue()
+	const allLabels = useTaskLabelValue()
+
+	const status = allStatuses[task?.status.split("-").join(" ")]
+	const size = allSizes[task?.size]
+	const priority = allPriorities[task?.priority]
+
+	const taskLabels = task?.tags.map((t) => allLabels[t])
+
+	const labels = [status, size, priority, ...(taskLabels || [])]
+
+	useEffect(() => {
+		flatListRef.current?.scrollToIndex({
+			animated: true,
+			index: labelIndex,
+			viewPosition: 0,
+		})
+	}, [labelIndex])
+
+	const onNextPressed = () => {
+		if (labelIndex !== labels.length - 2) {
+			setLabelIndex(labelIndex + 1)
+		}
+	}
+
+	const onPrevPressed = () => {
+		if (labelIndex === 0) {
+			return
+		}
+		setLabelIndex(labelIndex - 1)
+	}
+
+	return (
+		<View style={styles.labelFlatList}>
+			<FlatList
+				data={labels}
+				initialScrollIndex={labelIndex}
+				renderItem={({ item, index }) => (
+					<View key={index} style={{ marginHorizontal: 2 }}>
+						<LabelItem label={item?.name} background={item?.bgColor} icon={item?.icon} />
+					</View>
+				)}
+				horizontal={true}
+				showsHorizontalScrollIndicator={false}
+				ref={flatListRef}
+				keyExtractor={(_, index) => index.toString()}
+				style={{ marginRight: 10, overflow: "scroll" }}
+			/>
+			{labelIndex === labels.length - 2 ? null : (
+				<TouchableOpacity
+					activeOpacity={0.7}
+					style={[styles.scrollRight, { backgroundColor: colors.background }]}
+					onPress={() => onNextPressed()}
+				>
+					<AntDesign name="right" size={18} color={colors.primary} />
+				</TouchableOpacity>
+			)}
+			{labelIndex !== 0 ? (
+				<TouchableOpacity
+					activeOpacity={0.7}
+					style={[styles.scrollRight, { left: 0, backgroundColor: colors.background }]}
+					onPress={() => onPrevPressed()}
+				>
+					<AntDesign name="left" size={18} color={colors.primary} />
+				</TouchableOpacity>
+			) : null}
+		</View>
+	)
+}
+
+export default AllTaskStatuses
+
+const styles = StyleSheet.create({
+	labelFlatList: {
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "space-between",
+		marginTop: 16,
+		width: "74%",
+	},
+	scrollRight: {
+		alignItems: "center",
+		backgroundColor: "#fff",
+		borderRadius: 20,
+		elevation: 10,
+		height: 27,
+		justifyContent: "center",
+		padding: 5,
+		position: "absolute",
+		right: 0,
+		shadowColor: "rgba(0,0,0,0.16)",
+		shadowOffset: { width: 0, height: 5 },
+		shadowOpacity: 1,
+		shadowRadius: 15,
+		width: 28,
+	},
+})
diff --git a/apps/mobile/app/components/LabelItem.tsx b/apps/mobile/app/components/LabelItem.tsx
@@ -1,40 +1,23 @@
-import React, { FC } from "react"
-import { Feather } from "@expo/vector-icons"
-import { View, StyleSheet, Text, Image } from "react-native"
-import { LinearGradient } from "expo-linear-gradient"
+/* eslint-disable react-native/no-color-literals */
+/* eslint-disable react-native/no-inline-styles */
+import React, { FC, ReactNode } from "react"
+import { View, StyleSheet, Text } from "react-native"
 import { typography, useAppTheme } from "../theme"
 
 interface Props {
 	label: string
-	labelColor: string
-	background: string[]
-	icon: any
+	background: string
+	icon: ReactNode | undefined
 }
-const LabelItem: FC<Props> = ({ label, labelColor, background, icon }) => {
-	const { colors, dark } = useAppTheme()
+const LabelItem: FC<Props> = ({ label, background, icon }) => {
+	const { colors } = useAppTheme()
 	return (
-		<>
-			{dark ? (
-				<LinearGradient
-					colors={[background[0], background[1], background[2]]}
-					style={styles.container}
-					start={{ x: 0.2, y: 0.5 }}
-					end={{ x: 1, y: 1 }}
-				>
-					<View style={{ flexDirection: "row" }}>
-						<Image source={icon} />
-						<Text style={[styles.labelTitle, { color: labelColor }]}>{label}</Text>
-					</View>
-				</LinearGradient>
-			) : (
-				<View style={[styles.container, { backgroundColor: background[background.length - 1] }]}>
-					<View style={{ flexDirection: "row" }}>
-						<Image source={icon} />
-						<Text style={[styles.labelTitle, { color: labelColor }]}>{label}</Text>
-					</View>
-				</View>
-			)}
-		</>
+		<View style={[styles.container, { backgroundColor: background }]}>
+			<View style={{ flexDirection: "row" }}>
+				{icon}
+				<Text style={[styles.labelTitle, { color: colors.primary }]}>{label}</Text>
+			</View>
+		</View>
 	)
 }
 

diff --git a/apps/mobile/app/components/StatusType.tsx b/apps/mobile/app/components/StatusType.tsx
@@ -0,0 +1,72 @@
+import React, { useMemo } from "react"
+import { View } from "react-native"
+import { SvgUri } from "react-native-svg"
+import { useTaskLabels } from "../services/hooks/features/useTaskLabels"
+import { useTaskPriority } from "../services/hooks/features/useTaskPriority"
+import { useTaskSizes } from "../services/hooks/features/useTaskSizes"
+import { useTaskStatus } from "../services/hooks/features/useTaskStatus"
+import { ITaskStatusItem } from "../services/interfaces/ITaskStatus"
+
+export type TStatusItem = {
+	bgColor?: string
+	icon?: React.ReactNode | undefined
+	name?: string
+	value?: string
+	bordered?: boolean
+}
+
+export type TStatus<T extends string> = {
+	[k in T]: TStatusItem
+}
+
+export function useMapToTaskStatusValues<T extends ITaskStatusItem>(
+	data: T[],
+	bordered = false,
+): TStatus<any> {
+	return useMemo(() => {
+		return data.reduce((acc, item) => {
+			const value: TStatus<any>[string] = {
+				name: item.name?.split("-").join(" "),
+				value: item.value || item.name,
+				bgColor: item.color,
+				bordered,
+				icon: (
+					<View>
+						{item.fullIconUrl && <SvgUri width={14} height={14} uri={item.fullIconUrl} />}
+					</View>
+				),
+			}
+
+			if (value.name) {
+				acc[value.name] = value
+			} else if (value.value) {
+				acc[value.value] = value
+			}
+			return acc
+		}, {} as TStatus<any>)
+	}, [data, bordered])
+}
+
+// ==================== Task Status ========================================
+export function useTaskStatusValue() {
+	const { allStatuses } = useTaskStatus()
+	return useMapToTaskStatusValues(allStatuses)
+}
+
+// =================== Task Size ==============================================
+export function useTaskSizeValue() {
+	const { allTaskSizes } = useTaskSizes()
+	return useMapToTaskStatusValues(allTaskSizes)
+}
+
+// =================== Task Label ==============================================
+export function useTaskLabelValue() {
+	const { allTaskLabels } = useTaskLabels()
+	return useMapToTaskStatusValues(allTaskLabels)
+}
+
+// =================== Task Priority ==============================================
+export function useTaskPriorityValue() {
+	const { allTaskPriorities } = useTaskPriority()
+	return useMapToTaskStatusValues(allTaskPriorities)
+}
diff --git a/apps/mobile/app/components/WorkedDayHours.tsx b/apps/mobile/app/components/WorkedDayHours.tsx
@@ -1,38 +1,53 @@
-import React from "react";
-import { StyleSheet, View, Text } from "react-native"
-import { secondsToTime } from "../helpers/date";
-import { pad } from "../helpers/number";
-import { useTimer } from "../services/hooks/useTimer";
-import { typography } from "../theme/typography";
+/* eslint-disable react-native/no-unused-styles */
+/* eslint-disable react-native/no-color-literals */
+import React from "react"
+import { View, StyleSheet, Text, ViewStyle, TextStyle } from "react-native"
+import { secondsToTime } from "../helpers/date"
+import { pad } from "../helpers/number"
+import { useTaskStatistics } from "../services/hooks/features/useTaskStatics"
+import { ITeamTask } from "../services/interfaces/ITask"
+import { typography } from "../theme/typography"
 
-const WorkedOnTaskHours = (isAuthUser: boolean) => {
-    const { timerStatus} = useTimer();
-    const { h, m } = secondsToTime(timerStatus?.duration || 0);
-    if (!isAuthUser) {
-        return (
-            <View style={{ justifyContent: "center", alignItems: "center" }}>
-                <Text style={styles.timeHeading}>Worked time</Text>
-                <Text style={styles.timeNumber}>00 h:00 m</Text>
-            </View>
-        )
-    }
-    return (
-        <View style={{ justifyContent: "center", alignItems: "center" }}>
-            <Text style={styles.timeHeading}>Worked time</Text>
-            <Text style={styles.timeNumber}>{pad(h)} h:{pad(m)} m</Text>
-        </View>
-    )
+const WorkedOnTaskHours = ({
+	title,
+	containerStyle,
+	memberTask,
+	totalTimeText,
+}: {
+	title: string
+	memberTask: ITeamTask
+	containerStyle: ViewStyle
+	totalTimeText: TextStyle
+}) => {
+	const { getTaskStat } = useTaskStatistics()
+	const { taskDailyStat } = getTaskStat(memberTask)
+
+	const { h: dh, m: dm } = secondsToTime(taskDailyStat?.duration || 0)
+
+	return (
+		<View style={containerStyle}>
+			<Text style={styles.totalTimeTitle}>{title} : </Text>
+			<Text style={totalTimeText}>
+				{pad(dh)} h:{pad(dm)} m
+			</Text>
+		</View>
+	)
 }
+
 const styles = StyleSheet.create({
-    timeHeading: {
-        color: "#7E7991",
-        fontSize: 10,
-        fontFamily: typography.fonts.PlusJakartaSans.medium
-    },
-    timeNumber: {
-        color: "#282048",
-        fontSize: 14,
-        fontFamily: typography.fonts.PlusJakartaSans.semiBold
-    },
+	totalTimeTitle: {
+		color: "#7E7991",
+		fontFamily: typography.secondary.medium,
+		fontSize: 10,
+	},
+	totalTimeTxt: {
+		color: "#282048",
+		fontFamily: typography.primary.semiBold,
+		fontSize: 12,
+	},
+	wrapTotalTime: {
+		flexDirection: "row",
+	},
 })
-export default WorkedOnTaskHours;
+
+export default WorkedOnTaskHours