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:
lenhanphung
2025-10-13 11:14:55 +07:00
committed by Benoit TELLIER
parent a31825ce3a
commit 5017c1bd6b
4 changed files with 49 additions and 13 deletions
+1 -2
View File
@@ -104,9 +104,8 @@ function ResponsiveDialog({
"& .MuiDialog-paper": { "& .MuiDialog-paper": {
maxWidth: isExpanded ? "100%" : normalMaxWidth, maxWidth: isExpanded ? "100%" : normalMaxWidth,
width: "100%", width: "100%",
// height: isExpanded ? `calc(100vh - ${headerHeight})` : "90vh", height: isExpanded ? `calc(100vh - ${headerHeight})` : undefined,
margin: isExpanded ? `${headerHeight} 0 0 0` : "32px", margin: isExpanded ? `${headerHeight} 0 0 0` : "32px",
maxHeight: isExpanded ? `calc(100vh - ${headerHeight})` : "790px",
boxShadow: isExpanded ? "none !important" : undefined, boxShadow: isExpanded ? "none !important" : undefined,
transition: isExpanded ? "none !important" : undefined, transition: isExpanded ? "none !important" : undefined,
}, },
+38 -8
View File
@@ -237,6 +237,16 @@ export default function EventFormFields({
onCalendarChange?.(newCalendarId); 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 ( return (
<> <>
<FieldWithLabel label="Title" isExpanded={showMore}> <FieldWithLabel label="Title" isExpanded={showMore}>
@@ -330,14 +340,32 @@ export default function EventFormFields({
<Checkbox <Checkbox
checked={allday} checked={allday}
onChange={() => { onChange={() => {
const endDate = new Date(end);
const startDate = new Date(start);
const newAllDay = !allday; const newAllDay = !allday;
setAllDay(newAllDay);
if (endDate.getDate() === startDate.getDate()) { if (newAllDay) {
endDate.setDate(startDate.getDate() + 1); // 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)); setEnd(formatLocalDateTime(endDate));
} }
handleAllDayChange(newAllDay); handleAllDayChange(newAllDay);
}} }}
/> />
@@ -347,7 +375,9 @@ export default function EventFormFields({
<FormControlLabel <FormControlLabel
control={ control={
<Checkbox <Checkbox
checked={showRepeat} checked={
showRepeat || (typeOfAction === "solo" && !!repetition?.freq)
}
disabled={typeOfAction === "solo"} disabled={typeOfAction === "solo"}
onChange={() => { onChange={() => {
const newShowRepeat = !showRepeat; const newShowRepeat = !showRepeat;
@@ -390,13 +420,13 @@ export default function EventFormFields({
</Box> </Box>
</FieldWithLabel> </FieldWithLabel>
{showRepeat && ( {(showRepeat || (typeOfAction === "solo" && repetition?.freq)) && (
<FieldWithLabel label=" " isExpanded={showMore}> <FieldWithLabel label=" " isExpanded={showMore}>
<RepeatEvent <RepeatEvent
repetition={repetition} repetition={repetition}
eventStart={new Date(start)} eventStart={new Date(start)}
setRepetition={setRepetition} setRepetition={setRepetition}
isOwn={true} /* Always editable when shown */ isOwn={typeOfAction !== "solo"}
/> />
</FieldWithLabel> </FieldWithLabel>
)} )}
+8 -2
View File
@@ -65,6 +65,7 @@ export default function EventPreviewModal({
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 [hidePreview, setHidePreview] = useState(false);
const [openEditModePopup, setOpenEditModePopup] = useState<string | null>( const [openEditModePopup, setOpenEditModePopup] = useState<string | null>(
null null
); );
@@ -108,7 +109,7 @@ export default function EventPreviewModal({
return ( return (
<> <>
<ResponsiveDialog <ResponsiveDialog
open={open} open={open && !hidePreview}
onClose={() => onClose({}, "backdropClick")} onClose={() => onClose({}, "backdropClick")}
style={{ overflow: "auto" }} style={{ overflow: "auto" }}
title={ title={
@@ -143,10 +144,12 @@ export default function EventPreviewModal({
onClick={() => { onClick={() => {
if (isRecurring) { if (isRecurring) {
setAfterChoiceFunc(() => () => { setAfterChoiceFunc(() => () => {
setHidePreview(true);
setOpenUpdateModal(true); setOpenUpdateModal(true);
}); });
setOpenEditModePopup("edit"); setOpenEditModePopup("edit");
} else { } else {
setHidePreview(true);
setOpenUpdateModal(true); setOpenUpdateModal(true);
} }
}} }}
@@ -509,7 +512,10 @@ export default function EventPreviewModal({
/> />
<EventUpdateModal <EventUpdateModal
open={openUpdateModal} open={openUpdateModal}
onClose={() => setOpenUpdateModal(false)} onClose={() => {
setOpenUpdateModal(false);
setHidePreview(false);
}}
onCloseAll={() => { onCloseAll={() => {
setOpenUpdateModal(false); setOpenUpdateModal(false);
onClose({}, "backdropClick"); onClose({}, "backdropClick");
+2 -1
View File
@@ -508,7 +508,8 @@ function EventUpdateModal({
const repetitionRulesChanged = const repetitionRulesChanged =
JSON.stringify(oldRepetition) !== JSON.stringify(newRepetition) || JSON.stringify(oldRepetition) !== JSON.stringify(newRepetition) ||
timezoneChanged; timezoneChanged ||
event.allday !== allday;
if (repetitionRulesChanged) { if (repetitionRulesChanged) {
// Repetition rules changed - need server to recalculate instances // Repetition rules changed - need server to recalculate instances