feat: integrate main's EventDisplayPreview UI with EventUpdateModal
1. Replace old EventDisplayPreview with main's new Figma UI - Use ResponsiveDialog instead of Popover - Keep file at features/Events/ location (not components/Event/) - Integrate InfoRow, EditModeDialog components from main - Fix all imports to work with new location 2. Add EventUpdateModal integration - Edit icon now opens EventUpdateModal instead of EventDisplayModal - EventUpdateModal uses shared EventFormFields component 3. Fix imports and exports - Use default import for ResponsiveDialog - Use named import for EditModeDialog - Fix anchorPosition to be optional with default value 4. Performance improvement - Open EventUpdateModal immediately without waiting for API - Let modal fetch fresh data in background via useEffect 5. Fix Checkbox styling warning - Use sx prop instead of style for nested MUI selectors - Fix 'Unsupported style property &.Mui-checked' console warning
This commit is contained in:
lenhanphung
committed by
Benoit TELLIER
Benoit TELLIER
parent
64393bf161
commit
601c75db33
@@ -23,7 +23,7 @@ import {
|
|||||||
} from "../../utils/dateUtils";
|
} from "../../utils/dateUtils";
|
||||||
import { Calendars } from "../../features/Calendars/CalendarTypes";
|
import { Calendars } from "../../features/Calendars/CalendarTypes";
|
||||||
import { push } from "redux-first-history";
|
import { push } from "redux-first-history";
|
||||||
import EventPreviewModal from "../Event/EventDisplayPreview";
|
import EventPreviewModal from "../../features/Events/EventDisplayPreview";
|
||||||
import { createSelector } from "@reduxjs/toolkit";
|
import { createSelector } from "@reduxjs/toolkit";
|
||||||
import AddIcon from "@mui/icons-material/Add";
|
import AddIcon from "@mui/icons-material/Add";
|
||||||
import { TempCalendarsInput } from "./TempCalendarsInput";
|
import { TempCalendarsInput } from "./TempCalendarsInput";
|
||||||
|
|||||||
@@ -217,7 +217,7 @@ function CalendarSelector({
|
|||||||
<div>
|
<div>
|
||||||
<label>
|
<label>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
style={{
|
sx={{
|
||||||
color: calendars[id].color,
|
color: calendars[id].color,
|
||||||
"&.Mui-checked": { color: calendars[id].color },
|
"&.Mui-checked": { color: calendars[id].color },
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -1,580 +0,0 @@
|
|||||||
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
|
||||||
import CircleIcon from "@mui/icons-material/Circle";
|
|
||||||
import CloseIcon from "@mui/icons-material/Close";
|
|
||||||
import EditIcon from "@mui/icons-material/Edit";
|
|
||||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
|
||||||
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
|
|
||||||
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
|
|
||||||
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
|
||||||
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
|
|
||||||
import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
|
|
||||||
import SubjectIcon from "@mui/icons-material/Subject";
|
|
||||||
import VideocamIcon from "@mui/icons-material/Videocam";
|
|
||||||
import {
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
ButtonGroup,
|
|
||||||
DialogActions,
|
|
||||||
Divider,
|
|
||||||
IconButton,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Typography,
|
|
||||||
} from "@mui/material";
|
|
||||||
import AvatarGroup from "@mui/material/AvatarGroup";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
|
||||||
import {
|
|
||||||
deleteEventAsync,
|
|
||||||
getEventAsync,
|
|
||||||
} from "../../features/Calendars/CalendarSlice";
|
|
||||||
import { dlEvent } from "../../features/Events/EventApi";
|
|
||||||
import EventDisplayModal from "../../features/Events/EventDisplay";
|
|
||||||
import { getTimezoneOffset } from "../Calendar/TimezoneSelector";
|
|
||||||
import { ResponsiveDialog } from "../Dialog";
|
|
||||||
import { EditModeDialog } from "./EditModeDialog";
|
|
||||||
import EventDuplication from "./EventDuplicate";
|
|
||||||
import { handleDelete, handleRSVP } from "./eventHandlers/eventHandlers";
|
|
||||||
import { InfoRow } from "./InfoRow";
|
|
||||||
import { renderAttendeeBadge } from "./utils/eventUtils";
|
|
||||||
export default function EventPreviewModal({
|
|
||||||
eventId,
|
|
||||||
calId,
|
|
||||||
tempEvent,
|
|
||||||
open,
|
|
||||||
onClose,
|
|
||||||
}: {
|
|
||||||
eventId: string;
|
|
||||||
calId: string;
|
|
||||||
tempEvent?: boolean;
|
|
||||||
open: boolean;
|
|
||||||
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
|
|
||||||
}) {
|
|
||||||
const dispatch = useAppDispatch();
|
|
||||||
const calendars = useAppSelector((state) => state.calendars);
|
|
||||||
const timezone =
|
|
||||||
useAppSelector((state) => state.calendars.timeZone) ??
|
|
||||||
Intl.DateTimeFormat().resolvedOptions().timeZone;
|
|
||||||
const calendarList = Object.values(
|
|
||||||
useAppSelector((state) => state.calendars.list)
|
|
||||||
);
|
|
||||||
const calendar = tempEvent
|
|
||||||
? calendars.templist[calId]
|
|
||||||
: calendars.list[calId];
|
|
||||||
const event = calendar.events[eventId];
|
|
||||||
const user = useAppSelector((state) => state.user);
|
|
||||||
|
|
||||||
const isRecurring = event?.uid?.includes("/");
|
|
||||||
const [showAllAttendees, setShowAllAttendees] = useState(false);
|
|
||||||
const [openFullDisplay, setOpenFullDisplay] = useState(false);
|
|
||||||
const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
|
|
||||||
undefined
|
|
||||||
);
|
|
||||||
const [afterChoiceFunc, setAfterChoiceFunc] = useState<Function>();
|
|
||||||
|
|
||||||
const [toggleActionMenu, setToggleActionMenu] = useState<Element | null>(
|
|
||||||
null
|
|
||||||
);
|
|
||||||
const mailSpaUrl = (window as any).MAIL_SPA_URL ?? null;
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (!event || !calendar) {
|
|
||||||
onClose({}, "backdropClick");
|
|
||||||
}
|
|
||||||
}, [event, calendar, onClose]);
|
|
||||||
|
|
||||||
if (!event || !calendar) return null;
|
|
||||||
|
|
||||||
const attendeeDisplayLimit = 3;
|
|
||||||
|
|
||||||
const attendees =
|
|
||||||
event.attendee?.filter(
|
|
||||||
(a) => a.cal_address !== event.organizer?.cal_address
|
|
||||||
) || [];
|
|
||||||
|
|
||||||
const visibleAttendees = showAllAttendees
|
|
||||||
? attendees
|
|
||||||
: attendees.slice(0, attendeeDisplayLimit);
|
|
||||||
|
|
||||||
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
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ResponsiveDialog
|
|
||||||
open={open}
|
|
||||||
onClose={() => onClose({}, "backdropClick")}
|
|
||||||
style={{ overflow: "auto" }}
|
|
||||||
title={
|
|
||||||
event.title && (
|
|
||||||
<>
|
|
||||||
<DialogActions>
|
|
||||||
<Box>
|
|
||||||
{(window as any).DEBUG && (
|
|
||||||
<IconButton
|
|
||||||
onClick={async () => {
|
|
||||||
const icsContent = await dlEvent(event);
|
|
||||||
const blob = new Blob([icsContent], {
|
|
||||||
type: "text/calendar",
|
|
||||||
});
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const link = document.createElement("a");
|
|
||||||
link.href = url;
|
|
||||||
link.download = `${eventId}.ics`;
|
|
||||||
document.body.appendChild(link);
|
|
||||||
link.click();
|
|
||||||
document.body.removeChild(link);
|
|
||||||
URL.revokeObjectURL(url);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FileDownloadOutlinedIcon />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
{user.userData.email === event.organizer?.cal_address && (
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
onClick={async () => {
|
|
||||||
if (isRecurring) {
|
|
||||||
setAfterChoiceFunc(() => async () => {
|
|
||||||
await dispatch(getEventAsync(event));
|
|
||||||
setOpenFullDisplay(!openFullDisplay);
|
|
||||||
});
|
|
||||||
setOpenEditModePopup("edit");
|
|
||||||
} else {
|
|
||||||
await dispatch(getEventAsync(event));
|
|
||||||
setOpenFullDisplay(!openFullDisplay);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<EditIcon />
|
|
||||||
</IconButton>
|
|
||||||
)}
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
onClick={(e) => setToggleActionMenu(e.currentTarget)}
|
|
||||||
>
|
|
||||||
<MoreVertIcon />
|
|
||||||
</IconButton>
|
|
||||||
<Menu
|
|
||||||
open={Boolean(toggleActionMenu)}
|
|
||||||
onClose={() => setToggleActionMenu(null)}
|
|
||||||
anchorEl={toggleActionMenu}
|
|
||||||
>
|
|
||||||
{mailSpaUrl && attendees.length > 0 && (
|
|
||||||
<MenuItem
|
|
||||||
onClick={() =>
|
|
||||||
window.open(
|
|
||||||
`${mailSpaUrl}/mailto/?uri=mailto:${event.attendee
|
|
||||||
.map((a) => a.cal_address)
|
|
||||||
.filter((mail) => mail !== user.userData.email)
|
|
||||||
.join(",")}?subject=${event.title}`
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Email attendees
|
|
||||||
</MenuItem>
|
|
||||||
)}
|
|
||||||
<EventDuplication event={event} onClose={onClose} />
|
|
||||||
{user.userData.email === event.organizer?.cal_address && (
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
if (isRecurring) {
|
|
||||||
setAfterChoiceFunc(
|
|
||||||
() =>
|
|
||||||
(typeOfAction?: "solo" | "all" | undefined) =>
|
|
||||||
handleDelete(
|
|
||||||
isRecurring,
|
|
||||||
typeOfAction,
|
|
||||||
onClose,
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
event,
|
|
||||||
calId,
|
|
||||||
eventId
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setOpenEditModePopup("edit");
|
|
||||||
} else {
|
|
||||||
onClose({}, "backdropClick");
|
|
||||||
dispatch(
|
|
||||||
deleteEventAsync({
|
|
||||||
calId,
|
|
||||||
eventId,
|
|
||||||
eventURL: event.URL,
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete event
|
|
||||||
</MenuItem>
|
|
||||||
)}
|
|
||||||
</Menu>
|
|
||||||
<IconButton
|
|
||||||
size="small"
|
|
||||||
onClick={() => onClose({}, "backdropClick")}
|
|
||||||
>
|
|
||||||
<CloseIcon />
|
|
||||||
</IconButton>
|
|
||||||
</Box>
|
|
||||||
</DialogActions>
|
|
||||||
<Typography
|
|
||||||
variant="inherit"
|
|
||||||
fontWeight="bold"
|
|
||||||
style={{
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
gutterBottom
|
|
||||||
>
|
|
||||||
{event.title}
|
|
||||||
</Typography>
|
|
||||||
<Typography variant="body2" color="textSecondary" gutterBottom>
|
|
||||||
{formatDate(event.start, timezone, event.allday)}
|
|
||||||
{event.end &&
|
|
||||||
formatEnd(event.start, event.end, timezone, event.allday) &&
|
|
||||||
` – ${formatEnd(event.start, event.end, timezone, event.allday)} ${!event.allday && getTimezoneOffset(timezone)}`}
|
|
||||||
</Typography>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
actions={
|
|
||||||
<>
|
|
||||||
{currentUserAttendee && (
|
|
||||||
<Box style={{ display: "flex", flexDirection: "row" }}>
|
|
||||||
<Typography variant="body2">Attending?</Typography>
|
|
||||||
<ButtonGroup size="small" fullWidth>
|
|
||||||
<Button
|
|
||||||
color={
|
|
||||||
currentUserAttendee?.partstat === "ACCEPTED"
|
|
||||||
? "success"
|
|
||||||
: "primary"
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
if (isRecurring) {
|
|
||||||
setAfterChoiceFunc(
|
|
||||||
() => (type: string) =>
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"ACCEPTED",
|
|
||||||
|
|
||||||
onClose,
|
|
||||||
type,
|
|
||||||
calendarList
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setOpenEditModePopup("attendance");
|
|
||||||
} else {
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"ACCEPTED",
|
|
||||||
onClose
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color={
|
|
||||||
currentUserAttendee?.partstat === "TENTATIVE"
|
|
||||||
? "warning"
|
|
||||||
: "primary"
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
if (isRecurring) {
|
|
||||||
setAfterChoiceFunc(
|
|
||||||
() => (type: string) =>
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"TENTATIVE",
|
|
||||||
onClose,
|
|
||||||
type,
|
|
||||||
calendarList
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setOpenEditModePopup("attendance");
|
|
||||||
} else {
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"TENTATIVE",
|
|
||||||
onClose
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Maybe
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
color={
|
|
||||||
currentUserAttendee?.partstat === "DECLINED"
|
|
||||||
? "error"
|
|
||||||
: "primary"
|
|
||||||
}
|
|
||||||
onClick={() => {
|
|
||||||
if (isRecurring) {
|
|
||||||
setAfterChoiceFunc(
|
|
||||||
() => (type: string) =>
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"DECLINED",
|
|
||||||
onClose,
|
|
||||||
type,
|
|
||||||
calendarList
|
|
||||||
)
|
|
||||||
);
|
|
||||||
setOpenEditModePopup("attendance");
|
|
||||||
} else {
|
|
||||||
handleRSVP(
|
|
||||||
dispatch,
|
|
||||||
calendar,
|
|
||||||
user,
|
|
||||||
event,
|
|
||||||
"DECLINED",
|
|
||||||
onClose
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Decline
|
|
||||||
</Button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</Box>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{/* 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 */}
|
|
||||||
{attendees?.length > 0 && (
|
|
||||||
<>
|
|
||||||
<InfoRow
|
|
||||||
icon={<PeopleAltOutlinedIcon />}
|
|
||||||
content={
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
marginBottom: 1,
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Box>
|
|
||||||
<Typography>{attendees.length} guests</Typography>
|
|
||||||
<Typography>
|
|
||||||
{
|
|
||||||
attendees.filter((a) => a.partstat === "ACCEPTED")
|
|
||||||
.length
|
|
||||||
}{" "}
|
|
||||||
yes,{" "}
|
|
||||||
{
|
|
||||||
attendees.filter((a) => a.partstat === "DECLINED")
|
|
||||||
.length
|
|
||||||
}{" "}
|
|
||||||
no
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
{!showAllAttendees && (
|
|
||||||
<AvatarGroup max={attendeeDisplayLimit}>
|
|
||||||
{organizer &&
|
|
||||||
renderAttendeeBadge(
|
|
||||||
organizer,
|
|
||||||
"org",
|
|
||||||
showAllAttendees,
|
|
||||||
true
|
|
||||||
)}
|
|
||||||
{visibleAttendees.map((a, idx) =>
|
|
||||||
renderAttendeeBadge(a, idx.toString(), showAllAttendees)
|
|
||||||
)}
|
|
||||||
</AvatarGroup>
|
|
||||||
)}
|
|
||||||
<Typography
|
|
||||||
variant="body2"
|
|
||||||
color="primary"
|
|
||||||
style={{ cursor: "pointer", marginTop: 0.5 }}
|
|
||||||
onClick={() => setShowAllAttendees(!showAllAttendees)}
|
|
||||||
>
|
|
||||||
{showAllAttendees ? "Show less" : `Show more `}
|
|
||||||
</Typography>
|
|
||||||
</Box>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
{showAllAttendees &&
|
|
||||||
organizer &&
|
|
||||||
renderAttendeeBadge(organizer, "org", showAllAttendees, true)}
|
|
||||||
{showAllAttendees &&
|
|
||||||
visibleAttendees.map((a, idx) =>
|
|
||||||
renderAttendeeBadge(a, idx.toString(), showAllAttendees)
|
|
||||||
)}
|
|
||||||
{/* Location */}
|
|
||||||
{event.location && (
|
|
||||||
<InfoRow icon={<LocationOnOutlinedIcon />} text={event.location} />
|
|
||||||
)}
|
|
||||||
{/* Description */}
|
|
||||||
{event.description && (
|
|
||||||
<InfoRow icon={<SubjectIcon />} text={event.description} />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Description */}
|
|
||||||
{event.alarm && (
|
|
||||||
<InfoRow
|
|
||||||
icon={<NotificationsNoneIcon />}
|
|
||||||
text={`${event.alarm.trigger} before by ${event.alarm.action}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{event.error && (
|
|
||||||
<InfoRow
|
|
||||||
icon={<ErrorOutlineIcon color="error" style={{ fontSize: 18 }} />}
|
|
||||||
text={event.error}
|
|
||||||
error
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Calendar color dot */}
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 1,
|
|
||||||
marginBottom: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CalendarTodayIcon style={{ fontSize: 16 }} />
|
|
||||||
<CircleIcon
|
|
||||||
style={{
|
|
||||||
color: calendar.color ?? "#3788D8",
|
|
||||||
width: 12,
|
|
||||||
height: 12,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Typography variant="body2">{calendar.name}</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
{currentUserAttendee && !event.repetition && (
|
|
||||||
<>
|
|
||||||
<Divider variant="fullWidth" />
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</ResponsiveDialog>
|
|
||||||
<EditModeDialog
|
|
||||||
type={openEditModePopup}
|
|
||||||
setOpen={setOpenEditModePopup}
|
|
||||||
event={event}
|
|
||||||
eventAction={(type: "solo" | "all" | undefined) => {
|
|
||||||
setTypeOfAction(type);
|
|
||||||
afterChoiceFunc && afterChoiceFunc(type);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<EventDisplayModal
|
|
||||||
open={openFullDisplay}
|
|
||||||
onClose={() => setOpenFullDisplay(false)}
|
|
||||||
eventId={eventId}
|
|
||||||
calId={calId}
|
|
||||||
typeOfAction={typeOfAction}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatDate(date: Date | string, timeZone?: string, allday?: boolean) {
|
|
||||||
if (allday) {
|
|
||||||
return new Date(date).toLocaleDateString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
weekday: "long",
|
|
||||||
day: "numeric",
|
|
||||||
timeZone,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
return new Date(date).toLocaleString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "long",
|
|
||||||
weekday: "long",
|
|
||||||
day: "numeric",
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
timeZone,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function formatEnd(
|
|
||||||
start: Date | string,
|
|
||||||
end: Date | string,
|
|
||||||
timeZone?: string,
|
|
||||||
allday?: boolean
|
|
||||||
) {
|
|
||||||
const startDate = new Date(start);
|
|
||||||
const endDate = new Date(end);
|
|
||||||
|
|
||||||
const sameDay =
|
|
||||||
startDate.getFullYear() === endDate.getFullYear() &&
|
|
||||||
startDate.getMonth() === endDate.getMonth() &&
|
|
||||||
startDate.getDate() === endDate.getDate();
|
|
||||||
|
|
||||||
if (allday) {
|
|
||||||
return sameDay
|
|
||||||
? null
|
|
||||||
: endDate.toLocaleDateString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
timeZone,
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
if (sameDay) {
|
|
||||||
return endDate.toLocaleTimeString(undefined, {
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
timeZone,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return endDate.toLocaleString(undefined, {
|
|
||||||
year: "numeric",
|
|
||||||
month: "short",
|
|
||||||
day: "numeric",
|
|
||||||
hour: "2-digit",
|
|
||||||
minute: "2-digit",
|
|
||||||
timeZone,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,408 +1,523 @@
|
|||||||
import { useEffect, useState } from "react";
|
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
||||||
import { deleteEventAsync, putEventAsync } from "../Calendars/CalendarSlice";
|
import CircleIcon from "@mui/icons-material/Circle";
|
||||||
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
import CloseIcon from "@mui/icons-material/Close";
|
||||||
|
import EditIcon from "@mui/icons-material/Edit";
|
||||||
|
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||||
|
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
|
||||||
|
import LocationOnOutlinedIcon from "@mui/icons-material/LocationOnOutlined";
|
||||||
|
import MoreVertIcon from "@mui/icons-material/MoreVert";
|
||||||
|
import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
|
||||||
|
import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
|
||||||
|
import SubjectIcon from "@mui/icons-material/Subject";
|
||||||
|
import VideocamIcon from "@mui/icons-material/Videocam";
|
||||||
import {
|
import {
|
||||||
Popover,
|
|
||||||
Button,
|
|
||||||
Box,
|
Box,
|
||||||
Typography,
|
Button,
|
||||||
ButtonGroup,
|
ButtonGroup,
|
||||||
Card,
|
DialogActions,
|
||||||
CardContent,
|
|
||||||
Divider,
|
Divider,
|
||||||
IconButton,
|
IconButton,
|
||||||
PopoverPosition,
|
Menu,
|
||||||
|
MenuItem,
|
||||||
|
Typography,
|
||||||
} from "@mui/material";
|
} from "@mui/material";
|
||||||
import EditIcon from "@mui/icons-material/Edit";
|
import AvatarGroup from "@mui/material/AvatarGroup";
|
||||||
import EmailIcon from "@mui/icons-material/Email";
|
import { useEffect, useState } from "react";
|
||||||
import DeleteIcon from "@mui/icons-material/Delete";
|
import { useAppDispatch, useAppSelector } from "../../app/hooks";
|
||||||
import VisibilityIcon from "@mui/icons-material/Visibility";
|
import {
|
||||||
import CloseIcon from "@mui/icons-material/Close";
|
deleteEventAsync,
|
||||||
import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
|
getEventAsync,
|
||||||
import LocationOnIcon from "@mui/icons-material/LocationOn";
|
} from "../Calendars/CalendarSlice";
|
||||||
import VideocamIcon from "@mui/icons-material/Videocam";
|
import { dlEvent } from "./EventApi";
|
||||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
import EventDisplayModal from "./EventDisplay";
|
||||||
import CircleIcon from "@mui/icons-material/Circle";
|
|
||||||
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
|
|
||||||
import EventDisplayModal, {
|
|
||||||
InfoRow,
|
|
||||||
renderAttendeeBadge,
|
|
||||||
} from "./EventDisplay";
|
|
||||||
import EventUpdateModal from "./EventUpdateModal";
|
import EventUpdateModal from "./EventUpdateModal";
|
||||||
import { dlEvent, getEvent } from "./EventApi";
|
import ResponsiveDialog from "../../components/Dialog/ResponsiveDialog";
|
||||||
|
import { EditModeDialog } from "../../components/Event/EditModeDialog";
|
||||||
import EventDuplication from "../../components/Event/EventDuplicate";
|
import EventDuplication from "../../components/Event/EventDuplicate";
|
||||||
import { CalendarEvent } from "./EventsTypes";
|
import { handleDelete, handleRSVP } from "../../components/Event/eventHandlers/eventHandlers";
|
||||||
|
import { InfoRow } from "../../components/Event/InfoRow";
|
||||||
|
import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
|
||||||
export default function EventPreviewModal({
|
export default function EventPreviewModal({
|
||||||
eventId,
|
eventId,
|
||||||
calId,
|
calId,
|
||||||
tempEvent,
|
tempEvent,
|
||||||
anchorPosition,
|
|
||||||
open,
|
open,
|
||||||
onClose,
|
onClose,
|
||||||
}: {
|
}: {
|
||||||
eventId: string;
|
eventId: string;
|
||||||
calId: string;
|
calId: string;
|
||||||
tempEvent?: boolean;
|
tempEvent?: boolean;
|
||||||
anchorPosition: PopoverPosition | null;
|
|
||||||
open: boolean;
|
open: boolean;
|
||||||
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
|
onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
|
||||||
}) {
|
}) {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
const calendars = useAppSelector((state) => state.calendars);
|
const calendars = useAppSelector((state) => state.calendars);
|
||||||
|
const calendarList = Object.values(
|
||||||
|
useAppSelector((state) => state.calendars.list)
|
||||||
|
);
|
||||||
const calendar = tempEvent
|
const calendar = tempEvent
|
||||||
? calendars.templist[calId]
|
? calendars.templist[calId]
|
||||||
: calendars.list[calId];
|
: calendars.list[calId];
|
||||||
const cachedEvent = calendar.events[eventId];
|
const event = calendar.events[eventId];
|
||||||
const user = useAppSelector((state) => state.user);
|
const user = useAppSelector((state) => state.user);
|
||||||
|
|
||||||
|
const isRecurring = event?.uid?.includes("/");
|
||||||
const [showAllAttendees, setShowAllAttendees] = useState(false);
|
const [showAllAttendees, setShowAllAttendees] = useState(false);
|
||||||
const [openFullDisplay, setOpenFullDisplay] = useState(false);
|
const [openFullDisplay, setOpenFullDisplay] = useState(false);
|
||||||
const [openUpdateModal, setOpenUpdateModal] = useState(false);
|
const [openUpdateModal, setOpenUpdateModal] = useState(false);
|
||||||
|
const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const [typeOfAction, setTypeOfAction] = useState<"solo" | "all" | undefined>(
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
const [afterChoiceFunc, setAfterChoiceFunc] = useState<Function>();
|
||||||
|
|
||||||
|
const [toggleActionMenu, setToggleActionMenu] = useState<Element | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
const mailSpaUrl = (window as any).MAIL_SPA_URL ?? null;
|
const mailSpaUrl = (window as any).MAIL_SPA_URL ?? null;
|
||||||
|
|
||||||
// State for fresh event data
|
|
||||||
const [currentEvent, setCurrentEvent] = useState<CalendarEvent | null>(null);
|
|
||||||
|
|
||||||
// Initialize with cached data immediately, then fetch fresh data
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (open && cachedEvent) {
|
if (!event || !calendar) {
|
||||||
// Show cached data immediately
|
|
||||||
setCurrentEvent(cachedEvent);
|
|
||||||
|
|
||||||
// Fetch fresh data in background (only for non-temp events)
|
|
||||||
if (!tempEvent) {
|
|
||||||
const fetchFreshData = async () => {
|
|
||||||
try {
|
|
||||||
const freshData = await getEvent(cachedEvent);
|
|
||||||
setCurrentEvent(freshData);
|
|
||||||
} catch (err) {
|
|
||||||
// Keep using cached data if API fails
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
fetchFreshData();
|
|
||||||
}
|
|
||||||
} else if (!open) {
|
|
||||||
// Reset when popup closes
|
|
||||||
setCurrentEvent(null);
|
|
||||||
}
|
|
||||||
}, [open, cachedEvent, eventId, calId, tempEvent]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
// Only close if calendar is missing
|
|
||||||
if (!calendar) {
|
|
||||||
onClose({}, "backdropClick");
|
onClose({}, "backdropClick");
|
||||||
}
|
}
|
||||||
}, [calendar, onClose]);
|
}, [event, calendar, onClose]);
|
||||||
|
|
||||||
if (!calendar || !currentEvent) return null;
|
if (!event || !calendar) return null;
|
||||||
|
|
||||||
const attendeeDisplayLimit = 3;
|
const attendeeDisplayLimit = 3;
|
||||||
|
|
||||||
const attendees =
|
const attendees =
|
||||||
currentEvent.attendee?.filter(
|
event.attendee?.filter(
|
||||||
(a) => a.cal_address !== currentEvent.organizer?.cal_address
|
(a) => a.cal_address !== event.organizer?.cal_address
|
||||||
) || [];
|
) || [];
|
||||||
|
|
||||||
const visibleAttendees = showAllAttendees
|
const visibleAttendees = showAllAttendees
|
||||||
? attendees
|
? attendees
|
||||||
: attendees.slice(0, attendeeDisplayLimit);
|
: attendees.slice(0, attendeeDisplayLimit);
|
||||||
|
|
||||||
const currentUserAttendee = currentEvent.attendee?.find(
|
const currentUserAttendee = event.attendee?.find(
|
||||||
(person) => person.cal_address === user.userData.email
|
(person) => person.cal_address === user.userData.email
|
||||||
);
|
);
|
||||||
|
|
||||||
const organizer = currentEvent.attendee?.find(
|
const organizer = event.attendee?.find(
|
||||||
(a) => a.cal_address === currentEvent.organizer?.cal_address
|
(a) => a.cal_address === event.organizer?.cal_address
|
||||||
);
|
);
|
||||||
|
|
||||||
function handleRSVP(rsvp: string) {
|
|
||||||
if (!currentEvent) return;
|
|
||||||
|
|
||||||
const newEvent: CalendarEvent = {
|
|
||||||
...currentEvent,
|
|
||||||
attendee: currentEvent.attendee?.map((a) =>
|
|
||||||
a.cal_address === user.userData.email ? { ...a, partstat: rsvp } : a
|
|
||||||
),
|
|
||||||
};
|
|
||||||
|
|
||||||
dispatch(putEventAsync({ cal: calendar, newEvent }));
|
|
||||||
onClose({}, "backdropClick");
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Popover
|
<ResponsiveDialog
|
||||||
open={open}
|
open={open}
|
||||||
anchorReference="anchorPosition"
|
onClose={() => onClose({}, "backdropClick")}
|
||||||
anchorPosition={anchorPosition ?? undefined}
|
style={{ overflow: "auto" }}
|
||||||
onClose={onClose}
|
title={
|
||||||
>
|
event.title && (
|
||||||
<Card style={{ width: 300, padding: 16, position: "relative" }}>
|
<>
|
||||||
{/* Top-right buttons */}
|
<DialogActions>
|
||||||
<Box
|
<Box>
|
||||||
style={{
|
{(window as any).DEBUG && (
|
||||||
position: "absolute",
|
<IconButton
|
||||||
top: 8,
|
onClick={async () => {
|
||||||
right: 8,
|
const icsContent = await dlEvent(event);
|
||||||
display: "flex",
|
const blob = new Blob([icsContent], {
|
||||||
gap: 8,
|
type: "text/calendar",
|
||||||
}}
|
});
|
||||||
>
|
const url = URL.createObjectURL(blob);
|
||||||
{(window as any).DEBUG && (
|
|
||||||
<IconButton
|
|
||||||
onClick={async () => {
|
|
||||||
const icsContent = await dlEvent(currentEvent);
|
|
||||||
const blob = new Blob([icsContent], {
|
|
||||||
type: "text/calendar",
|
|
||||||
});
|
|
||||||
const url = URL.createObjectURL(blob);
|
|
||||||
|
|
||||||
const link = document.createElement("a");
|
const link = document.createElement("a");
|
||||||
link.href = url;
|
link.href = url;
|
||||||
link.download = `${eventId}.ics`;
|
link.download = `${eventId}.ics`;
|
||||||
document.body.appendChild(link);
|
document.body.appendChild(link);
|
||||||
link.click();
|
link.click();
|
||||||
document.body.removeChild(link);
|
document.body.removeChild(link);
|
||||||
URL.revokeObjectURL(url);
|
URL.revokeObjectURL(url);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<FileDownloadOutlinedIcon />
|
<FileDownloadOutlinedIcon />
|
||||||
</IconButton>
|
</IconButton>
|
||||||
)}
|
)}
|
||||||
<EventDuplication event={currentEvent} onClose={onClose} />
|
{user.userData.email === event.organizer?.cal_address && (
|
||||||
{mailSpaUrl && attendees.length > 0 && (
|
<IconButton
|
||||||
<IconButton
|
size="small"
|
||||||
size="small"
|
onClick={() => {
|
||||||
onClick={() =>
|
if (isRecurring) {
|
||||||
window.open(
|
setAfterChoiceFunc(() => () => {
|
||||||
`${mailSpaUrl}/mailto/?uri=mailto:${currentEvent.attendee
|
setOpenUpdateModal(true);
|
||||||
.map((a) => a.cal_address)
|
});
|
||||||
.filter((mail) => mail !== user.userData.email)
|
setOpenEditModePopup("edit");
|
||||||
.join(",")}?subject=${currentEvent.title}`
|
} else {
|
||||||
)
|
setOpenUpdateModal(true);
|
||||||
}
|
}
|
||||||
>
|
}}
|
||||||
<EmailIcon fontSize="small" />
|
>
|
||||||
</IconButton>
|
<EditIcon />
|
||||||
)}
|
</IconButton>
|
||||||
{user.userData.email !== currentEvent.organizer?.cal_address && (
|
)}
|
||||||
<IconButton
|
<IconButton
|
||||||
size="small"
|
size="small"
|
||||||
onClick={() => {
|
onClick={(e) => setToggleActionMenu(e.currentTarget)}
|
||||||
setOpenFullDisplay(!openFullDisplay);
|
>
|
||||||
}}
|
<MoreVertIcon />
|
||||||
>
|
</IconButton>
|
||||||
<VisibilityIcon fontSize="small" />
|
<Menu
|
||||||
</IconButton>
|
open={Boolean(toggleActionMenu)}
|
||||||
)}
|
onClose={() => setToggleActionMenu(null)}
|
||||||
{user.userData.email === currentEvent.organizer?.cal_address && (
|
anchorEl={toggleActionMenu}
|
||||||
<>
|
>
|
||||||
<IconButton
|
{mailSpaUrl && attendees.length > 0 && (
|
||||||
size="small"
|
<MenuItem
|
||||||
data-testid="edit-button"
|
onClick={() =>
|
||||||
onClick={() => {
|
window.open(
|
||||||
setOpenUpdateModal(true);
|
`${mailSpaUrl}/mailto/?uri=mailto:${event.attendee
|
||||||
}}
|
.map((a) => a.cal_address)
|
||||||
>
|
.filter((mail) => mail !== user.userData.email)
|
||||||
<EditIcon fontSize="small" />
|
.join(",")}?subject=${event.title}`
|
||||||
</IconButton>
|
)
|
||||||
<IconButton
|
}
|
||||||
size="small"
|
>
|
||||||
onClick={() => {
|
Email attendees
|
||||||
onClose({}, "backdropClick");
|
</MenuItem>
|
||||||
dispatch(
|
)}
|
||||||
deleteEventAsync({
|
<EventDuplication event={event} onClose={onClose} />
|
||||||
calId,
|
{user.userData.email === event.organizer?.cal_address && (
|
||||||
eventId,
|
<MenuItem
|
||||||
eventURL: currentEvent.URL,
|
onClick={() => {
|
||||||
})
|
if (isRecurring) {
|
||||||
);
|
setAfterChoiceFunc(
|
||||||
}}
|
() =>
|
||||||
>
|
(typeOfAction?: "solo" | "all" | undefined) =>
|
||||||
<DeleteIcon fontSize="small" />
|
handleDelete(
|
||||||
</IconButton>
|
isRecurring,
|
||||||
</>
|
typeOfAction,
|
||||||
)}
|
onClose,
|
||||||
<IconButton
|
dispatch,
|
||||||
size="small"
|
calendar,
|
||||||
onClick={() => onClose({}, "backdropClick")}
|
event,
|
||||||
>
|
calId,
|
||||||
<CloseIcon fontSize="small" />
|
eventId
|
||||||
</IconButton>
|
)
|
||||||
</Box>
|
);
|
||||||
|
setOpenEditModePopup("edit");
|
||||||
<CardContent style={{ paddingTop: 12 }}>
|
} else {
|
||||||
{currentEvent.title && (
|
onClose({}, "backdropClick");
|
||||||
|
dispatch(
|
||||||
|
deleteEventAsync({
|
||||||
|
calId,
|
||||||
|
eventId,
|
||||||
|
eventURL: event.URL,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete event
|
||||||
|
</MenuItem>
|
||||||
|
)}
|
||||||
|
</Menu>
|
||||||
|
<IconButton
|
||||||
|
size="small"
|
||||||
|
onClick={() => onClose({}, "backdropClick")}
|
||||||
|
>
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
</DialogActions>
|
||||||
<Typography
|
<Typography
|
||||||
variant="h6"
|
variant="inherit"
|
||||||
fontWeight="bold"
|
fontWeight="bold"
|
||||||
style={{
|
style={{
|
||||||
wordBreak: "break-word",
|
wordBreak: "break-word",
|
||||||
}}
|
}}
|
||||||
gutterBottom
|
gutterBottom
|
||||||
>
|
>
|
||||||
{currentEvent.title}
|
{event.title}
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
<Typography variant="body2" color="textSecondary" gutterBottom>
|
||||||
|
{formatDate(event.start, event.allday)}
|
||||||
{/* Time info*/}
|
{event.end &&
|
||||||
<Typography variant="body2" color="textSecondary" gutterBottom>
|
formatEnd(event.start, event.end, event.allday) &&
|
||||||
{formatDate(new Date(currentEvent.start), currentEvent.allday)}
|
` – ${formatEnd(event.start, event.end, event.allday)}`}
|
||||||
{currentEvent.end &&
|
</Typography>
|
||||||
formatEnd(
|
</>
|
||||||
new Date(currentEvent.start),
|
)
|
||||||
new Date(currentEvent.end),
|
}
|
||||||
currentEvent.allday
|
actions={
|
||||||
) &&
|
<>
|
||||||
` – ${formatEnd(new Date(currentEvent.start), new Date(currentEvent.end), currentEvent.allday)}`}
|
|
||||||
</Typography>
|
|
||||||
|
|
||||||
{/* Location */}
|
|
||||||
{currentEvent.location && (
|
|
||||||
<InfoRow
|
|
||||||
icon={<LocationOnIcon style={{ fontSize: 18 }} />}
|
|
||||||
text={currentEvent.location}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Video */}
|
|
||||||
{currentEvent.x_openpass_videoconference && (
|
|
||||||
<InfoRow
|
|
||||||
icon={<VideocamIcon style={{ fontSize: 18 }} />}
|
|
||||||
text="Video conference available"
|
|
||||||
data={currentEvent.x_openpass_videoconference}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Attendees */}
|
|
||||||
{currentEvent.attendee?.length > 0 && (
|
|
||||||
<Box style={{ marginBottom: 8 }}>
|
|
||||||
<Typography variant="subtitle2">Attendees:</Typography>
|
|
||||||
{organizer && renderAttendeeBadge(organizer, "org", true)}
|
|
||||||
{visibleAttendees.map((a, idx) =>
|
|
||||||
renderAttendeeBadge(a, idx.toString())
|
|
||||||
)}
|
|
||||||
{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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Error */}
|
|
||||||
{currentEvent.error && (
|
|
||||||
<InfoRow
|
|
||||||
icon={
|
|
||||||
<ErrorOutlineIcon color="error" style={{ fontSize: 18 }} />
|
|
||||||
}
|
|
||||||
text={currentEvent.error}
|
|
||||||
error
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Calendar color dot */}
|
|
||||||
<Box
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
gap: 8,
|
|
||||||
marginBottom: 16,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CalendarTodayIcon style={{ fontSize: 16 }} />
|
|
||||||
<CircleIcon
|
|
||||||
style={{
|
|
||||||
color: calendar.color ?? "#3788D8",
|
|
||||||
width: 12,
|
|
||||||
height: 12,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Typography variant="body2">{calendar.name}</Typography>
|
|
||||||
</Box>
|
|
||||||
|
|
||||||
<Divider style={{ marginBottom: 8 }} />
|
|
||||||
|
|
||||||
{/* RSVP */}
|
|
||||||
{currentUserAttendee && (
|
{currentUserAttendee && (
|
||||||
<Box>
|
<Box style={{ display: "flex", flexDirection: "row" }}>
|
||||||
<Typography variant="body2" style={{ marginBottom: 8 }}>
|
<Typography variant="body2">Attending?</Typography>
|
||||||
Will you attend?
|
|
||||||
</Typography>
|
|
||||||
<ButtonGroup size="small" fullWidth>
|
<ButtonGroup size="small" fullWidth>
|
||||||
<Button
|
<Button
|
||||||
color={
|
color={
|
||||||
currentUserAttendee.partstat === "ACCEPTED"
|
currentUserAttendee?.partstat === "ACCEPTED"
|
||||||
? "success"
|
? "success"
|
||||||
: "primary"
|
: "primary"
|
||||||
}
|
}
|
||||||
onClick={() => handleRSVP("ACCEPTED")}
|
onClick={() => {
|
||||||
|
if (isRecurring) {
|
||||||
|
setAfterChoiceFunc(
|
||||||
|
() => (type: string) =>
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"ACCEPTED",
|
||||||
|
|
||||||
|
onClose,
|
||||||
|
type,
|
||||||
|
calendarList
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setOpenEditModePopup("attendance");
|
||||||
|
} else {
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"ACCEPTED",
|
||||||
|
onClose
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Accept
|
Accept
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
color={
|
color={
|
||||||
currentUserAttendee.partstat === "TENTATIVE"
|
currentUserAttendee?.partstat === "TENTATIVE"
|
||||||
? "warning"
|
? "warning"
|
||||||
: "primary"
|
: "primary"
|
||||||
}
|
}
|
||||||
onClick={() => handleRSVP("TENTATIVE")}
|
onClick={() => {
|
||||||
|
if (isRecurring) {
|
||||||
|
setAfterChoiceFunc(
|
||||||
|
() => (type: string) =>
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"TENTATIVE",
|
||||||
|
onClose,
|
||||||
|
type,
|
||||||
|
calendarList
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setOpenEditModePopup("attendance");
|
||||||
|
} else {
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"TENTATIVE",
|
||||||
|
onClose
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Maybe
|
Maybe
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
color={
|
color={
|
||||||
currentUserAttendee.partstat === "DECLINED"
|
currentUserAttendee?.partstat === "DECLINED"
|
||||||
? "error"
|
? "error"
|
||||||
: "primary"
|
: "primary"
|
||||||
}
|
}
|
||||||
onClick={() => handleRSVP("DECLINED")}
|
onClick={() => {
|
||||||
|
if (isRecurring) {
|
||||||
|
setAfterChoiceFunc(
|
||||||
|
() => (type: string) =>
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"DECLINED",
|
||||||
|
onClose,
|
||||||
|
type,
|
||||||
|
calendarList
|
||||||
|
)
|
||||||
|
);
|
||||||
|
setOpenEditModePopup("attendance");
|
||||||
|
} else {
|
||||||
|
handleRSVP(
|
||||||
|
dispatch,
|
||||||
|
calendar,
|
||||||
|
user,
|
||||||
|
event,
|
||||||
|
"DECLINED",
|
||||||
|
onClose
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
Decline
|
Decline
|
||||||
</Button>
|
</Button>
|
||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
</>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{/* 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 */}
|
||||||
|
{attendees?.length > 0 && (
|
||||||
|
<>
|
||||||
|
<InfoRow
|
||||||
|
icon={<PeopleAltOutlinedIcon />}
|
||||||
|
content={
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
marginBottom: 1,
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "row",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<Typography>{attendees.length} guests</Typography>
|
||||||
|
<Typography>
|
||||||
|
{
|
||||||
|
attendees.filter((a) => a.partstat === "ACCEPTED")
|
||||||
|
.length
|
||||||
|
}{" "}
|
||||||
|
yes,{" "}
|
||||||
|
{
|
||||||
|
attendees.filter((a) => a.partstat === "DECLINED")
|
||||||
|
.length
|
||||||
|
}{" "}
|
||||||
|
no
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
{!showAllAttendees && (
|
||||||
|
<AvatarGroup max={attendeeDisplayLimit}>
|
||||||
|
{organizer &&
|
||||||
|
renderAttendeeBadge(
|
||||||
|
organizer,
|
||||||
|
"org",
|
||||||
|
showAllAttendees,
|
||||||
|
true
|
||||||
|
)}
|
||||||
|
{visibleAttendees.map((a, idx) =>
|
||||||
|
renderAttendeeBadge(a, idx.toString(), showAllAttendees)
|
||||||
|
)}
|
||||||
|
</AvatarGroup>
|
||||||
|
)}
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
color="primary"
|
||||||
|
style={{ cursor: "pointer", marginTop: 0.5 }}
|
||||||
|
onClick={() => setShowAllAttendees(!showAllAttendees)}
|
||||||
|
>
|
||||||
|
{showAllAttendees ? "Show less" : `Show more `}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{showAllAttendees &&
|
||||||
|
organizer &&
|
||||||
|
renderAttendeeBadge(organizer, "org", showAllAttendees, true)}
|
||||||
|
{showAllAttendees &&
|
||||||
|
visibleAttendees.map((a, idx) =>
|
||||||
|
renderAttendeeBadge(a, idx.toString(), showAllAttendees)
|
||||||
|
)}
|
||||||
|
{/* Location */}
|
||||||
|
{event.location && (
|
||||||
|
<InfoRow icon={<LocationOnOutlinedIcon />} text={event.location} />
|
||||||
|
)}
|
||||||
|
{/* Description */}
|
||||||
|
{event.description && (
|
||||||
|
<InfoRow icon={<SubjectIcon />} text={event.description} />
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Description */}
|
{/* Description */}
|
||||||
{currentEvent.description && (
|
{event.alarm && (
|
||||||
<Typography variant="body2" style={{ marginTop: 8 }}>
|
<InfoRow
|
||||||
{currentEvent.description}
|
icon={<NotificationsNoneIcon />}
|
||||||
</Typography>
|
text={`${event.alarm.trigger} before by ${event.alarm.action}`}
|
||||||
)}
|
/>
|
||||||
</CardContent>
|
)}
|
||||||
</Card>
|
|
||||||
</Popover>
|
{/* Error */}
|
||||||
|
{event.error && (
|
||||||
|
<InfoRow
|
||||||
|
icon={<ErrorOutlineIcon color="error" style={{ fontSize: 18 }} />}
|
||||||
|
text={event.error}
|
||||||
|
error
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Calendar color dot */}
|
||||||
|
<Box
|
||||||
|
style={{
|
||||||
|
display: "flex",
|
||||||
|
alignItems: "center",
|
||||||
|
gap: 1,
|
||||||
|
marginBottom: 2,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CalendarTodayIcon style={{ fontSize: 16 }} />
|
||||||
|
<CircleIcon
|
||||||
|
style={{
|
||||||
|
color: calendar.color ?? "#3788D8",
|
||||||
|
width: 12,
|
||||||
|
height: 12,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Typography variant="body2">{calendar.name}</Typography>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{currentUserAttendee && !event.repetition && (
|
||||||
|
<>
|
||||||
|
<Divider variant="fullWidth" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</ResponsiveDialog>
|
||||||
|
<EditModeDialog
|
||||||
|
type={openEditModePopup}
|
||||||
|
setOpen={setOpenEditModePopup}
|
||||||
|
event={event}
|
||||||
|
eventAction={(type: "solo" | "all" | undefined) => {
|
||||||
|
setTypeOfAction(type);
|
||||||
|
afterChoiceFunc && afterChoiceFunc(type);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<EventDisplayModal
|
<EventDisplayModal
|
||||||
open={openFullDisplay}
|
open={openFullDisplay}
|
||||||
onClose={() => setOpenFullDisplay(false)}
|
onClose={() => setOpenFullDisplay(false)}
|
||||||
eventId={eventId}
|
eventId={eventId}
|
||||||
calId={calId}
|
calId={calId}
|
||||||
eventData={currentEvent}
|
typeOfAction={typeOfAction}
|
||||||
/>
|
/>
|
||||||
<EventUpdateModal
|
<EventUpdateModal
|
||||||
eventId={eventId}
|
|
||||||
calId={calId}
|
|
||||||
open={openUpdateModal}
|
open={openUpdateModal}
|
||||||
onClose={() => setOpenUpdateModal(false)}
|
onClose={() => setOpenUpdateModal(false)}
|
||||||
eventData={currentEvent}
|
eventId={eventId}
|
||||||
|
calId={calId}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatDate(date: Date, allday?: boolean) {
|
function formatDate(date: Date | string, allday?: boolean) {
|
||||||
if (allday) {
|
if (allday) {
|
||||||
return new Date(date).toLocaleDateString(undefined, {
|
return new Date(date).toLocaleDateString(undefined, {
|
||||||
year: "numeric",
|
year: "numeric",
|
||||||
@@ -422,7 +537,7 @@ function formatDate(date: Date, allday?: boolean) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatEnd(start: Date, end: Date, allday?: boolean) {
|
function formatEnd(start: Date | string, end: Date | string, allday?: boolean) {
|
||||||
const startDate = new Date(start);
|
const startDate = new Date(start);
|
||||||
const endDate = new Date(end);
|
const endDate = new Date(end);
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user