[#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,14 +143,20 @@ 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",
+      }}
+    >
+      <Card>
+        <CardHeader title="Create Event" />
+        <CardContent
+          sx={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
         >
-      <Box p={2} width={500}>
-        <Typography variant="h6" gutterBottom>
-          Create Event
-        </Typography>
-
           <TextField
             fullWidth
             label="Title"
@@ -247,14 +263,18 @@ function EventPopover({
             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)}
+                  onChange={(e: SelectChangeEvent) =>
+                    setRepetition(e.target.value)
+                  }
                 >
                   <MenuItem value={""}>No Repetition</MenuItem>
                   <MenuItem value={"daily"}>Repeat daily</MenuItem>
@@ -270,7 +290,9 @@ function EventPopover({
                   labelId="timezone-select-label"
                   value={timezone}
                   label="Time Zone"
-            onChange={(e: SelectChangeEvent) => setTimezone(e.target.value)}
+                  onChange={(e: SelectChangeEvent) =>
+                    setTimezone(e.target.value)
+                  }
                 >
                   {Object.keys(timezones).map((key) => (
                     <MenuItem key={key} value={timezones[key].aliasTo}>
@@ -279,7 +301,53 @@ function EventPopover({
                   ))}
                 </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">
+                <InputLabel id="class">Class</InputLabel>
+                <Select
+                  labelId="class"
+                  label="class"
+                  value={eventClass}
+                  onChange={(e: SelectChangeEvent) =>
+                    setEventClass(e.target.value)
+                  }
+                >
+                  <MenuItem value={"PUBLIC"}>Public</MenuItem>
+                  <MenuItem value={"CONFIDENTIAL"}>Show time only</MenuItem>
+                  <MenuItem value={"PRIVATE"}>Private</MenuItem>
+                </Select>
+              </FormControl>
+              <RepeatEvent
+                eventClass={eventClass}
+                setEventClass={setEventClass}
+              />
+            </>
+          )}
+        </CardContent>
+
+        <CardActions>
           <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
             <Button
               variant="outlined"
@@ -287,11 +355,15 @@ function EventPopover({
             >
               Cancel
             </Button>
+            <Button size="small" onClick={() => setShowMore(!showMore)}>
+              {showMore ? "Show Less" : "Show More"}
+            </Button>
             <Button variant="contained" onClick={handleSave} disabled={!title}>
               Save
             </Button>
           </Box>
-      </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>
+  );
+}