Skip to content

Commit b4968c8

Browse files
RWEMAREMYRWEMAREMY
committed
cordinators and managers can be added on a calender events
1 parent 5ba9eb6 commit b4968c8

File tree

6 files changed

+252
-96
lines changed

6 files changed

+252
-96
lines changed

‎src/Mutations/User.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,10 @@ export const GET_ALL_TTL_USERS = gql`
5353
getAllTTLUsers(orgToken: $orgToken) {
5454
profile {
5555
name
56+
id
5657
}
5758
email
59+
role
5860
team {
5961
name
6062
cohort {
@@ -79,7 +81,7 @@ export const GET_TTL_TRAINEES = gql`
7981
role
8082
team {
8183
name
82-
cohort{
84+
cohort {
8385
name
8486
}
8587
}

‎src/Mutations/invitationStats.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { gql } from '@apollo/client';
2+
23
export const GET_INVITATIONS_STATISTICS_QUERY = gql`
3-
query GetInvitationStatistics($orgToken: String!){
4-
getInvitationStatistics(orgToken: $orgToken){
4+
query GetInvitationStatistics($orgToken: String!) {
5+
getInvitationStatistics(orgToken: $orgToken) {
56
totalInvitations
67
pendingInvitationsCount
78
getPendingInvitationsPercentsCount
89
getAcceptedInvitationsPercentsCount
910
acceptedInvitationsCount
1011
}
1112
}
12-
`;
13+
`;

‎src/Mutations/manageStudentMutations.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ export const GET_TRAINEES_QUERY = gql`
3636
id
3737
user {
3838
id
39+
role
3940
status {
4041
status
4142
date

‎src/components/Calendar.tsx‎

Lines changed: 198 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,21 @@ import DatePicker from 'react-datepicker';
88
import 'react-datepicker/dist/react-datepicker.css';
99
import ReactTooltip from 'react-tooltip';
1010
import useDocumentTitle from '../hook/useDocumentTitle';
11-
import { useLazyQuery, useMutation } from '@apollo/client';
11+
import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
1212
import { ADD_EVENT, GET_EVENTS } from '../Mutations/event';
13+
import { GET_TRAINEES_QUERY } from '../Mutations/manageStudentMutations';
14+
import { GET_ALL_TTL_USERS } from '../Mutations/User';
15+
import { GET_TEAMS_CARDS } from '../components/CoordinatorCard';
16+
import { getOrganizations } from '../components/Organizations';
1317
import moment from 'moment';
18+
import { toast } from 'react-toastify';
19+
const organizationToken = localStorage.getItem('orgToken');
1420
/* istanbul ignore next */
1521

1622
type Trainee = {
1723
id: number;
1824
name: string;
19-
role: 'admin' | 'manager' | 'trainee';
25+
role: 'admin' | 'ttl' | 'trainee' | 'coordinator';
2026
};
2127

2228
const Calendar = () => {
@@ -34,20 +40,53 @@ const Calendar = () => {
3440
const [getEvents] = useLazyQuery(GET_EVENTS);
3541
const [createEvent] = useMutation(ADD_EVENT);
3642
const [showTraineeDropdown, setShowTraineeDropdown] = useState(false);
37-
const [trainees, setTrainees] = useState<Trainee[]>([
38-
{ id: 1, name: 'John Doe', role: 'admin' },
39-
{ id: 2, name: 'Jane Smith', role: 'manager' },
40-
{ id: 3, name: 'Bob Johnson', role: 'trainee' },
41-
{ id: 4, name: 'Alice Brown', role: 'trainee' },
42-
{ id: 5, name: 'Charlie Green', role: 'manager' },
43-
{ id: 6, name: 'Diana White', role: 'trainee' },
44-
{ id: 7, name: 'Ethan Black', role: 'admin' },
45-
{ id: 8, name: 'Fiona Blue', role: 'manager' },
46-
{ id: 9, name: 'George Gray', role: 'trainee' },
47-
{ id: 10, name: 'Hannah Purple', role: 'trainee' },
48-
]);
4943
const [selectedTrainees, setSelectedTrainees] = useState<number[]>([]);
5044

45+
const {
46+
loading,
47+
data: traineeData,
48+
refetch,
49+
} = useQuery(GET_TRAINEES_QUERY, {
50+
variables: {
51+
orgToken: organizationToken,
52+
},
53+
fetchPolicy: 'network-only',
54+
onError: (error) => {
55+
console.log(error.message);
56+
toast.error(error.message);
57+
},
58+
});
59+
60+
const { loading: coodinatorLoading, data: coodinatorData } = useQuery(
61+
GET_TEAMS_CARDS,
62+
{
63+
variables: {
64+
orgToken: organizationToken,
65+
},
66+
fetchPolicy: 'network-only',
67+
onError: (error) => {
68+
console.log(error.message);
69+
toast.error(error.message);
70+
},
71+
},
72+
);
73+
74+
const {
75+
loading: ttlLoading,
76+
data: ttlData,
77+
refetch: refetchTTL,
78+
} = useQuery(GET_ALL_TTL_USERS, {
79+
variables: {
80+
orgToken: organizationToken,
81+
},
82+
fetchPolicy: 'network-only',
83+
onError: (error) => {
84+
console.log(error.message);
85+
toast.error(error.message);
86+
},
87+
});
88+
89+
const { t } = useTranslation();
5190
useEffect(() => {
5291
const fetchData = async () => {
5392
/* istanbul ignore next */
@@ -74,8 +113,6 @@ const Calendar = () => {
74113
fetchData();
75114
}, []);
76115

77-
const { t } = useTranslation();
78-
79116
const renderEvent = (e: EventContentArg) => (
80117
<div
81118
data-html={true}
@@ -134,15 +171,16 @@ const Calendar = () => {
134171
switch (role) {
135172
case 'admin':
136173
return 'bg-red-500';
137-
case 'manager':
174+
case 'ttl':
138175
return 'bg-yellow-500';
139176
case 'trainee':
140177
return 'bg-green-500';
178+
case 'coordinator':
179+
return 'bg-blue-500';
141180
default:
142181
return 'bg-gray-500';
143182
}
144183
};
145-
146184
return (
147185
<>
148186
<div
@@ -267,49 +305,164 @@ const Calendar = () => {
267305
<button
268306
type="button"
269307
className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mb-2"
270-
onClick={() => setShowTraineeDropdown(!showTraineeDropdown)}
308+
onClick={() => {
309+
console.log(
310+
'Toggling dropdown, current state:',
311+
showTraineeDropdown,
312+
);
313+
setShowTraineeDropdown(!showTraineeDropdown);
314+
}}
271315
>
272316
{showTraineeDropdown ? '-' : '+'}
273317
</button>
274318
</div>
275319
{showTraineeDropdown && (
276320
<div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md h-40 overflow-y-auto">
277-
{trainees.map((trainee) => (
278-
<div key={trainee.id} className="flex items-center mb-2">
279-
<input
280-
type="checkbox"
281-
id={`trainee-${trainee.id}`}
282-
checked={selectedTrainees.includes(trainee.id)}
283-
onChange={() => handleAddGuest(trainee.id)}
284-
className="mr-2"
285-
/>
286-
<label
287-
htmlFor={`trainee-${trainee.id}`}
288-
className="flex items-center"
289-
>
290-
<span
291-
className={`w-2 h-2 rounded-full ${getRoleClass(
292-
trainee.role,
293-
)} mr-2`}
294-
></span>
295-
{trainee.name} ({trainee.role})
296-
</label>
297-
</div>
298-
))}
321+
{loading || ttlLoading || coodinatorLoading ? (
322+
<p>Loading...</p>
323+
) : (
324+
<>
325+
<h2 className=" mb-2">Trainees</h2>
326+
{traineeData?.getTrainees?.map((trainee: any) => (
327+
<div
328+
key={trainee.id}
329+
className="flex items-center mb-2"
330+
>
331+
<input
332+
type="checkbox"
333+
id={`trainee-${trainee.profile.user.id}`}
334+
checked={selectedTrainees.includes(
335+
trainee.profile.user.id,
336+
)}
337+
onChange={() =>
338+
handleAddGuest(trainee.profile.user.id)
339+
}
340+
className="mr-2"
341+
/>
342+
<label
343+
htmlFor={`trainee-${trainee.profile.user.id}`}
344+
className="flex items-center"
345+
>
346+
<span
347+
className={`w-2 h-2 rounded-full ${getRoleClass(
348+
trainee.profile.user.role,
349+
)} mr-2`}
350+
></span>
351+
{trainee.profile.firstName}
352+
</label>
353+
</div>
354+
))}
355+
356+
<hr className="border-t border-gray-300 my-4" />
357+
<h2 className=" mt-4 mb-2">TTL</h2>
358+
{ttlData?.getAllTTLUsers?.map((ttlUser: any) => (
359+
<div
360+
key={ttlUser.id}
361+
className="flex items-center mb-2"
362+
>
363+
<input
364+
type="checkbox"
365+
id={`ttl-${ttlUser.id}`}
366+
checked={selectedTrainees.includes(
367+
ttlUser.profile.id,
368+
)}
369+
onChange={() =>
370+
handleAddGuest(ttlUser.profile.id)
371+
}
372+
className="mr-2"
373+
/>
374+
<label
375+
htmlFor={`ttl-${ttlUser.profile.id}`}
376+
className="flex items-center"
377+
>
378+
<span
379+
className={`w-2 h-2 rounded-full ${getRoleClass(
380+
ttlUser.role,
381+
)} mr-2`}
382+
></span>
383+
{ttlUser.profile.name} ({ttlUser.role})
384+
</label>
385+
</div>
386+
))}
387+
388+
<hr className="border-t border-gray-300 my-4" />
389+
<h2 className=" mt-4 mb-2">Coordinators</h2>
390+
{coodinatorData?.getAllTeams?.map(
391+
(coordinatorUser: any) => (
392+
<div
393+
key={coordinatorUser.id}
394+
className="flex items-center mb-2"
395+
>
396+
<input
397+
type="checkbox"
398+
id={`ttl-${coordinatorUser.id}`}
399+
checked={selectedTrainees.includes(
400+
coordinatorUser.id,
401+
)}
402+
onChange={() =>
403+
handleAddGuest(coordinatorUser.id)
404+
}
405+
className="mr-2"
406+
/>
407+
<label
408+
htmlFor={`ttl-${coordinatorUser.id}`}
409+
className="flex items-center"
410+
>
411+
<span
412+
className={`w-2 h-2 rounded-full ${getRoleClass(
413+
coordinatorUser.cohort.coordinator.role,
414+
)} mr-2`}
415+
></span>
416+
{
417+
coordinatorUser.cohort.coordinator.profile
418+
.firstName
419+
}{' '}
420+
({coordinatorUser.cohort.coordinator.role})
421+
</label>
422+
</div>
423+
),
424+
)}
425+
</>
426+
)}
299427
</div>
300428
)}
301429
<div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md min-h-[40px] ">
302430
{selectedTrainees.map((id) => {
303-
const trainee = trainees.find((t) => t.id === id);
304-
if (!trainee) return null;
431+
const trainee = traineeData?.getTrainees?.find(
432+
(t: any) => t.profile.user.id === id,
433+
);
434+
const ttl = ttlData?.getAllTTLUsers?.find(
435+
(t: any) => t.profile.id === id,
436+
);
437+
const coordinator = coodinatorData?.getAllTeams?.find(
438+
(c: any) => c.id === id,
439+
);
440+
441+
if (!trainee && !ttl && !coordinator) return null;
442+
const user = trainee || ttl || coordinator;
443+
444+
const role =
445+
user.profile?.user?.role ||
446+
user.role ||
447+
user.cohort?.coordinator?.role;
448+
let name =
449+
user.profile?.firstName ||
450+
user.profile?.name ||
451+
user.cohort?.coordinator?.profile?.firstName;
452+
453+
// Add role in brackets for TTLs and coordinators
454+
if (ttl || coordinator) {
455+
name += ` (${role})`;
456+
}
457+
305458
return (
306459
<span
307460
key={id}
308461
className={`inline-block ${getRoleClass(
309-
trainee.role,
462+
role,
310463
)} text-white rounded-full px-2 py-1 text-xs mr-2 mb-2 relative`}
311464
>
312-
{trainee.name} ({trainee.role})
465+
{name}
313466
<button
314467
onClick={() => handleAddGuest(id)}
315468
className="absolute -top-1 -right-1 bg-red-500 text-white rounded-full w-4 h-4 flex items-center justify-center text-xs hover:bg-red-600 text-center font-extrabold"

‎src/components/CoordinatorCard.tsx‎

Lines changed: 12 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export const GET_TEAMS_CARDS = gql`
5555
5656
coordinator {
5757
email
58+
role
5859
profile {
5960
name
6061
firstName
@@ -164,23 +165,21 @@ function ManagerCard() {
164165
});
165166

166167
return (
167-
<div
168-
className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto "
169-
>
170-
{loading ? (
171-
<div className="flex items-center justify-center w-full h-full">
172-
<div className="spinner" />
173-
</div>
174-
) : (
175-
<div className="pl-10 flex">
176-
{teamData &&
168+
<div className="px-4 md:px-0 pb-20 w-full dark:bg-dark-frame-bg dark:text-black h-full flex overflow-x-auto ">
169+
{loading ? (
170+
<div className="flex items-center justify-center w-full h-full">
171+
<div className="spinner" />
172+
</div>
173+
) : (
174+
<div className="pl-10 flex">
175+
{teamData &&
177176
teamData.map((teamProps: any, index: number) => (
178-
<Link key={index} to={`/team/${(teamProps.teamname)}`}>
177+
<Link key={index} to={`/team/${teamProps.teamname}`}>
179178
<Card {...teamProps} />
180179
</Link>
181180
))}
182-
</div>
183-
)}
181+
</div>
182+
)}
184183
</div>
185184
);
186185
}

0 commit comments

Comments
 (0)