Skip to content

Add User #206

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
NicholasG04 wants to merge 1 commit into
base: master
Choose a base branch
from
+65 −30
Draft

Add User #206

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 65 additions & 30 deletions src/pages/admin/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,19 @@
import type { NextPage } from 'next';
import {
Button, Heading, Flex, useToast, Input, Select,
Button,
Heading,
Flex,
useToast,
Input,
Select,
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalFooter,
ModalBody,
ModalCloseButton,
useDisclosure,
} from '@chakra-ui/react';
import NextLink from 'next/link';
import BaseLayout from 'components/Layouts/Base';
Expand All @@ -15,6 +28,7 @@ const Home: NextPage = () => {
const toast = useToast();
const [search, setSearch] = useState('');
const [type, setType] = useState<SelectTypes>('');
const { isOpen, onOpen, onClose } = useDisclosure();

useEffect(() => {
const getUsers = async () => {
Expand Down Expand Up @@ -57,38 +71,59 @@ const Home: NextPage = () => {
}, [search, type, users]);

return (
<BaseLayout isLoading={!users}>
<Flex direction="column" align="center">
<Heading as="h1" size="3xl" my={5} textAlign="center">
Admin Panel
</Heading>
<Flex gap={3} my={3}>
<NextLink href="/admin/terminal" passHref>
<Button>Stripe Terminal</Button>
</NextLink>
<NextLink href="/admin/scanner" passHref>
<Button>Ticket Scanner</Button>
</NextLink>
</Flex>
<>
<BaseLayout isLoading={!users}>
<Flex direction="column" align="center">
<Heading as="h1" size="3xl" my={5} textAlign="center">
Admin Panel
</Heading>
<Flex gap={3} my={3}>
<NextLink href="/admin/terminal" passHref>
<Button>Stripe Terminal</Button>
</NextLink>
<NextLink href="/admin/scanner" passHref>
<Button>Ticket Scanner</Button>
</NextLink>
<Button onClick={onOpen}>Create User</Button>
</Flex>

<Flex direction="row" justify="center" my={5} minW="300px" maxW="700px" w="80%" gap={2}>
<Input borderColor="gray.500" focusBorderColor="gray.600" _hover={{ borderColor: 'gray.600' }} minW="150px" maxW="500px" w="65%" placeholder="Search by name" value={search} onChange={(e) => setSearch(e.currentTarget.value)} />
<Select borderColor="gray.500" focusBorderColor="gray.600" _hover={{ borderColor: 'gray.600' }} minW="150px" maxW="500px" w="35%" placeholder="Select Status" value={type} onChange={(e) => setType(e.currentTarget.value as SelectTypes)}>
<option value="no">No Ticket</option>
<option value="has_ticket">Has Ticket (Not CI)</option>
<option value="checked_in">Checked In</option>
</Select>
</Flex>
<Flex direction="row" justify="center" my={5} minW="300px" maxW="700px" w="80%" gap={2}>
<Input borderColor="gray.500" focusBorderColor="gray.600" _hover={{ borderColor: 'gray.600' }} minW="150px" maxW="500px" w="65%" placeholder="Search by name" value={search} onChange={(e) => setSearch(e.currentTarget.value)} />
<Select borderColor="gray.500" focusBorderColor="gray.600" _hover={{ borderColor: 'gray.600' }} minW="150px" maxW="500px" w="35%" placeholder="Select Status" value={type} onChange={(e) => setType(e.currentTarget.value as SelectTypes)}>
<option value="no">No Ticket</option>
<option value="has_ticket">Has Ticket (Not CI)</option>
<option value="checked_in">Checked In</option>
</Select>
</Flex>

<Flex gap={3} flexFlow="row wrap" justify="center">
{filtered?.map((user) => (
<NextLink href={`/admin/${user.id}`} key={user.id}>
<a><UserCard user={user} /></a>
</NextLink>
))}
<Flex gap={3} flexFlow="row wrap" justify="center">
{filtered?.map((user) => (
<NextLink href={`/admin/${user.id}`} key={user.id}>
<a><UserCard user={user} /></a>
</NextLink>
))}
</Flex>
</Flex>
</Flex>
</BaseLayout>
</BaseLayout>

<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Create User</ModalHeader>
<ModalCloseButton />
<ModalBody>
hi
</ModalBody>

<ModalFooter>
<Button colorScheme="blue" mr={3} onClick={onClose}>
Close
</Button>
<Button variant="ghost">Secondary Action</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
};

Expand Down