sidebar availability search (#128)

* [123] added people search in left side bar

* [#123] added toggle temp calendars

* [#123] added tests]

* fixup! [123] added people search in left side bar

* fixup! [#123] added toggle temp calendars

* [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] fixed event creation on Enter

* [#123] added color diff for temp calendars

* fixup! [#123] fixed event creation on Enter

* fixup! [#123] added tests]

* fixup! [#123] added toggle temp calendars

---------

Co-authored-by: Camille Moussu <cmoussu@linagora.com>

src/features/Events/EventDisplayPreview.tsx

@@ -45,22 +45,24 @@ import { getCalendar } from "../Calendars/CalendarApi";
 export default function EventPreviewModal({
   eventId,
   calId,
+  tempEvent,
   anchorPosition,
   open,
   onClose,
 }: {
   eventId: string;
   calId: string;
+  tempEvent?: boolean;
   anchorPosition: PopoverPosition | null;
   open: boolean;
   onClose: (event: {}, reason: "backdropClick" | "escapeKeyDown") => void;
 }) {
   const dispatch = useAppDispatch();
   const calendars = useAppSelector((state) => state.calendars);
-  const calendar = calendars.list[calId];
-  const event = useAppSelector(
-    (state) => state.calendars.list[calId]?.events[eventId]
-  );
+  const calendar = tempEvent
+    ? calendars.templist[calId]
+    : calendars.list[calId];
+  const event = calendar.events[eventId];
   const user = useAppSelector((state) => state.user);
   const [showAllAttendees, setShowAllAttendees] = useState(false);
   const [openFullDisplay, setOpenFullDisplay] = useState(false);

src/features/Events/EventModal.tsx

@@ -67,13 +67,16 @@ function EventPopover({
   const [showMore, setShowMore] = useState(false);
 
   const [title, setTitle] = useState(event?.title ?? "");
+
   const [description, setDescription] = useState(event?.description ?? "");
   const [location, setLocation] = useState(event?.location ?? "");
   const [start, setStart] = useState(
-    event?.start ? new Date(event.start).toISOString() : ""
+    event?.start
+      ? new Date(event.start).toISOString()
+      : new Date().toISOString()
   );
   const [end, setEnd] = useState(
-    event?.end ? new Date(event.end)?.toISOString() : ""
+    event?.end ? new Date(event.end)?.toISOString() : new Date().toISOString()
   );
   const [calendarid, setCalendarid] = useState(
     event?.calId
@@ -104,6 +107,24 @@ function EventPopover({
     }
   }, [selectedRange]);
 
+  useEffect(() => {
+    setTitle(event?.title ?? "");
+    setAttendees(
+      event?.attendee
+        ? event.attendee.filter((a) => a.cal_address !== organizer?.cal_address)
+        : []
+    );
+  }, [event, organizer?.cal_address]);
+
+  const handleClose = () => {
+    onClose({}, "backdropClick"); // Reset
+    setTitle("");
+    setDescription("");
+    setAttendees([]);
+    setLocation("");
+    setCalendarid(0);
+  };
+
   const handleSave = async () => {
     const newEventUID = crypto.randomUUID();
 
@@ -142,7 +163,7 @@ function EventPopover({
       newEvent.attendee = newEvent.attendee.concat(attendees);
     }
 
-    dispatch(
+    await dispatch(
       putEventAsync({
         cal: userPersonnalCalendars[calendarid],
         newEvent,
@@ -153,6 +174,7 @@ function EventPopover({
     // Reset
     setTitle("");
     setDescription("");
+    setAttendees([]);
     setLocation("");
     setCalendarid(0);
   };
@@ -161,7 +183,7 @@ function EventPopover({
     <Popover
       open={open}
       anchorEl={anchorEl}
-      onClose={onClose}
+      onClose={handleClose}
       anchorOrigin={{
         vertical: "center",
         horizontal: "center",
@@ -172,7 +194,7 @@ function EventPopover({
       }}
     >
       <Card>
-        <CardHeader title={event ? "Duplicate Event" : "Create Event"} />
+        <CardHeader title={event?.uid ? "Duplicate Event" : "Create Event"} />
         <CardContent
           sx={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
         >
@@ -359,10 +381,7 @@ function EventPopover({
 
         <CardActions>
           <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
-            <Button
-              variant="outlined"
-              onClick={() => onClose({}, "backdropClick")}
-            >
+            <Button variant="outlined" onClick={handleClose}>
               Cancel
             </Button>
             <Button size="small" onClick={() => setShowMore(!showMore)}>