100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
import {
|
|
Box,
|
|
Button,
|
|
Card,
|
|
CardBody,
|
|
CardFooter,
|
|
CardHeader,
|
|
Heading,
|
|
Icon,
|
|
ListItem,
|
|
Stack,
|
|
StackDivider,
|
|
Text,
|
|
UnorderedList,
|
|
useToast
|
|
} from "@chakra-ui/react";
|
|
|
|
export default function(props: InactivityNoticeProps) {
|
|
const toast = useToast();
|
|
|
|
async function makeDecision(accepted: boolean) {
|
|
const decisionReq = await fetch(`\`/api/inactivity/${props.id}`, {
|
|
body: JSON.stringify({ accepted }),
|
|
headers: {
|
|
"content-type": "application/json"
|
|
},
|
|
method: "POST"
|
|
});
|
|
|
|
if (!decisionReq.ok) {
|
|
toast({
|
|
description: (await decisionReq.json() as { error: string }).error,
|
|
isClosable: true,
|
|
status: "error",
|
|
title: "Oops"
|
|
});
|
|
|
|
return;
|
|
}
|
|
|
|
toast({
|
|
description: `Inactivity notice ${accepted ? "accepted" : "denied"}.`,
|
|
isClosable: true,
|
|
status: "success",
|
|
title: "Success"
|
|
});
|
|
}
|
|
|
|
const Approved = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
|
|
</Icon>;
|
|
|
|
const Denied = () => <Icon fill="currentColor" height="16" viewBox="0 0 16 16" width="16">
|
|
<path
|
|
d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
|
|
</Icon>;
|
|
|
|
return (
|
|
<Card w="100%">
|
|
<CardHeader>
|
|
<Heading size="md">Inactivity Notice for {props.user.username}</Heading>
|
|
<Text fontSize="xs">ID: {props.user.id}</Text>
|
|
</CardHeader>
|
|
<CardBody>
|
|
<Stack divider={<StackDivider />}>
|
|
<Box>
|
|
<Heading size="xs">Reason for Inactivity</Heading>
|
|
<Text>{props.reason}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Heading size="xs">Start Date</Heading>
|
|
<Text>{new Date(props.start).toLocaleDateString()}</Text>
|
|
</Box>
|
|
<Box>
|
|
<Heading size="xs">End Date</Heading>
|
|
<Text>{new Date(props.end).toLocaleDateString()}</Text>
|
|
</Box>
|
|
{props.decisions ? <Box>
|
|
<Heading size="xs">Decisions</Heading>
|
|
<UnorderedList>
|
|
{props.decisions.map(decision => <ListItem>
|
|
{decision.accepted ? <Approved /> : <Denied />} {decision.department}
|
|
</ListItem>)}
|
|
</UnorderedList>
|
|
</Box> : null}
|
|
</Stack>
|
|
</CardBody>
|
|
<CardFooter pb="4px">
|
|
<Box>
|
|
<Button colorScheme="red" onClick={async () => await makeDecision(false)}>Deny</Button>
|
|
<Button colorScheme="blue" ml="8px" onClick={async () => await makeDecision(true)}>
|
|
Accept
|
|
</Button>
|
|
</Box>
|
|
</CardFooter>
|
|
</Card>
|
|
);
|
|
}
|