152 lines
3.7 KiB
TypeScript
152 lines
3.7 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
CardFooter,
|
|
Container,
|
|
Flex,
|
|
Heading,
|
|
Link,
|
|
Stack,
|
|
StackDivider,
|
|
Text,
|
|
useToast,
|
|
VStack,
|
|
} from "@chakra-ui/react";
|
|
import { useLoaderData } from "@remix-run/react";
|
|
import { type ReactNode } from "react";
|
|
|
|
export async function loader({ context }: { context: RequestContext }) {
|
|
const now = new Date();
|
|
const monthEventList = await context.env.D1.prepare(
|
|
"SELECT approved, created_by, day, id, month, pending, type, year FROM events WHERE month = ? AND year = ?;",
|
|
)
|
|
.bind(now.getUTCMonth() + 1, now.getUTCFullYear())
|
|
.all();
|
|
|
|
if (monthEventList.error)
|
|
throw new Response(null, {
|
|
status: 500,
|
|
});
|
|
|
|
return {
|
|
can_approve: Boolean(
|
|
[1 << 4, 1 << 12].find((p) => context.data.user.permissions & p),
|
|
),
|
|
events: monthEventList.results,
|
|
};
|
|
}
|
|
|
|
export default function () {
|
|
const {
|
|
can_approve,
|
|
events,
|
|
}: {
|
|
can_approve: boolean;
|
|
events: { [k: string]: any }[];
|
|
} = useLoaderData<typeof loader>();
|
|
const eventCards: ReactNode[] = [];
|
|
const toast = useToast();
|
|
|
|
async function decide(approved: boolean, eventId: string) {
|
|
const decisionResp = await fetch(
|
|
`/api/events-team/events/${eventId}/decision`,
|
|
{
|
|
body: JSON.stringify({ approved }),
|
|
headers: {
|
|
"content-type": "application/json",
|
|
},
|
|
method: "POST",
|
|
},
|
|
);
|
|
|
|
if (!decisionResp.ok) {
|
|
let errorMsg = "Unknown error";
|
|
|
|
try {
|
|
errorMsg = ((await decisionResp.json()) as { error: string }).error;
|
|
} catch {}
|
|
|
|
toast({
|
|
description: errorMsg,
|
|
status: "error",
|
|
title: "Oops!",
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
toast({
|
|
description: `Event ${approved ? "approved" : "rejected"}`,
|
|
title: "Success",
|
|
});
|
|
}
|
|
|
|
for (const event of events) {
|
|
eventCards.push(
|
|
<Card w="100%">
|
|
<CardBody>
|
|
<Stack divider={<StackDivider />} spacing="4">
|
|
<Box>
|
|
<Heading size="sm">Date</Heading>
|
|
<Text fontSize="sm" pt="2">
|
|
{event.year}-{event.month}-{event.day}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Heading size="sm">Event Type</Heading>
|
|
<Text fontSize="sm" pt="2">
|
|
{event.type.toUpperCase()}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Heading size="sm">Host</Heading>
|
|
<Text fontSize="sm" pt="2">
|
|
{event.created_by}
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
</CardBody>
|
|
<CardFooter>
|
|
<Flex gap="16px">
|
|
{can_approve && event.pending ? (
|
|
<>
|
|
<Button
|
|
colorScheme="red"
|
|
onClick={async () => await decide(false, event.id)}
|
|
>
|
|
Reject
|
|
</Button>
|
|
<Button
|
|
colorScheme="blue"
|
|
onClick={async () => await decide(true, event.id)}
|
|
>
|
|
Approve
|
|
</Button>
|
|
</>
|
|
) : null}
|
|
</Flex>
|
|
<Text alignSelf="center" fontSize="sm">
|
|
Status:{" "}
|
|
{event.pending ? "Pending" : event.approved ? "Approved" : "Denied"}
|
|
</Text>
|
|
</CardFooter>
|
|
</Card>,
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Container maxW="container.lg">
|
|
<VStack spacing="8">{eventCards}</VStack>
|
|
<Link color="#646cff" href="/book-event" mt="16px">
|
|
Book an Event
|
|
</Link>
|
|
<br />
|
|
<Link color="#646cff" href="/et-members" mt="8px">
|
|
Events Team Member Management
|
|
</Link>
|
|
</Container>
|
|
);
|
|
}
|