Skip to content
Permalink
05a0d192c3
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
119 lines (111 sloc) 3.05 KB
import {
Button,
Checkbox,
CheckboxGroup,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Text,
Textarea,
useToast,
VStack,
} from "@chakra-ui/react";
import { useState } from "react";
export default function (props: {
departments: string[];
isOpen: boolean;
onClose: () => void;
}) {
const [departments, setDepartments] = useState([] as string[]);
function reset() {
(document.getElementById("start") as HTMLInputElement).value = "";
(document.getElementById("end") as HTMLInputElement).value = "";
(document.getElementById("reason") as HTMLTextAreaElement).value = "";
props.onClose();
}
async function submit() {
const start = (document.getElementById("start") as HTMLInputElement).value;
const end = (document.getElementById("start") as HTMLInputElement).value;
const reason = (document.getElementById("reason") as HTMLTextAreaElement)
.value;
if (!departments.length)
return alert("You need to select at least one department!");
const inactivityPost = await fetch("/api/inactivity/new", {
body: JSON.stringify({
end,
reason,
start,
}),
headers: {
"content-type": "application/json",
},
method: "POST",
});
if (!inactivityPost.ok)
return useToast()({
description: ((await inactivityPost.json()) as { error: string }).error,
duration: 10000,
isClosable: true,
status: "error",
title: "Error",
});
useToast()({
description: "Your inactivity notice has been created",
duration: 10000,
isClosable: true,
status: "success",
title: "Success",
});
}
return (
<>
<Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>New Inactivity Notice</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Text>Start Date</Text>
<input id="start" type="date" />
<br />
<br />
<Text>End Date</Text>
<input id="end" type="date" />
<br />
<br />
<Text>Reason</Text>
<Textarea
id="reason"
placeholder="Your reason for making this inactivity notice"
/>
<br />
<br />
<CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
<VStack>
{props.departments.map((d) => (
<Checkbox key={d} value={d}>
{d}
</Checkbox>
))}
</VStack>
</CheckboxGroup>
</ModalBody>
<ModalFooter>
<Button onClick={reset}>Cancel</Button>
<Button
colorScheme="blue"
ml="8px"
onClick={async () => await submit()}
>
Submit
</Button>
</ModalFooter>
</ModalContent>
</Modal>
</>
);
}