Show date edit button on own events
This commit is contained in:
parent
83cc278e38
commit
ea281a70c1
GPG Key ID:
5D4196DA269EF520
@ -9,6 +9,7 @@ import {
|
||||
FormControl,
|
||||
FormLabel,
|
||||
Heading,
|
||||
IconButton,
|
||||
Link,
|
||||
Modal,
|
||||
ModalBody,
|
||||
@ -116,6 +117,11 @@ export default function () {
|
||||
onClose: onDeleteClose,
|
||||
onOpen: onDeleteOpen,
|
||||
} = useDisclosure();
|
||||
const {
|
||||
isOpen: isRescheduleOpen,
|
||||
onClose: onRescheduleClose,
|
||||
onOpen: onRescheduleOpen,
|
||||
} = useDisclosure();
|
||||
const toast = useToast();
|
||||
const [selectedEvent, setSelectedEvent] = useState("");
|
||||
const [showOld, setShowOld] = useState(false);
|
||||
@ -345,6 +351,42 @@ export default function () {
|
||||
setSelectedEvent("");
|
||||
}
|
||||
|
||||
async function reschedule(eventId: string) {
|
||||
const newDate = (
|
||||
document.getElementById("reschedule-input") as HTMLInputElement
|
||||
).value;
|
||||
const rescheduleResp = await fetch(`/api/events-team/events/${eventId}`, {
|
||||
body: JSON.stringify({ day: newDate.split("-").at(2) }),
|
||||
headers: {
|
||||
"content-type": "application/json",
|
||||
},
|
||||
method: "PATCH",
|
||||
});
|
||||
|
||||
if (!rescheduleResp.ok) {
|
||||
let msg = "Unknown error";
|
||||
|
||||
try {
|
||||
msg = ((await rescheduleResp.json()) as { error: string }).error;
|
||||
} catch {}
|
||||
|
||||
toast({
|
||||
description: msg,
|
||||
status: "error",
|
||||
title: "Failed to reschedule",
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
onRescheduleClose();
|
||||
toast({
|
||||
description: `Event rescheduled to ${newDate}`,
|
||||
status: "success",
|
||||
title: "Rescheduled",
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxW="container.lg">
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
@ -460,6 +502,37 @@ export default function () {
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<Modal isOpen={isRescheduleOpen} onClose={onRescheduleClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent>
|
||||
<ModalHeader>Reschedule Event</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody>
|
||||
<Text>
|
||||
New date:
|
||||
<input
|
||||
id="reschedule-input"
|
||||
type="date"
|
||||
style={{ marginLeft: "8px" }}
|
||||
min={new Date().toISOString().split("T").at(0)}
|
||||
max={(function () {
|
||||
const date = new Date();
|
||||
|
||||
date.setUTCMonth(date.getUTCMonth() + 1, 0);
|
||||
|
||||
return date.toISOString().split("T").at(0);
|
||||
})()}
|
||||
/>
|
||||
</Text>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onClick={onRescheduleClose}>Cancel</Button>
|
||||
<Button colorScheme="blue" ml="8px">
|
||||
Reschedule
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
<VStack spacing="8">
|
||||
{eventData
|
||||
.map((event) => {
|
||||
@ -488,6 +561,36 @@ export default function () {
|
||||
<Heading size="sm">Date</Heading>
|
||||
<Text fontSize="sm" pt="2">
|
||||
{event.year}-{event.month}-{event.day}
|
||||
<IconButton
|
||||
aria-label="Edit event date"
|
||||
display={
|
||||
(event.created_by === user_id &&
|
||||
event.day > new Date().getUTCDate()) ||
|
||||
can_approve
|
||||
? undefined
|
||||
: "none"
|
||||
}
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"
|
||||
/>
|
||||
</svg>
|
||||
}
|
||||
ml="8px"
|
||||
onClick={() => {
|
||||
setEventData(event.id);
|
||||
onRescheduleOpen();
|
||||
}}
|
||||
/>
|
||||
</Text>
|
||||
</Box>
|
||||
<Box>
|
||||
@ -604,8 +707,9 @@ export default function () {
|
||||
: "Approved"
|
||||
: "Denied"}
|
||||
</Text>
|
||||
<Button
|
||||
<IconButton
|
||||
alignSelf="center"
|
||||
aria-label="Delete event"
|
||||
display={
|
||||
(event.created_by === user_id &&
|
||||
event.day > new Date().getUTCDate()) ||
|
||||
@ -613,23 +717,24 @@ export default function () {
|
||||
? undefined
|
||||
: "none"
|
||||
}
|
||||
icon={
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
|
||||
</svg>
|
||||
}
|
||||
marginLeft="auto"
|
||||
marginRight={0}
|
||||
onClick={() => {
|
||||
setSelectedEvent(event.id);
|
||||
onDeleteOpen();
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="32"
|
||||
height="32"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 16 16"
|
||||
>
|
||||
<path d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
|
||||
</svg>
|
||||
</Button>
|
||||
/>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
@ -666,7 +771,6 @@ export default function () {
|
||||
</Link>
|
||||
) : null}
|
||||
</VStack>
|
||||
;
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user