Skip to content

Commit 8f45bdb

Browse files
Calebgisa72Calebgisa72
authored
fix-coordinators-table (#629)
1 parent b2f4b62 commit 8f45bdb

File tree

11 files changed

+1616
-953
lines changed

11 files changed

+1616
-953
lines changed

Diff for: ‎src/Mutations/User.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,17 @@ export const DROP_TTL_USER = gql`
66
}
77
`;
88

9+
export const DROP_COORDINATOR = gql`
10+
mutation DropCordinator($id: String!, $reason: String!) {
11+
dropCordinator(id: $id, reason: $reason)
12+
}
13+
`;
14+
export const UNDROP_COORDINATOR = gql`
15+
mutation UndropCordinator($id: String!) {
16+
undropCordinator(id: $id)
17+
}
18+
`;
19+
920
export const UNDROP_TTL_USER = gql`
1021
mutation UnDropTTLUser($email: String!) {
1122
undropTTLUser(email: $email)

Diff for: ‎src/components/DataTable.tsx

+9-12
Original file line numberDiff line numberDiff line change
@@ -68,36 +68,33 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
6868

6969
return (
7070
<div
71-
className={`relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 md:py-4 lg:py-5 rounded-md w-[100%] overflow-auto custom-scrollbar "lg:ml-60 mx-auto"} lg:mb-10 ${className}`}
71+
className={`relative font-serif bg-indigo-100 dark:bg-dark-bg shadow-lg h-fit px-5 py-8 rounded-md w-[100%] overflow-scroll "lg:ml-60 mx-auto"} mb-10 ${className}`}
7272
>
7373
<div className="flex flex-col md:flex-row items-center justify-between pb-6 space-y-4 md:space-y-0">
7474
<div>
7575
<h2 className="text-lg md:text-xl font-semibold text-gray-800 dark:text-white">
7676
{t(title)}
7777
</h2>
78-
{/* Uncomment if you want a filter input */}
79-
{/* <input
78+
<input
8079
value={filterInput}
8180
aria-label="Filter table data"
8281
placeholder="Filter"
8382
className="px-4 py-2 mt-4 font-sans text-xs md:text-sm border rounded outline-none border-primary dark:bg-neutral-600 dark:text-white w-full sm:w-52 md:w-96"
8483
onChange={handleFilterChange}
85-
/> */}
84+
/>
8685
</div>
8786
</div>
88-
<div className="overflow-x-auto custom-scrollbar">
87+
<div className="overflow-x-auto">
8988
<table
9089
className="min-w-full leading-normal text-xs md:text-sm"
9190
{...getTableProps()}
9291
>
9392
<thead>
9493
{headerGroups.map((headerGroup) => (
95-
<tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
94+
<tr {...headerGroup.getHeaderGroupProps()}>
9695
{headerGroup.headers.map((column) => (
9796
<th
98-
className={`thead w-1/${columns.length} text-center ${
99-
column.isSorted ? 'sort-asc' : ''
100-
}`}
97+
className={`thead ${column.isSorted ? 'sort-asc' : ''}`}
10198
{...column.getHeaderProps(column.getSortByToggleProps())}
10299
key={column.id}
103100
>
@@ -116,15 +113,15 @@ function DataTable({ data, columns, title, loading, className }: TableData) {
116113
<tr
117114
className={`border-b dark:border-gray-700 ${
118115
row.index % 2 === 0
119-
? 'bg-gray-600 dark:bg-neutral-600'
120-
: 'bg-transparent'
116+
? 'bg-light-bg dark:bg-neutral-600'
117+
: 'bg-white dark:bg-dark-bg'
121118
}`}
122119
{...row.getRowProps()}
123120
key={row.id}
124121
>
125122
{row.cells.map((cell) => (
126123
<td
127-
className={`w-1/${columns.length} data-cell px-4 py-2 text-center`}
124+
className="data-cell px-4 py-2"
128125
{...cell.getCellProps()}
129126
key={cell.column.id}
130127
>

Diff for: ‎src/components/DropOrUndropUser.tsx

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
import React, { useState } from 'react';
2+
import { useTranslation } from 'react-i18next';
3+
import Button from './Buttons';
4+
5+
interface DropOrUndropUserProps {
6+
subject: string;
7+
title: string;
8+
drop?: boolean;
9+
loading: boolean;
10+
removalReason?: string;
11+
setRemovalReason?: React.Dispatch<React.SetStateAction<string>>;
12+
onSubmit: (data: React.MouseEvent<HTMLButtonElement>) => void;
13+
onClose: () => void;
14+
}
15+
16+
function DropOrUndropUser({
17+
subject,
18+
title,
19+
drop,
20+
loading,
21+
removalReason,
22+
setRemovalReason,
23+
onSubmit,
24+
onClose,
25+
}: DropOrUndropUserProps) {
26+
const { t } = useTranslation();
27+
28+
const handleConfirm = (e: React.MouseEvent<HTMLButtonElement>) => {
29+
e.stopPropagation();
30+
if (onSubmit) onSubmit(e);
31+
};
32+
33+
return (
34+
<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">
35+
<div className="w-full p-4 pb-8 bg-white rounded-lg dark:bg-dark-bg sm:w-3/4 xl:w-4/12">
36+
<div className="flex flex-wrap items-center justify-center w-full card-title ">
37+
<h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
38+
{t(subject)}
39+
</h3>
40+
<hr className="w-full my-3 border-b bg-primary" />
41+
</div>
42+
<div className="card-body w-full">
43+
<form className="px-8 py-3 w-full">
44+
<div className="flex flex-wrap items-center justify-center w-full card-title ">
45+
<h3 className="w-11/12 text-sm font-bold text-center dark:text-white ">
46+
{t(title)}
47+
</h3>
48+
</div>
49+
{/* Reason input field */}
50+
{drop && setRemovalReason && (
51+
<div className="mt-4">
52+
<input
53+
type="text"
54+
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"
55+
placeholder={t('Enter reason')}
56+
value={removalReason}
57+
onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
58+
setRemovalReason(e.target.value)
59+
}
60+
id="removalReason"
61+
/>
62+
<p
63+
id="errorMessage"
64+
className="text-red-500 text-xs mt-1 hidden"
65+
>
66+
Reason is required!
67+
</p>
68+
</div>
69+
)}
70+
71+
<div className="flex justify-between w-full pt-3">
72+
<Button
73+
data-testid="removeModel2"
74+
variant="info"
75+
size="sm"
76+
style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
77+
onClick={() => {
78+
if (drop && setRemovalReason) {
79+
setRemovalReason('');
80+
document
81+
.getElementById('errorMessage')!
82+
.classList.add('hidden');
83+
}
84+
onClose();
85+
}}
86+
>
87+
{t('Cancel')}
88+
</Button>
89+
<Button
90+
variant="primary"
91+
size="sm"
92+
style="w-[8rem] h-[2.3rem] text-sm p-0 mx-0 flex justify-center items-center"
93+
onClick={() => {
94+
if (removalReason && !removalReason.trim() && drop) {
95+
document
96+
.getElementById('errorMessage')!
97+
.classList.remove('hidden');
98+
} else {
99+
handleConfirm(
100+
new MouseEvent(
101+
'click',
102+
) as unknown as React.MouseEvent<HTMLButtonElement>,
103+
);
104+
}
105+
}}
106+
loading={loading}
107+
>
108+
{loading ? t('Loading') : t('Proceed')}
109+
</Button>
110+
</div>
111+
</form>
112+
</div>
113+
</div>
114+
</div>
115+
);
116+
}
117+
118+
export default DropOrUndropUser;

Diff for: ‎src/components/ViewComment.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function Comment({ remark }: CommentProps) {
3939
{isModalOpen && <div className="blur-background" />}
4040
<dialog
4141
ref={dialog}
42-
className={`rounded-lg shadow-lg w-[40%] ${
42+
className={`rounded-lg m-auto shadow-lg w-[40%] ${
4343
isModalOpen ? 'modal-open' : ''
4444
}`}
4545
dat-testid="dialog"

0 commit comments

Comments
 (0)