diff --git a/src/components/Accounts/ApprovedAccounts.jsx b/src/components/Accounts/ApprovedAccounts.jsx
index d2de376..73a38c6 100644
--- a/src/components/Accounts/ApprovedAccounts.jsx
+++ b/src/components/Accounts/ApprovedAccounts.jsx
@@ -1,177 +1,223 @@
import { NPOBackend } from '../../utils/auth_utils.js';
import { useEffect, useState, useCallback } from 'react';
-import { Box, Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button, Checkbox, useDisclosure } from '@chakra-ui/react'
-import { CloseIcon } from '@chakra-ui/icons'
+import {
+ Box,
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ Button,
+ Checkbox,
+ useDisclosure,
+} from '@chakra-ui/react';
+import { CloseIcon } from '@chakra-ui/icons';
import DeleteAccountModal from './DeleteAccountModal.jsx';
import PropTypes from 'prop-types';
-import PaginationFooter from "../../components/Catalog/PaginationFooter/PaginationFooter";
+import PaginationFooter from '../../components/Catalog/PaginationFooter/PaginationFooter';
import { usePagination } from '@ajna/pagination';
+import { useAuthContext } from '../../common/AuthContext.jsx';
-const ApprovedAccounts = ( {accountType, searchQuery} ) => {
- const [approvedAccounts, setApprovedAccounts] = useState([]);
- const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
- const [deleteItemId, setDeleteItemId] = useState([]);
- const [totalRowCount, setTotalRowCount] = useState(0);
- const { currentPage, setCurrentPage, pagesCount, offset, pageSize, setPageSize} = usePagination({
- initialState: { currentPage: 1, pageSize: 10 },
- total: totalRowCount,
- });
- const [individualChecked, setIndividualChecked] = useState(new Array(approvedAccounts.length).fill(false));
- const [checkedAccountIds, setCheckedAccountIds] = useState([]);
- const [dataShouldRevalidate, setDataShouldRevalidate] = useState(false);
+const ApprovedAccounts = ({ accountType, searchQuery }) => {
+ const [approvedAccounts, setApprovedAccounts] = useState([]);
+ const { isOpen: isDeleteOpen, onOpen: onDeleteOpen, onClose: onDeleteClose } = useDisclosure();
+ const [deleteItemId, setDeleteItemId] = useState([]);
+ const [totalRowCount, setTotalRowCount] = useState(0);
+ const { currentPage, setCurrentPage, pagesCount, offset, pageSize, setPageSize } = usePagination({
+ initialState: { currentPage: 1, pageSize: 10 },
+ total: totalRowCount,
+ });
+ const [individualChecked, setIndividualChecked] = useState(
+ new Array(approvedAccounts.length).fill(false),
+ );
+ const [checkedAccountIds, setCheckedAccountIds] = useState([]);
+ const [dataShouldRevalidate, setDataShouldRevalidate] = useState(false);
+ const { currentUser } = useAuthContext();
+ const [isSelectAll, setIsSelectAll] = useState(false);
- const fetchTableData = useCallback(async () => {
- try {
- const { data } = await NPOBackend.get(`/users/approved-accounts`, {
- params: {
- keyword: (searchQuery && searchQuery.length) && searchQuery,
- page: currentPage,
- limit: pageSize,
- accountType: accountType}
- });
- setApprovedAccounts(data.accounts);
- setTotalRowCount(Number(data.count[0].count));
- } catch (error) {
- console.error('Error fetching data:', error);
- }
- }, [searchQuery, currentPage, pageSize, accountType]);
+ const fetchTableData = useCallback(async () => {
+ try {
+ const { data } = await NPOBackend.get(`/users/approved-accounts`, {
+ params: {
+ keyword: searchQuery && searchQuery.length && searchQuery,
+ page: currentPage,
+ limit: pageSize,
+ accountType: accountType,
+ },
+ });
+ setApprovedAccounts(data.accounts);
+ setTotalRowCount(Number(data.count[0].count));
+ } catch (error) {
+ console.error('Error fetching data:', error);
+ }
+ }, [searchQuery, currentPage, pageSize, accountType]);
- useEffect(() => {
- fetchTableData();
- }, [fetchTableData]);
+ useEffect(() => {
+ fetchTableData();
+ }, [fetchTableData]);
- useEffect(() => {
- if (dataShouldRevalidate) {
- fetchTableData();
- setDataShouldRevalidate(false);
- setIndividualChecked(new Array(totalRowCount).fill(false));
- setCheckedAccountIds([]);
- }
- }, [dataShouldRevalidate, fetchTableData, totalRowCount]);
+ useEffect(() => {
+ if (dataShouldRevalidate) {
+ fetchTableData();
+ setDataShouldRevalidate(false);
+ setIndividualChecked(new Array(totalRowCount).fill(false));
+ setCheckedAccountIds([]);
+ }
+ }, [dataShouldRevalidate, fetchTableData, totalRowCount]);
- useEffect(() => {
- setCurrentPage(1);
- }, [searchQuery, setCurrentPage, pageSize]);
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [searchQuery, setCurrentPage, pageSize]);
- useEffect(() => {
- setIndividualChecked(new Array(totalRowCount).fill(false));
- setCheckedAccountIds([]);
- }, [searchQuery, currentPage, totalRowCount]);
+ useEffect(() => {
+ setIndividualChecked(new Array(totalRowCount).fill(false));
+ setCheckedAccountIds([]);
+ setIsSelectAll(false);
+ }, [searchQuery, currentPage, totalRowCount]);
- const handleDeleteClick = id => {
- setDeleteItemId(id);
- onDeleteOpen();
- }
+ const handleDeleteClick = id => {
+ setDeleteItemId(id);
+ onDeleteOpen();
+ };
- const updateAllCheckedAccountIds = (e) => {
- setIndividualChecked(new Array(approvedAccounts.length).fill(e.target.checked));
- if (e.target.checked) {
- let allIds = [];
- for (let i = 0; i < approvedAccounts.length; i++) {
- allIds.push(approvedAccounts[i].id)
- }
- setCheckedAccountIds(allIds);
+ const updateAllCheckedAccountIds = e => {
+ let newIndividualChecked = new Array(approvedAccounts.length).fill(e.target.checked);
+ if (e.target.checked) {
+ let allIds = [];
+ for (let i = 0; i < approvedAccounts.length; i++) {
+ if (approvedAccounts[i].id != currentUser.id) {
+ allIds.push(approvedAccounts[i].id);
} else {
- setCheckedAccountIds([]);
+ newIndividualChecked[i] = false;
}
+ }
+ setCheckedAccountIds(allIds);
+ } else {
+ setCheckedAccountIds([]);
}
+ setIndividualChecked(newIndividualChecked);
+ setIsSelectAll(e.target.checked);
+ };
- const updateIndividualCheckedAccountIds = (e, id, index) => {
- const newIndividualChecked = [...individualChecked];
- newIndividualChecked[index] = e.target.checked;
- setIndividualChecked(newIndividualChecked);
- let newCheckedAccountIds = [... checkedAccountIds];
- if (e.target.checked) {
- newCheckedAccountIds.push(id);
- setCheckedAccountIds(newCheckedAccountIds);
- } else {
- let index = newCheckedAccountIds.indexOf(id);
- newCheckedAccountIds.splice(index, 1);
- setCheckedAccountIds(newCheckedAccountIds);
- }
+ const updateIndividualCheckedAccountIds = (e, id, index) => {
+ const newIndividualChecked = [...individualChecked];
+ newIndividualChecked[index] = e.target.checked;
+ setIndividualChecked(newIndividualChecked);
+ let newCheckedAccountIds = [...checkedAccountIds];
+ if (e.target.checked) {
+ newCheckedAccountIds.push(id);
+ setCheckedAccountIds(newCheckedAccountIds);
+ } else {
+ let index = newCheckedAccountIds.indexOf(id);
+ newCheckedAccountIds.splice(index, 1);
+ setCheckedAccountIds(newCheckedAccountIds);
}
+ };
- return (
- <Box>
- <TableContainer border="1px solid #ededed" borderRadius="10px">
- <Table variant='simple'>
- <Thead>
- <Tr>
- <Th w="5%" h="50px"><Checkbox onChange={(e) => { updateAllCheckedAccountIds(e) }}/></Th>
- <Th w="30%">Name</Th>
- <Th w="30%">Email</Th>
- <Th w="0" textAlign="right" >Deactivate</Th>
- {checkedAccountIds.length > 0 &&
- <Th w="20%" textAlign="right">
- <Button isDisabled={checkedAccountIds.length === 0}
- onClick={() => { handleDeleteClick(checkedAccountIds) }}
- size="xs"
- variant="outline"
- borderRadius="4px"
- borderWidth="1px"
- padding="0"
- borderColor={checkedAccountIds.length != 0 ? 'red' : 'gray.500'}>
- <CloseIcon w="10px" h="10px" color={checkedAccountIds.length != 0 ? 'red' : 'gray'}/>
- </Button>
- </Th>
- }
- </Tr>
- </Thead>
- <Tbody>
- {
- approvedAccounts.map((account, i) => (
- <Tr key={i}>
- <Td>
- <Checkbox
- isChecked={individualChecked[i]}
- onChange={(e) => { updateIndividualCheckedAccountIds(e, account.id, i)}}>
- </Checkbox>
- </Td>
- <Td>{account.firstName} {account.lastName}</Td>
- <Td>{account.email}</Td>
- {checkedAccountIds.length > 0 &&
- <Td></Td>
- }
- <Td textAlign="right">
- <Button
- onClick={() => { handleDeleteClick([account.id]) }}
- size="xs"
- variant="outline"
- borderColor="gray.500"
- borderRadius="4px"
- borderWidth="1px"
- padding="0"
- >
- <CloseIcon w="10px" h="10px" color="gray.500"/>
- </Button>
- </Td>
- </Tr>
- ))
- }
- </Tbody>
- </Table>
- <PaginationFooter
- pagesCount={pagesCount}
- totalRowCount={totalRowCount}
- setPageSize={setPageSize}
- currentPage={currentPage}
- setCurrentPage={setCurrentPage}
- rangeString={`${offset + 1} - ${offset + approvedAccounts.length}`}
- />
- </TableContainer>
- <DeleteAccountModal
- isOpen={isDeleteOpen}
- onClose={onDeleteClose}
- deleteItemId={deleteItemId}
- setDataShouldRevalidate={setDataShouldRevalidate}
- />
- </Box>
- )
-}
+ return (
+ <Box>
+ <TableContainer border="1px solid #ededed" borderRadius="10px">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th w="5%" h="50px">
+ <Checkbox
+ isChecked={isSelectAll}
+ onChange={e => {
+ updateAllCheckedAccountIds(e);
+ }}
+ />
+ </Th>
+ <Th w="30%">Name</Th>
+ <Th w="30%">Email</Th>
+ <Th w="0" textAlign="right">
+ Deactivate
+ </Th>
+ {checkedAccountIds.length > 0 && (
+ <Th w="20%" textAlign="right">
+ <Button
+ isDisabled={checkedAccountIds.length === 0}
+ onClick={() => {
+ handleDeleteClick(checkedAccountIds);
+ }}
+ size="xs"
+ variant="outline"
+ borderRadius="4px"
+ borderWidth="1px"
+ padding="0"
+ borderColor={checkedAccountIds.length != 0 ? 'red' : 'gray.500'}
+ >
+ <CloseIcon
+ w="10px"
+ h="10px"
+ color={checkedAccountIds.length != 0 ? 'red' : 'gray'}
+ />
+ </Button>
+ </Th>
+ )}
+ </Tr>
+ </Thead>
+ <Tbody>
+ {approvedAccounts.map((account, i) => (
+ <Tr key={i}>
+ <Td>
+ <Checkbox
+ isDisabled={account.id === currentUser.id}
+ isChecked={individualChecked[i]}
+ onChange={e => {
+ updateIndividualCheckedAccountIds(e, account.id, i);
+ }}
+ ></Checkbox>
+ </Td>
+ <Td color={account.id === currentUser.id ? 'gray' : 'black'}>
+ {account.firstName} {account.lastName}
+ </Td>
+ <Td color={account.id === currentUser.id ? 'gray' : 'black'}>{account.email}</Td>
+ {checkedAccountIds.length > 0 && <Td></Td>}
+ <Td textAlign="right">
+ <Button
+ onClick={() => {
+ handleDeleteClick([account.id]);
+ }}
+ size="xs"
+ variant="outline"
+ borderColor="gray.500"
+ borderRadius="4px"
+ borderWidth="1px"
+ padding="0"
+ isDisabled={account.id === currentUser.id}
+ >
+ <CloseIcon w="10px" h="10px" color="gray.500" />
+ </Button>
+ </Td>
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ <PaginationFooter
+ pagesCount={pagesCount}
+ totalRowCount={totalRowCount}
+ setPageSize={setPageSize}
+ currentPage={currentPage}
+ setCurrentPage={setCurrentPage}
+ rangeString={`${offset + 1} - ${offset + approvedAccounts.length}`}
+ />
+ </TableContainer>
+ <DeleteAccountModal
+ isOpen={isDeleteOpen}
+ onClose={onDeleteClose}
+ deleteItemId={deleteItemId}
+ setDataShouldRevalidate={setDataShouldRevalidate}
+ />
+ </Box>
+ );
+};
ApprovedAccounts.propTypes = {
- accountType: PropTypes.string.isRequired,
- searchQuery: PropTypes.string
+ accountType: PropTypes.string.isRequired,
+ searchQuery: PropTypes.string,
};
export default ApprovedAccounts;
diff --git a/src/components/Accounts/PendingAccounts.jsx b/src/components/Accounts/PendingAccounts.jsx
index 52e71c8..043f47a 100644
--- a/src/components/Accounts/PendingAccounts.jsx
+++ b/src/components/Accounts/PendingAccounts.jsx
@@ -1,197 +1,285 @@
import { NPOBackend } from '../../utils/auth_utils.js';
-import { useEffect, useState } from 'react';
-import { Table, Thead, Tbody, Tr, Th, Td, TableContainer, Button } from '@chakra-ui/react'
-import { Checkbox } from '@chakra-ui/react'
+import { useEffect, useState, useRef } from 'react';
+import {
+ Table,
+ Thead,
+ Tbody,
+ Tr,
+ Th,
+ Td,
+ TableContainer,
+ Button,
+ Checkbox,
+ Text,
+ HStack,
+ Spacer,
+} from '@chakra-ui/react';
import PropTypes from 'prop-types';
-const PendingAccounts = ( {accountType, setHasPendingAccounts} ) => {
- const [pendingAccounts, setPendingAccounts] = useState([]);
- const [individualChecked, setIndividualChecked] = useState(new Array(pendingAccounts.length).fill(false));
- const [checkedAccountIds, setCheckedAccountIds] = useState([]);
- const [accountStatus, setAccountStatus] = useState({});
+const PendingAccounts = ({ accountType, setHasPendingAccounts }) => {
+ const [pendingAccounts, setPendingAccounts] = useState([]);
+ const [checkedAccountIds, setCheckedAccountIds] = useState([]);
+ const [accountStatus, setAccountStatus] = useState({});
+ const [timeoutIds, setTimeoutIds] = useState({});
+ const [isMultiSelect, setIsMultiSelect] = useState(false);
+ const statusRef = useRef({});
+ const timeoutIdsRef = useRef({});
+ useEffect(() => {
+ const renderTable = async () => {
+ const { data } = await NPOBackend.get('/users/pending-accounts', {
+ params: { accountType: accountType },
+ });
+ setPendingAccounts(data);
+ setHasPendingAccounts(data.length !== 0);
+ };
+ renderTable();
+ }, [accountType, setHasPendingAccounts]);
- useEffect(() => {
- const renderTable = async () => {
- const { data } = await NPOBackend.get('/users/pending-accounts', {params: {accountType: accountType}});
- setPendingAccounts(data);
- setHasPendingAccounts(data.length !== 0);
- };
- renderTable();
- }, [accountType, setHasPendingAccounts])
+ useEffect(() => {
+ const newAccountStatus = {};
+ for (let i = 0; i < pendingAccounts.length; i++) {
+ newAccountStatus[pendingAccounts[i]['id']] = 'pending';
+ }
+ setAccountStatus(newAccountStatus);
+ }, [pendingAccounts]);
- useEffect(() => {
- const newAccountStatus = {}
- for (let i = 0; i < pendingAccounts.length; i++) {
- newAccountStatus[pendingAccounts[i]["id"]] = "pending";
- }
- setAccountStatus(newAccountStatus);
- }, [pendingAccounts])
+ useEffect(() => {
+ statusRef.current = accountStatus;
+ }, [accountStatus]);
- const changeStatus = ((accountid, status) => {
- let newAccountStatus = {...accountStatus};
- newAccountStatus[accountid] = status;
- setAccountStatus(newAccountStatus);
- });
+ useEffect(() => {
+ timeoutIdsRef.current = timeoutIds;
+ }, [timeoutIds]);
- const handleApproveDeclineUser = async (ids, option) => {
- try {
- for (let i = 0; i < ids.length; i++) {
- if (option === "approve-option") {
- await NPOBackend.put(`/users/approve/${ids[i]}`);
- }
- else if (option === "decline-option") {
- await NPOBackend.delete(`/users/${ids[i]}`);
- }
- }
- setIndividualChecked(new Array(pendingAccounts.length).fill(false));
- } catch (error) {
- console.log(error);
- }
+ const undoChanges = (ids) => {
+ let timeoutKey = ids.toString();
+ const {timeoutId, isMulti} = timeoutIds[timeoutKey];
+ clearTimeout(timeoutId);
+ const newTimeoutIds = {...timeoutIds};
+ delete newTimeoutIds[timeoutKey];
+ setTimeoutIds(newTimeoutIds);
+ const newAccountStatus = {...accountStatus};
+ for (let i = 0; i < ids.length; i++) {
+ newAccountStatus[ids[i]] = 'pending';
}
-
- const updateAllIndividualChecked = (e) => {
- let newIndividualChecked = [];
- for (let i = 0; i < pendingAccounts.length; i++) {
- if (accountStatus[pendingAccounts[i].id] === "pending") {
- newIndividualChecked.push(e.target.checked);
- }
- else {
- newIndividualChecked.push(false);
- }
- }
- setIndividualChecked(newIndividualChecked);
+ setAccountStatus(newAccountStatus);
+ if (isMulti) {
+ setIsMultiSelect(false);
}
+ }
- const updateAllCheckedAccountIds = (e) => {
- if (e.target.checked) {
- let allIds = [];
- for (let i = 0; i < pendingAccounts.length; i++) {
- if (accountStatus[pendingAccounts[i].id] === "pending") {
- allIds.push(pendingAccounts[i].id);
- }
- }
- setCheckedAccountIds(allIds);
- } else {
- setCheckedAccountIds([]);
+ const handleApproveDeclineUser = async (ids, option, isMulti=false) => {
+ const timeoutId = setTimeout(async () => {
+ try {
+ let newCheckedAccountIds = checkedAccountIds;
+ for (let i = 0; i < ids.length; i++) {
+ if (option === 'approve-option') {
+ await NPOBackend.put(`/users/approve/${ids[i]}`);
+ } else if (option === 'decline-option') {
+ await NPOBackend.delete(`/users/${ids[i]}`);
+ }
+ // removes account that was approved/decline if it is in checked list
+ let index = newCheckedAccountIds.indexOf(ids[i]);
+ if (index > -1) {
+ newCheckedAccountIds.splice(index, 1);
+ }
}
+ setCheckedAccountIds(newCheckedAccountIds);
+ } catch (error) {
+ // error should occur if you try to delete an account that has already been deleted (individual delete then multi-delete)
+ console.log(error);
+ // clear checked list if there is error for good measure
+ setCheckedAccountIds([]);
+ }
+ const newAccountStatus = statusRef.current;
+ for (let i = 0; i < ids.length; i++) {
+ newAccountStatus[ids[i]] = option === 'approve-option' ? 'approved' : 'declined';
+ }
+ setAccountStatus(newAccountStatus);
+ const newTimeoutIds = {...timeoutIdsRef.current};
+ delete newTimeoutIds[ids.toString()];
+ setTimeoutIds(newTimeoutIds);
+
+ if (isMulti) {
+ setIsMultiSelect(false);
+ }
+ }, 5000);
+ if(isMulti) {
+ setIsMultiSelect(true);
+ }
+ // Initiate waiting state
+ const waitingAccountStatus = { ...accountStatus };
+ for (let i = 0; i < ids.length; i++) {
+ waitingAccountStatus[ids[i]] = option === 'approve-option' ? 'waiting-approved' : 'waiting-declined';
}
+ setAccountStatus(waitingAccountStatus);
+ const newTimeoutIds = {... timeoutIds};
+ newTimeoutIds[ids.toString()] = {timeoutId, isMulti};
+ setTimeoutIds(newTimeoutIds);
+ };
- const updateIndividualCheckedAccountIds = (e, id, index) => {
- const newIndividualChecked = [...individualChecked];
- newIndividualChecked[index] = e.target.checked;
- setIndividualChecked(newIndividualChecked);
- let newCheckedAccountIds = [... checkedAccountIds];
- if (e.target.checked) {
- newCheckedAccountIds.push(id);
- setCheckedAccountIds(newCheckedAccountIds);
- } else {
- let index = newCheckedAccountIds.indexOf(id);
- newCheckedAccountIds.splice(index, 1);
- setCheckedAccountIds(newCheckedAccountIds);
+ const updateAllCheckedAccountIds = e => {
+ if (e.target.checked) {
+ let allIds = [];
+ for (let i = 0; i < pendingAccounts.length; i++) {
+ if (accountStatus[pendingAccounts[i].id] === 'pending') {
+ allIds.push(pendingAccounts[i].id);
}
+ }
+ setCheckedAccountIds(allIds);
+ } else {
+ setCheckedAccountIds([]);
}
+ };
- const acceptDeclineAllClick = (option) => {
- handleApproveDeclineUser(checkedAccountIds, option);
- const newAccountStatus = {... accountStatus};
- for (let i = 0; i < checkedAccountIds.length; i++) {
- newAccountStatus[checkedAccountIds[i]] = option === "approve-option" ? "approved" : "declined";
- }
- setAccountStatus(newAccountStatus);
- setCheckedAccountIds([]);
+ const updateIndividualCheckedAccountIds = (e, id) => {
+ let newCheckedAccountIds = [...checkedAccountIds];
+ if (e.target.checked) {
+ newCheckedAccountIds.push(id);
+ setCheckedAccountIds(newCheckedAccountIds);
+ } else {
+ let index = newCheckedAccountIds.indexOf(id);
+ newCheckedAccountIds.splice(index, 1);
+ setCheckedAccountIds(newCheckedAccountIds);
}
+ };
- return (
- <TableContainer border="1px solid #ededed" borderRadius="10px">
- <Table variant='simple'>
- <Thead>
- <Tr>
- <Th w="5%" h="50px"><Checkbox onChange={(e) => {updateAllIndividualChecked(e); updateAllCheckedAccountIds(e);}}/></Th>
- <Th w="30%">Name</Th>
- <Th w="30%">Email</Th>
- <Th w="0" textAlign="right">Action</Th>
- {checkedAccountIds.length > 0 &&
- <Th w="20%" textAlign="right">
- <Button
- onClick={ () => acceptDeclineAllClick("approve-option") }
- mr={3}
- colorScheme='blue'
- fontSize="sm"
- h="6"
- w="16"
- fontWeight="400"
- >
- Accept
- </Button>
- <Button
- onClick={ () => acceptDeclineAllClick("decline-option") }
- fontSize="sm"
- h="6"
- w="16"
- fontWeight="400"
- >
- Decline
- </Button>
- </Th>
- }
- </Tr>
- </Thead>
- <Tbody>
- {
- pendingAccounts.map((account, i) => (
- <Tr key={i}>
- <Td><Checkbox isDisabled={accountStatus[account.id] != "pending"} isChecked={individualChecked[i]} onChange={(e) => {updateIndividualCheckedAccountIds(e, account.id, i);}}>
- </Checkbox>
- </Td>
- <Td color={accountStatus[account.id] === "pending" ? "black" : "gray"}>{account.firstName} {account.lastName}</Td>
- <Td color={accountStatus[account.id] === "pending" ? "black" : "gray"}>{account.email}</Td>
- {checkedAccountIds.length > 0 &&
- <Td></Td>
- }
- {
- accountStatus[account.id] === "pending" ? (
- <Td textAlign="right">
- <Button
- onClick={() => { handleApproveDeclineUser([account.id], "approve-option"); changeStatus(account.id, "approved");}}
- mr={3}
- colorScheme='blue'
- fontSize="sm"
- h="6"
- w="16"
- fontWeight="400"
- >
- Accept
- </Button>
- <Button
- onClick={() => { handleApproveDeclineUser([account.id], "decline-option"); changeStatus(account.id, "declined");}}
- fontSize="sm"
- h="6"
- w="16"
- fontWeight="400"
- >
- Decline
- </Button>
- </Td>
- ) : accountStatus[account.id] === "approved" ? (
- <Td textAlign="right" color="green">Approved</Td>
- ) : (
- <Td textAlign="right" color="red">Declined</Td>
- )
- }
- </Tr>
- )
- )
- }
- </Tbody>
- </Table>
- </TableContainer>
- )
-}
+ return (
+ <TableContainer border="1px solid #ededed" borderRadius="10px">
+ <Table variant="simple">
+ <Thead>
+ <Tr>
+ <Th w="5%" h="50px">
+ <Checkbox
+ onChange={e => {
+ updateAllCheckedAccountIds(e);
+ }}
+ />
+ </Th>
+ <Th w="30%">Name</Th>
+ <Th w="30%">Email</Th>
+ <Th w="0" textAlign="right">
+ Action
+ </Th>
+ { isMultiSelect ? (
+ <Th w="20%" textAlign="right">
+ <Button
+ onClick={() => { undoChanges([...checkedAccountIds]) }}
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Undo
+ </Button>
+ </Th>
+ ) : checkedAccountIds.length > 0 && (
+ <Th w="20%" textAlign="right">
+ <Button
+ onClick={() => handleApproveDeclineUser([...checkedAccountIds], 'approve-option', true)}
+ mr={3}
+ colorScheme="blue"
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Accept
+ </Button>
+ <Button
+ onClick={() => handleApproveDeclineUser([...checkedAccountIds], 'decline-option', true)}
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Decline
+ </Button>
+ </Th>
+ )}
+ </Tr>
+ </Thead>
+ <Tbody>
+ {pendingAccounts.map((account, i) => (
+ <Tr key={i}>
+ <Td>
+ <Checkbox
+ isDisabled={accountStatus[account.id] != 'pending'}
+ isChecked={checkedAccountIds.includes(account.id)}
+ onChange={e => {
+ updateIndividualCheckedAccountIds(e, account.id);
+ }}
+ ></Checkbox>
+ </Td>
+ <Td color={accountStatus[account.id] === 'pending' ? 'black' : 'gray'}>
+ {account.firstName} {account.lastName}
+ </Td>
+ <Td color={accountStatus[account.id] === 'pending' ? 'black' : 'gray'}>
+ {account.email}
+ </Td>
+ {checkedAccountIds.length > 0 && <Td></Td>}
+ {accountStatus[account.id] === 'pending' ? (
+ <Td textAlign="right">
+ <Button
+ onClick={() => {
+ handleApproveDeclineUser([account.id], 'approve-option');
+ }}
+ mr={3}
+ colorScheme="blue"
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Accept
+ </Button>
+ <Button
+ onClick={() => {
+ handleApproveDeclineUser([account.id], 'decline-option');
+ }}
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Decline
+ </Button>
+ </Td>
+ ) : (
+ <Td>
+ <HStack>
+ <Spacer />
+ {accountStatus[account.id] === 'approved' || accountStatus[account.id] === 'waiting-approved' ?
+ <Text color="green">Approved</Text>
+ :
+ <Text color="red">Declined</Text>
+ }
+ {account.id in timeoutIds &&
+ <Button
+ onClick={() => { undoChanges([account.id]) }}
+ fontSize="sm"
+ h="6"
+ w="16"
+ fontWeight="400"
+ >
+ Undo
+ </Button>
+ }
+ </HStack>
+ </Td>
+ )}
+ </Tr>
+ ))}
+ </Tbody>
+ </Table>
+ </TableContainer>
+ );
+};
PendingAccounts.propTypes = {
- accountType: PropTypes.string.isRequired,
- setHasPendingAccounts: PropTypes.func.isRequired
+ accountType: PropTypes.string.isRequired,
+ setHasPendingAccounts: PropTypes.func.isRequired,
};
export default PendingAccounts;
diff --git a/src/pages/Accounts/Accounts.jsx b/src/pages/Accounts/Accounts.jsx
index 8d14e15..4b0cdbd 100644
--- a/src/pages/Accounts/Accounts.jsx
+++ b/src/pages/Accounts/Accounts.jsx
@@ -1,88 +1,122 @@
-import PendingAccounts from "../../components/Accounts/PendingAccounts";
-import ApprovedAccounts from "../../components/Accounts/ApprovedAccounts";
-import { Box, Heading, Tabs, TabList, TabPanels, Tab, TabPanel, Input, InputGroup, InputLeftElement, HStack, Center } from '@chakra-ui/react'
+import PendingAccounts from '../../components/Accounts/PendingAccounts';
+import ApprovedAccounts from '../../components/Accounts/ApprovedAccounts';
+import {
+ Box,
+ Heading,
+ Tabs,
+ TabList,
+ TabPanels,
+ Tab,
+ TabPanel,
+ Input,
+ InputGroup,
+ InputLeftElement,
+ HStack,
+ Spacer,
+} from '@chakra-ui/react';
import { SearchIcon } from '@chakra-ui/icons';
import { useState } from 'react';
const Accounts = () => {
- const [approvedAdminKeyword, setApprovedAdminKeyword] = useState("");
- const [approvedStudentKeyword, setApprovedStudentKeyword] = useState("");
- const [hasAdminPendingAccounts, setHasAdminPendingAccounts] = useState(true);
- const [hasStudentPendingAccounts, setHasStudentPendingAccounts] = useState(true);
+ const [approvedAdminKeyword, setApprovedAdminKeyword] = useState('');
+ const [approvedStudentKeyword, setApprovedStudentKeyword] = useState('');
+ const [hasAdminPendingAccounts, setHasAdminPendingAccounts] = useState(true);
+ const [hasStudentPendingAccounts, setHasStudentPendingAccounts] = useState(true);
- return (
- <Box marginTop='4vh' marginBottom='8vh'>
- <Center>
- <Tabs>
- <TabList marginBottom='2vh'>
- <Tab>Admins</Tab>
- <Tab>Students</Tab>
- </TabList>
+ return (
+ <Box margin="4vh 10vw 8vh 10vw">
+ <Tabs>
+ <TabList marginBottom="2vh">
+ <Tab>Admins</Tab>
+ <Tab>Students</Tab>
+ </TabList>
- <TabPanels>
- <TabPanel>
- { hasAdminPendingAccounts ? (
- <>
- <Box marginBottom="6vh">
- <Heading marginBottom="2vh" fontSize="24px">Pending</Heading>
- <PendingAccounts accountType="admin" setHasPendingAccounts={setHasAdminPendingAccounts}/>
- </Box>
- </>
- ) : <></>
- }
- <HStack spacing='90vh' align="start">
- <Box><Heading marginBottom="2vh" fontSize="24px">Accounts</Heading></Box>
- <Box>
- <InputGroup width="315px">
- <InputLeftElement pointerEvents="none" h="full">
- <SearchIcon />
- </InputLeftElement>
- <Input
- type="text"
- placeholder="Search..."
- variant="filled"
- bgColor="blackAlpha.200"
- h="30px"
- onChange={ (e) => setApprovedAdminKeyword(e.target.value)}
- />
- </InputGroup>
- </Box>
- </HStack>
- <ApprovedAccounts accountType="admin" searchQuery={approvedAdminKeyword}/>
- </TabPanel>
- <TabPanel>
- { hasStudentPendingAccounts ? (
- <Box marginBottom="6vh">
- <Heading marginBottom="2vh" fontSize="24px">Pending</Heading>
- <PendingAccounts accountType="student" setHasPendingAccounts={setHasStudentPendingAccounts} marginBottom="4vh" />
- </Box>
- ): <></>
- }
- <HStack spacing='90vh' align="start">
- <Box><Heading marginBottom="2vh" fontSize="24px">Accounts</Heading></Box>
- <Box>
- <InputGroup width="315px">
- <InputLeftElement pointerEvents="none" h="full">
- <SearchIcon />
- </InputLeftElement>
- <Input
- type="text"
- placeholder="Search..."
- variant="filled"
- bgColor="blackAlpha.200"
- h="30px"
- onChange={ (e) => setApprovedStudentKeyword(e.target.value)}
- />
- </InputGroup>
- </Box>
- </HStack>
- <Box><ApprovedAccounts accountType="student" searchQuery={approvedStudentKeyword}/></Box>
- </TabPanel>
- </TabPanels>
- </Tabs>
- </Center>
- </Box>
- );
-}
+ <TabPanels>
+ <TabPanel>
+ {hasAdminPendingAccounts ? (
+ <>
+ <Box marginBottom="6vh">
+ <Heading marginBottom="2vh" fontSize="24px">
+ Pending
+ </Heading>
+ <PendingAccounts
+ accountType="admin"
+ setHasPendingAccounts={setHasAdminPendingAccounts}
+ />
+ </Box>
+ </>
+ ) : (
+ <></>
+ )}
+ <HStack align="start">
+ <Box>
+ <Heading marginBottom="2vh" fontSize="24px">
+ Accounts
+ </Heading>
+ </Box>
+ <Spacer />
+ <Box>
+ <InputGroup width="20vw">
+ <InputLeftElement pointerEvents="none" h="full">
+ <SearchIcon />
+ </InputLeftElement>
+ <Input
+ type="text"
+ placeholder="Search..."
+ variant="filled"
+ bgColor="blackAlpha.200"
+ h="30px"
+ onChange={e => setApprovedAdminKeyword(e.target.value)}
+ />
+ </InputGroup>
+ </Box>
+ </HStack>
+ <ApprovedAccounts accountType="admin" searchQuery={approvedAdminKeyword} />
+ </TabPanel>
+ <TabPanel>
+ {hasStudentPendingAccounts ? (
+ <Box marginBottom="6vh">
+ <Heading marginBottom="2vh" fontSize="24px">
+ Pending
+ </Heading>
+ <PendingAccounts
+ accountType="student"
+ setHasPendingAccounts={setHasStudentPendingAccounts}
+ marginBottom="4vh"
+ />
+ </Box>
+ ) : (
+ <></>
+ )}
+ <HStack align="start">
+ <Box>
+ <Heading marginBottom="2vh" fontSize="24px">
+ Accounts
+ </Heading>
+ </Box>
+ <Spacer />
+ <Box>
+ <InputGroup width="20vw">
+ <InputLeftElement pointerEvents="none" h="full">
+ <SearchIcon />
+ </InputLeftElement>
+ <Input
+ type="text"
+ placeholder="Search..."
+ variant="filled"
+ bgColor="blackAlpha.200"
+ h="30px"
+ onChange={e => setApprovedStudentKeyword(e.target.value)}
+ />
+ </InputGroup>
+ </Box>
+ </HStack>
+ <ApprovedAccounts accountType="student" searchQuery={approvedStudentKeyword} />
+ </TabPanel>
+ </TabPanels>
+ </Tabs>
+ </Box>
+ );
+};
export default Accounts;