[#205] added calendar list component (#258)

Co-authored-by: Camille Moussu <cmoussu@linagora.com>
2025-10-31 04:44:54 +01:00
parent 2686b13885
commit 39d8085766
7 changed files with 71 additions and 62 deletions
@@ -0,0 +1,14 @@
+import React from "react";
+import { MenuItem } from "@mui/material";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import { CalendarName } from "./CalendarName";
+
+export function CalendarItemList(
+  userPersonnalCalendars: Calendars[]
+): React.ReactNode {
+  return Object.values(userPersonnalCalendars).map((calendar) => (
+    <MenuItem key={calendar.id} value={calendar.id}>
+      <CalendarName calendar={calendar} />
+    </MenuItem>
+  ));
+}
@@ -0,0 +1,17 @@
+import { Box, Typography } from "@mui/material";
+import { Calendars } from "../../features/Calendars/CalendarTypes";
+import SquareRoundedIcon from "@mui/icons-material/SquareRounded";
+export function CalendarName({ calendar }: { calendar: Calendars }) {
+  return (
+    <Box style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+      <SquareRoundedIcon
+        style={{
+          color: calendar.color?.light ?? "#3788D8",
+          width: 24,
+          height: 24,
+        }}
+      />
+      <Typography sx={{ wordBreak: "break-word" }}>{calendar.name}</Typography>
+    </Box>
+  );
+}
@@ -12,6 +12,7 @@ import {
 } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useAppSelector } from "../../app/hooks";
