[#7] added missing complex params to event creation

src/features/Events/EventDisplay.tsx

@@ -40,6 +40,7 @@ import { Calendars } from "../Calendars/CalendarTypes";
 import { CalendarEvent } from "./EventsTypes";
 import { isValidUrl } from "../../utils/apiUtils";
 import { formatLocalDateTime } from "./EventModal";
+import RepeatEvent from "./EventRepeat";
 
 export default function EventDisplayModal({
   eventId,
@@ -405,23 +406,10 @@ export default function EventDisplayModal({
           {/* Extended options */}
           {showMore && (
             <>
-              <FormControl fullWidth margin="dense" size="small">
+              <RepeatEvent
-                <InputLabel id="repeat">Repetition</InputLabel>
+                eventClass={eventClass}
-                <Select
+                setEventClass={setEventClass}
-                  labelId="repeat"
+              />
-                  value={repetition}
-                  disabled={!isOwn}
-                  onChange={(e: SelectChangeEvent) =>
-                    setRepetition(e.target.value)
-                  }
-                >
-                  <MenuItem value={""}>No Repetition</MenuItem>
-                  <MenuItem value={"daily"}>Repeat daily</MenuItem>
-                  <MenuItem value={"weekly"}>Repeat weekly</MenuItem>
-                  <MenuItem value={"monthly"}>Repeat monthly</MenuItem>
-                  <MenuItem value={"yearly"}>Repeat yearly</MenuItem>
-                </Select>
-              </FormControl>
 
               <FormControl fullWidth margin="dense" size="small">
                 <InputLabel id="alarm">Alarm</InputLabel>
@@ -451,6 +439,7 @@ export default function EventDisplayModal({
                 <InputLabel id="class">Class</InputLabel>
                 <Select
                   labelId="class"
+                  label="class"
                   value={eventClass}
                   disabled={!isOwn}
                   onChange={(e: SelectChangeEvent) =>
@@ -463,7 +452,7 @@ export default function EventDisplayModal({
                 </Select>
               </FormControl>
               <FormControl fullWidth margin="dense" size="small">
-                <InputLabel id="repeat">is Busy</InputLabel>
+                <InputLabel id="busy">is Busy</InputLabel>
                 <Select
                   labelId="busy"
                   value={eventClass}

src/features/Events/EventModal.tsx

@@ -2,6 +2,10 @@ import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
 import {
   Box,
   Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
   FormControl,
   InputLabel,
   MenuItem,
@@ -20,6 +24,7 @@ import { Calendars } from "../Calendars/CalendarTypes";
 import { userAttendee } from "../User/userDataTypes";
 import { CalendarEvent } from "./EventsTypes";
 import { createSelector } from "@reduxjs/toolkit";
+import RepeatEvent from "./EventRepeat";
 
 function EventPopover({
   anchorEl,
@@ -56,6 +61,7 @@ function EventPopover({
     selectPersonnalCalendars
   );
   const timezones = TIMEZONES.aliases;
+  const [showMore, setShowMore] = useState(false);
 
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
@@ -66,6 +72,9 @@ function EventPopover({
   const [allday, setAllDay] = useState(false);
   const [repetition, setRepetition] = useState("");
   const [attendees, setAttendees] = useState<userAttendee[]>([]);
+  const [alarm, setAlarm] = useState("");
+  const [eventClass, setEventClass] = useState("PUBLIC");
+
   const [timezone, setTimezone] = useState(
     Intl.DateTimeFormat().resolvedOptions().timeZone
   );
@@ -89,6 +98,7 @@ function EventPopover({
       uid: newEventUID,
       description,
       location,
+      class: eventClass,
       repetition,
       organizer,
       timezone,
@@ -133,165 +143,227 @@ function EventPopover({
       open={open}
       anchorEl={anchorEl}
       onClose={onClose}
-      anchorOrigin={{ vertical: "top", horizontal: "left" }}
+      anchorOrigin={{
-      transformOrigin={{ vertical: "top", horizontal: "left" }}
+        vertical: "center",
+        horizontal: "center",
+      }}
+      transformOrigin={{
+        vertical: "center",
+        horizontal: "center",
+      }}
     >
-      <Box p={2} width={500}>
+      <Card>
-        <Typography variant="h6" gutterBottom>
+        <CardHeader title="Create Event" />
-          Create Event
+        <CardContent
-        </Typography>
+          sx={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
+        >
+          <TextField
+            fullWidth
+            label="Title"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            size="small"
+            margin="dense"
+          />
+          <FormControl fullWidth margin="dense" size="small">
+            <InputLabel id="calendar-select-label">Calendar</InputLabel>
+            <Select
+              labelId="calendar-select-label"
+              value={calendarid.toString()}
+              label="Calendar"
+              onChange={(e: SelectChangeEvent) =>
+                setCalendarid(Number(e.target.value))
+              }
+            >
+              {Object.keys(userPersonnalCalendars).map((calendar, index) => (
+                <MenuItem key={index} value={index}>
+                  {userPersonnalCalendars[index].name}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
 
-        <TextField
+          <TextField
-          fullWidth
+            fullWidth
-          label="Title"
+            label="Start"
-          value={title}
+            type={allday ? "date" : "datetime-local"}
-          onChange={(e) => setTitle(e.target.value)}
+            value={allday ? start.split("T")[0] : start}
-          size="small"
+            onChange={(e) => {
-          margin="dense"
+              const newStart = e.target.value;
-        />
+              setStart(newStart);
-        <FormControl fullWidth margin="dense" size="small">
-          <InputLabel id="calendar-select-label">Calendar</InputLabel>
-          <Select
-            labelId="calendar-select-label"
-            value={calendarid.toString()}
-            label="Calendar"
-            onChange={(e: SelectChangeEvent) =>
-              setCalendarid(Number(e.target.value))
-            }
-          >
-            {Object.keys(userPersonnalCalendars).map((calendar, index) => (
-              <MenuItem key={index} value={index}>
-                {userPersonnalCalendars[index].name}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-
-        <TextField
-          fullWidth
-          label="Start"
-          type={allday ? "date" : "datetime-local"}
-          value={allday ? start.split("T")[0] : start}
-          onChange={(e) => {
-            const newStart = e.target.value;
-            setStart(newStart);
-            const newRange = {
-              ...selectedRange,
-              start: new Date(newStart),
-              startStr: newStart,
-              allDay: allday,
-            };
-            setSelectedRange(newRange);
-            calendarRef.current?.select(newRange);
-          }}
-          size="small"
-          margin="dense"
-          InputLabelProps={{ shrink: true }}
-        />
-        <TextField
-          fullWidth
-          label="End"
-          type={allday ? "date" : "datetime-local"}
-          value={allday ? end.split("T")[0] : end}
-          onChange={(e) => {
-            const newEnd = e.target.value;
-            setEnd(newEnd);
-            const newRange = {
-              ...selectedRange,
-              end: new Date(newEnd),
-              endStr: newEnd,
-              allDay: allday,
-            };
-            setSelectedRange(newRange);
-            calendarRef.current?.select(newRange);
-          }}
-          size="small"
-          margin="dense"
-          InputLabelProps={{ shrink: true }}
-        />
-        <label>
-          <input
-            type="checkbox"
-            checked={allday}
-            onChange={() => {
-              setAllDay(!allday);
               const newRange = {
-                startStr: allday ? start.split("T")[0] : start,
-                endStr: allday ? end.split("T")[0] : end,
-                start: new Date(allday ? start.split("T")[0] : start),
-                end: new Date(allday ? end.split("T")[0] : end),
-                allday,
                 ...selectedRange,
+                start: new Date(newStart),
+                startStr: newStart,
+                allDay: allday,
               };
               setSelectedRange(newRange);
               calendarRef.current?.select(newRange);
             }}
+            size="small"
+            margin="dense"
+            InputLabelProps={{ shrink: true }}
           />
-          All day
+          <TextField
-        </label>
+            fullWidth
-        <TextField
+            label="End"
-          fullWidth
+            type={allday ? "date" : "datetime-local"}
-          label="Description"
+            value={allday ? end.split("T")[0] : end}
-          value={description}
+            onChange={(e) => {
-          onChange={(e) => setDescription(e.target.value)}
+              const newEnd = e.target.value;
-          size="small"
+              setEnd(newEnd);
-          margin="dense"
+              const newRange = {
-          multiline
+                ...selectedRange,
-          rows={2}
+                end: new Date(newEnd),
-        />
+                endStr: newEnd,
-        <TextField
+                allDay: allday,
-          fullWidth
+              };
-          label="Location"
+              setSelectedRange(newRange);
-          value={location}
+              calendarRef.current?.select(newRange);
-          onChange={(e) => setLocation(e.target.value)}
+            }}
-          size="small"
+            size="small"
-          margin="dense"
+            margin="dense"
-        />
+            InputLabelProps={{ shrink: true }}
+          />
+          <label>
+            <input
+              type="checkbox"
+              checked={allday}
+              onChange={() => {
+                setAllDay(!allday);
+                const newRange = {
+                  startStr: allday ? start.split("T")[0] : start,
+                  endStr: allday ? end.split("T")[0] : end,
+                  start: new Date(allday ? start.split("T")[0] : start),
+                  end: new Date(allday ? end.split("T")[0] : end),
+                  allday,
+                  ...selectedRange,
+                };
+                setSelectedRange(newRange);
+                calendarRef.current?.select(newRange);
+              }}
+            />
+            All day
+          </label>
+          <TextField
+            fullWidth
+            label="Description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            size="small"
+            margin="dense"
+            multiline
+            rows={2}
+          />
+          <TextField
+            fullWidth
+            label="Location"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            size="small"
+            margin="dense"
+          />
+          {/* Extended options */}
+          {showMore && (
+            <>
+              <FormControl fullWidth margin="dense" size="small">
+                <InputLabel id="repeat">Repetition</InputLabel>
+                <Select
+                  labelId="repeat"
+                  value={repetition}
+                  label="Time Zone"
+                  onChange={(e: SelectChangeEvent) =>
+                    setRepetition(e.target.value)
+                  }
+                >
+                  <MenuItem value={""}>No Repetition</MenuItem>
+                  <MenuItem value={"daily"}>Repeat daily</MenuItem>
+                  <MenuItem value={"weekly"}>Repeat weekly</MenuItem>
+                  <MenuItem value={"monthly"}>Repeat monthly</MenuItem>
+                  <MenuItem value={"yearly"}>Repeat yearly</MenuItem>
+                </Select>
+              </FormControl>
+              <AttendeeSelector setAttendees={setAttendees} />
+              <FormControl fullWidth margin="dense" size="small">
+                <InputLabel id="timezone-select-label">Time Zone</InputLabel>
+                <Select
+                  labelId="timezone-select-label"
+                  value={timezone}
+                  label="Time Zone"
+                  onChange={(e: SelectChangeEvent) =>
+                    setTimezone(e.target.value)
+                  }
+                >
+                  {Object.keys(timezones).map((key) => (
+                    <MenuItem key={key} value={timezones[key].aliasTo}>
+                      {key}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+              <FormControl fullWidth margin="dense" size="small">
+                <InputLabel id="alarm">Alarm</InputLabel>
+                <Select
+                  labelId="alarm"
+                  value={alarm}
+                  onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
+                >
+                  <MenuItem value={""}>No Alarm</MenuItem>
+                  <MenuItem value={"-PT1M"}>1 minute</MenuItem>
+                  <MenuItem value={"-PT5M"}>2 minutes</MenuItem>
+                  <MenuItem value={"-PT10M"}>10 minutes</MenuItem>
+                  <MenuItem value={"-PT15M"}>15 minutes</MenuItem>
+                  <MenuItem value={"-PT30M"}>30 minutes</MenuItem>
+                  <MenuItem value={"-PT1H"}>1 hours</MenuItem>
+                  <MenuItem value={"-PT2H"}>2 hours</MenuItem>
+                  <MenuItem value={"-PT5H"}>5 hours</MenuItem>
+                  <MenuItem value={"-PT12H"}>12 hours</MenuItem>
+                  <MenuItem value={"-PT1D"}>1 day</MenuItem>
+                  <MenuItem value={"-PT2D"}>2 days</MenuItem>
+                  <MenuItem value={"-PT1W"}>1 week</MenuItem>
+                </Select>
+              </FormControl>
 
-        <FormControl fullWidth margin="dense" size="small">
+              <FormControl fullWidth margin="dense" size="small">
-          <InputLabel id="repeat">Repetition</InputLabel>
+                <InputLabel id="class">Class</InputLabel>
-          <Select
+                <Select
-            labelId="repeat"
+                  labelId="class"
-            value={repetition}
+                  label="class"
-            label="Time Zone"
+                  value={eventClass}
-            onChange={(e: SelectChangeEvent) => setRepetition(e.target.value)}
+                  onChange={(e: SelectChangeEvent) =>
-          >
+                    setEventClass(e.target.value)
-            <MenuItem value={""}>No Repetition</MenuItem>
+                  }
-            <MenuItem value={"daily"}>Repeat daily</MenuItem>
+                >
-            <MenuItem value={"weekly"}>Repeat weekly</MenuItem>
+                  <MenuItem value={"PUBLIC"}>Public</MenuItem>
-            <MenuItem value={"monthly"}>Repeat monthly</MenuItem>
+                  <MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
-            <MenuItem value={"yearly"}>Repeat yearly</MenuItem>
+                  <MenuItem value={"PRIVATE"}>Private</MenuItem>
-          </Select>
+                </Select>
-        </FormControl>
+              </FormControl>
-        <AttendeeSelector setAttendees={setAttendees} />
+              <RepeatEvent
-        <FormControl fullWidth margin="dense" size="small">
+                eventClass={eventClass}
-          <InputLabel id="timezone-select-label">Time Zone</InputLabel>
+                setEventClass={setEventClass}
-          <Select
+              />
-            labelId="timezone-select-label"
+            </>
-            value={timezone}
+          )}
-            label="Time Zone"
+        </CardContent>
-            onChange={(e: SelectChangeEvent) => setTimezone(e.target.value)}
-          >
-            {Object.keys(timezones).map((key) => (
-              <MenuItem key={key} value={timezones[key].aliasTo}>
-                {key}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
 
-        <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
+        <CardActions>
-          <Button
+          <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
-            variant="outlined"
+            <Button
-            onClick={() => onClose({}, "backdropClick")}
+              variant="outlined"
-          >
+              onClick={() => onClose({}, "backdropClick")}
-            Cancel
+            >
-          </Button>
+              Cancel
-          <Button variant="contained" onClick={handleSave} disabled={!title}>
+            </Button>
-            Save
+            <Button size="small" onClick={() => setShowMore(!showMore)}>
-          </Button>
+              {showMore ? "Show Less" : "Show More"}
-        </Box>
+            </Button>
-      </Box>
+            <Button variant="contained" onClick={handleSave} disabled={!title}>
+              Save
+            </Button>
+          </Box>
+        </CardActions>
+      </Card>
     </Popover>
   );
 }

src/features/Events/EventRepeat.tsx

@@ -0,0 +1,30 @@
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  SelectChangeEvent,
+  MenuItem,
+} from "@mui/material";
+
+export default function RepeatEvent({
+  eventClass,
+  setEventClass,
+}: {
+  eventClass: string;
+  setEventClass: React.Dispatch<React.SetStateAction<string>>;
+}) {
+  return (
+    <FormControl fullWidth margin="dense" size="small">
+      <InputLabel id="repeat">is Busy</InputLabel>
+      <Select
+        labelId="busy"
+        value={eventClass}
+        label="is busy"
+        onChange={(e: SelectChangeEvent) => setEventClass(e.target.value)}
+      >
+        <MenuItem value={"free"}>Free</MenuItem>
+        <MenuItem value={"busy"}>Busy </MenuItem>
+      </Select>
+    </FormControl>
+  );
+}