Merge branch 'develop' into fx-rating-trainee

atlp-rwanda · Sep 27, 2024 · 333c476 · 333c476
2 parents 87bf078 + 4b677fb
commit 333c476
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 23 deletions.
diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   useGlobalFilter,
@@ -18,6 +18,7 @@ interface TableData {
 }
 
 function DataTable({ data, columns, title, loading, className }: TableData) {
+  const [pageIndex, setPageIndex] = useState(0);
   const [filterInput, setFilterInput] = useState('');
   const { t } = useTranslation();
 
@@ -30,7 +31,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
     {
       data: memoizedData,
       columns: memoizedColumns,
-      initialState: { pageSize: 3, globalFilter: filterInput },
+      initialState: { pageIndex, pageSize: 3, globalFilter: filterInput },
     },
     useGlobalFilter,
     useSortBy,
@@ -52,9 +53,11 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
     pageOptions,
     headerGroups,
     prepareRow,
-    state: { pageIndex, pageSize },
+    state: { pageIndex: currentPageIndex, pageSize },
   } = tableInstance;
-
+  useEffect(() => {
+    setPageIndex(currentPageIndex);
+  }, [currentPageIndex]);
   const handleFilterChange = (e) => {
     const value = e.target.value || '';
     setGlobalFilter(value);

diff --git a/src/components/InvitationTable.tsx b/src/components/InvitationTable.tsx
@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useMemo } from 'react';
+import React, { useState,useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   useGlobalFilter,
@@ -20,6 +20,7 @@ interface TableData {
 function DataTableStats({ data, columns, error, loading }: TableData) {
   const [filterInput, setFilterInput] = useState('');
   const { t } = useTranslation();
+  const [pageIndex, setPageIndex] = useState(0);
 
   // Memoize columns and data to prevent unnecessary re-renders
   const memoizedColumns = useMemo(() => [...columns], [columns]);
@@ -30,7 +31,7 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
     {
       data: memoizedData,
       columns: memoizedColumns,
-      initialState: { pageSize: 3, globalFilter: filterInput },
+      initialState: {pageIndex, pageSize: 3, globalFilter: filterInput },
     },
     useGlobalFilter,
     useSortBy,
@@ -52,9 +53,12 @@ function DataTableStats({ data, columns, error, loading }: TableData) {
     pageOptions,
     headerGroups,
     prepareRow,
-    state: { pageIndex, pageSize },
+    state: { pageIndex: currentPageIndex, pageSize },
   } = tableInstance;
-
+
+  useEffect(() => {
+    setPageIndex(currentPageIndex);
+  }, [currentPageIndex]);
   const handleFilterChange = (e) => {
     const value = e.target.value || '';
     setGlobalFilter(value);

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -82,7 +82,7 @@ function Sidebar({ style, toggle }: { style: string; toggle: () => void }) {
             </SideNavLink>
           </CheckRole>
           {/* INVITATION */}
-          <CheckRole roles={['admin', 'coordinator']}>
+          <CheckRole roles={['admin']}>
             <SideNavLink onClick={toggle} to="/invitation" name="Invitation">
               <FaEnvelopeOpenText className="w-5" />
             </SideNavLink>

diff --git a/src/pages/AdminTraineeDashboard.tsx b/src/pages/AdminTraineeDashboard.tsx
@@ -79,9 +79,23 @@ function AdminTraineeDashboard() {
   const [gitHubStatistics, setGitHubStatistics] = useState<any>({});
   const { traineeData, setAllTrainees } = useTraineesContext() || [];
   const [actionTraineeOptions, setActionTraineeOptions] = useState<any>(null);
+  const modalRef = useRef<any>(null);
 
   const [selectedTraineeId, setSelectedTraineeId]= useState<string[]>()
 
+
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setSelectedRow(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [modalRef]);
+
   function PaperComponent(props: PaperProps) {
     return (
       <Draggable
@@ -280,7 +294,9 @@ function AdminTraineeDashboard() {
               onClick={() => toggleOptions(row.original.email)}
             />
             {selectedRow === row.original.email && (
-              <div 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
+               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">
@@ -1019,7 +1035,7 @@ function AdminTraineeDashboard() {
                 data-testid="removeInviteModel"
                 variant="info"
                 size="sm"
-                style="w-[20%] md:w-1/4 text-sm font-sans"
+                style="w-[40%] md:w-1/4 text-sm font-sans"
                 onClick={() => handleClose()}
               >
                 {t('Close')}
@@ -1077,7 +1093,7 @@ function AdminTraineeDashboard() {
                   data-testid="removeInviteModel"
                   variant="info"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => inviteModel()}
                 >
                   {t('Cancel')}
@@ -1086,7 +1102,7 @@ function AdminTraineeDashboard() {
                 <Button
                   variant="primary"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={HandleInvite}
                   loading={buttonLoading}
                 >
@@ -1165,15 +1181,15 @@ function AdminTraineeDashboard() {
                   data-testid="removeModel1"
                   variant="info"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => removeEditModel()}
                 >
                   {t('Cancel')}
                 </Button>
                 <Button
                   variant="primary"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => {
                     setButtonLoading(true);
                     setButtonLoading(true);
@@ -1223,7 +1239,7 @@ function AdminTraineeDashboard() {
                   data-testid="removeModel2"
                   variant="info"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => removeTraineeMod()}
                 >
                   {t('Cancel')}
@@ -1232,7 +1248,7 @@ function AdminTraineeDashboard() {
                   variant="primary"
                   size="sm"
                   data-testid="removeMemberFromCohort"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => {
                     setButtonLoading(true);
                     if (deleteEmail && deleteFromCohort) {
@@ -1310,7 +1326,7 @@ function AdminTraineeDashboard() {
                   data-testid="dropModel"
                   variant="info"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => setDropTraineeModel(false)}
                 >
                   {t('Cancel')}
@@ -1320,7 +1336,7 @@ function AdminTraineeDashboard() {
                   variant="primary"
                   size="sm"
                   data-testid="dropMemberFromCohort"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => {
                     setButtonLoading(true);
 
@@ -1411,7 +1427,7 @@ function AdminTraineeDashboard() {
                   data-testid="removeModel"
                   variant="info"
                   size="sm"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => removeModel()}
                 >
                   {t('Cancel')}
@@ -1420,7 +1436,7 @@ function AdminTraineeDashboard() {
                   variant="primary"
                   size="sm"
                   data-testid="saveButton"
-                  style="w-[30%] md:w-1/4 text-sm font-sans"
+                  style="w-[40%] md:w-1/4 text-sm font-sans"
                   onClick={() => {
                     if (
                       Object.values(email)[1] &&

diff --git a/src/pages/invitation.tsx b/src/pages/invitation.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable */
 /* istanbul ignore file */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { useQuery, gql, useLazyQuery, useMutation } from '@apollo/client';
 import { IoIosAddCircleOutline, IoIosSearch } from 'react-icons/io';
 import { FaCheck, FaFilter } from 'react-icons/fa';
@@ -80,6 +80,7 @@ function Invitation() {
     role: '',
     status: '',
   });
+  const modalRef = useRef<any>(null);
 
   const organizationToken = localStorage.getItem('orgToken');
 
@@ -147,6 +148,18 @@ function Invitation() {
     }
   }, [data, selectedInvitationId]);
 
+  useEffect(() => {
+    const handleClickOutside = (event: any) => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setSelectedRow(null);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [modalRef]);
+
   useEffect(() => {
     if (isLoading) {
       setFilterLoading(true);
@@ -334,7 +347,9 @@ function Invitation() {
               onClick={() => toggleOptions(row.id)}
             />
             {selectedRow === row.id && (
-              <div 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 
+                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">