cordinators and managers can be added on a calender events

atlp-rwanda · Sep 13, 2024 · b4968c8 · b4968c8
1 parent 5ba9eb6
commit b4968c8
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 96 deletions.
diff --git a/src/Mutations/User.tsx b/src/Mutations/User.tsx
@@ -53,8 +53,10 @@ export const GET_ALL_TTL_USERS = gql`
     getAllTTLUsers(orgToken: $orgToken) {
       profile {
         name
+        id
       }
       email
+      role
       team {
         name
         cohort {
@@ -79,7 +81,7 @@ export const GET_TTL_TRAINEES = gql`
       role
       team {
         name
-        cohort{
+        cohort {
           name
         }
       }

diff --git a/src/Mutations/invitationStats.tsx b/src/Mutations/invitationStats.tsx
@@ -1,12 +1,13 @@
 import { gql } from '@apollo/client';
+
 export const GET_INVITATIONS_STATISTICS_QUERY = gql`
-  query GetInvitationStatistics($orgToken: String!){
-    getInvitationStatistics(orgToken: $orgToken){
+  query GetInvitationStatistics($orgToken: String!) {
+    getInvitationStatistics(orgToken: $orgToken) {
       totalInvitations
       pendingInvitationsCount
       getPendingInvitationsPercentsCount
       getAcceptedInvitationsPercentsCount
       acceptedInvitationsCount
     }
   }
-`;
+`;
diff --git a/src/Mutations/manageStudentMutations.tsx b/src/Mutations/manageStudentMutations.tsx
@@ -36,6 +36,7 @@ export const GET_TRAINEES_QUERY = gql`
         id
         user {
           id
+          role
           status {
             status
             date

diff --git a/src/components/Calendar.tsx b/src/components/Calendar.tsx
@@ -8,15 +8,21 @@ import DatePicker from 'react-datepicker';
 import 'react-datepicker/dist/react-datepicker.css';
 import ReactTooltip from 'react-tooltip';
 import useDocumentTitle from '../hook/useDocumentTitle';
-import { useLazyQuery, useMutation } from '@apollo/client';
+import { useLazyQuery, useMutation, useQuery } from '@apollo/client';
 import { ADD_EVENT, GET_EVENTS } from '../Mutations/event';
+import { GET_TRAINEES_QUERY } from '../Mutations/manageStudentMutations';
+import { GET_ALL_TTL_USERS } from '../Mutations/User';
+import { GET_TEAMS_CARDS } from '../components/CoordinatorCard';
+import { getOrganizations } from '../components/Organizations';
 import moment from 'moment';
+import { toast } from 'react-toastify';
+const organizationToken = localStorage.getItem('orgToken');
 /* istanbul ignore next */
 
 type Trainee = {
   id: number;
   name: string;
-  role: 'admin' | 'manager' | 'trainee';
+  role: 'admin' | 'ttl' | 'trainee' | 'coordinator';
 };
 
 const Calendar = () => {
@@ -34,20 +40,53 @@ const Calendar = () => {
   const [getEvents] = useLazyQuery(GET_EVENTS);
   const [createEvent] = useMutation(ADD_EVENT);
   const [showTraineeDropdown, setShowTraineeDropdown] = useState(false);
-  const [trainees, setTrainees] = useState<Trainee[]>([
-    { id: 1, name: 'John Doe', role: 'admin' },
-    { id: 2, name: 'Jane Smith', role: 'manager' },
-    { id: 3, name: 'Bob Johnson', role: 'trainee' },
-    { id: 4, name: 'Alice Brown', role: 'trainee' },
-    { id: 5, name: 'Charlie Green', role: 'manager' },
-    { id: 6, name: 'Diana White', role: 'trainee' },
-    { id: 7, name: 'Ethan Black', role: 'admin' },
-    { id: 8, name: 'Fiona Blue', role: 'manager' },
-    { id: 9, name: 'George Gray', role: 'trainee' },
-    { id: 10, name: 'Hannah Purple', role: 'trainee' },
-  ]);
   const [selectedTrainees, setSelectedTrainees] = useState<number[]>([]);
 
+  const {
+    loading,
+    data: traineeData,
+    refetch,
+  } = useQuery(GET_TRAINEES_QUERY, {
+    variables: {
+      orgToken: organizationToken,
+    },
+    fetchPolicy: 'network-only',
+    onError: (error) => {
+      console.log(error.message);
+      toast.error(error.message);
+    },
+  });
+
+  const { loading: coodinatorLoading, data: coodinatorData } = useQuery(
+    GET_TEAMS_CARDS,
+    {
+      variables: {
+        orgToken: organizationToken,
+      },
+      fetchPolicy: 'network-only',
+      onError: (error) => {
+        console.log(error.message);
+        toast.error(error.message);
+      },
+    },
+  );
+
+  const {
+    loading: ttlLoading,
+    data: ttlData,
+    refetch: refetchTTL,
+  } = useQuery(GET_ALL_TTL_USERS, {
+    variables: {
+      orgToken: organizationToken,
+    },
+    fetchPolicy: 'network-only',
+    onError: (error) => {
+      console.log(error.message);
+      toast.error(error.message);
+    },
+  });
+
+  const { t } = useTranslation();
   useEffect(() => {
     const fetchData = async () => {
       /* istanbul ignore next */
@@ -74,8 +113,6 @@ const Calendar = () => {
     fetchData();
   }, []);
 
-  const { t } = useTranslation();
-
   const renderEvent = (e: EventContentArg) => (
     <div
       data-html={true}
@@ -134,15 +171,16 @@ const Calendar = () => {
     switch (role) {
       case 'admin':
         return 'bg-red-500';
-      case 'manager':
+      case 'ttl':
         return 'bg-yellow-500';
       case 'trainee':
         return 'bg-green-500';
+      case 'coordinator':
+        return 'bg-blue-500';
       default:
         return 'bg-gray-500';
     }
   };
-
   return (
     <>
       <div
@@ -267,49 +305,164 @@ const Calendar = () => {
                   <button
                     type="button"
                     className="bg-primary text-white rounded-full w-6 h-6 flex items-center justify-center mb-2"
-                    onClick={() => setShowTraineeDropdown(!showTraineeDropdown)}
+                    onClick={() => {
+                      console.log(
+                        'Toggling dropdown, current state:',
+                        showTraineeDropdown,
+                      );
+                      setShowTraineeDropdown(!showTraineeDropdown);
+                    }}
                   >
                     {showTraineeDropdown ? '-' : '+'}
                   </button>
                 </div>
                 {showTraineeDropdown && (
                   <div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md h-40 overflow-y-auto">
-                    {trainees.map((trainee) => (
-                      <div key={trainee.id} className="flex items-center mb-2">
-                        <input
-                          type="checkbox"
-                          id={`trainee-${trainee.id}`}
-                          checked={selectedTrainees.includes(trainee.id)}
-                          onChange={() => handleAddGuest(trainee.id)}
-                          className="mr-2"
-                        />
-                        <label
-                          htmlFor={`trainee-${trainee.id}`}
-                          className="flex items-center"
-                        >
-                          <span
-                            className={`w-2 h-2 rounded-full  ${getRoleClass(
-                              trainee.role,
-                            )} mr-2`}
-                          ></span>
-                          {trainee.name} ({trainee.role})
-                        </label>
-                      </div>
-                    ))}
+                    {loading || ttlLoading || coodinatorLoading ? (
+                      <p>Loading...</p>
+                    ) : (
+                      <>
+                        <h2 className=" mb-2">Trainees</h2>
+                        {traineeData?.getTrainees?.map((trainee: any) => (
+                          <div
+                            key={trainee.id}
+                            className="flex items-center mb-2"
+                          >
+                            <input
+                              type="checkbox"
+                              id={`trainee-${trainee.profile.user.id}`}
+                              checked={selectedTrainees.includes(
+                                trainee.profile.user.id,
+                              )}
+                              onChange={() =>
+                                handleAddGuest(trainee.profile.user.id)
+                              }
+                              className="mr-2"
+                            />
+                            <label
+                              htmlFor={`trainee-${trainee.profile.user.id}`}
+                              className="flex items-center"
+                            >
+                              <span
+                                className={`w-2 h-2 rounded-full ${getRoleClass(
+                                  trainee.profile.user.role,
+                                )} mr-2`}
+                              ></span>
+                              {trainee.profile.firstName}
+                            </label>
+                          </div>
+                        ))}
+
+                        <hr className="border-t border-gray-300 my-4" />
+                        <h2 className=" mt-4 mb-2">TTL</h2>
+                        {ttlData?.getAllTTLUsers?.map((ttlUser: any) => (
+                          <div
+                            key={ttlUser.id}
+                            className="flex items-center mb-2"
+                          >
+                            <input
+                              type="checkbox"
+                              id={`ttl-${ttlUser.id}`}
+                              checked={selectedTrainees.includes(
+                                ttlUser.profile.id,
+                              )}
+                              onChange={() =>
+                                handleAddGuest(ttlUser.profile.id)
+                              }
+                              className="mr-2"
+                            />
+                            <label
+                              htmlFor={`ttl-${ttlUser.profile.id}`}
+                              className="flex items-center"
+                            >
+                              <span
+                                className={`w-2 h-2 rounded-full ${getRoleClass(
+                                  ttlUser.role,
+                                )} mr-2`}
+                              ></span>
+                              {ttlUser.profile.name} ({ttlUser.role})
+                            </label>
+                          </div>
+                        ))}
+
+                        <hr className="border-t border-gray-300 my-4" />
+                        <h2 className=" mt-4 mb-2">Coordinators</h2>
+                        {coodinatorData?.getAllTeams?.map(
+                          (coordinatorUser: any) => (
+                            <div
+                              key={coordinatorUser.id}
+                              className="flex items-center mb-2"
+                            >
+                              <input
+                                type="checkbox"
+                                id={`ttl-${coordinatorUser.id}`}
+                                checked={selectedTrainees.includes(
+                                  coordinatorUser.id,
+                                )}
+                                onChange={() =>
+                                  handleAddGuest(coordinatorUser.id)
+                                }
+                                className="mr-2"
+                              />
+                              <label
+                                htmlFor={`ttl-${coordinatorUser.id}`}
+                                className="flex items-center"
+                              >
+                                <span
+                                  className={`w-2 h-2 rounded-full ${getRoleClass(
+                                    coordinatorUser.cohort.coordinator.role,
+                                  )} mr-2`}
+                                ></span>
+                                {
+                                  coordinatorUser.cohort.coordinator.profile
+                                    .firstName
+                                }{' '}
+                                ({coordinatorUser.cohort.coordinator.role})
+                              </label>
+                            </div>
+                          ),
+                        )}
+                      </>
+                    )}
                   </div>
                 )}
                 <div className="dark:bg-dark-tertiary dark:text-white mt-2 p-2 border border-primary rounded-md min-h-[40px] ">
                   {selectedTrainees.map((id) => {
-                    const trainee = trainees.find((t) => t.id === id);
-                    if (!trainee) return null;
+                    const trainee = traineeData?.getTrainees?.find(
+                      (t: any) => t.profile.user.id === id,
+                    );
+                    const ttl = ttlData?.getAllTTLUsers?.find(
+                      (t: any) => t.profile.id === id,
+                    );
+                    const coordinator = coodinatorData?.getAllTeams?.find(
+                      (c: any) => c.id === id,
+                    );
+
+                    if (!trainee && !ttl && !coordinator) return null;
+                    const user = trainee || ttl || coordinator;
+
+                    const role =
+                      user.profile?.user?.role ||
+                      user.role ||
+                      user.cohort?.coordinator?.role;
+                    let name =
+                      user.profile?.firstName ||
+                      user.profile?.name ||
+                      user.cohort?.coordinator?.profile?.firstName;
+
+                    // Add role in brackets for TTLs and coordinators
+                    if (ttl || coordinator) {
+                      name += ` (${role})`;
+                    }
+
                     return (
                       <span
                         key={id}
                         className={`inline-block ${getRoleClass(
-                          trainee.role,
+                          role,
                         )} text-white rounded-full px-2 py-1 text-xs mr-2 mb-2 relative`}
                       >
-                        {trainee.name} ({trainee.role})
+                        {name}
                         <button
                           onClick={() => handleAddGuest(id)}
                           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"

diff --git a/src/components/CoordinatorCard.tsx b/src/components/CoordinatorCard.tsx
@@ -55,6 +55,7 @@ export const GET_TEAMS_CARDS = gql`
 
         coordinator {
           email
+          role
           profile {
             name
             firstName
@@ -164,23 +165,21 @@ function ManagerCard() {
       });
 
   return (
-    <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 "
-  >
-    {loading ? (
-      <div className="flex items-center justify-center w-full h-full">
-            <div className="spinner" />
-      </div>
-    ) : (
-      <div className="pl-10 flex">
-         {teamData &&
+    <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 ">
+      {loading ? (
+        <div className="flex items-center justify-center w-full h-full">
+          <div className="spinner" />
+        </div>
+      ) : (
+        <div className="pl-10 flex">
+          {teamData &&
             teamData.map((teamProps: any, index: number) => (
-              <Link key={index} to={`/team/${(teamProps.teamname)}`}>
+              <Link key={index} to={`/team/${teamProps.teamname}`}>
                 <Card {...teamProps} />
               </Link>
             ))}
-      </div>
-    )}
+        </div>
+      )}
     </div>
   );
 }