Skip to content

adding undrop trainee feature #532

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Oct 4, 2024
Merged

adding undrop trainee feature #532

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion src/Mutations/manageStudentMutations.tsx
View file
Open in desktop
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
244 changes: 179 additions & 65 deletions src/pages/AdminTraineeDashboard.tsx
View file
Open in desktop
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 @@ -70,6 +71,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 @@ -81,9 +84,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 @@ -168,7 +173,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 @@ -264,18 +272,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 @@ -296,8 +304,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 @@ -363,30 +372,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 @@ -559,6 +596,32 @@ 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);
restoreTraineeMod();
} 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 @@ -658,7 +721,6 @@ function AdminTraineeDashboard() {
teamOptions[index].label = team?.name;
});
}


return (
<>
Expand All @@ -672,20 +734,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 @@ -1473,6 +1536,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 @@ -1507,15 +1621,15 @@ function AdminTraineeDashboard() {
</div>
</div>
<div className="">
{loading? (
<TtlSkeleton/>
):(
<DataTable
data={traineeData?.length > 0 ? datum : []}
columns={columns}
loading={loading}
title={t('Trainee list')}
/>
{loading ? (
<TtlSkeleton />
) : (
<DataTable
data={traineeData?.length > 0 ? datum : []}
columns={columns}
loading={loading}
title={t('Trainee list')}
/>
)}
</div>
</div>
Expand All @@ -1527,4 +1641,4 @@ function AdminTraineeDashboard() {
);
}

export default AdminTraineeDashboard;
export default AdminTraineeDashboard;
2 changes: 2 additions & 0 deletions src/pages/Organization/AdminLogin.tsx
View file
Open in desktop
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
Loading