From 5017c1bd6b77a692d431f4757196fec04d0748a8 Mon Sep 17 00:00:00 2001
From: lenhanphung <lenhanphung@gmail.com>
Date: Mon, 13 Oct 2025 11:14:55 +0700
Subject: [PATCH] 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
---
 src/components/Dialog/ResponsiveDialog.tsx  |  3 +-
 src/components/Event/EventFormFields.tsx    | 46 +++++++++++++++++----
 src/features/Events/EventDisplayPreview.tsx | 10 ++++-
 src/features/Events/EventUpdateModal.tsx    |  3 +-
 4 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx
index 9598478..fe9bcb6 100644
--- a/src/components/Dialog/ResponsiveDialog.tsx
+++ b/src/components/Dialog/ResponsiveDialog.tsx
@@ -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,
     },
diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx
index 744aa1b..284a77b 100644
--- a/src/components/Event/EventFormFields.tsx
+++ b/src/components/Event/EventFormFields.tsx
@@ -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>
       )}
diff --git a/src/features/Events/EventDisplayPreview.tsx b/src/features/Events/EventDisplayPreview.tsx
index 537b776..1c236cc 100644
--- a/src/features/Events/EventDisplayPreview.tsx
+++ b/src/features/Events/EventDisplayPreview.tsx
@@ -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");
diff --git a/src/features/Events/EventUpdateModal.tsx b/src/features/Events/EventUpdateModal.tsx
index e300da0..924d717 100644
--- a/src/features/Events/EventUpdateModal.tsx
+++ b/src/features/Events/EventUpdateModal.tsx
@@ -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