Skip to content

Commit

Permalink
Merge pull request #1924 from ever-co/bug/invite-card-shadow-and-mana…
Browse files Browse the repository at this point in the history 
…ge-assignees-button

removed invite card options shadow in dark theme and fixed manage ass…
  • Loading branch information
@evereq
evereq authored Dec 1, 2023
2 parents c8e48bf + d69e3d5 commit db4d464
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 102 deletions.
184 changes: 86 additions & 98 deletions apps/mobile/app/components/Task/DetailsBlock/components/ManageAssignees.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,103 +10,94 @@ import {
ViewStyle,
StyleSheet,
TouchableOpacity,
Dimensions,
} from "react-native"
import React, { useEffect, useMemo, useState } from "react"
import { useAppTheme } from "../../../../theme"
import { OT_Member } from "../../../../services/interfaces/IOrganizationTeam"
import ProfileInfo from "./ProfileInfo"
import { SvgXml } from "react-native-svg"
import { trashIconLarge } from "../../../svgs/icons"
import { ITeamTask } from "../../../../services/interfaces/ITask"
import { useTeamMemberCard } from "../../../../services/hooks/features/useTeamMemberCard"
import { ScrollView } from "react-native-gesture-handler"
import { BlurView } from "expo-blur"
import { translate } from "../../../../i18n"
Dimensions
} from 'react-native';
import React, { useEffect, useMemo, useState } from 'react';
import { useAppTheme } from '../../../../theme';
import { OT_Member } from '../../../../services/interfaces/IOrganizationTeam';
import ProfileInfo from './ProfileInfo';
import { SvgXml } from 'react-native-svg';
import { trashIconLarge } from '../../../svgs/icons';
import { ITeamTask } from '../../../../services/interfaces/ITask';
import { useTeamMemberCard } from '../../../../services/hooks/features/useTeamMemberCard';
import { ScrollView } from 'react-native-gesture-handler';
import { BlurView } from 'expo-blur';
import { translate } from '../../../../i18n';

interface IManageAssignees {
memberList: OT_Member[]
task: ITeamTask
memberList: OT_Member[];
task: ITeamTask;
}

const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
const [modalVisible, setModalVisible] = useState<boolean>(false)
const [member, setMember] = useState<OT_Member>()
const [memberToRemove, setMemberToRemove] = useState<boolean>(false)
const [memberToAdd, setMemberToAdd] = useState<boolean>(false)
const [modalVisible, setModalVisible] = useState<boolean>(false);
const [member, setMember] = useState<OT_Member>();
const [memberToRemove, setMemberToRemove] = useState<boolean>(false);
const [memberToAdd, setMemberToAdd] = useState<boolean>(false);

const { colors } = useAppTheme()
const memberInfo = useTeamMemberCard(member)
const { height } = Dimensions.get("window")
const { colors } = useAppTheme();
const memberInfo = useTeamMemberCard(member);
const { height } = Dimensions.get('window');

const assignedToTaskMembers = useMemo(
() =>
memberList?.filter((member) =>
member.employee
? task?.members.map((item) => item.userId).includes(member.employee?.userId)
: false,
member.employee ? task?.members.map((item) => item.userId).includes(member.employee?.userId) : false
),
[memberList, task?.members],
)
[memberList, task?.members]
);

const unassignedMembers = useMemo(
() =>
memberList?.filter((member) =>
member.employee
? !task?.members.map((item) => item.userId).includes(member.employee.userId)
: false,
member.employee ? !task?.members.map((item) => item.userId).includes(member.employee.userId) : false
),
[memberList, task?.members],
)
[memberList, task?.members]
);

useEffect(() => {
if (task && member && memberToRemove) {
memberInfo
.unassignTask(task)
.then(() => {
setMember(undefined)
setMemberToRemove(false)
setMember(undefined);
setMemberToRemove(false);
})
.catch(() => {
setMember(undefined)
setMemberToRemove(false)
})
setMember(undefined);
setMemberToRemove(false);
});
} else if (task && member && memberToAdd) {
memberInfo
.assignTask(task)
.then(() => {
setMember(undefined)
setMemberToAdd(false)
setMember(undefined);
setMemberToAdd(false);
})
.catch(() => {
setMember(undefined)
setMemberToAdd(false)
})
setMember(undefined);
setMemberToAdd(false);
});
}
}, [task, member, memberInfo, memberToAdd, memberToRemove])
}, [task, member, memberInfo, memberToAdd, memberToRemove]);

