Permalink
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
October 19, 2023 16:49
Newer
100644
119 lines (111 sloc)
3.05 KB
1
import {
5
Modal,
6
ModalBody,
7
ModalCloseButton,
8
ModalContent,
10
ModalHeader,
11
ModalOverlay,
16
} from "@chakra-ui/react";
18
19
export default function (props: {
20
departments: string[];
21
isOpen: boolean;
22
onClose: () => void;
23
}) {
24
const [departments, setDepartments] = useState([] as string[]);
25
function reset() {
26
(document.getElementById("start") as HTMLInputElement).value = "";
27
(document.getElementById("end") as HTMLInputElement).value = "";
28
(document.getElementById("reason") as HTMLTextAreaElement).value = "";
29
30
props.onClose();
31
}
32
33
async function submit() {
34
const start = (document.getElementById("start") as HTMLInputElement).value;
35
const end = (document.getElementById("start") as HTMLInputElement).value;
36
const reason = (document.getElementById("reason") as HTMLTextAreaElement)
37
.value;
38
39
if (!departments.length)
40
return alert("You need to select at least one department!");
41
42
const inactivityPost = await fetch("/api/inactivity/new", {
43
body: JSON.stringify({
44
end,
45
reason,
46
start,
47
}),
48
headers: {
49
"content-type": "application/json",
50
},
51
method: "POST",
52
});
53
54
if (!inactivityPost.ok)
55
return useToast()({
56
description: ((await inactivityPost.json()) as { error: string }).error,
57
duration: 10000,
58
isClosable: true,
59
status: "error",
60
title: "Error",
61
});
62
63
useToast()({
64
description: "Your inactivity notice has been created",
65
duration: 10000,
66
isClosable: true,
67
status: "success",
68
title: "Success",
69
});
72
return (
73
<>
74
<Modal isCentered isOpen={props.isOpen} onClose={props.onClose}>
75
<ModalOverlay />
76
<ModalContent>
77
<ModalHeader>New Inactivity Notice</ModalHeader>
78
<ModalCloseButton />
79
<ModalBody>
80
<Text>Start Date</Text>
81
<input id="start" type="date" />
82
<br />
83
<br />
84
<Text>End Date</Text>
85
<input id="end" type="date" />
86
<br />
87
<br />
88
<Text>Reason</Text>
89
<Textarea
90
id="reason"
91
placeholder="Your reason for making this inactivity notice"
92
/>
93
<br />
94
<br />
95
<CheckboxGroup onChange={(a: string[]) => setDepartments(a)}>
96
<VStack>
97
{props.departments.map((d) => (
98
<Checkbox key={d} value={d}>
99
{d}
100
</Checkbox>
101
))}
102
</VStack>
103
</CheckboxGroup>
104
</ModalBody>
105
<ModalFooter>
106
<Button onClick={reset}>Cancel</Button>
107
<Button
108
colorScheme="blue"
109
ml="8px"
110
onClick={async () => await submit()}
111
>
112
Submit
113
</Button>
114
</ModalFooter>
115
</ModalContent>
116
</Modal>
117
</>
118
);
119
}