120 lines
3.0 KiB
TypeScript
120 lines
3.0 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|