[#7] added missing complex params to event creation

2025-08-26 16:46:03 +02:00
parent 07a17af478
commit b1c3331518
3 changed files with 257 additions and 166 deletions
@@ -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">
-                <InputLabel id="repeat">Repetition</InputLabel>
-                <Select
-                  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>
+              <RepeatEvent
+                eventClass={eventClass}
+                setEventClass={setEventClass}
+              />

              <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}
@@ -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" }}
-      transformOrigin={{ vertical: "top", horizontal: "left" }}
+      anchorOrigin={{
+        vertical: "center",
+        horizontal: "center",
+      }}
+      transformOrigin={{
+        vertical: "center",
+        horizontal: "center",
+      }}
    >
-      <Box p={2} width={500}>
-        <Typography variant="h6" gutterBottom>
-          Create Event
-        </Typography>
+      <Card>
+        <CardHeader title="Create Event" />
+        <CardContent
+          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
-          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
-          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);
+          <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 = {
-                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
-        </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"
-        />
+          <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,
+                };
+                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">
-          <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="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>

-        <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
-          <Button
-            variant="outlined"
-            onClick={() => onClose({}, "backdropClick")}
-          >
-            Cancel
-          </Button>
-          <Button variant="contained" onClick={handleSave} disabled={!title}>
-            Save
-          </Button>
-        </Box>
-      </Box>
+        <CardActions>
+          <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
+            <Button
+              variant="outlined"
+              onClick={() => onClose({}, "backdropClick")}
+            >
+              Cancel
+            </Button>
+            <Button size="small" onClick={() => setShowMore(!showMore)}>
+              {showMore ? "Show Less" : "Show More"}
+            </Button>
+            <Button variant="contained" onClick={handleSave} disabled={!title}>
+              Save
+            </Button>
+          </Box>
+        </CardActions>
+      </Card>
    </Popover>
  );
 }
@@ -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>
+  );
+}