+import { CalendarItemList } from "./CalendarItemList";
 import { SettingsTab } from "./SettingsTab";

 export function ImportTab({
@@ -40,8 +41,8 @@ export function ImportTab({
  const [importFile, setImportFile] = useState<File | null>(null);
  const [importUrl, setImportUrl] = useState("");
  const calendars = useAppSelector((state) => state.calendars.list);
-  const personnalCalendars = Object.keys(calendars).filter(
-    (id) => id.split("/")[0] === userId
+  const personnalCalendars = Object.values(calendars).filter(
+    (cal) => cal.id.split("/")[0] === userId
  );

  useEffect(() => {
@@ -109,11 +110,7 @@ export function ImportTab({
          onChange={(e) => setImportTarget(e.target.value)}
        >
          <MenuItem value="new">New calendar</MenuItem>
-          {personnalCalendars.map((id) => (
-            <MenuItem key={id} value={id}>
-              {calendars[id].name}
-            </MenuItem>
-          ))}
+          {CalendarItemList(personnalCalendars)}
        </Select>
      </FormControl>

@@ -33,6 +33,7 @@ import {
  addVideoConferenceToDescription,
 } from "../../utils/videoConferenceUtils";
 import { TimezoneAutocomplete } from "../Timezone/TimezoneAutocomplete";
+import { CalendarItemList } from "../Calendar/CalendarItemList";

 // Helper component for field with label
 export const FieldWithLabel = React.memo(
@@ -113,8 +114,8 @@ interface EventFormFieldsProps {
  setEventClass: (eventClass: string) => void;
  timezone: string;
  setTimezone: (timezone: string) => void;
-  calendarid: number;
-  setCalendarid: (calendarid: number) => void;
+  calendarid: string;
+  setCalendarid: (calendarid: string) => void;
  hasVideoConference: boolean;
  setHasVideoConference: (hasVideoConference: boolean) => void;
  meetingLink: string | null;
@@ -144,7 +145,7 @@ interface EventFormFieldsProps {
    newStart: string,
    newEnd: string
  ) => void;
-  onCalendarChange?: (newCalendarId: number) => void;
+  onCalendarChange?: (newCalendarId: string) => void;

  // Validation
  onValidationChange?: (isValid: boolean) => void;
@@ -370,7 +371,7 @@ export default function EventFormFields({
    onAllDayChange?.(newAllDay, newStart, newEnd);
  };

-  const handleCalendarChange = (newCalendarId: number) => {
+  const handleCalendarChange = (newCalendarId: string) => {
    setCalendarid(newCalendarId);
    onCalendarChange?.(newCalendarId);
  };
@@ -738,14 +739,10 @@ export default function EventFormFields({
            label={!showMore ? "Calendar" : ""}
            displayEmpty
            onChange={(e: SelectChangeEvent) =>
-              handleCalendarChange(Number(e.target.value))
+              handleCalendarChange(e.target.value)
            }
          >
-            {Object.keys(userPersonnalCalendars).map((calendar, index) => (
-              <MenuItem key={index} value={index}>
-                {userPersonnalCalendars[index].name}
-              </MenuItem>
-            ))}
+            {CalendarItemList(userPersonnalCalendars)}
          </Select>
        </FormControl>
      </FieldWithLabel>
@@ -1,3 +1,4 @@
+import { DateSelectArg } from "@fullcalendar/core";
 import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
 import CircleIcon from "@mui/icons-material/Circle";
 import CloseIcon from "@mui/icons-material/Close";
@@ -5,17 +6,16 @@ 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 LockOutlineIcon from "@mui/icons-material/LockOutline";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import NotificationsNoneIcon from "@mui/icons-material/NotificationsNone";
 import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined";
+import RepeatIcon from "@mui/icons-material/Repeat";
 import SubjectIcon from "@mui/icons-material/Subject";
 import VideocamIcon from "@mui/icons-material/Videocam";
-import RepeatIcon from "@mui/icons-material/Repeat";
-import LockOutlineIcon from "@mui/icons-material/LockOutline";
+import { Box, Typography } from "@mui/material";
 import EventPopover from "./EventModal";
-import { DateSelectArg } from "@fullcalendar/core";
 import {
-  Box,
  Button,
  Chip,
  DialogActions,
@@ -23,15 +23,13 @@ import {
  Menu,
  MenuItem,
  Tooltip,
-  Typography,
 } from "@mui/material";
 import AvatarGroup from "@mui/material/AvatarGroup";
 import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
-import { deleteEventAsync } from "../Calendars/CalendarSlice";
-import { dlEvent } from "./EventApi";
-import EventDisplayModal from "./EventDisplay";
-import EventUpdateModal from "./EventUpdateModal";
+import { CalendarName } from "../../components/Calendar/CalendarName";
+import { getTimezoneOffset } from "../../components/Calendar/TimezoneSelector";
+import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
 import ResponsiveDialog from "../../components/Dialog/ResponsiveDialog";
 import { EditModeDialog } from "../../components/Event/EditModeDialog";
 import EventDuplication from "../../components/Event/EventDuplicate";
@@ -41,10 +39,12 @@ import {
 } from "../../components/Event/eventHandlers/eventHandlers";
 import { InfoRow } from "../../components/Event/InfoRow";
 import { renderAttendeeBadge } from "../../components/Event/utils/eventUtils";
-import { getTimezoneOffset } from "../../components/Calendar/TimezoneSelector";
 import { getCalendarRange } from "../../utils/dateUtils";
-import { updateTempCalendar } from "../../components/Calendar/utils/calendarUtils";
+import { deleteEventAsync } from "../Calendars/CalendarSlice";
+import { dlEvent } from "./EventApi";
+import EventDisplayModal from "./EventDisplay";
 import { CalendarEvent } from "./EventsTypes";
+import EventUpdateModal from "./EventUpdateModal";
 export default function EventPreviewModal({
  eventId,
  calId,
@@ -648,16 +648,7 @@ export default function EventPreviewModal({
          <Box sx={{ minWidth: "25px", marginRight: 2 }}>
            <CalendarTodayIcon />
          </Box>
-          <CircleIcon
-            style={{
-              color: calendar.color?.light ?? "#3788D8",
-              width: 12,
-              height: 12,
-            }}
-          />
-          <Typography sx={{ wordBreak: "break-word" }}>
-            {calendar.name}
-          </Typography>
+          <CalendarName calendar={calendar} />
        </Box>
      </ResponsiveDialog>
      <EditModeDialog
@@ -52,6 +52,7 @@ function EventPopover({
  const userId =
    useAppSelector((state) => state.user.userData?.openpaasId) ?? "";
  const tempList = useAppSelector((state) => state.calendars.templist);
+  const calList = useAppSelector((state) => state.calendars.list);
  const selectPersonnalCalendars = createSelector(
    (state: any) => state.calendars,
    (calendars: any) =>
@@ -94,9 +95,7 @@ function EventPopover({
  const [start, setStart] = useState(event?.start ? event.start : "");
  const [end, setEnd] = useState(event?.end ? event.end : "");
  const [calendarid, setCalendarid] = useState(
-    event?.calId
-      ? userPersonnalCalendars.findIndex((e) => e.id === event?.calId)
-      : 0
+    event?.calId ?? userPersonnalCalendars[0]?.id
  );
  const [allday, setAllDay] = useState(event?.allday ?? false);
  const [repetition, setRepetition] = useState<RepetitionObject>(
@@ -141,7 +140,7 @@ function EventPopover({
    setLocation("");
    setStart("");
    setEnd("");
-    setCalendarid(0);
+    setCalendarid(userPersonnalCalendars[0].id);
    setAllDay(false);
    setRepetition({} as RepetitionObject);
    setAlarm("");
@@ -293,13 +292,7 @@ function EventPopover({
        setEnd("");
      }

-      setCalendarid(
-        event.calId
-          ? userPersonnalCalendarsRef.current.findIndex(
-              (e) => e.id === event.calId
-            )
-          : 0
-      );
+      setCalendarid(userPersonnalCalendars[0].id);
      setRepetition(event.repetition ?? ({} as RepetitionObject));
      setShowRepeat(event.repetition?.freq ? true : false);
      setAttendees(
@@ -354,7 +347,7 @@ function EventPopover({
      setDescription("");
      setAttendees([]);
      setLocation("");
-      setCalendarid(0);
+      setCalendarid(userPersonnalCalendars[0].id);
      setAllDay(false);
      setRepetition({} as RepetitionObject);
      setAlarm("");
@@ -468,9 +461,9 @@ function EventPopover({
    const newEventUID = crypto.randomUUID();

    const newEvent: CalendarEvent = {
-      calId: userPersonnalCalendars[calendarid].id,
+      calId: calList[calendarid].id,
      title,
-      URL: `/calendars/${userPersonnalCalendars[calendarid].id}/${newEventUID}.ics`,
+      URL: `/calendars/${calList[calendarid].id}/${newEventUID}.ics`,
      start: new Date(start).toISOString(),
      allday,
      uid: newEventUID,
@@ -491,7 +484,7 @@ function EventPopover({
        },
      ],
      transp: busy,
-      color: userPersonnalCalendars[calendarid]?.color,
+      color: calList[calendarid]?.color,
      alarm: { trigger: alarm, action: "EMAIL" },
      x_openpass_videoconference: meetingLink || undefined,
    };
@@ -515,7 +508,7 @@ function EventPopover({
    // Save to API in background
    await dispatch(
      putEventAsync({
-        cal: userPersonnalCalendars[calendarid],
+        cal: calList[calendarid],
        newEvent,
      })
    );
@@ -52,6 +52,7 @@ function EventUpdateModal({
 }) {
  const dispatch = useAppDispatch();
  const tempList = useAppSelector((state) => state.calendars.templist);
+  const calList = useAppSelector((state) => state.calendars.list);
  // Get event from Redux store (cached data) as fallback
  const cachedEvent = useAppSelector(
    (state) => state.calendars.list[calId]?.events[eventId]
@@ -153,7 +154,9 @@ function EventUpdateModal({
    resolveTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone)
  );
  const [newCalId, setNewCalId] = useState(calId);
-  const [calendarid, setCalendarid] = useState(0);
+  const [calendarid, setCalendarid] = useState(
+    calId ?? userPersonnalCalendars[0]?.id
+  );

  const [attendees, setAttendees] = useState<userAttendee[]>([]);
  const [hasVideoConference, setHasVideoConference] = useState(false);
@@ -171,7 +174,7 @@ function EventUpdateModal({
    setLocation("");
    setStart("");
    setEnd("");
-    setCalendarid(0);
+    setCalendarid(userPersonnalCalendars[0].id);
    setAllDay(false);
    setRepetition({} as RepetitionObject);
    setAlarm("");
@@ -235,10 +238,7 @@ function EventUpdateModal({
      }

      // Find correct calendar index
-      const currentCalIndex = userPersonnalCalendars.findIndex(
-        (cal) => cal.id === calId
-      );
-      setCalendarid(currentCalIndex >= 0 ? currentCalIndex : 0);
+      setCalendarid(calId);

      // Handle repetition properly - check both current event and base event
      const baseEventId = event.uid.split("/")[0];
@@ -327,7 +327,7 @@ function EventUpdateModal({

    const organizer = event.organizer;

-    const targetCalendar = userPersonnalCalendars[calendarid];
+    const targetCalendar = calList[calendarid];
    if (!targetCalendar) {
      console.error("Target calendar not found");
      return;
@@ -747,7 +747,7 @@ function EventUpdateModal({
        userPersonnalCalendars={userPersonnalCalendars}
        timezoneList={timezoneList}
        onCalendarChange={(newCalendarId) => {
-          const selectedCalendar = userPersonnalCalendars[newCalendarId];
+          const selectedCalendar = calList[newCalendarId];
          if (selectedCalendar) {
            setNewCalId(selectedCalendar.id);
          }