From 0d859ec105b964f86c98c85d844447a5c9432013 Mon Sep 17 00:00:00 2001 From: desperado1802 <124465103+desperado1802@users.noreply.github.com> Date: Tue, 14 Nov 2023 14:11:33 +0200 Subject: [PATCH] added version popup, so users can select, removed the old static component. Fixed navigation issue in Team Screen (#1779) --- apps/mobile/app/components/TaskVersion.tsx | 6 +- .../app/components/TaskVersionPopup.tsx | 2 +- apps/mobile/app/components/Version.tsx | 34 --- apps/mobile/app/components/VersionIcon.tsx | 5 +- .../components/AssignTaskSection.tsx | 286 ++++++++++-------- .../TeamScreen/components/ListCardItem.tsx | 5 +- apps/mobile/app/services/interfaces/ITask.ts | 1 + 7 files changed, 165 insertions(+), 174 deletions(-) delete mode 100644 apps/mobile/app/components/Version.tsx diff --git a/apps/mobile/app/components/TaskVersion.tsx b/apps/mobile/app/components/TaskVersion.tsx index 5ffbe7398..69a32917e 100644 --- a/apps/mobile/app/components/TaskVersion.tsx +++ b/apps/mobile/app/components/TaskVersion.tsx @@ -16,11 +16,11 @@ interface TaskVersionProps { task?: ITeamTask containerStyle?: ViewStyle version?: string - setPriority?: (priority: string) => unknown + setVersion?: (priority: string) => unknown } const TaskVersion: FC = observer( - ({ task, containerStyle, version, setPriority }) => { + ({ task, containerStyle, version, setVersion }) => { const { colors } = useAppTheme() const { updateTask } = useTeamTasks() const [openModal, setOpenModal] = useState(false) @@ -42,7 +42,7 @@ const TaskVersion: FC = observer( await updateTask(taskEdit, task.id) } else { - setPriority(text) + setVersion(text) } } diff --git a/apps/mobile/app/components/TaskVersionPopup.tsx b/apps/mobile/app/components/TaskVersionPopup.tsx index 0c5c1349c..3de99d19d 100644 --- a/apps/mobile/app/components/TaskVersionPopup.tsx +++ b/apps/mobile/app/components/TaskVersionPopup.tsx @@ -78,7 +78,7 @@ const Item: FC = ({ currentVersionName, version, onVersionSelected }) return ( onVersionSelected(version)}> - + diff --git a/apps/mobile/app/components/Version.tsx b/apps/mobile/app/components/Version.tsx deleted file mode 100644 index fd3c92191..000000000 --- a/apps/mobile/app/components/Version.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { StyleSheet, Text, View, ViewStyle } from 'react-native'; -import { AntDesign } from '@expo/vector-icons'; -import React, { FC } from 'react'; -import { typography, useAppTheme } from '../theme'; - -interface Props { - containerStyle?: ViewStyle; -} - -const Version: FC = ({ containerStyle }) => { - const { colors } = useAppTheme(); - return ( - - V1 - - - ); -}; -const styles = StyleSheet.create({ - container: { - alignItems: 'center', - borderRadius: 10, - borderWidth: 1, - flexDirection: 'row', - justifyContent: 'space-between', - paddingHorizontal: 9 - }, - text: { - fontFamily: typography.primary.semiBold, - fontSize: 10 - } -}); - -export default Version; diff --git a/apps/mobile/app/components/VersionIcon.tsx b/apps/mobile/app/components/VersionIcon.tsx index 61219a604..e3533f8ca 100644 --- a/apps/mobile/app/components/VersionIcon.tsx +++ b/apps/mobile/app/components/VersionIcon.tsx @@ -3,7 +3,7 @@ import React, { useMemo } from "react" import { View, Text } from "react-native" import { SvgUri } from "react-native-svg" -import { typography } from "../theme" +import { typography, useAppTheme } from "../theme" import { observer } from "mobx-react-lite" import { limitTextCharaters } from "../helpers/sub-text" import { useTaskVersion } from "../services/hooks/features/useTaskVersion" @@ -11,6 +11,7 @@ import { useTaskVersion } from "../services/hooks/features/useTaskVersion" export const BadgedTaskVersion = observer( ({ version, TextSize, iconSize }: { version: string; TextSize: number; iconSize: number }) => { const { taskVersionList } = useTaskVersion() + const { colors } = useAppTheme() const currentSize = useMemo( () => taskVersionList.find((s) => s.name === version), @@ -27,7 +28,7 @@ export const BadgedTaskVersion = observer( Promise<{ data: ITeamTask; response: Response }>; - onDismiss: () => unknown; + visible: boolean + isAuthUser: boolean + createNewTask: (task: ICreateTask) => Promise<{ data: ITeamTask; response: Response }> + onDismiss: () => unknown } -const { width, height } = Dimensions.get('window'); +const { width, height } = Dimensions.get("window") const ModalPopUp = ({ visible, children }) => { - const [showModal, setShowModal] = React.useState(visible); - const scaleValue = React.useRef(new Animated.Value(0)).current; + const [showModal, setShowModal] = React.useState(visible) + const scaleValue = React.useRef(new Animated.Value(0)).current React.useEffect(() => { - toggleModal(); - }, [visible]); + toggleModal() + }, [visible]) const toggleModal = () => { if (visible) { - setShowModal(true); + setShowModal(true) Animated.spring(scaleValue, { toValue: 1, - useNativeDriver: true - }).start(); + useNativeDriver: true, + }).start() } else { - setTimeout(() => setShowModal(false), 200); + setTimeout(() => setShowModal(false), 200) Animated.timing(scaleValue, { toValue: 0, duration: 300, - useNativeDriver: true - }).start(); + useNativeDriver: true, + }).start() } - }; + } return ( - - {children} + + + {children} + - ); -}; + ) +} -const AssignTaskFormModal: FC = function AssignTaskFormModal({ visible, onDismiss, createNewTask, isAuthUser }) { - const queryClient = new QueryClient(); - const [taskInputText, setTaskInputText] = useState(''); - const [isLoading, setIsLoading] = useState(false); - const [newTask, setNewTask] = useState(null); +const AssignTaskFormModal: FC = function AssignTaskFormModal({ + visible, + onDismiss, + createNewTask, + isAuthUser, +}) { + const queryClient = new QueryClient() + const [taskInputText, setTaskInputText] = useState("") + const [isLoading, setIsLoading] = useState(false) + const [newTask, setNewTask] = useState(null) - const { colors } = useAppTheme(); + const { colors } = useAppTheme() const onCreateNewTask = async () => { if (taskInputText.trim().length >= 3) { - setIsLoading(true); + setIsLoading(true) await createNewTask({ ...newTask, title: taskInputText, estimate: newTask?.estimate || 0, - status: newTask?.status || 'open' - }).then(() => queryClient.cancelQueries('tasks')); - setIsLoading(false); - setNewTask(null); - setTaskInputText(''); - onDismiss(); + status: newTask?.status || "open", + }).then(() => queryClient.cancelQueries("tasks")) + setIsLoading(false) + setNewTask(null) + setTaskInputText("") + onDismiss() } - }; + } const handleChangeText = (value: string) => { - setTaskInputText(value); - }; + setTaskInputText(value) + } return ( - + {isAuthUser - ? translate('tasksScreen.createTaskButton') - : translate('tasksScreen.assignTaskButton')} + ? translate("tasksScreen.createTaskButton") + : translate("tasksScreen.assignTaskButton")} - + = function AssignTaskFormModal({ visible, o placeholderTextColor={colors.tertiary} style={[ styles.textInput, - { color: colors.primary, backgroundColor: colors.background } + { color: colors.primary, backgroundColor: colors.background }, ]} autoCorrect={false} - autoCapitalize={'none'} - placeholder={translate('myWorkScreen.taskFieldPlaceholder')} + autoCapitalize={"none"} + placeholder={translate("myWorkScreen.taskFieldPlaceholder")} value={taskInputText} onChangeText={(newText) => handleChangeText(newText)} /> - {isLoading ? : null} + {isLoading ? ( + + ) : null} - {translate('myWorkScreen.estimateLabel')}:{' '} + {translate("myWorkScreen.estimateLabel")}:{" "} setNewTask({ ...newTask, - estimate: e + estimate: e, }) } currentTask={undefined} @@ -183,21 +195,21 @@ const AssignTaskFormModal: FC = function AssignTaskFormModal({ visible, o setStatus={(e) => setNewTask({ ...newTask, - status: e + status: e, }) } containerStyle={{ width: width / 2.1, - height: 32 + height: 32, }} /> = function AssignTaskFormModal({ visible, o setSize={(e) => setNewTask({ ...newTask, - size: e + size: e, }) } containerStyle={{ width: width / 3.3 }} @@ -215,31 +227,36 @@ const AssignTaskFormModal: FC = function AssignTaskFormModal({ visible, o setPriority={(e) => setNewTask({ ...newTask, - priority: e + priority: e, }) } containerStyle={{ width: width / 3.3 }} /> - + setNewTask({ + ...newTask, + version: e, + }) + } /> - + setNewTask({ ...newTask, - tags: e + tags: e, }) } containerStyle={{ ...styles.labelsContainer, - width: '100%', + width: "100%", borderColor: colors.border, - marginVertical: 20 + marginVertical: 20, }} /> @@ -248,106 +265,111 @@ const AssignTaskFormModal: FC = function AssignTaskFormModal({ visible, o { - setNewTask(null); - onDismiss(); + setNewTask(null) + onDismiss() }} - style={[styles.button, { backgroundColor: '#E6E6E9' }]} + style={[styles.button, { backgroundColor: "#E6E6E9" }]} > - {translate('common.cancel')} + + {translate("common.cancel")} + onCreateNewTask()} > {isAuthUser - ? translate('tasksScreen.createButton') - : translate('tasksScreen.assignButton')} + ? translate("tasksScreen.createButton") + : translate("tasksScreen.assignButton")} - ); -}; + ) +} -export default AssignTaskFormModal; +export default AssignTaskFormModal const $modalBackGround: ViewStyle = { flex: 1, - justifyContent: 'flex-end' -}; + justifyContent: "flex-end", +} const styles = StyleSheet.create({ button: { - alignItems: 'center', + alignItems: "center", borderRadius: 11, height: height / 16, - justifyContent: 'center', + justifyContent: "center", padding: 10, - width: width / 2.5 + width: width / 2.5, }, buttonText: { - color: '#FFF', + color: "#FFF", fontFamily: typography.primary.semiBold, - fontSize: 18 + fontSize: 18, }, labelsContainer: { - alignItems: 'center', - borderColor: 'rgba(255, 255, 255, 0.13)', + alignItems: "center", + borderColor: "rgba(255, 255, 255, 0.13)", borderWidth: 1, height: 32, paddingHorizontal: 9, - width: width / 2.7 + width: width / 2.7, }, loading: { - position: 'absolute', + position: "absolute", right: 10, - top: 11 + top: 11, }, mainContainer: { - alignItems: 'center', - backgroundColor: '#fff', - borderColor: '#1B005D0D', + alignItems: "center", + backgroundColor: "#fff", + borderColor: "#1B005D0D", borderTopLeftRadius: 24, borderTopRightRadius: 24, borderWidth: 2, paddingHorizontal: 20, paddingVertical: 30, - shadowColor: '#1B005D0D', + shadowColor: "#1B005D0D", shadowOffset: { width: 10, height: 10 }, shadowRadius: 10, - width: '100%' + width: "100%", }, mainTitle: { fontFamily: typography.primary.semiBold, - fontSize: 24 + fontSize: 24, }, textInput: { - backgroundColor: '#fff', + backgroundColor: "#fff", borderRadius: 10, - color: 'rgba(40, 32, 72, 0.4)', + color: "rgba(40, 32, 72, 0.4)", fontFamily: typography.fonts.PlusJakartaSans.semiBold, fontSize: 12, height: 43, paddingHorizontal: 16, paddingVertical: 13, - width: '90%' + width: "90%", }, wrapButtons: { - flexDirection: 'row', - justifyContent: 'space-between', - marginVertical: 10 + flexDirection: "row", + justifyContent: "space-between", + marginVertical: 10, }, wrapInput: { - backgroundColor: '#fff', - borderColor: 'rgba(0, 0, 0, 0.1)', + backgroundColor: "#fff", + borderColor: "rgba(0, 0, 0, 0.1)", borderRadius: 10, borderWidth: 1, height: 45, paddingVertical: 2, - width: '100%' - } -}); + width: "100%", + }, +}) diff --git a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx index 0194fb66b..5f699e59b 100644 --- a/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx +++ b/apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx @@ -154,9 +154,10 @@ const ListCardItem: React.FC = observer((props) => { taskEdition.setEstimateEditMode(false) props.setOpenMenuIndex(null) - if (memberInfo.memberTask && props.canNavigate) { + if (props.canNavigate) { isTaskScreen - ? navigation.navigate("TaskScreen", { taskId: memberInfo.memberTask?.id }) + ? memberInfo.memberTask && + navigation.navigate("TaskScreen", { taskId: memberInfo.memberTask?.id }) : navigation.navigate("Profile", { userId: memberInfo.memberUser.id, activeTab: "worked", diff --git a/apps/mobile/app/services/interfaces/ITask.ts b/apps/mobile/app/services/interfaces/ITask.ts index 25776315b..20abc5c28 100644 --- a/apps/mobile/app/services/interfaces/ITask.ts +++ b/apps/mobile/app/services/interfaces/ITask.ts @@ -164,6 +164,7 @@ export interface ICreateTask { estimateDays?: number estimateHours?: string estimateMinutes?: string + version?: string dueDate?: string description: string tags: ITaskLabelItem[]