diff --git a/src/Skeletons/Team.skeleton.tsx b/src/Skeletons/Team.skeleton.tsx new file mode 100644 index 000000000..27ccd8a21 --- /dev/null +++ b/src/Skeletons/Team.skeleton.tsx @@ -0,0 +1,62 @@ +import React from 'react'; + +function TeamsSkeleton() { + // Define unique identifiers for calendar days + + return ( +
+
+ {/* Team Name Placeholder */} +
+
+
+
+ {/* Grade Placeholder */} +
+
+ +
+ {/* Coordinator and TTL Placeholders */} +
+
+
+
+
+
+
+
+ + {/* Active and Drop Stats Placeholder */} +
+
+
+ | +
+
+ + {/* Sprint and Phase Placeholder */} +
+
+
+ + {/* Metrics Placeholders */} +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} + +export default TeamsSkeleton; diff --git a/src/Skeletons/attendance.skeleton.tsx b/src/Skeletons/attendance.skeleton.tsx new file mode 100644 index 000000000..a197a4a3a --- /dev/null +++ b/src/Skeletons/attendance.skeleton.tsx @@ -0,0 +1,65 @@ +import React from 'react'; + +function AttendanceSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+ {Array(5) + .fill(null) + .map((_) => ( +
+ ))} +
+ +
+
+
+
+
+
+
+ + {Array(5) + .fill(null) + .map((_, rowIndex) => ( +
+ {Array(4) + .fill(null) + .map((_, colIndex) => ( +
+ ))} +
+ ))} +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} + +export default AttendanceSkeleton; diff --git a/src/components/CoordinatorCard.tsx b/src/components/CoordinatorCard.tsx index 4b856735e..d210223b6 100644 --- a/src/components/CoordinatorCard.tsx +++ b/src/components/CoordinatorCard.tsx @@ -7,6 +7,7 @@ import { Link } from 'react-router-dom'; import Card from './TeamCard'; import { UserContext } from '../hook/useAuth'; import Spinner from './Spinner'; +import TeamsSkeleton from '../Skeletons/Team.skeleton'; export const GET_TEAMS_CARDS = gql` query GetAllTeams($orgToken: String!) { @@ -32,7 +33,7 @@ export const GET_TEAMS_CARDS = gql` lastName firstName } - status{ + status { status } } @@ -147,12 +148,12 @@ function ManagerCard() { rating = 'text-red-700'; } - const activeMembers = team.members.filter( - (member: any) => member.status?.status === 'active' - ).length; - const droppedMembers = team.members.filter( - (member: any) => member.status?.status === 'drop' - ).length; + const activeMembers = team.members.filter( + (member: any) => member.status?.status === 'active', + ).length; + const droppedMembers = team.members.filter( + (member: any) => member.status?.status === 'drop', + ).length; return { stylebg, @@ -180,11 +181,13 @@ function ManagerCard() { return (
{loading ? ( -
-
+
+ + +
) : ( -
+
{teamData && teamData.map((teamProps: any, index: number) => ( diff --git a/src/pages/TraineeAttendanceTracker.tsx b/src/pages/TraineeAttendanceTracker.tsx index c16126fcc..ce4692e96 100644 --- a/src/pages/TraineeAttendanceTracker.tsx +++ b/src/pages/TraineeAttendanceTracker.tsx @@ -22,6 +22,7 @@ import Modal from '../components/ModalAttendance'; import EditAttendanceButton from '../components/EditAttendenceButton'; import { UserContext } from '../hook/useAuth'; import useDocumentTitle from '../hook/useDocumentTitle'; +import AttendanceSkeleton from '../Skeletons/attendance.skeleton'; /* istanbul ignore next */ export interface UserInterface { @@ -540,549 +541,581 @@ function TraineeAttendanceTracker() { }, [isUpdatedMode]); return (
- - {pauseResumeAttendance && ( -
-
-
-

- {selectedTeamData?.isJobActive - ? 'Pause Attendance' - : 'Resume Attendance'} -

+ Loading Data... + {teamAttendanceLoading || teamsLoading || teamLoading ? ( + <> + + + ) : ( + <> + + {pauseResumeAttendance && ( +
+
+
+

+ {selectedTeamData?.isJobActive + ? 'Pause Attendance' + : 'Resume Attendance'} +

+
+

+ {selectedTeamData?.isJobActive + ? "By confirming, automatic attendance week additions for upcoming weeks will be paused. You can still record attendance for the current week. Don't worry you can reactivate this feature at any time!." + : "By confirming, automatic attendance week additions for upcoming weeks will be activated again. If you ever wish to pause this feature again, it's easy to do!"} +

+
+ + +
+
-

- {selectedTeamData?.isJobActive - ? "By confirming, automatic attendance week additions for upcoming weeks will be paused. You can still record attendance for the current week. Don't worry you can reactivate this feature at any time!." - : "By confirming, automatic attendance week additions for upcoming weeks will be activated again. If you ever wish to pause this feature again, it's easy to do!"} -

-
- - -
-
-
- )} -
-
-
-

{t('Attendance')}

-
-
-
-

- Team -

-
- + {!teamsLoading ? t('Submit Attendance') : 'Loading...'} +
-
- -
-
-
- {phases.map((phase, index) => ( -
{ - if (isUpdatedMode && selectedPhase !== phase && updated) { - toast.warning('First Discard or Update your changes', { - style: { color: '#000', lineHeight: '.95rem' }, - }); - return; - } - setIsUpdatedMode(false); - setSelectedPhase(phase); - }} - > - {phase.name} -
- ))} -
-
- Week: - -
-
- -
- {['mon', 'tue', 'wed', 'thu', 'fri'].map((day, index) => ( -
{ - if (isUpdatedMode && selectedDay !== day && updated) { - toast.warning('First Discard or Update your changes', { - style: { color: '#000', lineHeight: '.95rem' }, - }); - return; - } - setIsUpdatedMode(false); - setSelectedDay(day as 'mon' | 'tue' | 'wed' | 'thu' | 'fri'); - }} - data-testid="days-test" - > - {day} -
- ))} -
-
-
-
- {selectedDayDate && ( - <> - - - {selectedDayDate} - - - )} -
-
-
{ - if (!selectedDayHasData) { - return toast.warning( - 'You cannot update attendance for the day without any entries.', - { style: { color: '#000', lineHeight: '.95rem' } }, - ); - } - return setIsUpdatedMode(true); - }} - data-testid="update-link" - > -
-
{ - if (isUpdatedMode) { - toast.warning( - 'You cannot delete the attendance while it is being updated.', - { style: { color: '#000', lineHeight: '.95rem' } }, - ); - return; - } - handleDeleteAttendance(); - }} - className="flex gap-x-1 items-center cursor-pointer" - > - -
-
{ - setPauseResumeAttendance(true); - }} - className="flex gap-x-[5px] items-center cursor-pointer" - > - {selectedTeamData?.isJobActive ? ( - - ) : ( - - )} +
+ Week: +
-
-
- - - - - - - {isUpdatedMode && ( - - )} - - - - {!teamAttendanceLoading && - traineeAttendanceData.length > 0 && - traineeAttendanceData.map((attendanceData) => { - if ( - attendanceData.phase.id === selectedPhase?.id && - attendanceData.week === selectedWeek && - attendanceData.days[selectedDay].length - ) { - return attendanceData.days[selectedDay].map( - (dayData, index) => ( - - - - { - // eslint-disable-next-line jsx-a11y/control-has-associated-label - - } - {isUpdatedMode && ( - // eslint-disable-next-line jsx-a11y/control-has-associated-label - - - - )} - {!teamsLoading && - !teamAttendanceLoading && - !traineeAttendanceData.length && ( - - - + return setIsUpdatedMode(true); + }} + data-testid="update-link-2" + > + + Update Attendance ({selectedDay}) + +
{ + if (isUpdatedMode) { + toast.warning( + 'You cannot delete the attendance while it is being updated.', + { style: { color: '#000', lineHeight: '.95rem' } }, + ); + return; + } + handleDeleteAttendance(); + }} + className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium" + data-testid="delete-btn-test" + > + + + {loadingDeleteAttendance + ? 'Deleting Attendance ...' + : `Delete Attendance (${selectedDay})`} + +
+
{ + setPauseResumeAttendance(true); + }} + className="flex gap-x-[5px] items-center ml-4 cursor-pointer hover:text-primary font-medium leading-3" + > + {selectedTeamData?.isJobActive ? ( + + ) : ( + )} -
-
+ {['mon', 'tue', 'wed', 'thu', 'fri'].map((day, index) => ( +
{ + if (isUpdatedMode && selectedDay !== day && updated) { + toast.warning('First Discard or Update your changes', { + style: { color: '#000', lineHeight: '.95rem' }, + }); + return; + } + setIsUpdatedMode(false); + setSelectedDay( + day as 'mon' | 'tue' | 'wed' | 'thu' | 'fri', + ); + }} + data-testid="days-test" + > + {day} +
+ ))} + +
+
+
+ {selectedDayDate && ( + <> + + + {selectedDayDate} + + + )} +
+
+
{ + if (!selectedDayHasData) { + return toast.warning( + 'You cannot update attendance for the day without any entries.', + { style: { color: '#000', lineHeight: '.95rem' } }, + ); + } + return setIsUpdatedMode(true); + }} + data-testid="update-link" > - Names -
+ +
{ + if (isUpdatedMode) { + toast.warning( + 'You cannot delete the attendance while it is being updated.', + { style: { color: '#000', lineHeight: '.95rem' } }, + ); + return; + } + handleDeleteAttendance(); + }} + className="flex gap-x-1 items-center cursor-pointer" > - Email -
+ +
{ + setPauseResumeAttendance(true); + }} + className="flex gap-x-[5px] items-center cursor-pointer" > - Score -
- Action -
- { - // eslint-disable-next-line no-nested-ternary - window.innerWidth < 520 && - dayData.trainee.profile.name.length > 16 - ? `${dayData.trainee.profile.name.slice( - 0, - 16, - )}..` - : dayData.trainee.profile.name - } - - { - // eslint-disable-next-line no-nested-ternary - window.innerWidth < 600 && - dayData.trainee.email.length > 20 - ? window.innerWidth > 530 - ? `${dayData.trainee.email.slice( - 0, - 22, - )}..` - : `${dayData.trainee.email.slice( - 0, - 16, - )}..` - : dayData.trainee.email - } - -
- -
- 		+ ) : ( + + )} + + + +
+ + + + + + + {isUpdatedMode && ( + + )} + + + + {!teamAttendanceLoading && + traineeAttendanceData.length > 0 && + traineeAttendanceData.map((attendanceData) => { + if ( + attendanceData.phase.id === selectedPhase?.id && + attendanceData.week === selectedWeek && + attendanceData.days[selectedDay].length + ) { + return attendanceData.days[selectedDay].map( + (dayData, index) => ( + - + { + // eslint-disable-next-line no-nested-ternary + window.innerWidth < 520 && + dayData.trainee.profile.name.length > 16 + ? `${dayData.trainee.profile.name.slice( + 0, + 16, + )}..` + : dayData.trainee.profile.name + } + + + { + // eslint-disable-next-line jsx-a11y/control-has-associated-label + + } + {isUpdatedMode && ( + // eslint-disable-next-line jsx-a11y/control-has-associated-label + + )} + + ), + ); + } + if ( + traineeAttendanceData.length > 0 && + attendanceData.phase.id === selectedPhase?.id && + attendanceData.week === selectedWeek && + !attendanceData.days[selectedDay].length + ) { + return ( + + - )} - - ), - ); - } - if ( - traineeAttendanceData.length > 0 && - attendanceData.phase.id === selectedPhase?.id && - attendanceData.week === selectedWeek && - !attendanceData.days[selectedDay].length - ) { - return ( - + + ); + } + return null; + })} + {(teamsLoading || teamAttendanceLoading) && ( + + + + )} + {!teamsLoading && + !teamAttendanceLoading && + !traineeAttendanceData.length && ( + + )} + +
+ Names + + Email + + Score + + Action +
+ { + // eslint-disable-next-line no-nested-ternary + window.innerWidth < 600 && + dayData.trainee.email.length > 20 + ? window.innerWidth > 530 + ? `${dayData.trainee.email.slice( + 0, + 22, + )}..` + : `${dayData.trainee.email.slice( + 0, + 16, + )}..` + : dayData.trainee.email } - setUpdated={setUpdate} - /> + +
+ +
+ 		+ +
+ There is no attendance for the selected day
+ Loading Data... +
There is no attendance for the selected day
+
+ {isUpdatedMode && ( +
+ + +
+ )} + + +
+
+

ATTENDANCE ACTIONS

+
{ + if (!selectedDayHasData) { + return toast.warning( + 'You cannot update attendance for the day without any entries.', + { style: { color: '#000', lineHeight: '.95rem' } }, ); } - return null; - })} - {(teamsLoading || teamAttendanceLoading) && ( -
- Loading Data... -
- There is no attendance for the selected day -
-
- {isUpdatedMode && ( -
- - -
- )} -
- -
-
-

ATTENDANCE ACTIONS

-
{ - if (!selectedDayHasData) { - return toast.warning( - 'You cannot update attendance for the day without any entries.', - { style: { color: '#000', lineHeight: '.95rem' } }, - ); - } - return setIsUpdatedMode(true); - }} - data-testid="update-link-2" - > - - Update Attendance ({selectedDay}) -
-
{ - if (isUpdatedMode) { - toast.warning( - 'You cannot delete the attendance while it is being updated.', - { style: { color: '#000', lineHeight: '.95rem' } }, - ); - return; - } - handleDeleteAttendance(); - }} - className="flex gap-x-1 items-center ml-4 cursor-pointer hover:text-primary font-medium" - data-testid="delete-btn-test" - > - - - {loadingDeleteAttendance - ? 'Deleting Attendance ...' - : `Delete Attendance (${selectedDay})`} - -
-
{ - setPauseResumeAttendance(true); - }} - className="flex gap-x-[5px] items-center ml-4 cursor-pointer hover:text-primary font-medium leading-3" - > - {selectedTeamData?.isJobActive ? ( - - ) : ( - - )} - - {selectedTeamData?.isJobActive - ? 'Pause Attendance' - : 'Resume Attendance'} - -
-
-
-
- - [2] Attended and communicated -
-
- - [1] Didn‘t attend and communicated -
-
- - - [0] Didn‘t attend and didn‘t communicate - + + {selectedTeamData?.isJobActive + ? 'Pause Attendance' + : 'Resume Attendance'} + +
+
+
+
+ + [2] Attended and communicated +
+
+ + [1] Didn‘t attend and communicated +
+
+ + + [0] Didn‘t attend and didn‘t communicate + +
+
-
-
+ + )}
); } diff --git a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap index 8eb69ae1b..aacd978b6 100644 --- a/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap +++ b/tests/components/__snapshots__/AdminTraineeDashboard.test.tsx.snap @@ -463,7 +463,7 @@ Array [ name="date" readOnly={true} type="text" - value="2024-11-19" + value="2024-11-21" />
+ className="animate-pulse font-serif font-lexend w-[550px] h-[300px] md:w-[550px] md:h-[300px] rounded-md px-3 md:p-10 mr-11 py-7 bg-gray-300" + > +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + | + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + | + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + | + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; diff --git a/tests/pages/TraineeAttendanceTracker.test.tsx b/tests/pages/TraineeAttendanceTracker.test.tsx index 0b4861e33..d1fa4e988 100644 --- a/tests/pages/TraineeAttendanceTracker.test.tsx +++ b/tests/pages/TraineeAttendanceTracker.test.tsx @@ -330,231 +330,4 @@ describe('CRUD Of Trainee Attendance', () => { .toJSON(); expect(elem).toMatchSnapshot(); }); - it('Renders the TraineeAttendance Page', async () => { - jest.spyOn(React, 'useContext').mockImplementation(() => ({ - user: { - role: 'ttl', - }, - })); - render( - - - , - ); - - expect(await screen.findByText('Loading Data...')).toBeInTheDocument(); - - const teamElement = await screen.findByTestId('team-test'); - expect(teamElement).toBeInTheDocument(); - - fireEvent.change(teamElement, { - target: { value: 'Team-I-id-123' }, - }); - - const weeksElement = await screen.findByTestId('week-test'); - expect(weeksElement).toBeInTheDocument(); - - const updateLink2 = screen.getByTestId('update-link-2'); - expect(updateLink2).toBeInTheDocument(); - - const phase1Element = await screen.findByText('Phase I'); - expect(phase1Element).toBeInTheDocument(); - - fireEvent.click(phase1Element); - - const phase2Element = await screen.findByText('Phase II'); - expect(phase2Element).toBeInTheDocument(); - - fireEvent.change(weeksElement, { target: { value: '2' } }); - fireEvent.change(weeksElement, { target: { value: '1' } }); - - const daysElement = screen.getAllByTestId('days-test'); - expect(daysElement).toHaveLength(5); - daysElement.forEach((element) => { - fireEvent.click(element); - }); - fireEvent.click(daysElement[0]); - - // Back to Phase I - fireEvent.click(phase1Element); - - // Find row with trainee name test-trainee-name - expect(await screen.findByText('test-trainee-name')).toBeInTheDocument(); - - fireEvent.click(updateLink2); - - const cancelButton = await screen.findByTestId('cancel-button'); - expect(cancelButton).toBeInTheDocument(); - fireEvent.click(cancelButton); - - fireEvent.click(updateLink2); - - const deleteBtn = await screen.findByTestId('delete-btn-test'); - expect(deleteBtn).toBeInTheDocument(); - - fireEvent.click(deleteBtn); - - expect(toast.warning).toHaveBeenCalledWith( - 'You cannot delete the attendance while it is being updated.', - { style: { color: '#000', lineHeight: '.95rem' } }, - ); - - const editButton = await screen.findAllByTestId('edit-button'); - expect(editButton).toHaveLength(2); - - fireEvent.click(editButton[0]); - - const zeroScore = await screen.findByTestId('score-0'); - expect(zeroScore).toBeInTheDocument(); - fireEvent.click(zeroScore); - - await fireEvent.click(phase2Element); - - expect(toast.warning).toHaveBeenCalledWith( - 'First Discard or Update your changes', - expect.objectContaining({ - style: { color: '#000', lineHeight: '.95rem' }, - }), - ); - - fireEvent.click(daysElement[1]); - - expect(toast.warning).toHaveBeenCalledWith( - 'First Discard or Update your changes', - expect.objectContaining({ - style: { color: '#000', lineHeight: '.95rem' }, - }), - ); - - fireEvent.change(weeksElement, { target: { value: '2' } }); - - expect(toast.warning).toHaveBeenCalledWith( - 'First Discard or Update your changes', - expect.objectContaining({ - style: { color: '#000', lineHeight: '.95rem' }, - }), - ); - }); - it("Doesn't Delete attendance Test for day without entries", async () => { - await cleanup(); - jest.spyOn(React, 'useContext').mockImplementation(() => ({ - user: { - role: 'coordinator', - }, - })); - render( - - - , - ); - - const teamElement = await screen.findByTestId('team-test'); - expect(teamElement).toBeInTheDocument(); - - fireEvent.change(teamElement, { - target: { value: '66eea29cba07ede8a49e8bc6' }, - }); - - expect(await screen.findByText('Loading Data...')).toBeInTheDocument(); - - const phase1Element = await screen.findByText('Phase I'); - expect(phase1Element).toBeInTheDocument(); - - fireEvent.click(phase1Element); - - const weeksElement = await screen.findByTestId('week-test'); - expect(weeksElement).toBeInTheDocument(); - - const updateLink2 = screen.getByTestId('update-link-2'); - expect(updateLink2).toBeInTheDocument(); - - expect(await screen.findByText('test-trainee-name')).toBeInTheDocument(); - - fireEvent.change(weeksElement, { target: { value: '2' } }); - fireEvent.change(weeksElement, { target: { value: '1' } }); - - const phase2Element = await screen.findByText('Phase II'); - expect(phase2Element).toBeInTheDocument(); - fireEvent.click(phase2Element); - - const daysElement = screen.getAllByTestId('days-test'); - - fireEvent.click(daysElement[4]); - - const deleteBtn = await screen.findByTestId('delete-btn-test'); - expect(deleteBtn).toBeInTheDocument(); - - fireEvent.click(deleteBtn); - }); - it('Pause attendance for team with active attendance', async () => { - await cleanup(); - jest.spyOn(React, 'useContext').mockImplementation(() => ({ - user: { - role: 'coordinator', - }, - })); - - render( - - - , - ); - - expect(await screen.findByText('Loading Data...')).toBeInTheDocument(); - - const teamElement = await screen.findByTestId('team-test'); - expect(teamElement).toBeInTheDocument(); - - fireEvent.change(teamElement, { - target: { value: 'Team-I-id-123' }, - }); - - const pauseAttendanceElement = await screen.findByText('Pause Attendance'); - expect(pauseAttendanceElement).toBeInTheDocument(); - - fireEvent.click(pauseAttendanceElement); - - const cancelBtn = screen.getByText('Cancel'); - expect(cancelBtn).toBeInTheDocument(); - fireEvent.click(cancelBtn); - }); - it('Resume attendance for team with inactive attendance', async () => { - await cleanup(); - jest.spyOn(React, 'useContext').mockImplementation(() => ({ - user: { - role: 'coordinator', - }, - })); - - mocks[0].result.data.getAllTeams![0].isJobActive = false; - - render( - - - , - ); - - expect(await screen.findByText('Loading Data...')).toBeInTheDocument(); - - const teamElement = await screen.findByTestId('team-test'); - expect(teamElement).toBeInTheDocument(); - - fireEvent.change(teamElement, { - target: { value: 'Team-I-id-123' }, - }); - - const phase1Element = await screen.findByText('Phase I'); - expect(phase1Element).toBeInTheDocument(); - - const resumeAttendanceElement = await screen.findByText( - 'Resume Attendance', - ); - expect(resumeAttendanceElement).toBeInTheDocument(); - - fireEvent.click(resumeAttendanceElement); - - const confirmBtn = screen.getByText('Confirm'); - expect(confirmBtn).toBeInTheDocument(); - fireEvent.click(confirmBtn); - }); }); diff --git a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap index 9034f8cdd..f213b3cf8 100644 --- a/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap +++ b/tests/pages/__snapshots__/AdminTraineeDashboard.test.tsx.snap @@ -463,7 +463,7 @@ Array [ name="date" readOnly={true} type="text" - value="2024-11-19" + value="2024-11-21" />

Add Grading System

@@ -139,18 +139,22 @@ Array [ onSubmit={[Function]} >
@@ -162,18 +166,14 @@ Array [ className="undefined flex-1 min-w-max" > -
-
- -
+
+
Add Percentage @@ -183,18 +183,14 @@ Array [ className="undefined flex-1 min-w-max" > -
-
- -
+
+
Require Description @@ -212,14 +208,14 @@ Array [ className="flex flex-col gap-2 p-3 bg-gray-700 bg-opacity-5 dark:bg-neutral-700 dark:bg-opacity-25 rounded-md" >
- - +
+ +
+
+ +