varnitgoyal95/houston-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #35 from navi-sa/ayush-task

Browse Source 
remove member and make manager ui
This commit is contained in:
Ayush Ranjan
2023-09-20 11:38:21 +05:30
committed by GitHub
parent a07a87353f 4c45900421
commit c93d1712f6
5 changed files with 95 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -12,6 +12,7 @@ yarn-error.log*
# configuration files
config.js
config.qa.js
confg.dev.js
yarn.lock
package.lock.json

4
CODEOWNERS Normal file
View File

@@ -0,0 +1,4 @@
@ajay-devarakonda_navi
@shashank-shekhar_navi
@sriram-bhargav_navi
@k-kamalakannan_navi

2
src/Pages/Team/partials/TeamForm.tsx
View File

@@ -155,8 +155,6 @@ const TeamForm = (props: TeamFormProps) => {
</div>
</div>
<div className={styles['content-wrapper']}></div>
<hr className={styles['vertical-line']} />
<div className={styles['content-wrapper']}>
<div className={styles['custom-bordered-input']}>

18
src/components/MembersDetails/Members.module.scss
View File

@@ -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;
}

134
src/components/MembersDetails/index.tsx
View File

@@ -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<boolean>(false);
const [selectedParticipantId, setSelectedParticipantId] = useState('0');
const [isLoading, setIsLoading] = useState<boolean>(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 (
<div className={styles['loader-container']}>
<LoadingIcon size="md" />
</div>
);
}
return (
<div>
@@ -115,6 +135,7 @@ const MembersDetails = (props: any) => {
>
<div className={styles['participant-detail']}>
<Avatar size={20} isImage src={participant?.image} />{' '}
&nbsp;&nbsp;
<Typography variant="p3">{participant?.name}</Typography>
{totalMembers > 10 && index === showTotalMembers - 1 ? (
totalMembers !== showTotalMembers ? (
@@ -136,62 +157,53 @@ const MembersDetails = (props: any) => {
</div>
<div className={styles['participant-detail']}>
<div className={styles['participant-detail-nest']}>
<div
className={`${styles['participant-detail-nest']} tmpclass`}
>
{showRemoveButton &&
!(participant.email === managerEmail) && (
<div className={styles[`mark-as-manager`]}>
<Tag
color="blue"
label="Mark as manager"
variant="transparent"
/>
</div>
)}
{showRemoveButton &&
!(participant.email === managerEmail) && (
<>
<PersonIcon onClick={() => setOpen(true)} />
<ModalDialog
open={open}
footerButtons={[
{
label: 'Cancel',
onClick: function noRefCheck() {
setOpen(false);
},
},
{
label: 'Change Manager',
onClick: function noRefCheck() {
handleMakeManager(data.id, participant.id);
},
},
]}
header="Are you sure you want to make this member a manager ?"
onClose={function noRefCheck() {
setOpen(false);
}}
<div className={styles.personIcon}>
<Tooltip
position="left"
text="Make Manager"
withPointer={false}
>
<Typography variant="p4">
Teams can only have 1 manager. The current manager
will be changed to a member
</Typography>
</ModalDialog>
</>
<PersonIcon
onClick={() => {
handleOpenModal(participant.id);
}}
/>
<ModalDialog
open={open}
footerButtons={[
{
label: 'Cancel',
onClick: () => {
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)}
>
<Typography variant="p4">
Teams can only have 1 manager. The current
manager will be changed to a member
</Typography>
</ModalDialog>
</Tooltip>
</div>
)}
</div>
<div className={styles['participant-detail-nest']}>
{showRemoveButton &&
!(participant.email === managerEmail) && (
<div className={styles[`mark-as-manager`]}>
<Tag
color="blue"
label="Mark as manager"
variant="transparent"
/>
</div>
)}
{participant.email === managerEmail && <ManagerIcon />}
</div>
@@ -199,11 +211,13 @@ const MembersDetails = (props: any) => {
!(participant.email === managerEmail) && (
<>
&nbsp;&nbsp;&nbsp;&nbsp;
<CloseIcon
onClick={() =>
handleRemoveUser(data.id, participant.id)
}
/>
<Tooltip position="top" text="Remove Member">
<CloseIcon
onClick={() =>
handleRemoveUser(data.id, participant.id)
}
/>
</Tooltip>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</>
)}