Skip to content

Commit

Permalink
adding undrop trainee feature
Browse files Browse the repository at this point in the history
  • Loading branch information
@elijahladdie
elijahladdie committed Oct 2, 2024
1 parent 1b58a2a commit 3fc3bbf
Show file tree
Hide file tree
Showing 3 changed files with 177 additions and 57 deletions.
7 changes: 6 additions & 1 deletion src/Mutations/manageStudentMutations.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,12 @@ export const DROP_TRAINEE = gql`
dropTrainee(traineeId: $traineeId, reason: $reason, date: $date)
}
`;

// Define the mutation
export const UNDROP_TRAINEE = gql`
mutation UndropTrainee($traineeId: String!) {
undropTrainee(traineeId: $traineeId)
}
`;
export const GET_TRAINEES_QUERY = gql`
query GetTrainees($orgToken: String) {
getTrainees(orgToken: $orgToken) {
Expand Down
225 changes: 169 additions & 56 deletions src/pages/AdminTraineeDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
GET_TEAM_QUERY,
ADD_MEMBER_TO_TEAM,
GET_GITHUB_STATISTICS,
UNDROP_TRAINEE,
} from '../Mutations/manageStudentMutations';
import { useNavigate } from 'react-router-dom';

Expand Down Expand Up @@ -69,6 +70,8 @@ function AdminTraineeDashboard() {
const [editTeam, setEditTeam] = useState('');
const [inviteEmail, setInviteEmail] = useState('');
const [buttonLoading, setButtonLoading] = useState(false);
const [restoreTraineeModel, setRestoreTraineeModel] = useState(false);

const [toggle, setToggle] = useState(false);
const [showOptions, setShowOptions] = useState(false);
const options: any = [];
Expand All @@ -80,9 +83,11 @@ function AdminTraineeDashboard() {
const { traineeData, setAllTrainees } = useTraineesContext() || [];
const [actionTraineeOptions, setActionTraineeOptions] = useState<any>(null);
const modalRef = useRef<any>(null);

const [selectedTraineeId, setSelectedTraineeId]= useState<string[]>()

// restoreTraineeModel
// restoreTraineeMod
// unDropTrainee
// restoreMemberFromCohort
const [selectedTraineeId, setSelectedTraineeId] = useState<string[]>();

useEffect(() => {
const handleClickOutside = (event: any) => {
Expand Down Expand Up @@ -167,7 +172,10 @@ function AdminTraineeDashboard() {
const newState = !removeTraineeModel;
setRemoveTraineeModel(newState);
};

const restoreTraineeMod = () => {
const newState = !restoreTraineeModel;
setRestoreTraineeModel(newState);
};
const removeModel = () => {
const newState = !registerTraineeModel;
setRegisterTraineeModel(newState);
Expand Down Expand Up @@ -263,18 +271,18 @@ function AdminTraineeDashboard() {
}
>
<button
className={`${row.original?.Status?.status === 'drop'
? 'bg-gray-500'
: 'bg-black'
} text-white rounded-xl px-3`}
onClick={() => {
setSelectedTraineeId(row.original?.email);
handleClickOpen2();
}}
>
{row.original?.Status?.status === 'drop' ? 'Dropped' : 'View'}
</button>

className={`${
row.original?.Status?.status === 'drop'
? 'bg-gray-500'
: 'bg-black'
} text-white rounded-xl px-3`}
onClick={() => {
setSelectedTraineeId(row.original?.email);
handleClickOpen2();
}}
>
{row.original?.Status?.status === 'drop' ? 'Dropped' : 'View'}
</button>
</div>
);
},
Expand All @@ -295,8 +303,9 @@ function AdminTraineeDashboard() {
/>
{selectedRow === row.original.email && (
<div
ref={modalRef}
className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg">
ref={modalRef}
className="absolute z-50 w-64 p-4 mt-2 overflow-hidden border border-gray-300 rounded-lg shadow-md dropdown right-4 bg-light-bg max-h-30 dark:bg-dark-bg"
>
<>
<div className="mb-4"></div>
<div className="mb-4">
Expand Down Expand Up @@ -362,30 +371,58 @@ function AdminTraineeDashboard() {
</div>
</div>
<div className="mb-4">
<div
className="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => {
dropModel(row.original.email);
setdropTraineeID(row.original.userId);
setReason(row.original.reason);
toggleOptions(row.original.email);
}}
>
<Icon
icon="mdi:close-circle"
width="40"
height="40"
cursor="pointer"
color="#9e85f5"
/>
<div>
<span className="font-bold">Drop</span>{' '}
<>
<br />
Drop trainee
</>
{row.original?.Status?.status !== 'drop' ? (
<div
className="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => {
dropModel(row.original.email);
setdropTraineeID(row.original.userId);
setReason(row.original.reason);
toggleOptions(row.original.email);
}}
>
<Icon
icon="mdi:close-circle"
width="40"
height="40"
cursor="pointer"
color="#9e85f5"
/>
<div>
<span className="font-bold">Drop</span>
{row.original.status}
<>
<br />
Drop trainee
</>
</div>
</div>
</div>
) : (
<div
className="flex items-center p-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800"
onClick={() => {
restoreTraineeMod();
setdropTraineeID(row.original.userId);
setReason(row.original.reason);
toggleOptions(row.original.email);
}}
>
<Icon
icon="mdi:close-circle"
width="40"
height="40"
cursor="pointer"
color="#9e85f5"
/>
<div>
<span className="font-bold">Restore</span>{' '}
<>
<br />
Restore Dropped Trainee
</>
</div>
</div>
)}
</div>
<div>
<div
Expand Down Expand Up @@ -558,6 +595,31 @@ function AdminTraineeDashboard() {
},
});

const [unDropTrainee] = useMutation(UNDROP_TRAINEE, {
variables: {
traineeId: dropTraineeID,
},
onCompleted: (data) => {
setTimeout(() => {
setButtonLoading(false);
if (data.undropTrainee) {
// Check the response structure
refetch();
toast.success('Trainee Undropped successfully');
setDropTraineeModel(false);
} else {
toast.error('Failed to undrop trainee');
}
}, 1000);
},
onError: (err) => {
setTimeout(() => {
setButtonLoading(false);
console.error('Mutation error:', err); // Log the error
toast.error(err.message);
}, 500);
},
});
const [removeMemberFromCohort] = useMutation(
REMOVE_MEMBER_FROM_COHORT_MUTATION,
{
Expand Down Expand Up @@ -657,7 +719,6 @@ function AdminTraineeDashboard() {
teamOptions[index].label = team?.name;
});
}


return (
<>
Expand All @@ -671,20 +732,21 @@ function AdminTraineeDashboard() {
className="rounded-lg"
fullWidth
>
{traineeData?.map((data:any) => {
if (data.email === selectedTraineeId) {
return <ViewWeeklyRatings
traineeName={data?.profile?.name || 'Unknown Name'}
traineeEmail={data?.email || 'Unknown Email'}
traineeId={data?.profile?.user?.id || 'Unknown ID'}
traineeCohort={data?.team?.cohort?.id || 'Unknown Cohort'}
traineeStatus={
data?.profile?.user?.status || 'Status Unavailable'
}
/>
{traineeData?.map((data: any) => {
if (data.email === selectedTraineeId) {
return (
<ViewWeeklyRatings
traineeName={data?.profile?.name || 'Unknown Name'}
traineeEmail={data?.email || 'Unknown Email'}
traineeId={data?.profile?.user?.id || 'Unknown ID'}
traineeCohort={data?.team?.cohort?.id || 'Unknown Cohort'}
traineeStatus={
data?.profile?.user?.status || 'Status Unavailable'
}
/>
);
}
}
)}
})}
<FaTimes
size={24}
color="red"
Expand Down Expand Up @@ -1472,6 +1534,57 @@ function AdminTraineeDashboard() {
</div>
</div>
{/* =========================== End:: AddTraineeModel =============================== */}
{/* =========================== Start:: RestoreTraineeModel =============================== */}

<div
className={`h-screen w-screen bg-black bg-opacity-30 backdrop-blur-sm fixed top-0 left-0 z-20 flex items-center justify-center px-4 ${
restoreTraineeModel === true ? 'block' : 'hidden'
}`}
>
<div className="w-full p-4 pb-8 bg-white rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12">
<div className="flex flex-wrap items-center justify-center w-full card-title ">
<h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
{t('restore Trainee')}
</h3>
<hr className="w-full my-3 border-b bg-primary" />
</div>
<div className="card-body">
<form className="px-8 py-3 ">
<div className="flex flex-wrap items-center justify-center w-full card-title ">
<h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
{t('Are you sure you want to undrop this trainee?')}
</h3>
</div>

<div className="flex justify-between w-full">
<Button
data-testid="restoreModel2"
variant="info"
size="sm"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => restoreTraineeMod()}
>
{t('Cancel')}
</Button>
<Button
variant="primary"
size="sm"
data-testid="restoreMemberFromCohort"
style="w-[40%] md:w-1/4 text-sm font-sans"
onClick={() => {
setButtonLoading(true);
unDropTrainee();
}}
loading={buttonLoading}
>
{t('Proceed')}
</Button>
</div>
</form>
</div>
</div>
</div>
{/* =========================== End:: RemoveTraineeModel =============================== */}

<div className="flex flex-col">
<div className="flex flex-row">
Expand Down Expand Up @@ -1522,4 +1635,4 @@ function AdminTraineeDashboard() {
);
}

export default AdminTraineeDashboard;
export default AdminTraineeDashboard;
2 changes: 2 additions & 0 deletions src/pages/Organization/AdminLogin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,8 @@ function AdminLogin() {
},
onError: (err) => {
/* istanbul ignore next */
console.log(err.message);

if (err.networkError)
toast.error('There was a problem contacting the server');
else if (err.message.toLowerCase() !== 'invalid credential') {
Expand Down

0 comments on commit 3fc3bbf

Please sign in to comment.