Camille Moussu
642 lines
21 KiB
TypeScript
642 lines
21 KiB
TypeScript
import CircleIcon from "@mui/icons-material/Circle";
|
|
import CloseIcon from "@mui/icons-material/Close";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
|
import VideocamIcon from "@mui/icons-material/Videocam";
|
|
import {
|
|
Box,
|
|
Button,
|
|
ButtonGroup,
|
|
Card,
|
|
CardActions,
|
|
CardContent,
|
|
CardHeader,
|
|
Checkbox,
|
|
Divider,
|
|
FormControl,
|
|
FormControlLabel,
|
|
IconButton,
|
|
InputLabel,
|
|
MenuItem,
|
|
Modal,
|
|
Select,
|
|
SelectChangeEvent,
|
|
TextField,
|
|
Typography,
|
|
} from "@mui/material";
|
|
import { useEffect, useState } from "react";
|
|
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
|
import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
|
|
import {
|
|
handleDelete,
|
|
handleRSVP,
|
|
} from "../../components/Event/eventHandlers/eventHandlers";
|
|
import RepeatEvent from "../../components/Event/EventRepeat";
|
|
import { InfoRow } from "../../components/Event/InfoRow";
|
|
import { refreshCalendars } from "../../components/Event/utils/eventUtils";
|
|
import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
|
|
import { getCalendarRange } from "../../utils/dateUtils";
|
|
import {
|
|
moveEventAsync,
|
|
putEventAsync,
|
|
removeEvent,
|
|
updateEventInstanceAsync,
|
|
updateSeriesAsync,
|
|
} from "../Calendars/CalendarSlice";
|
|
import { Calendars } from "../Calendars/CalendarTypes";
|
|
import { userAttendee } from "../User/userDataTypes";
|
|
import { getEvent } from "./EventApi";
|
|
import { formatLocalDateTime } from "../../components/Event/EventFormFields";
|
|
import { CalendarEvent, RepetitionObject } from "./EventsTypes";
|
|
import { light } from "@mui/material/styles/createPalette";
|
|
|
|
export default function EventDisplayModal({
|
|
eventId,
|
|
calId,
|
|
open,
|
|
onClose,
|
|
typeOfAction,
|
|
}: {
|
|
eventId: string;
|
|
calId: string;
|
|
open: boolean;
|
|
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
|
|
typeOfAction?: "solo" | "all";
|
|
}) {
|
|
const dispatch = useAppDispatch();
|
|
const calendar = useAppSelector((state) => state.calendars.list[calId]);
|
|
const event = useAppSelector(
|
|
(state) => state.calendars.list[calId]?.events[eventId]
|
|
);
|
|
const user = useAppSelector((state) => state.user);
|
|
|
|
const [showAllAttendees, setShowAllAttendees] = useState(false);
|
|
const [showMore, setShowMore] = useState(false);
|
|
|
|
const calendars = Object.values(
|
|
useAppSelector((state) => state.calendars.list)
|
|
);
|
|
|
|
const userPersonnalCalendars: Calendars[] = calendars.filter(
|
|
(c) => c.id?.split("/")[0] === user.userData?.openpaasId
|
|
);
|
|
|
|
// Form state
|
|
const [title, setTitle] = useState(event?.title ?? "");
|
|
const [description, setDescription] = useState(event?.description ?? "");
|
|
const [location, setLocation] = useState(event?.location ?? "");
|
|
const [start, setStart] = useState(
|
|
formatLocalDateTime(new Date(event?.start ?? Date.now()))
|
|
);
|
|
const [end, setEnd] = useState(
|
|
formatLocalDateTime(new Date(event?.end ?? Date.now()))
|
|
);
|
|
const [allday, setAllDay] = useState(event?.allday);
|
|
const [repetition, setRepetition] = useState<RepetitionObject>(
|
|
event?.repetition ?? ({} as RepetitionObject)
|
|
);
|
|
const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
|
|
const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
|
|
const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
|
|
const [timezone, setTimezone] = useState(event?.timezone ?? "UTC");
|
|
const [newCalId, setNewCalId] = useState(event?.calId);
|
|
const [calendarid, setCalendarid] = useState(
|
|
calId.split("/")[0] === user.userData?.openpaasId
|
|
? userPersonnalCalendars.findIndex((cal) => cal.id === calId)
|
|
: calendars.findIndex((cal) => cal.id === calId)
|
|
);
|
|
|
|
const [attendees, setAttendees] = useState(
|
|
(event?.attendee || []).filter(
|
|
(a) => a.cal_address !== event?.organizer?.cal_address
|
|
)
|
|
);
|
|
const currentUserAttendee = event?.attendee?.find(
|
|
(person) => person.cal_address === user.userData.email
|
|
);
|
|
|
|
const organizer =
|
|
event?.attendee?.find(
|
|
(a) => a.cal_address === event?.organizer?.cal_address
|
|
) ?? ({} as userAttendee);
|
|
|
|
const isOwn = organizer?.cal_address === user.userData.email;
|
|
const isOwnCal = userPersonnalCalendars.find((cal) => cal.id === calId);
|
|
const attendeeDisplayLimit = 3;
|
|
|
|
useEffect(() => {
|
|
if (!event || !calendar) {
|
|
onClose({}, "backdropClick");
|
|
}
|
|
setRepetition(event?.repetition ?? ({} as RepetitionObject));
|
|
}, [open, eventId, dispatch, onClose, event, calendar]);
|
|
useEffect(() => {
|
|
const fetchMasterEvent = async () => {
|
|
const masterEvent = await getEvent(event);
|
|
|
|
setTitle(masterEvent.title ?? "");
|
|
setDescription(masterEvent.description ?? "");
|
|
setLocation(masterEvent.location ?? "");
|
|
setStart(formatLocalDateTime(new Date(masterEvent?.start ?? Date.now())));
|
|
setEnd(formatLocalDateTime(new Date(masterEvent?.end ?? Date.now())));
|
|
setAllDay(masterEvent.allday ?? false);
|
|
setRepetition(masterEvent?.repetition ?? ({} as RepetitionObject));
|
|
setAlarm(masterEvent?.alarm?.trigger ?? "");
|
|
setBusy(masterEvent?.transp ?? "OPAQUE");
|
|
setEventClass(masterEvent?.class ?? "PUBLIC");
|
|
setTimezone(masterEvent.timezone ?? "UTC");
|
|
};
|
|
if (typeOfAction === "all") {
|
|
fetchMasterEvent();
|
|
}
|
|
}, [typeOfAction, event]);
|
|
|
|
if (!event || !calendar) return null;
|
|
const isRecurring = event.uid?.includes("/");
|
|
|
|
const handleSave = async () => {
|
|
const newEventUID = crypto.randomUUID();
|
|
|
|
const newEvent: CalendarEvent = {
|
|
calId,
|
|
title,
|
|
URL: event.URL ?? `/calendars/${calId}/${newEventUID}.ics`,
|
|
start: start,
|
|
end: end,
|
|
allday,
|
|
uid: event.uid ?? newEventUID,
|
|
description,
|
|
location,
|
|
repetition,
|
|
class: eventClass,
|
|
organizer: event.organizer,
|
|
timezone,
|
|
attendee: [organizer, ...attendees],
|
|
transp: busy,
|
|
color: userPersonnalCalendars[calendarid]?.color,
|
|
alarm: { trigger: alarm, action: "EMAIL" },
|
|
};
|
|
|
|
const [baseId, recurrenceId] = event.uid.split("/");
|
|
const calendarRange = getCalendarRange(new Date(start));
|
|
|
|
if (typeOfAction === "solo") {
|
|
dispatch(
|
|
updateEventInstanceAsync({
|
|
cal: userPersonnalCalendars[calendarid],
|
|
event: { ...newEvent, recurrenceId: recurrenceId },
|
|
})
|
|
);
|
|
} else if (typeOfAction === "all") {
|
|
dispatch(
|
|
updateSeriesAsync({
|
|
cal: userPersonnalCalendars[calendarid],
|
|
event: { ...newEvent, recurrenceId: recurrenceId },
|
|
})
|
|
);
|
|
await refreshCalendars(dispatch, calendars, calendarRange);
|
|
} else {
|
|
dispatch(
|
|
putEventAsync({ cal: userPersonnalCalendars[calendarid], newEvent })
|
|
);
|
|
}
|
|
|
|
if (newCalId !== calId) {
|
|
dispatch(
|
|
moveEventAsync({
|
|
cal: userPersonnalCalendars[calendarid],
|
|
newEvent,
|
|
newURL: `/calendars/${newCalId}/${baseId}.ics`,
|
|
})
|
|
);
|
|
dispatch(removeEvent({ calendarUid: calId, eventUid: event.uid }));
|
|
}
|
|
onClose({}, "backdropClick");
|
|
};
|
|
|
|
const handleToggleShowMore = async () => {
|
|
setShowMore(!showMore);
|
|
};
|
|
|
|
const calList =
|
|
calId.split("/")[0] === user.userData?.openpaasId
|
|
? Object.keys(userPersonnalCalendars).map((calendar, index) => (
|
|
<MenuItem key={index} value={index}>
|
|
<Typography variant="body2">
|
|
<CircleIcon
|
|
style={{
|
|
color:
|
|
userPersonnalCalendars[index].color?.light ?? "#3788D8",
|
|
width: 12,
|
|
height: 12,
|
|
}}
|
|
/>
|
|
{userPersonnalCalendars[index].name}
|
|
</Typography>
|
|
</MenuItem>
|
|
))
|
|
: Object.keys(calendars).map((calendar, index) => (
|
|
<MenuItem key={index} value={index}>
|
|
<Typography variant="body2">
|
|
<CircleIcon
|
|
style={{
|
|
color: calendars[index].color?.light ?? "#3788D8",
|
|
width: 12,
|
|
height: 12,
|
|
}}
|
|
/>
|
|
{calendars[index].name} - {calendars[index].owner}
|
|
</Typography>
|
|
</MenuItem>
|
|
));
|
|
|
|
return (
|
|
<Modal open={open} onClose={onClose}>
|
|
<Box
|
|
style={{
|
|
position: "absolute",
|
|
top: "5vh",
|
|
left: "50%",
|
|
transform: "translate(-50%, -50%)",
|
|
width: "50vw",
|
|
maxHeight: "80vh",
|
|
}}
|
|
>
|
|
<Card style={{ padding: 16, position: "absolute" }}>
|
|
{/* Close button */}
|
|
<Box style={{ position: "absolute", top: 8, right: 8 }}>
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => onClose({}, "backdropClick")}
|
|
>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
</Box>
|
|
|
|
<CardHeader title={isOwn ? "Edit Event" : "Event Details"} />
|
|
|
|
<CardContent style={{ maxHeight: "75vh", overflow: "auto" }}>
|
|
{/* Title */}
|
|
<TextField
|
|
fullWidth
|
|
disabled={!isOwn}
|
|
label="Title"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
size="small"
|
|
margin="dense"
|
|
/>
|
|
|
|
{/* RSVP */}
|
|
{currentUserAttendee && isOwnCal && (
|
|
<Card style={{ margin: "8px 0" }}>
|
|
<ButtonGroup size="small" fullWidth>
|
|
<Button
|
|
color={
|
|
currentUserAttendee.partstat === "ACCEPTED"
|
|
? "success"
|
|
: "primary"
|
|
}
|
|
onClick={() =>
|
|
handleRSVP(
|
|
dispatch,
|
|
calendar,
|
|
user,
|
|
event,
|
|
"ACCEPTED",
|
|
undefined,
|
|
isRecurring ? typeOfAction : undefined
|
|
)
|
|
}
|
|
>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
color={
|
|
currentUserAttendee.partstat === "TENTATIVE"
|
|
? "warning"
|
|
: "primary"
|
|
}
|
|
onClick={() =>
|
|
handleRSVP(
|
|
dispatch,
|
|
calendar,
|
|
user,
|
|
event,
|
|
"TENTATIVE",
|
|
undefined,
|
|
isRecurring ? typeOfAction : undefined
|
|
)
|
|
}
|
|
>
|
|
Maybe
|
|
</Button>
|
|
<Button
|
|
color={
|
|
currentUserAttendee.partstat === "DECLINED"
|
|
? "error"
|
|
: "primary"
|
|
}
|
|
onClick={() =>
|
|
handleRSVP(
|
|
dispatch,
|
|
calendar,
|
|
user,
|
|
event,
|
|
"DECLINED",
|
|
undefined,
|
|
isRecurring ? typeOfAction : undefined
|
|
)
|
|
}
|
|
>
|
|
Decline
|
|
</Button>
|
|
<Button
|
|
color="primary"
|
|
onClick={() => console.log("proposenewtime")}
|
|
>
|
|
Propose new time
|
|
</Button>
|
|
</ButtonGroup>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Calendar selector */}
|
|
<FormControl fullWidth margin="dense" size="small">
|
|
<InputLabel id="calendar-select-label">Calendar</InputLabel>
|
|
<Select
|
|
disabled={!isOwn}
|
|
labelId="calendar-select-label"
|
|
value={calendarid.toString()}
|
|
label="Calendar"
|
|
onChange={(e: SelectChangeEvent) => {
|
|
const newId = Number(e.target.value);
|
|
setCalendarid(newId);
|
|
setNewCalId(userPersonnalCalendars[newId].id);
|
|
}}
|
|
>
|
|
{calList}
|
|
</Select>
|
|
</FormControl>
|
|
|
|
{/* Dates */}
|
|
<TextField
|
|
fullWidth
|
|
label="Start"
|
|
disabled={!isOwn}
|
|
type={allday ? "date" : "datetime-local"}
|
|
value={allday ? start.split("T")[0] : start.slice(0, 16)}
|
|
onChange={(e) =>
|
|
setStart(formatLocalDateTime(new Date(e.target.value)))
|
|
}
|
|
size="small"
|
|
margin="dense"
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<TextField
|
|
fullWidth
|
|
disabled={!isOwn}
|
|
label="End"
|
|
type={allday ? "date" : "datetime-local"}
|
|
value={allday ? end.split("T")[0] : end.slice(0, 16)}
|
|
onChange={(e) =>
|
|
setEnd(formatLocalDateTime(new Date(e.target.value)))
|
|
}
|
|
size="small"
|
|
margin="dense"
|
|
InputLabelProps={{ shrink: true }}
|
|
/>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Checkbox
|
|
disabled={!isOwn}
|
|
checked={allday}
|
|
onChange={() => {
|
|
const endDate = new Date(end);
|
|
const startDate = new Date(start);
|
|
setAllDay(!allday);
|
|
if (endDate.getDate() === startDate.getDate()) {
|
|
endDate.setDate(startDate.getDate() + 1);
|
|
setEnd(formatLocalDateTime(endDate));
|
|
}
|
|
}}
|
|
/>
|
|
}
|
|
label="All day"
|
|
/>
|
|
|
|
{/* Description & Location */}
|
|
<TextField
|
|
fullWidth
|
|
disabled={!isOwn}
|
|
label="Description"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
size="small"
|
|
margin="dense"
|
|
multiline
|
|
rows={2}
|
|
/>
|
|
|
|
{isOwn && (
|
|
<AttendeeSelector
|
|
attendees={attendees}
|
|
setAttendees={setAttendees}
|
|
/>
|
|
)}
|
|
|
|
<TextField
|
|
fullWidth
|
|
label="Location"
|
|
disabled={!isOwn}
|
|
value={location}
|
|
onChange={(e) => setLocation(e.target.value)}
|
|
size="small"
|
|
margin="dense"
|
|
/>
|
|
|
|
{/* Video */}
|
|
{event.x_openpass_videoconference && (
|
|
<InfoRow
|
|
icon={<VideocamIcon style={{ fontSize: 18 }} />}
|
|
content={
|
|
<Button
|
|
variant="contained"
|
|
onClick={() =>
|
|
window.open(event.x_openpass_videoconference)
|
|
}
|
|
>
|
|
Join the video conference
|
|
</Button>
|
|
}
|
|
/>
|
|
)}
|
|
|
|
{/* Attendees */}
|
|
{event.attendee?.length > 0 && (
|
|
<Box style={{ marginBottom: 8 }}>
|
|
<Typography variant="subtitle2">Attendees:</Typography>
|
|
{organizer.cal_address &&
|
|
renderAttendeeBadge(organizer, "org", true, true)}
|
|
{(showAllAttendees
|
|
? attendees
|
|
: attendees.slice(0, attendeeDisplayLimit)
|
|
).map((a, idx) => (
|
|
<Box key={a.cal_address}>
|
|
{renderAttendeeBadge(a, idx.toString(), true)}
|
|
{isOwn && (
|
|
<IconButton
|
|
size="small"
|
|
onClick={() => {
|
|
const newAttendeesList = [...attendees];
|
|
newAttendeesList.splice(idx, 1);
|
|
setAttendees(newAttendeesList);
|
|
}}
|
|
>
|
|
<CloseIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
))}
|
|
{attendees.length > attendeeDisplayLimit && (
|
|
<Typography
|
|
variant="body2"
|
|
color="primary"
|
|
style={{ cursor: "pointer", marginTop: 4 }}
|
|
onClick={() => setShowAllAttendees(!showAllAttendees)}
|
|
>
|
|
{showAllAttendees
|
|
? "Show less"
|
|
: `Show more (${
|
|
attendees.length - attendeeDisplayLimit
|
|
} more)`}
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
<Divider style={{ margin: "8px 0" }} />
|
|
|
|
{/* Extended options */}
|
|
{showMore && (
|
|
<>
|
|
{isOwn && (
|
|
<RepeatEvent
|
|
repetition={repetition}
|
|
eventStart={new Date(event.start)}
|
|
setRepetition={setRepetition}
|
|
isOwn={isOwn && typeOfAction !== "solo"}
|
|
/>
|
|
)}
|
|
<FormControl fullWidth margin="dense" size="small">
|
|
<InputLabel id="notification">Notification</InputLabel>
|
|
<Select
|
|
labelId="notification"
|
|
label="Notification"
|
|
value={alarm}
|
|
disabled={!isOwn}
|
|
onChange={(e: SelectChangeEvent) =>
|
|
setAlarm(e.target.value)
|
|
}
|
|
>
|
|
<MenuItem value={""}>No Notification</MenuItem>
|
|
<MenuItem value={"-PT1M"}>1 minute</MenuItem>
|
|
<MenuItem value={"-PT5M"}>2 minutes</MenuItem>
|
|
<MenuItem value={"-PT10M"}>10 minutes</MenuItem>
|
|
<MenuItem value={"-PT15M"}>15 minutes</MenuItem>
|
|
<MenuItem value={"-PT30M"}>30 minutes</MenuItem>
|
|
<MenuItem value={"-PT1H"}>1 hours</MenuItem>
|
|
<MenuItem value={"-PT2H"}>2 hours</MenuItem>
|
|
<MenuItem value={"-PT5H"}>5 hours</MenuItem>
|
|
<MenuItem value={"-PT12H"}>12 hours</MenuItem>
|
|
<MenuItem value={"-PT1D"}>1 day</MenuItem>
|
|
<MenuItem value={"-PT2D"}>2 days</MenuItem>
|
|
<MenuItem value={"-PT1W"}>1 week</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl fullWidth margin="dense" size="small">
|
|
<InputLabel id="Visibility">Visibility</InputLabel>
|
|
<Select
|
|
labelId="Visibility"
|
|
label="Visibility"
|
|
value={eventClass}
|
|
disabled={!isOwn}
|
|
onChange={(e: SelectChangeEvent) =>
|
|
setEventClass(e.target.value)
|
|
}
|
|
>
|
|
<MenuItem value={"PUBLIC"}>Public</MenuItem>
|
|
<MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
|
|
<MenuItem value={"PRIVATE"}>Private</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
<FormControl fullWidth margin="dense" size="small">
|
|
<InputLabel id="busy">is Busy</InputLabel>
|
|
<Select
|
|
labelId="busy"
|
|
value={busy}
|
|
disabled={!isOwn}
|
|
label="is busy"
|
|
onChange={(e: SelectChangeEvent) => setBusy(e.target.value)}
|
|
>
|
|
<MenuItem value={"TRANSPARENT"}>Free</MenuItem>
|
|
<MenuItem value={"OPAQUE"}>Busy </MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
{/* Error */}
|
|
{event.error && (
|
|
<InfoRow
|
|
icon={
|
|
<ErrorOutlineIcon
|
|
color="error"
|
|
style={{ fontSize: 18 }}
|
|
/>
|
|
}
|
|
text={event.error}
|
|
error
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
|
|
<CardActions>
|
|
<ButtonGroup>
|
|
{isOwn && (
|
|
<IconButton
|
|
size="small"
|
|
onClick={() =>
|
|
handleDelete(
|
|
isRecurring,
|
|
typeOfAction,
|
|
onClose,
|
|
dispatch,
|
|
calendar,
|
|
event,
|
|
calId,
|
|
eventId
|
|
)
|
|
}
|
|
>
|
|
<DeleteIcon fontSize="small" />
|
|
</IconButton>
|
|
)}
|
|
<Button size="small" onClick={handleToggleShowMore}>
|
|
{showMore ? "Show Less" : "Show More"}
|
|
</Button>
|
|
|
|
{isOwn && (
|
|
<Button size="small" onClick={handleSave}>
|
|
Save
|
|
</Button>
|
|
)}
|
|
</ButtonGroup>
|
|
</CardActions>
|
|
</Card>
|
|
</Box>
|
|
</Modal>
|
|
);
|
|
}
|