devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

loader added to user dashboard

Browse Source
This commit is contained in:
Anik Ghosh 2022-01-31 11:33:35 +05:30
parent 34a91f3195
commit cfe035e96b
1 changed files with 201 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

388
dashboard/src/pages/Users.tsx
View File

@ -28,6 +28,7 @@ import {
MenuList, MenuList,
MenuItem, MenuItem,
useToast, useToast,
Spinner,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { import {
FaAngleLeft, FaAngleLeft,
@ -97,7 +98,9 @@ export default function Users() {
maxPages: 1, maxPages: 1,
}); });
const [userList, setUserList] = React.useState<userDataTypes[]>([]); const [userList, setUserList] = React.useState<userDataTypes[]>([]);
const [loading, setLoading] = React.useState<boolean>(false);
const updateUserList = async () => { const updateUserList = async () => {
setLoading(true);
const { data } = await client const { data } = await client
.query(UserDetailsQuery, { .query(UserDetailsQuery, {
params: { params: {
@ -114,6 +117,7 @@ export default function Users() {
setPaginationProps({ ...paginationProps, ...pagination, maxPages }); setPaginationProps({ ...paginationProps, ...pagination, maxPages });
setUserList(users); setUserList(users);
} }
setLoading(false);
}; };
React.useEffect(() => { React.useEffect(() => {
updateUserList(); updateUserList();
@ -161,202 +165,212 @@ export default function Users() {
Users Users
</Text> </Text>
</Flex> </Flex>
{userList.length > 0 ? ( {!loading ? (
<Table variant="simple"> userList.length > 0 ? (
<Thead> <Table variant="simple">
<Tr> <Thead>
<Th>Email</Th> <Tr>
<Th>Created At</Th> <Th>Email</Th>
<Th>Verified</Th> <Th>Created At</Th>
<Th>Actions</Th> <Th>Verified</Th>
</Tr> <Th>Actions</Th>
</Thead> </Tr>
<Tbody> </Thead>
{userList.map((user: userDataTypes) => { <Tbody>
const { email_verified, created_at, ...rest }: any = user; {userList.map((user: userDataTypes) => {
return ( const { email_verified, created_at, ...rest }: any = user;
<Tr key={user.id} style={{ fontSize: 14 }}> return (
<Td>{user.email}</Td> <Tr key={user.id} style={{ fontSize: 14 }}>
<Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td> <Td>{user.email}</Td>
<Td> <Td>{dayjs(user.created_at).format('MMM DD, YYYY')}</Td>
<Tag <Td>
size="sm" <Tag
variant="outline" size="sm"
colorScheme={user.email_verified ? 'green' : 'yellow'} variant="outline"
> colorScheme={user.email_verified ? 'green' : 'yellow'}
{user.email_verified.toString()} >
</Tag> {user.email_verified.toString()}
</Td> </Tag>
<Td> </Td>
<Menu> <Td>
<MenuButton as={Button} variant="unstyled" size="sm"> <Menu>
<Flex <MenuButton as={Button} variant="unstyled" size="sm">
justifyContent="space-between" <Flex
alignItems="center" justifyContent="space-between"
> alignItems="center"
<Text fontSize="sm" fontWeight="light">
Menu
</Text>
<FaAngleDown style={{ marginLeft: 10 }} />
</Flex>
</MenuButton>
<MenuList>
<EditUserModal
user={rest}
updateUserList={updateUserList}
/>
{!user.email_verified && (
<MenuItem
onClick={() => userVerificationHandler(user)}
> >
Verify User <Text fontSize="sm" fontWeight="light">
</MenuItem> Menu
)} </Text>
</MenuList> <FaAngleDown style={{ marginLeft: 10 }} />
</Menu> </Flex>
</Td> </MenuButton>
</Tr> <MenuList>
); <EditUserModal
})} user={rest}
</Tbody> updateUserList={updateUserList}
{paginationProps.maxPages > 1 && ( />
<TableCaption> {!user.email_verified && (
<Flex justifyContent="space-between" alignItems="center" m="2% 0"> <MenuItem
<Flex flex="1"> onClick={() => userVerificationHandler(user)}
<Tooltip label="First Page"> >
<IconButton Verify User
aria-label="icon button" </MenuItem>
onClick={() => )}
</MenuList>
</Menu>
</Td>
</Tr>
);
})}
</Tbody>
{paginationProps.maxPages > 1 && (
<TableCaption>
<Flex
justifyContent="space-between"
alignItems="center"
m="2% 0"
>
<Flex flex="1">
<Tooltip label="First Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: 1,
})
}
isDisabled={paginationProps.page <= 1}
mr={4}
icon={<FaAngleDoubleLeft />}
/>
</Tooltip>
<Tooltip label="Previous Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: paginationProps.page - 1,
})
}
isDisabled={paginationProps.page <= 1}
icon={<FaAngleLeft />}
/>
</Tooltip>
</Flex>
<Flex
flex="8"
justifyContent="space-evenly"
alignItems="center"
>
<Text mr={8}>
Page{' '}
<Text fontWeight="bold" as="span">
{paginationProps.page}
</Text>{' '}
of{' '}
<Text fontWeight="bold" as="span">
{paginationProps.maxPages}
</Text>
</Text>
<Flex alignItems="center">
<Text flexShrink="0">Go to page:</Text>{' '}
<NumberInput
ml={2}
mr={8}
w={28}
min={1}
max={paginationProps.maxPages}
onChange={(value) =>
paginationHandler({
page: parseInt(value),
})
}
value={paginationProps.page}
>
<NumberInputField />
<NumberInputStepper>
<NumberIncrementStepper />
<NumberDecrementStepper />
</NumberInputStepper>
</NumberInput>
</Flex>
<Select
w={32}
value={paginationProps.limit}
onChange={(e) =>
paginationHandler({ paginationHandler({
page: 1, page: 1,
limit: parseInt(e.target.value),
}) })
} }
isDisabled={paginationProps.page <= 1}
mr={4}
icon={<FaAngleDoubleLeft />}
/>
</Tooltip>
<Tooltip label="Previous Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: paginationProps.page - 1,
})
}
isDisabled={paginationProps.page <= 1}
icon={<FaAngleLeft />}
/>
</Tooltip>
</Flex>
<Flex
flex="8"
justifyContent="space-evenly"
alignItems="center"
>
<Text mr={8}>
Page{' '}
<Text fontWeight="bold" as="span">
{paginationProps.page}
</Text>{' '}
of{' '}
<Text fontWeight="bold" as="span">
{paginationProps.maxPages}
</Text>
</Text>
<Flex alignItems="center">
<Text flexShrink="0">Go to page:</Text>{' '}
<NumberInput
ml={2}
mr={8}
w={28}
min={1}
max={paginationProps.maxPages}
onChange={(value) =>
paginationHandler({
page: parseInt(value),
})
}
value={paginationProps.page}
> >
<NumberInputField /> {getLimits(paginationProps).map((pageSize) => (
<NumberInputStepper> <option key={pageSize} value={pageSize}>
<NumberIncrementStepper /> Show {pageSize}
<NumberDecrementStepper /> </option>
</NumberInputStepper> ))}
</NumberInput> </Select>
</Flex>
<Flex flex="1">
<Tooltip label="Next Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: paginationProps.page + 1,
})
}
isDisabled={
paginationProps.page >= paginationProps.maxPages
}
icon={<FaAngleRight />}
/>
</Tooltip>
<Tooltip label="Last Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: paginationProps.maxPages,
})
}
isDisabled={
paginationProps.page >= paginationProps.maxPages
}
ml={4}
icon={<FaAngleDoubleRight />}
/>
</Tooltip>
</Flex> </Flex>
<Select
w={32}
value={paginationProps.limit}
onChange={(e) =>
paginationHandler({
page: 1,
limit: parseInt(e.target.value),
})
}
>
{getLimits(paginationProps).map((pageSize) => (
<option key={pageSize} value={pageSize}>
Show {pageSize}
</option>
))}
</Select>
</Flex> </Flex>
<Flex flex="1"> </TableCaption>
<Tooltip label="Next Page"> )}
<IconButton </Table>
aria-label="icon button" ) : (
onClick={() => <Flex
paginationHandler({ flexDirection="column"
page: paginationProps.page + 1, minH="25vh"
}) justifyContent="center"
} alignItems="center"
isDisabled={
paginationProps.page >= paginationProps.maxPages
}
icon={<FaAngleRight />}
/>
</Tooltip>
<Tooltip label="Last Page">
<IconButton
aria-label="icon button"
onClick={() =>
paginationHandler({
page: paginationProps.maxPages,
})
}
isDisabled={
paginationProps.page >= paginationProps.maxPages
}
ml={4}
icon={<FaAngleDoubleRight />}
/>
</Tooltip>
</Flex>
</Flex>
</TableCaption>
)}
</Table>
) : (
<Flex
flexDirection="column"
minH="25vh"
justifyContent="center"
alignItems="center"
>
<Center w="50px" marginRight="1.5%">
<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
</Center>
<Text
fontSize="2xl"
paddingRight="1%"
fontWeight="bold"
color="#d9d9d9"
> >
No Data <Center w="50px" marginRight="1.5%">
</Text> <FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
</Flex> </Center>
<Text
fontSize="2xl"
paddingRight="1%"
fontWeight="bold"
color="#d9d9d9"
>
No Data
</Text>
</Flex>
)
) : (
<Center minH="25vh">
<Spinner />
</Center>
)} )}
</Box> </Box>
); );