fix: improve event editing UX and allday toggle behavior
- Fix allday toggle: when unchecking allday, set end date = start date with rounded time (30min intervals) - Fix ResponsiveDialog CSS: set height only for expanded mode, remove maxHeight from normal mode - Show repeat info when editing solo instance of recurring event (checkbox checked and disabled) - Clear old event UI when updating recurring event allday status
This commit is contained in:
committed by
Benoit TELLIER
parent
a31825ce3a
commit
5017c1bd6b
@@ -104,9 +104,8 @@ function ResponsiveDialog({
|
||||
"& .MuiDialog-paper": {
|
||||
maxWidth: isExpanded ? "100%" : normalMaxWidth,
|
||||
width: "100%",
|
||||
// height: isExpanded ? `calc(100vh - ${headerHeight})` : "90vh",
|
||||
height: isExpanded ? `calc(100vh - ${headerHeight})` : undefined,
|
||||
margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
|
||||
maxHeight: isExpanded ? `calc(100vh - ${headerHeight})` : "790px",
|
||||
boxShadow: isExpanded ? "none !important" : undefined,
|
||||
transition: isExpanded ? "none !important" : undefined,
|
||||
},
|
||||
|
||||
@@ -237,6 +237,16 @@ export default function EventFormFields({
|
||||
onCalendarChange?.(newCalendarId);
|
||||
};
|
||||
|
||||
const getRoundedCurrentTime = () => {
|
||||
const now = new Date();
|
||||
const minutes = now.getMinutes();
|
||||
const roundedMinutes = minutes < 30 ? 0 : 30;
|
||||
now.setMinutes(roundedMinutes);
|
||||
now.setSeconds(0);
|
||||
now.setMilliseconds(0);
|
||||
return now;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<FieldWithLabel label="Title" isExpanded={showMore}>
|
||||
@@ -330,14 +340,32 @@ export default function EventFormFields({
|
||||
<Checkbox
|
||||
checked={allday}
|
||||
onChange={() => {
|
||||
const endDate = new Date(end);
|
||||
const startDate = new Date(start);
|
||||
const newAllDay = !allday;
|
||||
setAllDay(newAllDay);
|
||||
if (endDate.getDate() === startDate.getDate()) {
|
||||
endDate.setDate(startDate.getDate() + 1);
|
||||
|
||||
if (newAllDay) {
|
||||
// No allday => allday: existing logic
|
||||
const endDate = new Date(end);
|
||||
const startDate = new Date(start);
|
||||
if (endDate.getDate() === startDate.getDate()) {
|
||||
endDate.setDate(startDate.getDate() + 1);
|
||||
setEnd(formatLocalDateTime(endDate));
|
||||
}
|
||||
} else {
|
||||
// Allday => no allday: set end date = start date with rounded time
|
||||
const startDate = new Date(start);
|
||||
const currentTime = getRoundedCurrentTime();
|
||||
|
||||
// Set start time
|
||||
startDate.setHours(currentTime.getHours());
|
||||
startDate.setMinutes(currentTime.getMinutes());
|
||||
setStart(formatLocalDateTime(startDate));
|
||||
|
||||
// Set end date = start date, with time 30 minutes after start
|
||||
const endDate = new Date(startDate);
|
||||
endDate.setMinutes(endDate.getMinutes() + 30);
|
||||
setEnd(formatLocalDateTime(endDate));
|
||||
}
|
||||
|
||||
handleAllDayChange(newAllDay);
|
||||
}}
|
||||
/>
|
||||
@@ -347,7 +375,9 @@ export default function EventFormFields({
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={showRepeat}
|
||||
checked={
|
||||
showRepeat || (typeOfAction === "solo" && !!repetition?.freq)
|
||||
}
|
||||
disabled={typeOfAction === "solo"}
|
||||
onChange={() => {
|
||||
const newShowRepeat = !showRepeat;
|
||||
@@ -390,13 +420,13 @@ export default function EventFormFields({
|
||||
</Box>
|
||||
</FieldWithLabel>
|
||||
|
||||
{showRepeat && (
|
||||
{(showRepeat || (typeOfAction === "solo" && repetition?.freq)) && (
|
||||
<FieldWithLabel label=" " isExpanded={showMore}>
|
||||
<RepeatEvent
|
||||
repetition={repetition}
|
||||
eventStart={new Date(start)}
|
||||
setRepetition={setRepetition}
|
||||
isOwn={true} /* Always editable when shown */
|
||||
isOwn={typeOfAction !== "solo"}
|
||||
/>
|
||||
</FieldWithLabel>
|
||||
)}
|
||||
|
||||
@@ -65,6 +65,7 @@ export default function EventPreviewModal({
|
||||
const [showAllAttendees, setShowAllAttendees] = useState(false);
|
||||
const [openFullDisplay, setOpenFullDisplay] = useState(false);
|
||||
const [openUpdateModal, setOpenUpdateModal] = useState(false);
|
||||
const [hidePreview, setHidePreview] = useState(false);
|
||||
const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
|
||||
null
|
||||
);
|
||||
@@ -108,7 +109,7 @@ export default function EventPreviewModal({
|
||||
return (
|
||||
<>
|
||||
<ResponsiveDialog
|
||||
open={open}
|
||||
open={open && !hidePreview}
|
||||
onClose={() => onClose({}, "backdropClick")}
|
||||
style={{ overflow: "auto" }}
|
||||
title={
|
||||
@@ -143,10 +144,12 @@ export default function EventPreviewModal({
|
||||
onClick={() => {
|
||||
if (isRecurring) {
|
||||
setAfterChoiceFunc(() => () => {
|
||||
setHidePreview(true);
|
||||
setOpenUpdateModal(true);
|
||||
});
|
||||
setOpenEditModePopup("edit");
|
||||
} else {
|
||||
setHidePreview(true);
|
||||
setOpenUpdateModal(true);
|
||||
}
|
||||
}}
|
||||
@@ -509,7 +512,10 @@ export default function EventPreviewModal({
|
||||
/>
|
||||
<EventUpdateModal
|
||||
open={openUpdateModal}
|
||||
onClose={() => setOpenUpdateModal(false)}
|
||||
onClose={() => {
|
||||
setOpenUpdateModal(false);
|
||||
setHidePreview(false);
|
||||
}}
|
||||
onCloseAll={() => {
|
||||
setOpenUpdateModal(false);
|
||||
onClose({}, "backdropClick");
|
||||
|
||||
@@ -508,7 +508,8 @@ function EventUpdateModal({
|
||||
|
||||
const repetitionRulesChanged =
|
||||
JSON.stringify(oldRepetition) !== JSON.stringify(newRepetition) ||
|
||||
timezoneChanged;
|
||||
timezoneChanged ||
|
||||
event.allday !== allday;
|
||||
|
||||
if (repetitionRulesChanged) {
|
||||
// Repetition rules changed - need server to recalculate instances
|
||||
|
||||
Reference in New Issue
Block a user