refactor: improve EventModal UI labels and visibility controls

- Rename 'Alarm' to 'Notification' for better clarity - Rename 'Attendees' to 'Participants' with updated placeholder text - Replace 'Visibility' dropdown with 'Visible to' toggle buttons (All/Participants) - Remove CONFIDENTIAL option, keep only PUBLIC and PRIVATE - Add icons (PublicIcon/LockIcon) with fixed sizing for toggle buttons - Rename 'Show as' to 'Show me as' - Fix ResponsiveDialog scroll bar positioning in expanded mode - Update PeopleSearch placeholder to 'Start typing a name or email'
2025-10-01 19:16:39 +07:00
parent 1228f0a50e
commit 3261479874
4 changed files with 247 additions and 109 deletions
@@ -102,8 +102,8 @@ export function PeopleSearch({
          {...params}
          error={!!error}
          helperText={error}
-          placeholder="Search user"
-          label="Search user"
+          placeholder="Start typing a name or email"
+          label="Start typing a name or email"
          onKeyDown={(e) => {
            if (e.key === "Enter" && onToggleEventPreview) {
              e.preventDefault();
@@ -122,6 +122,11 @@ function ResponsiveDialog({
  };

  const baseContentSx: SxProps<Theme> = {
+    width: "100%",
+    padding: isExpanded ? "16px" : undefined,
+  };
+
+  const contentWrapperSx: SxProps<Theme> = {
    maxWidth: isExpanded ? expandedContentMaxWidth : "100%",
    margin: isExpanded ? "0 auto" : "0",
    width: "100%",
@@ -160,7 +165,13 @@ function ResponsiveDialog({
        ]}
        {...dialogContentProps}
      >
-        <Stack spacing={currentSpacing}>{children}</Stack>
+        {isExpanded ? (
+          <Stack spacing={currentSpacing} sx={contentWrapperSx}>
+            {children}
+          </Stack>
+        ) : (
+          <Stack spacing={currentSpacing}>{children}</Stack>
+        )}
      </DialogContent>
      {actions && <DialogActions>{actions}</DialogActions>}
    </Dialog>
@@ -1,6 +1,5 @@
 import {
  FormControl,
-  InputLabel,
  Select,
  SelectChangeEvent,
  MenuItem,
@@ -28,7 +27,6 @@ export default function RepeatEvent({
  setRepetition: Function;
  isOwn?: boolean;
 }) {
-  const repetitionValues = ["day", "week", "month", "year"];
  const days = ["MO", "TU", "WE", "TH", "FR", "SA", "SU"];
  const day = new Date(eventStart);

@@ -43,9 +41,11 @@ export default function RepeatEvent({

  // keep endOption in sync if repetition changes from parent
  useEffect(() => {
-    if (!endOption) {
-      setEndOption(getEndOption());
+    const newEndOption = getEndOption();
+    if (endOption !== newEndOption) {
+      setEndOption(newEndOption);
    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [repetition.occurrences, repetition.endDate]);

  const handleDayChange = (day: string) => {
@@ -57,37 +57,11 @@ export default function RepeatEvent({
  };

  return (
-    <FormControl fullWidth margin="dense" size="small">
-      <InputLabel id="repeat">Repetition</InputLabel>
-      <Select
-        labelId="repeat"
-        value={repetition.freq ?? ""}
-        disabled={!isOwn}
-        label="Repetition"
-        onChange={(e: SelectChangeEvent) => {
-          if (e.target.value === "weekly") {
-            setRepetition({
-              ...repetition,
-              freq: e.target.value,
-              selectedDays: [days[day.getDay() - 1]],
-            });
-          } else {
-            setRepetition({ ...repetition, freq: 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>
-
-      {repetition.freq && (
-        <Stack>
+    <Box>
+      <Stack>
          {/* Interval */}
          <Box display="flex" alignItems="center" gap={2} mb={2}>
-            <Typography>Interval:</Typography>
+            <Typography>Repeat every</Typography>
            <TextField
              type="number"
              value={repetition.interval ?? 1}
@@ -99,21 +73,36 @@ export default function RepeatEvent({
              }
              size="small"
              style={{ width: 80 }}
+              inputProps={{ min: 1 }}
            />
-            <Typography>
-              {
-                repetitionValues[
-                  repetitionValues.findIndex((el) => el === repetition.freq)
-                ]
-              }
-            </Typography>
+            <FormControl size="small" style={{ minWidth: 120 }}>
+              <Select
+                value={repetition.freq ?? "daily"}
+                onChange={(e: SelectChangeEvent) => {
+                  if (e.target.value === "weekly") {
+                    setRepetition({
+                      ...repetition,
+                      freq: e.target.value,
+                      selectedDays: [days[day.getDay() - 1]],
+                    });
+                  } else {
+                    setRepetition({ ...repetition, freq: e.target.value });
+                  }
+                }}
+              >
+                <MenuItem value={"daily"}>Day(s)</MenuItem>
+                <MenuItem value={"weekly"}>Week(s)</MenuItem>
+                <MenuItem value={"monthly"}>Month(s)</MenuItem>
+                <MenuItem value={"yearly"}>Year(s)</MenuItem>
+              </Select>
+            </FormControl>
          </Box>

          {/* Weekly selection */}
          {repetition.freq === "weekly" && (
            <Box>
              <Typography variant="body2" gutterBottom>
-                On days:
+                Repeat on:
              </Typography>
              <FormGroup row>
                {days.map((day) => (
@@ -136,7 +125,7 @@ export default function RepeatEvent({

          {/* End options */}
          <Box>
-            <Typography variant="body2" gutterBottom style={{ marginTop: 16 }}>
+            <Typography variant="body2" gutterBottom>
              End:
            </Typography>
            <RadioGroup
@@ -222,7 +211,6 @@ export default function RepeatEvent({
            </RadioGroup>
          </Box>
        </Stack>
-      )}
-    </FormControl>
+    </Box>
  );
 }
@@ -11,8 +11,15 @@ import {
  SelectChangeEvent,
  TextField,
  Typography,
+  ToggleButtonGroup,
+  ToggleButton,
 } from "@mui/material";
-import React, { useEffect, useState } from "react";
+import {
+  Description as DescriptionIcon,
+  Public as PublicIcon,
+  Lock as LockIcon,
+} from "@mui/icons-material";
+import React, { useEffect, useState, useMemo } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import AttendeeSelector from "../../components/Attendees/AttendeeSearch";
 import { ResponsiveDialog } from "../../components/Dialog";
@@ -22,6 +29,7 @@ import { userAttendee } from "../User/userDataTypes";
 import { CalendarEvent, RepetitionObject } from "./EventsTypes";
 import { createSelector } from "@reduxjs/toolkit";
 import RepeatEvent from "../../components/Event/EventRepeat";
+import { TIMEZONES } from "../../utils/timezone-data";

 // Helper component for field with label
 const FieldWithLabel = React.memo(
@@ -112,7 +120,50 @@ function EventPopover({
  const userPersonnalCalendars: Calendars[] = useAppSelector(
    selectPersonnalCalendars
  );
+
+  // Helper function to resolve timezone aliases
+  const resolveTimezone = (tzName: string): string => {
+    if (TIMEZONES.zones[tzName]) {
+      return tzName;
+    }
+    if (TIMEZONES.aliases[tzName]) {
+      return TIMEZONES.aliases[tzName].aliasTo;
+    }
+    return tzName;
+  };
+
+  const timezoneList = useMemo(() => {
+    const zones = Object.keys(TIMEZONES.zones).sort();
+    const browserTz = resolveTimezone(Intl.DateTimeFormat().resolvedOptions().timeZone);
+    
+    const getTimezoneOffset = (tzName: string): string => {
+      const resolvedTz = resolveTimezone(tzName);
+      const tzData = TIMEZONES.zones[resolvedTz];
+      if (!tzData) return "";
+      
+      const icsMatch = tzData.ics.match(/TZOFFSETTO:([+-]\d{4})/);
+      if (!icsMatch) return "";
+      
+      const offset = icsMatch[1];
+      const hours = parseInt(offset.slice(0, 3));
+      const minutes = parseInt(offset.slice(3));
+      
+      if (minutes === 0) {
+        return `UTC${hours >= 0 ? '+' : ''}${hours}`;
+      }
+      return `UTC${hours >= 0 ? '+' : ''}${hours}:${Math.abs(minutes).toString().padStart(2, '0')}`;
+    };
+    
+    return { zones, browserTz, getTimezoneOffset };
+  }, []);
+
  const [showMore, setShowMore] = useState(false);
+  const [showDescription, setShowDescription] = useState(
+    event?.description ? true : false
+  );
+  const [showRepeat, setShowRepeat] = useState(
+    event?.repetition?.freq ? true : false
+  );

  const [title, setTitle] = useState(event?.title ?? "");

@@ -137,8 +188,10 @@ function EventPopover({
  const [alarm, setAlarm] = useState(event?.alarm?.trigger ?? "");
  const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC");
  const [busy, setBusy] = useState(event?.transp ?? "OPAQUE");
-
-  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const [important, setImportant] = useState(false);
+  const [timezone, setTimezone] = useState(
+    event?.timezone ? resolveTimezone(event.timezone) : timezoneList.browserTz
+  );

  useEffect(() => {
    if (selectedRange) {
@@ -160,11 +213,15 @@ function EventPopover({
    onClose({}, "backdropClick");
    // Reset state
    setShowMore(false);
+    setShowDescription(false);
+    setShowRepeat(false);
    setTitle("");
    setDescription("");
    setAttendees([]);
    setLocation("");
    setCalendarid(0);
+    setImportant(false);
+    setTimezone(timezoneList.browserTz);
  };

  const handleSave = async () => {
@@ -210,11 +267,15 @@ function EventPopover({

    // Reset state
    setShowMore(false);
+    setShowDescription(false);
+    setShowRepeat(false);
    setTitle("");
    setDescription("");
    setAttendees([]);
    setLocation("");
    setCalendarid(0);
+    setImportant(false);
+    setTimezone(timezoneList.browserTz);

    // Save to API in background
    dispatch(
@@ -254,46 +315,47 @@ function EventPopover({
        <TextField
          fullWidth
          label={!showMore ? "Title" : ""}
+          placeholder="Add title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          size="small"
          margin="dense"
        />
      </FieldWithLabel>
-      <FieldWithLabel label="Description" isExpanded={showMore}>
-        <TextField
-          fullWidth
-          label={!showMore ? "Description" : ""}
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          size="small"
-          margin="dense"
-          multiline
-          rows={2}
-        />
-      </FieldWithLabel>
-      <FieldWithLabel label="Calendar" isExpanded={showMore}>
-        <FormControl fullWidth margin="dense" size="small">
-          {!showMore && (
-            <InputLabel id="calendar-select-label">Calendar</InputLabel>
-          )}
-          <Select
-            labelId="calendar-select-label"
-            value={calendarid.toString()}
-            label={!showMore ? "Calendar" : ""}
-            onChange={(e: SelectChangeEvent) =>
-              setCalendarid(Number(e.target.value))
-            }
+
+      <FieldWithLabel label=" " isExpanded={showMore}>
+        <Box display="flex" gap={1} mb={1}>
+          <Button
+            startIcon={<DescriptionIcon />}
+            onClick={() => setShowDescription(true)}
+            size="small"
+            sx={{
+              textTransform: "none",
+              color: "text.secondary",
+              display: showDescription ? "none" : "flex",
+            }}
          >
-            {Object.keys(userPersonnalCalendars).map((calendar, index) => (
-              <MenuItem key={index} value={index}>
-                {userPersonnalCalendars[index].name}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
+            Add description
+          </Button>
+        </Box>
      </FieldWithLabel>

+      {showDescription && (
+        <FieldWithLabel label="Description" isExpanded={showMore}>
+          <TextField
+            fullWidth
+            label={!showMore ? "Description" : ""}
+            placeholder="Add description"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            size="small"
+            margin="dense"
+            multiline
+            rows={2}
+          />
+        </FieldWithLabel>
+      )}
+
      <FieldWithLabel label="Date & Time" isExpanded={showMore}>
        <Box display="flex" gap={2}>
          <Box flexGrow={1}>
@@ -355,7 +417,17 @@ function EventPopover({
        </Box>
      </FieldWithLabel>
      <FieldWithLabel label=" " isExpanded={showMore}>
-        <Box>
+        <Box display="flex" gap={2} alignItems="center">
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={important}
+                onChange={() => setImportant(!important)}
+              />
+            }
+            label="Mark as important"
+            sx={{ padding: "0 8px 0 0" }}
+          />
          <FormControlLabel
            control={
              <Checkbox
@@ -390,39 +462,99 @@ function EventPopover({
            label="All day"
            sx={{ padding: "0 8px 0 0" }}
          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={showRepeat}
+                onChange={() => {
+                  setShowRepeat(!showRepeat);
+                  if (showRepeat) {
+                    setRepetition({} as RepetitionObject);
+                  } else {
+                    setRepetition({
+                      freq: "daily",
+                      interval: 1,
+                    } as RepetitionObject);
+                  }
+                }}
+              />
+            }
+            label="Repeat"
+          />
+          <FormControl size="small" sx={{ width: 160 }}>
+            <Select
+              value={timezone}
+              onChange={(e: SelectChangeEvent) => setTimezone(e.target.value)}
+              displayEmpty
+            >
+              {timezoneList.zones.map((tz) => (
+                <MenuItem key={tz} value={tz}>
+                  ({timezoneList.getTimezoneOffset(tz)}) {tz.replace(/_/g, " ")}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
        </Box>
      </FieldWithLabel>
-      <FieldWithLabel label="Attendees" isExpanded={showMore}>
+      
+      {showRepeat && (
+        <FieldWithLabel label=" " isExpanded={showMore}>
+          <RepeatEvent
+            repetition={repetition}
+            eventStart={selectedRange?.start ?? new Date()}
+            setRepetition={setRepetition}
+          />
+        </FieldWithLabel>
+      )}
+
+      <FieldWithLabel label="Participants" isExpanded={showMore}>
        <AttendeeSelector attendees={attendees} setAttendees={setAttendees} />
      </FieldWithLabel>
      <FieldWithLabel label="Location" isExpanded={showMore}>
        <TextField
          fullWidth
          label={!showMore ? "Location" : ""}
+          placeholder="Add location"
          value={location}
          onChange={(e) => setLocation(e.target.value)}
          size="small"
          margin="dense"
        />
      </FieldWithLabel>
+      <FieldWithLabel label="Calendar" isExpanded={showMore}>
+        <FormControl fullWidth margin="dense" size="small">
+          {!showMore && (
+            <InputLabel id="calendar-select-label">Calendar</InputLabel>
+          )}
+          <Select
+            labelId="calendar-select-label"
+            value={calendarid.toString()}
+            label={!showMore ? "Calendar" : ""}
+            displayEmpty
+            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>
+      </FieldWithLabel>
+      
      {/* Extended options */}
      {showMore && (
        <>
-          <FieldWithLabel label="Repeat" isExpanded={showMore}>
-            <RepeatEvent
-              repetition={repetition}
-              eventStart={selectedRange?.start ?? new Date()}
-              setRepetition={setRepetition}
-            />
-          </FieldWithLabel>
-          <FieldWithLabel label="Alarm" isExpanded={showMore}>
+          <FieldWithLabel label="Notification" isExpanded={showMore}>
            <FormControl fullWidth margin="dense" size="small">
              <Select
-                labelId="alarm"
+                labelId="notification"
                value={alarm}
                onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
              >
-                <MenuItem value={""}>No Alarm</MenuItem>
+                <MenuItem value={""}>No Notification</MenuItem>
                <MenuItem value={"-PT1M"}>1 minute</MenuItem>
                <MenuItem value={"-PT5M"}>2 minutes</MenuItem>
                <MenuItem value={"-PT10M"}>10 minutes</MenuItem>
@@ -439,22 +571,7 @@ function EventPopover({
            </FormControl>
          </FieldWithLabel>

-          <FieldWithLabel label="Visibility" isExpanded={showMore}>
-            <FormControl fullWidth margin="dense" size="small">
-              <Select
-                labelId="Visibility"
-                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>
-          </FieldWithLabel>
-          <FieldWithLabel label="Show as" isExpanded={showMore}>
+          <FieldWithLabel label="Show me as" isExpanded={showMore}>
            <FormControl fullWidth margin="dense" size="small">
              <Select
                labelId="busy"
@@ -466,6 +583,28 @@ function EventPopover({
              </Select>
            </FormControl>
          </FieldWithLabel>
+
+          <FieldWithLabel label="Visible to" isExpanded={showMore}>
+            <ToggleButtonGroup
+              value={eventClass}
+              exclusive
+              onChange={(e, newValue) => {
+                if (newValue !== null) {
+                  setEventClass(newValue);
+                }
+              }}
+              size="small"
+            >
+              <ToggleButton value="PUBLIC" sx={{ width: '140px' }}>
+                <PublicIcon sx={{ mr: 1, fontSize: '16px' }} />
+                All
+              </ToggleButton>
+              <ToggleButton value="PRIVATE" sx={{ width: '140px' }}>
+                <LockIcon sx={{ mr: 1, fontSize: '16px' }} />
+                Participants
+              </ToggleButton>
+            </ToggleButtonGroup>
+          </FieldWithLabel>
        </>
      )}
    </ResponsiveDialog>