diff --git a/src/components/MembersDetails/Members.module.scss b/src/components/MembersDetails/Members.module.scss
index af5b7b4..1efa791 100644
--- a/src/components/MembersDetails/Members.module.scss
+++ b/src/components/MembersDetails/Members.module.scss
@@ -2,8 +2,7 @@
display: flex;
justify-content: space-between;
align-items: center;
-
- margin-top: 5%;
+ margin-top: 3%;
}
.participant-detail {
@@ -26,3 +25,18 @@
.remove-logo {
cursor: pointer;
}
+
+.personIcon {
+ > div {
+ > div[role='tooltip']:nth-child(2) {
+ background-color: #e6f1ff !important;
+ color: #0276fe !important;
+ }
+ }
+}
+
+.loader-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
diff --git a/src/components/MembersDetails/index.tsx b/src/components/MembersDetails/index.tsx
index b7b1cf5..7c59398 100644
--- a/src/components/MembersDetails/index.tsx
+++ b/src/components/MembersDetails/index.tsx
@@ -5,11 +5,12 @@ import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
import styles from './Members.module.scss';
import { toast } from '@navi/web-ui/lib/primitives/Toast';
import { ApiService } from '@src/services/api';
-import { ModalDialog } from '@navi/web-ui/lib/primitives';
+import { ModalDialog, Tooltip } from '@navi/web-ui/lib/primitives';
import { useAuthData } from './UseAuthHook';
import PersonIcon from '@src/assets/PersonIcon';
import ManagerIcon from '@src/assets/ManagerIcon';
import { CloseIcon } from '@navi/web-ui/lib/icons';
+import LoadingIcon from '@navi/web-ui/lib/icons/LoadingIcon';
import {
REMOVE_TEAM_MEMBER,
@@ -24,6 +25,8 @@ const MembersDetails = (props: any) => {
const [showTotalMembers, setShowTotalMembers] = useState(10);
const [showRemoveButton, setShowRemoveButton] = useState(false);
const [open, setOpen] = useState
(false);
+ const [selectedParticipantId, setSelectedParticipantId] = useState('0');
+ const [isLoading, setIsLoading] = useState(false);
const fetchSingleTeamData = teamId => {
const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
@@ -32,8 +35,10 @@ const MembersDetails = (props: any) => {
if (response.status === 200) {
const updatedData = response?.data?.data;
setData(updatedData);
+ setIsLoading(false);
} else {
toast.error(response.data.error.message);
+ setIsLoading(false);
}
})
.catch(error => {
@@ -52,6 +57,8 @@ const MembersDetails = (props: any) => {
.then(response => {
if (response.status === 200) {
toast.success(response.data.data);
+ setIsLoading(true);
+ setData([]);
fetchSingleTeamData(teamId);
} else {
toast.error(response.data.error.message);
@@ -64,14 +71,15 @@ const MembersDetails = (props: any) => {
});
};
- const handleMakeManager = (teamId, slackUserId) => {
- setOpen(false);
+ const handleMakeManager = teamId => {
+ const slackUserId = selectedParticipantId;
const endpoint = MAKE_MANAGER(teamId, slackUserId);
-
ApiService.patch(endpoint, {})
.then(response => {
if (response.status === 200) {
toast.success(response.data.data);
+ setIsLoading(true);
+ setData([]);
fetchSingleTeamData(teamId);
} else {
toast.error(response.data.error.message);
@@ -84,9 +92,13 @@ const MembersDetails = (props: any) => {
});
};
+ const handleOpenModal = participantId => {
+ setSelectedParticipantId(participantId);
+ setOpen(true);
+ };
+
const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
const userRoles = useAuthData();
- console.log('userRoles', userRoles);
const managerEmail = data?.participants?.find(
participant => participant.id === data.managerId,
@@ -100,7 +112,15 @@ const MembersDetails = (props: any) => {
} else {
setShowRemoveButton(false);
}
- }, [data, userRoles]);
+ }, [data, userRoles, open]);
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
return (
@@ -115,6 +135,7 @@ const MembersDetails = (props: any) => {
>
{' '}
+
{participant?.name}
{totalMembers > 10 && index === showTotalMembers - 1 ? (
totalMembers !== showTotalMembers ? (
@@ -136,62 +157,53 @@ const MembersDetails = (props: any) => {
-
+
{showRemoveButton &&
!(participant.email === managerEmail) && (
-
-
-
- )}
- {showRemoveButton &&
- !(participant.email === managerEmail) && (
- <>
-
setOpen(true)} />
-
+
-
- Teams can only have 1 manager. The current manager
- will be changed to a member
-
-
-
+ {
+ handleOpenModal(participant.id);
+ }}
+ />
+ {
+ setOpen(false);
+ },
+ },
+ {
+ label: 'Change Manager',
+ onClick: () => {
+ setOpen(false);
+ handleMakeManager(data.id);
+ },
+ },
+ ]}
+ header="Are you sure you want to make this member a manager ?"
+ onClose={() => setOpen(false)}
+ >
+
+ Teams can only have 1 manager. The current
+ manager will be changed to a member
+
+
+
+
)}
- {showRemoveButton &&
- !(participant.email === managerEmail) && (
-
-
-
- )}
{participant.email === managerEmail &&
}
@@ -199,11 +211,13 @@ const MembersDetails = (props: any) => {
!(participant.email === managerEmail) && (
<>
-
- handleRemoveUser(data.id, participant.id)
- }
- />
+
+
+ handleRemoveUser(data.id, participant.id)
+ }
+ />
+
)}