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

reviewed issues resolve

Browse Source
This commit is contained in:
AyushRanjan
2023-09-14 16:38:10 +05:30
parent 38a0972fbe
commit fa3c8cf0ca
8 changed files with 103 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,8 +38,6 @@ const TeamForm = (props: TeamFormProps) => {
}
setData(response?.data?.data);
setTeamId('');
//setData(hardcodedData.data);
//setTeamId('');
})
.catch(error => {
const toastMessage = `${
@@ -214,14 +212,3 @@ const TeamForm = (props: TeamFormProps) => {
};
export default TeamForm;
/**
* <div className={styles['members-list']}>
{data?.participants?.map(member => (
<div key={member.id} className={styles['member-item']}>
<span>{member.name}</span>
<Button variant="text">
Remove
</Button>
</div>))}
</div>
*/

25
src/assets/ManagerIcon.tsx Normal file
View File

@@ -0,0 +1,25 @@
import React, { FC } from 'react';
import { IconProps } from './types';
const PersonIcon: FC<IconProps> = ({
width = '16',
height = '16',
...restProps
}) => {
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14V13.2C0 12.6333 0.146 12.1123 0.438 11.637C0.729334 11.1623 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64567 4.75 9.387C5.81667 9.129 6.9 9 8 9C9.1 9 10.1833 9.129 11.25 9.387C12.3167 9.64567 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2707 11.1623 15.562 11.637C15.854 12.1123 16 12.6333 16 13.2V14C16 14.55 15.8043 15.021 15.413 15.413C15.021 15.8043 14.55 16 14 16H2Z"
fill="#0276FE"
/>
</svg>
);
};
export default PersonIcon;

10
src/assets/Person.svg
View File

@@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Person">
<mask id="mask0_385_34980" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_385_34980)">
<path id="person_filled" d="M12 12C10.9 12 9.95833 11.6083 9.175 10.825C8.39167 10.0417 8 9.1 8 8C8 6.9 8.39167 5.95833 9.175 5.175C9.95833 4.39167 10.9 4 12 4C13.1 4 14.0417 4.39167 14.825 5.175C15.6083 5.95833 16 6.9 16 8C16 9.1 15.6083 10.0417 14.825 10.825C14.0417 11.6083 13.1 12 12 12ZM6 20C5.45 20 4.97933 19.8043 4.588 19.413C4.196 19.021 4 18.55 4 18V17.2C4 16.6333 4.146 16.1123 4.438 15.637C4.72933 15.1623 5.11667 14.8 5.6 14.55C6.63333 14.0333 7.68333 13.6457 8.75 13.387C9.81667 13.129 10.9 13 12 13C13.1 13 14.1833 13.129 15.25 13.387C16.3167 13.6457 17.3667 14.0333 18.4 14.55C18.8833 14.8 19.2707 15.1623 19.562 15.637C19.854 16.1123 20 16.6333 20 17.2V18C20 18.55 19.8043 19.021 19.413 19.413C19.021 19.8043 18.55 20 18 20H6Z" fill="#0276FE"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

32
src/assets/PersonIcon.tsx Normal file
View File

@@ -0,0 +1,32 @@
import React, { FC, MouseEventHandler, useState } from 'react';
import { IconProps } from './types';
const PersonIcon: FC<IconProps> = ({
width = '24',
height = '24',
onClick,
...restProps
}) => {
const [isHovered, setIsHovered] = useState(false);
return (
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onClick={onClick as MouseEventHandler<SVGSVGElement>}
onMouseEnter={() => setIsHovered(true)} // Set isHovered to true on hover
onMouseLeave={() => setIsHovered(false)}
style={{ cursor: 'pointer' }}
>
<path
d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14V13.2C0 12.6333 0.146 12.1123 0.438 11.637C0.729334 11.1623 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64567 4.75 9.387C5.81667 9.129 6.9 9 8 9C9.1 9 10.1833 9.129 11.25 9.387C12.3167 9.64567 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2707 11.1623 15.562 11.637C15.854 12.1123 16 12.6333 16 13.2V14C16 14.55 15.8043 15.021 15.413 15.413C15.021 15.8043 14.55 16 14 16H2Z"
fill={isHovered ? '#0276FE' : '#969696'}
/>
</svg>
);
};
export default PersonIcon;

10
src/assets/close.svg
View File

@@ -1,10 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="close">
<mask id="mask0_3845_139213" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect id="Bounding box" width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_3845_139213)">
<path id="close_2" d="M12 13.3998L7.10005 18.2998C6.91672 18.4831 6.68338 18.5748 6.40005 18.5748C6.11672 18.5748 5.88338 18.4831 5.70005 18.2998C5.51672 18.1165 5.42505 17.8831 5.42505 17.5998C5.42505 17.3165 5.51672 17.0831 5.70005 16.8998L10.6 11.9998L5.70005 7.0998C5.51672 6.91647 5.42505 6.68314 5.42505 6.3998C5.42505 6.11647 5.51672 5.88314 5.70005 5.6998C5.88338 5.51647 6.11672 5.4248 6.40005 5.4248C6.68338 5.4248 6.91672 5.51647 7.10005 5.6998L12 10.5998L16.9 5.6998C17.0834 5.51647 17.3167 5.4248 17.6 5.4248C17.8834 5.4248 18.1167 5.51647 18.3 5.6998C18.4834 5.88314 18.575 6.11647 18.575 6.3998C18.575 6.68314 18.4834 6.91647 18.3 7.0998L13.4 11.9998L18.3 16.8998C18.4834 17.0831 18.575 17.3165 18.575 17.5998C18.575 17.8831 18.4834 18.1165 18.3 18.2998C18.1167 18.4831 17.8834 18.5748 17.6 18.5748C17.3167 18.5748 17.0834 18.4831 16.9 18.2998L12 13.3998Z" fill="#969696"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

3
src/assets/person_filled.svg
View File

@@ -1,3 +0,0 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 8C6.9 8 5.95833 7.60833 5.175 6.825C4.39167 6.04167 4 5.1 4 4C4 2.9 4.39167 1.95833 5.175 1.175C5.95833 0.391667 6.9 0 8 0C9.1 0 10.0417 0.391667 10.825 1.175C11.6083 1.95833 12 2.9 12 4C12 5.1 11.6083 6.04167 10.825 6.825C10.0417 7.60833 9.1 8 8 8ZM2 16C1.45 16 0.979333 15.8043 0.588 15.413C0.196 15.021 0 14.55 0 14V13.2C0 12.6333 0.146 12.1123 0.438 11.637C0.729334 11.1623 1.11667 10.8 1.6 10.55C2.63333 10.0333 3.68333 9.64567 4.75 9.387C5.81667 9.129 6.9 9 8 9C9.1 9 10.1833 9.129 11.25 9.387C12.3167 9.64567 13.3667 10.0333 14.4 10.55C14.8833 10.8 15.2707 11.1623 15.562 11.637C15.854 12.1123 16 12.6333 16 13.2V14C16 14.55 15.8043 15.021 15.413 15.413C15.021 15.8043 14.55 16 14 16H2Z" fill="#969696"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 827 B

11
src/components/MembersDetails/UseAuthHook.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { useState, useEffect } from 'react';
export const useAuthData = () => {
const [userRole, setUserRole] = useState<string>('');
useEffect(() => {
const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
setUserRole(userData?.roles || []);
}, []);
return userRole;
};

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

@@ -3,12 +3,13 @@ import { useState, useEffect } from 'react';
import { Avatar, Typography, Tag } from '@navi/web-ui/lib/primitives';
import styles from './Members.module.scss';
import person_logo from '@src/assets/person_filled.svg';
import person_logo_colored from '@src/assets/person.svg';
import remove_logo from '@src/assets/close.svg';
import { toast } from '@navi/web-ui/lib/primitives/Toast';
import { ApiService } from '@src/services/api';
import { ModalDialog } 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 {
REMOVE_TEAM_MEMBER,
@@ -24,28 +25,34 @@ const MembersDetails = (props: any) => {
const [showRemoveButton, setShowRemoveButton] = useState(false);
const [open, setOpen] = useState<boolean>(false);
const fetchSingleTeamData = teamId => {
const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
ApiService.get(fetchTeamDataEndpoint)
.then(response => {
if (response.status === 200) {
const updatedData = response?.data?.data;
setData(updatedData);
} else {
toast.error(response.data.error.message);
}
})
.catch(error => {
const toastMessage = `${
error?.response?.data?.error?.message
? `${error?.response?.data?.error?.message},`
: ''
}`;
toast.error(toastMessage);
});
};
const handleRemoveUser = (teamId, slackUserId) => {
const endpoint = REMOVE_TEAM_MEMBER(teamId, slackUserId);
ApiService.delete(endpoint)
.then(response => {
if (response.status === 200) {
toast.success(response.data.data);
///
const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
ApiService.get(fetchTeamDataEndpoint)
.then(response => {
const updatedData = response?.data?.data;
setData(updatedData);
})
.catch(error => {
const toastMessage = `${
error?.response?.data?.error?.message
? `${error?.response?.data?.error?.message},`
: ''
}`;
toast.error(toastMessage);
});
fetchSingleTeamData(teamId);
} else {
toast.error(response.data.error.message);
}
@@ -58,26 +65,14 @@ const MembersDetails = (props: any) => {
};
const handleMakeManager = (teamId, slackUserId) => {
setOpen(false);
const endpoint = MAKE_MANAGER(teamId, slackUserId);
ApiService.patch(endpoint, {})
.then(response => {
if (response.status === 200) {
toast.success(response.data.data);
const fetchTeamDataEndpoint = FETCH_SINGLE_TEAM_DATA(teamId);
ApiService.get(fetchTeamDataEndpoint)
.then(response => {
const updatedData = response?.data?.data;
setData(updatedData);
})
.catch(error => {
const toastMessage = `${
error?.response?.data?.error?.message
? `${error?.response?.data?.error?.message},`
: ''
}`;
toast.error(toastMessage);
});
fetchSingleTeamData(teamId);
} else {
toast.error(response.data.error.message);
}
@@ -90,7 +85,8 @@ const MembersDetails = (props: any) => {
};
const userData = JSON.parse(localStorage.getItem('user-data') || '{}');
const userRoles = userData.roles || [];
const userRoles = useAuthData();
console.log('userRoles', userRoles);
const managerEmail = data?.participants?.find(
participant => participant.id === data.managerId,
@@ -154,11 +150,7 @@ const MembersDetails = (props: any) => {
{showRemoveButton &&
!(participant.email === managerEmail) && (
<>
<img
src={person_logo}
alt="person_logo"
onClick={() => setOpen(true)}
/>
<PersonIcon onClick={() => setOpen(true)} />
<ModalDialog
open={open}
footerButtons={[
@@ -171,8 +163,7 @@ const MembersDetails = (props: any) => {
{
label: 'Change Manager',
onClick: function noRefCheck() {
handleMakeManager(data.id, participant.id),
setOpen(false);
handleMakeManager(data.id, participant.id);
},
},
]}
@@ -201,26 +192,19 @@ const MembersDetails = (props: any) => {
/>
</div>
)}
{participant.email === managerEmail && (
<img
src={person_logo_colored}
alt="person_logo_colored"
/>
)}
{participant.email === managerEmail && <ManagerIcon />}
</div>
{showRemoveButton &&
!(participant.email === managerEmail) && (
<>
&nbsp;&nbsp;&nbsp;&nbsp;
<img
src={remove_logo}
alt="Remove"
<CloseIcon
onClick={() =>
handleRemoveUser(data.id, participant.id)
}
/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</>
)}
{participant.email === managerEmail && (