diff --git a/apps/mobile/app/components/ProfileImage.tsx b/apps/mobile/app/components/ProfileImage.tsx index 91521af57..48595603a 100644 --- a/apps/mobile/app/components/ProfileImage.tsx +++ b/apps/mobile/app/components/ProfileImage.tsx @@ -1,60 +1,58 @@ /* eslint-disable react-native/no-unused-styles */ /* eslint-disable react-native/no-color-literals */ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useMemo } from "react" -import { View, StyleSheet } from "react-native" -import { Avatar } from "react-native-paper" -import { IUser } from "../services/interfaces/IUserData" -import { typography, useAppTheme } from "../theme" -import { imgTitleProfileAvatar } from "../helpers/img-title-profile-avatar" -import { useOrganizationTeam } from "../services/hooks/useOrganization" -import { useTimer } from "../services/hooks/useTimer" -import { getTimerStatusValue } from "../helpers/get-timer-status" +import React, { FC, useMemo } from 'react'; +import { View, StyleSheet } from 'react-native'; +import { Avatar } from 'react-native-paper'; +import { IUser } from '../services/interfaces/IUserData'; +import { typography, useAppTheme } from '../theme'; +import { imgTitleProfileAvatar } from '../helpers/img-title-profile-avatar'; +import { useOrganizationTeam } from '../services/hooks/useOrganization'; +import { useTimer } from '../services/hooks/useTimer'; +import { getTimerStatusValue } from '../helpers/get-timer-status'; import { idleStatusIconLarge, onlineAndTrackingTimeStatusIconLarge, pauseStatusIconLarge, - suspendedStatusIconLarge, -} from "./svgs/icons" -import { SvgXml } from "react-native-svg" + suspendedStatusIconLarge +} from './svgs/icons'; +import { SvgXml } from 'react-native-svg'; interface Props { - user: IUser - size?: number + user: IUser; + size?: number; } const ProfileImage: FC = ({ user, size }) => { - const { colors } = useAppTheme() + const { colors } = useAppTheme(); - const { currentTeam } = useOrganizationTeam() + const { currentTeam } = useOrganizationTeam(); - const currentMember = currentTeam?.members?.find( - (currentMember) => currentMember.employee.userId === user.id, - ) + const currentMember = currentTeam?.members?.find((currentMember) => currentMember?.employee?.userId === user?.id); - const { timerStatus } = useTimer() + const { timerStatus } = useTimer(); - const status = getTimerStatusValue(timerStatus, currentMember, currentTeam?.public) + const status = getTimerStatusValue(timerStatus, currentMember, currentTeam?.public); const imageUrl = useMemo( () => user?.image?.thumbUrl || user?.image?.fullUrl || user?.imageUrl, - [user?.image?.thumb, user], - ) + [user?.image?.thumb, user] + ); - let iconSvgXml = "" + let iconSvgXml = ''; switch (status) { - case "online": - iconSvgXml = onlineAndTrackingTimeStatusIconLarge - break - case "pause": - iconSvgXml = pauseStatusIconLarge - break - case "idle": - iconSvgXml = idleStatusIconLarge - break - case "suspended": - iconSvgXml = suspendedStatusIconLarge - break + case 'online': + iconSvgXml = onlineAndTrackingTimeStatusIconLarge; + break; + case 'pause': + iconSvgXml = pauseStatusIconLarge; + break; + case 'idle': + iconSvgXml = idleStatusIconLarge; + break; + case 'suspended': + iconSvgXml = suspendedStatusIconLarge; + break; } return ( @@ -68,16 +66,16 @@ const ProfileImage: FC = ({ user, size }) => { width: size, height: size, borderColor: - status === "online" - ? "#6EE7B7" - : status === "pause" - ? "#EFCF9E" - : status === "idle" - ? "#F5BEBE" - : "#DCD6D6", + status === 'online' + ? '#6EE7B7' + : status === 'pause' + ? '#EFCF9E' + : status === 'idle' + ? '#F5BEBE' + : '#DCD6D6' }} source={{ - uri: imageUrl, + uri: imageUrl }} /> ) : ( @@ -89,13 +87,13 @@ const ProfileImage: FC = ({ user, size }) => { width: size, height: size, borderColor: - status === "online" - ? "#6EE7B7" - : status === "pause" - ? "#EFCF9E" - : status === "idle" - ? "#F5BEBE" - : "#DCD6D6", + status === 'online' + ? '#6EE7B7' + : status === 'pause' + ? '#EFCF9E' + : status === 'idle' + ? '#F5BEBE' + : '#DCD6D6' }} labelStyle={styles.prefix} /> @@ -107,41 +105,41 @@ const ProfileImage: FC = ({ user, size }) => { borderRadius: 100, width: 25, height: 25, - position: "absolute", + position: 'absolute', backgroundColor: - status === "online" - ? "#6EE7B7" - : status === "pause" - ? "#EFCF9E" - : status === "idle" - ? "#F5BEBE" - : "#DCD6D6", - alignItems: "center", - justifyContent: "center", + status === 'online' + ? '#6EE7B7' + : status === 'pause' + ? '#EFCF9E' + : status === 'idle' + ? '#F5BEBE' + : '#DCD6D6', + alignItems: 'center', + justifyContent: 'center', borderColor: colors.background, - borderWidth: 3, + borderWidth: 3 }} > - ) -} -export default ProfileImage + ); +}; +export default ProfileImage; const styles = StyleSheet.create({ container: { - alignItems: "center", - height: "10%", + alignItems: 'center', + height: '10%' }, prefix: { fontFamily: typography.fonts.PlusJakartaSans.light, fontSize: 42, - fontWeight: "200", + fontWeight: '200' }, profileImage: { borderRadius: 200, - borderWidth: 3, - }, -}) + borderWidth: 3 + } +}); diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx index 9a3fe7c69..ebfbf59d0 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/TransferOwnership.tsx @@ -12,7 +12,9 @@ import { Animated, Dimensions, TouchableOpacity, - FlatList + FlatList, + KeyboardAvoidingView, + Platform } from 'react-native'; import { Text } from 'react-native-paper'; // COMPONENTS @@ -65,9 +67,13 @@ const ModalPopUp = ({ visible, children }) => { height: '100%' }} /> - + {children} - + ); }; diff --git a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/index.tsx b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/index.tsx index 362e937e5..8658d4442 100644 --- a/apps/mobile/app/screens/Authenticated/SettingScreen/Team/index.tsx +++ b/apps/mobile/app/screens/Authenticated/SettingScreen/Team/index.tsx @@ -1,139 +1,135 @@ /* eslint-disable react-native/no-inline-styles */ -import React, { FC, useState } from "react" -import { ScrollView, Text, TextStyle, View, ViewStyle } from "react-native" -import { typography } from "../../../../theme/typography" -import SingleInfo from "../components/SingleInfo" -import { translate } from "../../../../i18n" -import { useStores } from "../../../../models" -import { useOrganizationTeam } from "../../../../services/hooks/useOrganization" -import SwithTimeTracking from "../components/SwitchTimeTracking" -import { IPopup } from ".." -import { observer } from "mobx-react-lite" -import { useAppTheme } from "../../../../theme" -import TeamLogo from "./TeamLogo" -import TransferOwnership from "./TransferOwnership" -import { useTaskStatus } from "../../../../services/hooks/features/useTaskStatus" -import { useTaskPriority } from "../../../../services/hooks/features/useTaskPriority" -import { useTaskSizes } from "../../../../services/hooks/features/useTaskSizes" -import { useTaskLabels } from "../../../../services/hooks/features/useTaskLabels" -import { useTaskVersion } from "../../../../services/hooks/features/useTaskVersion" +import React, { FC, useState } from 'react'; +import { ScrollView, Text, TextStyle, View, ViewStyle } from 'react-native'; +import { typography } from '../../../../theme/typography'; +import SingleInfo from '../components/SingleInfo'; +import { translate } from '../../../../i18n'; +import { useStores } from '../../../../models'; +import { useOrganizationTeam } from '../../../../services/hooks/useOrganization'; +import SwithTimeTracking from '../components/SwitchTimeTracking'; +import { IPopup } from '..'; +import { observer } from 'mobx-react-lite'; +import { useAppTheme } from '../../../../theme'; +import TeamLogo from './TeamLogo'; +import TransferOwnership from './TransferOwnership'; +import { useTaskStatus } from '../../../../services/hooks/features/useTaskStatus'; +import { useTaskPriority } from '../../../../services/hooks/features/useTaskPriority'; +import { useTaskSizes } from '../../../../services/hooks/features/useTaskSizes'; +import { useTaskLabels } from '../../../../services/hooks/features/useTaskLabels'; +import { useTaskVersion } from '../../../../services/hooks/features/useTaskVersion'; interface ITeamSettingProps { - props: any - onOpenBottomSheet: (sheet: IPopup, snapPoint: number) => unknown + props: any; + onOpenBottomSheet: (sheet: IPopup, snapPoint: number) => unknown; } const TeamSettings: FC = observer(({ props, onOpenBottomSheet }) => { - const { colors } = useAppTheme() + const { colors } = useAppTheme(); const { - teamStore: { activeTeam }, - } = useStores() - const { isTeamManager } = useOrganizationTeam() + teamStore: { activeTeam } + } = useStores(); + const { isTeamManager } = useOrganizationTeam(); - const [open, setOpen] = useState(false) - const { navigation } = props + const [open, setOpen] = useState(false); + const { navigation } = props; - const { statuses } = useTaskStatus() - const { priorities } = useTaskPriority() - const { sizes } = useTaskSizes() - const { labels } = useTaskLabels() - const { versions } = useTaskVersion() + const { statuses } = useTaskStatus(); + const { priorities } = useTaskPriority(); + const { sizes } = useTaskSizes(); + const { labels } = useTaskLabels(); + const { versions } = useTaskVersion(); return ( setOpen(false)} /> - + onOpenBottomSheet("Team Logo", 1)} + buttonLabel={translate('settingScreen.teamSection.changeLogo')} + onChange={() => onOpenBottomSheet('Team Logo', 1)} /> onOpenBottomSheet("Team Name", 4)} + onPress={() => onOpenBottomSheet('Team Name', 4)} /> {isTeamManager ? : null} navigation.navigate("TaskVersion")} + title={'Task Versions'} + value={`There ${versions?.total === 1 ? 'is' : 'are'} ${versions?.total} active ${ + versions?.total === 1 ? 'version' : 'versions' + }`} + onPress={() => navigation.navigate('TaskVersion')} /> navigation.navigate("TaskStatus")} + onPress={() => navigation.navigate('TaskStatus')} /> navigation.navigate("TaskPriority")} + onPress={() => navigation.navigate('TaskPriority')} /> navigation.navigate("TaskSizeScreen")} + onPress={() => navigation.navigate('TaskSizeScreen')} /> navigation.navigate("TaskLabelScreen")} + onPress={() => navigation.navigate('TaskLabelScreen')} /> navigation.navigate("MembersSettingsScreen")} + title={translate('settingScreen.teamSection.teamRole')} + value={isTeamManager ? 'Yes' : 'No'} + onPress={() => navigation.navigate('MembersSettingsScreen')} /> - {translate("settingScreen.dangerZone")} + {translate('settingScreen.dangerZone')} setOpen(true)} /> onOpenBottomSheet("Remove Team", 5)} + title={translate('settingScreen.teamSection.removeTeam')} + value={translate('settingScreen.teamSection.removeTeamHint')} + onPress={() => onOpenBottomSheet('Remove Team', 5)} /> onOpenBottomSheet("Quit Team", 5)} + title={translate('settingScreen.teamSection.quitTeam')} + value={translate('settingScreen.teamSection.quitTeamHint')} + onPress={() => onOpenBottomSheet('Quit Team', 5)} /> - ) -}) + ); +}); -export default TeamSettings +export default TeamSettings; const $contentContainer: ViewStyle = { - width: "100%", - alignItems: "center", -} + width: '100%', + alignItems: 'center' +}; const $dangerZoneContainer: ViewStyle = { - borderTopColor: "rgba(0, 0, 0, 0.09)", + borderTopColor: 'rgba(0, 0, 0, 0.09)', borderTopWidth: 1, paddingTop: 32, marginTop: 32, - marginBottom: 40, -} + marginBottom: 40 +}; const $dangerZoneTitle: TextStyle = { - color: "#DA5E5E", + color: '#DA5E5E', fontSize: 20, - fontFamily: typography.primary.semiBold, -} + fontFamily: typography.primary.semiBold +}; diff --git a/apps/mobile/app/services/hooks/features/useAuthTeamTasks.ts b/apps/mobile/app/services/hooks/features/useAuthTeamTasks.ts index c57cf50c8..0599bed57 100644 --- a/apps/mobile/app/services/hooks/features/useAuthTeamTasks.ts +++ b/apps/mobile/app/services/hooks/features/useAuthTeamTasks.ts @@ -1,51 +1,49 @@ -import { useMemo } from "react" -import { useStores } from "../../../models" -import { IUser } from "../../interfaces/interfaces/IUserData" -import { useTeamTasks } from "./useTeamTasks" -import { useOrganizationTeam } from "../useOrganization" +import { useMemo } from 'react'; +import { useStores } from '../../../models'; +import { IUser } from '../../interfaces/interfaces/IUserData'; +import { useTeamTasks } from './useTeamTasks'; +import { useOrganizationTeam } from '../useOrganization'; export function useAuthTeamTasks(user: IUser | undefined) { const { - TaskStore: { teamTasks, tasksStatisticsState }, - } = useStores() - const { isRefetching } = useTeamTasks() + TaskStore: { teamTasks, tasksStatisticsState } + } = useStores(); + const { isRefetching } = useTeamTasks(); - const { currentTeam } = useOrganizationTeam() - const currentMember = currentTeam?.members?.find( - (member) => member.employee?.userId === user.id, - ) + const { currentTeam } = useOrganizationTeam(); + const currentMember = currentTeam?.members?.find((member) => member.employee?.userId === user?.id); - const statTasks = tasksStatisticsState + const statTasks = tasksStatisticsState; const assignedTasks = useMemo(() => { - if (!user) return [] + if (!user) return []; return teamTasks?.filter((task) => { - return task?.members.some((m) => m.userId === user.id) - }) - }, [teamTasks, user, isRefetching]) + return task?.members.some((m) => m?.userId === user?.id); + }); + }, [teamTasks, user, isRefetching]); const unassignedTasks = useMemo(() => { - if (!user) return [] + if (!user) return []; return teamTasks?.filter((task) => { - return !task?.members.some((m) => m.userId === user.id) - }) - }, [teamTasks, user, isRefetching]) + return !task?.members.some((m) => m?.userId === user?.id); + }); + }, [teamTasks, user, isRefetching]); const totalTodayTasks = useMemo(() => { return currentMember?.totalTodayTasks && currentMember?.totalTodayTasks.length - ? currentMember?.totalTodayTasks.map((task) => task.id) - : [] - }, [currentMember]) + ? currentMember?.totalTodayTasks.map((task) => task?.id) + : []; + }, [currentMember]); const workedTasks = useMemo(() => { return teamTasks?.filter((tsk) => { - return totalTodayTasks?.includes(tsk.id) - }) - }, [statTasks, teamTasks, isRefetching]) + return totalTodayTasks?.includes(tsk?.id); + }); + }, [statTasks, teamTasks, isRefetching]); return { assignedTasks, unassignedTasks, - workedTasks, - } + workedTasks + }; }