return (
<View>
<TouchableOpacity onPress={() => setModalVisible(true)} style={styles.button}>
<Text style={{ fontSize: 12, fontWeight: "600", color: colors.primary }}>
{translate("taskDetailsScreen.manageAssignees")}
<Text style={{ fontSize: 12, fontWeight: '600', color: colors.primary }}>
{translate('taskDetailsScreen.manageAssignees')}
</Text>
</TouchableOpacity>

<ModalPopUp visible={modalVisible} onDismiss={() => setModalVisible(false)}>
<View
style={[
styles.container,
{ backgroundColor: colors.background, maxHeight: height / 2 },
]}
>
<View style={[styles.container, { backgroundColor: colors.background, maxHeight: height / 2 }]}>
<ScrollView>
{assignedToTaskMembers?.map((member, index) => (
<TouchableOpacity
onPress={() => {
setMember(member)
setMemberToRemove(true)
setModalVisible(false)
setMember(member);
setMemberToRemove(true);
setModalVisible(false);
}}
key={index}
style={styles.memberWrapper}
Expand All @@ -115,8 +106,8 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
<ProfileInfo
largerProfileInfo={true}
profilePicSrc={member?.employee?.user?.imageUrl}
names={`${member?.employee?.user?.firstName || ""} ${
member?.employee?.user?.lastName || ""
names={`${member?.employee?.user?.firstName || ''} ${
member?.employee?.user?.lastName || ''
}`}
/>
</View>
Expand All @@ -128,9 +119,9 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
{unassignedMembers?.map((member, index) => (
<TouchableOpacity
onPress={() => {
setMember(member)
setMemberToAdd(true)
setModalVisible(false)
setMember(member);
setMemberToAdd(true);
setModalVisible(false);
}}
key={index}
style={styles.memberWrapper}
Expand All @@ -139,8 +130,8 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
<ProfileInfo
largerProfileInfo={true}
profilePicSrc={member?.employee?.user?.imageUrl}
names={`${member?.employee?.user?.firstName || ""} ${
member?.employee?.user?.lastName || ""
names={`${member?.employee?.user?.firstName || ''} ${
member?.employee?.user?.lastName || ''
}`}
/>
</View>
Expand All @@ -150,84 +141,81 @@ const ManageAssignees: React.FC<IManageAssignees> = ({ memberList, task }) => {
</View>
</ModalPopUp>
</View>
)
}
);
};

export default ManageAssignees
export default ManageAssignees;

const ModalPopUp = ({ visible, children, onDismiss }) => {
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 (
<Modal animationType="fade" transparent visible={showModal}>
<BlurView
intensity={15}
tint="dark"
style={{
position: "absolute",
width: "100%",
height: "100%",
position: 'absolute',
width: '100%',
height: '100%'
}}
/>
<TouchableWithoutFeedback onPress={onDismiss}>
<View style={$modalBackGround}>
<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
{children}
</Animated.View>
<Animated.View style={{ transform: [{ scale: scaleValue }] }}>{children}</Animated.View>
</View>
</TouchableWithoutFeedback>
</Modal>
)
}
);
};

const $modalBackGround: ViewStyle = {
flex: 1,
justifyContent: "center",
}
justifyContent: 'center'
};

const styles = StyleSheet.create({
button: {
alignItems: "center",
borderColor: "#E5E7EB",
alignItems: 'center',
borderColor: '#E5E7EB',
borderRadius: 100,
borderWidth: 1,
height: 24,
justifyContent: "center",
justifyContent: 'center',
marginVertical: 10,
paddingHorizontal: 8,
paddingVertical: 4,
width: 140,
width: 140
},
container: {
alignSelf: "center",
alignSelf: 'center',
borderRadius: 20,
padding: 20,
width: "70%",
width: '70%'
},
memberWrapper: {
alignItems: "center",
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 10,
},
})
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'space-between',
marginBottom: 10
}
});
10 changes: 7 additions & 3 deletions apps/mobile/app/screens/Authenticated/TeamScreen/components/InviteCardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export const ListItemContent: React.FC<ListItemProps> = observer(({ invite, onPr
});

const ListCardItem: React.FC<Props> = (props) => {
const { colors } = useAppTheme();
const { colors, dark } = useAppTheme();
const { isTeamManager } = useOrganizationTeam();
const { resendInvite, removeSentInvitation } = useTeamInvitations();
// STATS
Expand Down Expand Up @@ -164,10 +164,14 @@ const ListCardItem: React.FC<Props> = (props) => {
...GS.positionAbsolute,
...GS.p2,
...GS.pt1,
...GS.shadow,
...GS.shadowLg,
shadowColor: 'rgba(0, 0, 0, 0.52)',
...GS.r0,
...GS.roundedSm,
...GS.zIndexFront,
borderRadius: 14,
borderWidth: dark ? 1 : 0,
borderColor: colors.border,
paddingHorizontal: 20,
opacity: 1,
width: 172,
marginTop: -spacing.extraSmall,
Expand Down
4 changes: 3 additions & 1 deletion apps/mobile/app/screens/Authenticated/TeamScreen/components/ListCardItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ export const ListItemContent: React.FC<IcontentProps> = observer(({ memberInfo,
});

const ListCardItem: React.FC<Props> = observer((props) => {
const { colors } = useAppTheme();
const { colors, dark } = useAppTheme();
// STATS
const memberInfo = useTeamMemberCard(props.member);
const taskEdition = useTMCardTaskEdit(memberInfo.memberTask);
Expand Down Expand Up @@ -205,6 +205,8 @@ const ListCardItem: React.FC<Props> = observer((props) => {
...GS.shadowLg,
shadowColor: 'rgba(0, 0, 0, 0.52)',
borderRadius: 14,
borderWidth: dark ? 1 : 0,
borderColor: colors.border,
width: 172,
marginTop: -5,
marginRight: 17,
Expand Down

0 comments on commit db4d464

Please sign in to comment.