fix-coordinators-table

atlp-rwanda · Nov 17, 2024 · 20f0611 · 20f0611
1 parent 31852e3
commit 20f0611
Show file tree

Hide file tree

Showing 7 changed files with 898 additions and 266 deletions.
diff --git a/src/Mutations/User.tsx b/src/Mutations/User.tsx
@@ -6,6 +6,17 @@ export const DROP_TTL_USER = gql`
   }
 `;
 
+export const DROP_COORDINATOR = gql`
+  mutation DropCordinator($id: String!, $reason: String!) {
+    dropCordinator(id: $id, reason: $reason)
+  }
+`;
+export const UNDROP_COORDINATOR = gql`
+  mutation UndropCordinator($id: String!) {
+    undropCordinator(id: $id)
+  }
+`;
+
 export const UNDROP_TTL_USER = gql`
   mutation UnDropTTLUser($email: String!) {
     undropTTLUser(email: $email)

diff --git a/src/components/DataTable.tsx b/src/components/DataTable.tsx
@@ -91,7 +91,7 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
         >
           <thead>
             {headerGroups.map((headerGroup) => (
-              <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+              <tr {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column) => (
                   <th
                     className={`thead ${column.isSorted ? 'sort-asc' : ''}`}

diff --git a/src/components/DropOrUndropUser.tsx b/src/components/DropOrUndropUser.tsx
@@ -0,0 +1,118 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import Button from './Buttons';
+
+interface DropOrUndropUserProps {
+  subject: string;
+  title: string;
+  drop?: boolean;
+  loading: boolean;
+  removalReason?: string;
+  setRemovalReason?: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit: (data: React.MouseEvent<HTMLButtonElement>) => void;
+  onClose: () => void;
+}
+
+function DropOrUndropUser({
+  subject,
+  title,
+  drop,
+  loading,
+  removalReason,
+  setRemovalReason,
+  onSubmit,
+  onClose,
+}: DropOrUndropUserProps) {
+  const { t } = useTranslation();
+
+  const handleConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation();
+    if (onSubmit) onSubmit(e);
+  };
+
+  return (
+    <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">
+      <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(subject)}
+          </h3>
+          <hr className="w-full my-3 border-b bg-primary" />
+        </div>
+        <div className="card-body w-full">
+          <form className="px-8 py-3 w-full">
+            <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(title)}
+              </h3>
+            </div>
+            {/* Reason input field */}
+            {drop && setRemovalReason && (
+              <div className="mt-4">
+                <input
+                  type="text"
+                  className="mt-1 p-2 block w-full border rounded-md shadow-sm focus:ring focus:ring-opacity-50 focus:ring-primary dark:bg-dark-bg dark:border-gray-600 dark:text-white"
+                  placeholder={t('Enter reason')}
+                  value={removalReason}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                    setRemovalReason(e.target.value)
+                  }
+                  id="removalReason"
+                />
+                <p
+                  id="errorMessage"
+                  className="text-red-500 text-xs mt-1 hidden"
+                >
+                  Reason is required!
+                </p>
+              </div>
+            )}
+
+            <div className="flex justify-between w-full pt-3">
+              <Button
+                data-testid="removeModel2"
+                variant="info"
+                size="sm"
+                style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
+                onClick={() => {
+                  if (drop && setRemovalReason) {
+                    setRemovalReason('');
+                    document
+                      .getElementById('errorMessage')!
+                      .classList.add('hidden');
+                  }
+                  onClose();
+                }}
+              >
+                {t('Cancel')}
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
+                onClick={() => {
+                  if (removalReason && !removalReason.trim() && drop) {
+                    document
+                      .getElementById('errorMessage')!
+                      .classList.remove('hidden');
+                  } else {
+                    handleConfirm(
+                      new MouseEvent(
+                        'click',
+                      ) as unknown as React.MouseEvent<HTMLButtonElement>,
+                    );
+                  }
+                }}
+                loading={loading}
+              >
+                {loading ? t('Loading') : t('Proceed')}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default DropOrUndropUser;
diff --git a/src/components/ProgramUsersModal.tsx b/src/components/ProgramUsersModal.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { gql, useQuery } from '@apollo/client';
-import DataTable from './DataTable';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
 import { styled } from '@mui/material/styles';
+import DataTable from './DataTable';
 
 interface User {
   email: string;
@@ -70,7 +70,7 @@ export function ProgramUsersModal({
   isOpen,
   onClose,
   // defaultProgram = 'default',
-  programName
+  programName,
 }: ProgramUsersModalProps) {
   const { data, loading, error } = useQuery(GET_ALL_USERS, {
     variables: {
@@ -79,10 +79,11 @@ export function ProgramUsersModal({
     skip: !isOpen,
   });
 
-  const programUsers = data?.getAllUsers.filter(
-    (user: User) => user.team?.cohort?.program?.name === programName
+  const programUsers =
+    data?.getAllUsers.filter(
+      (user: User) => user.team?.cohort?.program?.name === programName,
       // || (user.team === null && programName === defaultProgram)
-  ) || [];
+    ) || [];
 
   const columns = [
     {
@@ -91,7 +92,11 @@ export function ProgramUsersModal({
       Cell: ({ value }: CellProps) => (
         <div className="flex items-center">
           <span className="hidden ml-2 md:inline-block h-8 w-8 rounded-full overflow-hidden bg-gray-100 dark:bg-gray-700">
-            <svg className="h-full w-full text-gray-300 dark:text-gray-500" fill="currentColor" viewBox="0 0 24 24">
+            <svg
+              className="h-full w-full text-gray-300 dark:text-gray-500"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+            >
               <path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
             </svg>
           </span>
@@ -119,7 +124,7 @@ export function ProgramUsersModal({
     if (loading) {
       return (
         <div className="flex justify-center items-center h-48">
-          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
         </div>
       );
     }
@@ -152,12 +157,7 @@ export function ProgramUsersModal({
   };
 
   return (
-    <StyledDialog 
-      open={isOpen} 
-      onClose={onClose} 
-      maxWidth="md" 
-      fullWidth
-    >
+    <StyledDialog open={isOpen} onClose={onClose} maxWidth="md" fullWidth>
       <div className="bg-white dark:bg-gray-800 rounded-t-lg">
         <StyledDialogTitle className="text-gray-900 dark:text-white border-b dark:border-gray-700">
           {programName} - Users
@@ -168,4 +168,4 @@ export function ProgramUsersModal({
       </div>
     </StyledDialog>
   );
-}
+}