diff --git a/__test__/components/RepeatEvent.test.tsx b/__test__/components/RepeatEvent.test.tsx index 0a89775..a17608d 100644 --- a/__test__/components/RepeatEvent.test.tsx +++ b/__test__/components/RepeatEvent.test.tsx @@ -99,7 +99,7 @@ async function setupEventPopover( preloadedState ); act(() => { - fireEvent.change(screen.getByLabelText("Title"), { + fireEvent.change(screen.getByRole("textbox", { name: /title/i }), { target: { value: "Meeting" }, }); fireEvent.click(screen.getByLabelText("All day")); @@ -113,7 +113,10 @@ async function setupEventPopover( value: (overrides?.end ?? "2025-07-19T00:00:00.000Z").split("T")[0], }, }); - fireEvent.click(screen.getByText("Show More")); + const showMoreButton = screen.queryByText("Show More"); + if (showMoreButton) { + fireEvent.click(showMoreButton); + } }); const select = screen.getByLabelText(/repetition/i); userEvent.click(select); @@ -124,7 +127,8 @@ async function setupEventPopover( async function expectRRule(expected: any) { const spyAPi = jest.spyOn(apiUtils, "api"); - act(() => fireEvent.click(screen.getByText("Save"))); + const saveButton = screen.getByRole("button", { name: /save/i }); + act(() => fireEvent.click(saveButton)); await waitFor(() => { expect(spyAPi).toHaveBeenCalled(); @@ -214,7 +218,8 @@ describe("Repeat Event API calls", () => { const spy = jest .spyOn(eventThunks, "putEventAsync") .mockImplementation((payload) => () => Promise.resolve(payload) as any); - act(() => fireEvent.click(screen.getByText("Save"))); + const saveButton = screen.getByRole("button", { name: /save/i }); + act(() => fireEvent.click(saveButton)); await waitFor(() => expect(spy).toHaveBeenCalled()); const received = spy.mock.calls[0][0]; @@ -223,12 +228,14 @@ describe("Repeat Event API calls", () => { ); expect(received.newEvent.title).toBe("Meeting"); expect( - formatDateToYYYYMMDDTHHMMSS(received.newEvent.start).split("T")[0] - ).toBe("20250718"); - expect( - formatDateToYYYYMMDDTHHMMSS(received.newEvent.end || new Date()).split( + formatDateToYYYYMMDDTHHMMSS(new Date(received.newEvent.start)).split( "T" )[0] + ).toBe("20250718"); + expect( + formatDateToYYYYMMDDTHHMMSS( + new Date(received.newEvent.end || new Date()) + ).split("T")[0] ).toBe("20250719"); expect(received.newEvent.organizer).toEqual( preloadedState.user.organiserData diff --git a/__test__/components/ResponsiveDialog.test.tsx b/__test__/components/ResponsiveDialog.test.tsx new file mode 100644 index 0000000..a78fd4c --- /dev/null +++ b/__test__/components/ResponsiveDialog.test.tsx @@ -0,0 +1,298 @@ +import { fireEvent, render, screen } from "@testing-library/react"; +import React from "react"; +import { ResponsiveDialog } from "../../src/components/Dialog"; +import { Button, TextField } from "@mui/material"; + +describe("ResponsiveDialog", () => { + const mockOnClose = jest.fn(); + const mockOnExpandToggle = jest.fn(); + + beforeEach(() => { + mockOnClose.mockClear(); + mockOnExpandToggle.mockClear(); + }); + + it("renders in normal mode by default", () => { + render( + + + + ); + + expect(screen.getByText("Test Dialog")).toBeInTheDocument(); + expect(screen.getByLabelText(/name/i)).toBeInTheDocument(); + }); + + it("renders title in normal mode", () => { + render( + +
Content
+ + ); + + expect(screen.getByText("My Title")).toBeInTheDocument(); + expect(screen.queryByLabelText("show less")).not.toBeInTheDocument(); + }); + + it("renders back arrow in extended mode", () => { + render( + +
Content
+ + ); + + expect(screen.queryByText("My Title")).not.toBeInTheDocument(); + expect(screen.getByLabelText("show less")).toBeInTheDocument(); + }); + + it("calls onExpandToggle when back arrow is clicked", () => { + render( + +
Content
+ + ); + + const backButton = screen.getByLabelText("show less"); + fireEvent.click(backButton); + + expect(mockOnExpandToggle).toHaveBeenCalledTimes(1); + }); + + it("renders actions when provided", () => { + render( + Custom Action} + > +
Content
+ + ); + + expect(screen.getByText("Custom Action")).toBeInTheDocument(); + }); + + it("does not render actions when not provided", () => { + const { container } = render( + +
Content
+ + ); + + const dialogActions = container.querySelector(".MuiDialogActions-root"); + expect(dialogActions).not.toBeInTheDocument(); + }); + + it("calls onClose when backdrop is clicked", () => { + render( + +
Content
+ + ); + + const backdrop = document.querySelector(".MuiBackdrop-root"); + if (backdrop) { + fireEvent.click(backdrop); + } + + expect(mockOnClose).toHaveBeenCalled(); + }); + + it("applies custom normalMaxWidth", () => { + render( + +
Normal Width Content
+ + ); + + expect(screen.getByText("Normal Width Content")).toBeInTheDocument(); + }); + + it("wraps children in Stack component", () => { + render( + + + + + ); + + expect(screen.getByLabelText("Field 1")).toBeInTheDocument(); + expect(screen.getByLabelText("Field 2")).toBeInTheDocument(); + }); + + it("uses correct spacing in normal mode", () => { + render( + +
Normal Spacing Content
+ + ); + + expect(screen.getByText("Normal Spacing Content")).toBeInTheDocument(); + }); + + it("uses correct spacing in extended mode", () => { + render( + +
Extended Spacing Content
+ + ); + + expect(screen.getByText("Extended Spacing Content")).toBeInTheDocument(); + }); + + it("applies contentSx custom styles", () => { + render( + +
Custom Styled Content
+ + ); + + expect(screen.getByText("Custom Styled Content")).toBeInTheDocument(); + }); + + it("applies titleSx custom styles", () => { + const { container } = render( + +
Content
+ + ); + + const title = screen.getByText("Test"); + expect(title).toBeInTheDocument(); + }); + + it("shows dividers when dividers prop is true", () => { + render( + +
Content with Dividers
+ + ); + + expect(screen.getByText("Content with Dividers")).toBeInTheDocument(); + }); + + it("does not show back arrow when onExpandToggle is not provided", () => { + render( + +
Content
+ + ); + + expect(screen.queryByLabelText("show less")).not.toBeInTheDocument(); + expect(screen.getByText("Test Title")).toBeInTheDocument(); + }); + + it("accepts custom headerHeight", () => { + render( + +
Custom Header Content
+ + ); + + expect(screen.getByText("Custom Header Content")).toBeInTheDocument(); + }); + + it("renders with custom expandedContentMaxWidth", () => { + render( + +
Wide Content
+ + ); + + expect(screen.getByText("Wide Content")).toBeInTheDocument(); + }); + + it("does not render dialog content when open is false", () => { + render( + +
Test Content
+ + ); + + expect(screen.queryByText("Test Content")).not.toBeInTheDocument(); + }); + + it("renders correctly in extended mode", () => { + render( + +
Extended Content
+ + ); + + expect(screen.getByText("Extended Content")).toBeInTheDocument(); + expect(screen.getByLabelText("show less")).toBeInTheDocument(); + }); +}); diff --git a/__test__/features/Events/EventModal.test.tsx b/__test__/features/Events/EventModal.test.tsx index 8aff878..59eef8f 100644 --- a/__test__/features/Events/EventModal.test.tsx +++ b/__test__/features/Events/EventModal.test.tsx @@ -109,22 +109,35 @@ describe("EventPopover", () => { it("renders correctly with inputs and calendar options", () => { renderPopover(); + // Check dialog title expect(screen.getByText("Create Event")).toBeInTheDocument(); - expect(screen.getByLabelText("Calendar")).toBeInTheDocument(); - expect(screen.getByLabelText("Title")).toBeInTheDocument(); - expect(screen.getByLabelText("Start")).toBeInTheDocument(); - expect(screen.getByLabelText("End")).toBeInTheDocument(); - expect(screen.getByLabelText("Description")).toBeInTheDocument(); - expect(screen.getByLabelText("Location")).toBeInTheDocument(); + + // Check inputs exist by their roles + const titleInput = screen.getByRole("textbox", { name: /title/i }); + expect(titleInput).toBeInTheDocument(); + + const descriptionInput = screen.getByRole("textbox", { + name: /description/i, + }); + expect(descriptionInput).toBeInTheDocument(); + + const calendarSelect = screen.getByRole("combobox", { name: /calendar/i }); + expect(calendarSelect).toBeInTheDocument(); + + // Check button expect(screen.getByText("Show More")).toBeInTheDocument(); + + // Extended mode fireEvent.click(screen.getByText("Show More")); - expect(screen.getByLabelText("Repetition")).toBeInTheDocument(); - expect(screen.getByLabelText("Alarm")).toBeInTheDocument(); - expect(screen.getByLabelText("Visibility")).toBeInTheDocument(); - // Calendar options - const select = screen.getByLabelText("Calendar"); - fireEvent.mouseDown(select); - expect(screen.getAllByRole("option")).toHaveLength(2); + + // Back button appears + expect(screen.getByLabelText("show less")).toBeInTheDocument(); + + // Extended labels appear + expect(screen.getAllByText("Repeat")).toHaveLength(1); + expect(screen.getAllByText("Alarm")).toHaveLength(1); + expect(screen.getAllByText("Visibility")).toHaveLength(1); + expect(screen.getAllByText("Show as")).toHaveLength(1); }); it("fills start from selectedRange", () => { @@ -289,11 +302,13 @@ describe("EventPopover", () => { expect(receivedPayload.newEvent.title).toBe(newEvent.title); expect(receivedPayload.newEvent.description).toBe(newEvent.description); expect( - formatDateToYYYYMMDDTHHMMSS(receivedPayload.newEvent.start).split("T")[0] + formatDateToYYYYMMDDTHHMMSS( + new Date(receivedPayload.newEvent.start) + ).split("T")[0] ).toBe(formatDateToYYYYMMDDTHHMMSS(new Date(newEvent.start)).split("T")[0]); expect( formatDateToYYYYMMDDTHHMMSS( - receivedPayload.newEvent.end || new Date() + new Date(receivedPayload.newEvent.end || new Date()) ).split("T")[0] ).toBe(formatDateToYYYYMMDDTHHMMSS(new Date(newEvent.end)).split("T")[0]); expect(receivedPayload.newEvent.location).toBe(newEvent.location); diff --git a/src/components/Dialog/README.md b/src/components/Dialog/README.md new file mode 100644 index 0000000..df79a66 --- /dev/null +++ b/src/components/Dialog/README.md @@ -0,0 +1,229 @@ +# ResponsiveDialog Component + +A highly reusable dialog component that supports both normal and expanded (fullscreen) modes while preserving app header visibility. + +## Features + +- ✅ **Two Modes**: Normal popup (685px) and expanded fullscreen mode +- ✅ **Preserves Header**: Expanded mode doesn't cover app header (90px default) +- ✅ **Clean Expanded View**: No backdrop/shadow in expanded mode for seamless integration +- ✅ **Instant Transition**: No animation when expanding for immediate feedback +- ✅ **Back Navigation**: Expanded mode shows back arrow icon in header for easy collapse +- ✅ **MUI Stack Spacing**: Uses MUI Stack component with configurable spacing prop (2=16px normal, 3=24px expanded) +- ✅ **Fully Customizable**: Override styles with `sx`, `contentSx`, `titleSx` props +- ✅ **Container Support**: Content container with configurable max-width +- ✅ **Type Safe**: Full TypeScript support +- ✅ **No Custom CSS**: Uses MUI `sx` prop pattern + +## Basic Usage + +```tsx +import { ResponsiveDialog } from "../../components/Dialog"; +import { useState } from "react"; + +function MyComponent() { + const [open, setOpen] = useState(false); + const [showMore, setShowMore] = useState(false); + + const actions = ( + <> + {!showMore && ( + + )} + + + ); + + return ( + setOpen(false)} + title="My Dialog" + isExpanded={showMore} + onExpandToggle={() => setShowMore(!showMore)} + actions={actions} + > + + + {/* Wrapped in Stack with spacing={2} (normal) or spacing={3} (expanded) */} + + ); +} +``` + +## Props + +| Prop | Type | Default | Description | +| ------------------------- | --------------------- | --------- | ----------------------------------------------------------- | +| `open` | `boolean` | required | Whether dialog is open | +| `onClose` | `() => void` | required | Close handler | +| `title` | `string \| ReactNode` | required | Dialog title (replaced by back icon when expanded) | +| `children` | `ReactNode` | required | Dialog content (wrapped in MUI Stack) | +| `actions` | `ReactNode` | - | Action buttons | +| `isExpanded` | `boolean` | `false` | Toggle fullscreen mode | +| `onExpandToggle` | `() => void` | - | Handler for back button click when expanded | +| `normalMaxWidth` | `string` | `"685px"` | Max width in normal mode | +| `expandedContentMaxWidth` | `string` | `"990px"` | Content container max-width in expanded mode | +| `headerHeight` | `string` | `"90px"` | App header height to preserve | +| `normalSpacing` | `number` | `2` | Stack spacing in normal mode (MUI spacing units: 1 = 8px) | +| `expandedSpacing` | `number` | `3` | Stack spacing in expanded mode (MUI spacing units: 1 = 8px) | +| `contentSx` | `SxProps` | - | Custom styles for DialogContent | +| `titleSx` | `SxProps` | - | Custom styles for DialogTitle | +| `dialogContentProps` | `DialogContentProps` | - | Additional DialogContent props | +| `dialogTitleProps` | `DialogTitleProps` | - | Additional DialogTitle props | +| `dividers` | `boolean` | `false` | Show dividers between sections | + +## Advanced Examples + +### Custom Container Styles + +```tsx + + + +``` + +### With Dividers + +```tsx +Save} +> + + +``` + +### Different Sizes + +```tsx + + + +``` + +### Custom Spacing + +```tsx + + + + {/* MUI spacing units: 1=8px, 2=16px, 3=24px, 4=32px */} + +``` + +### Custom Header Height + +For apps with different header heights: + +```tsx + + + +``` + +## Layout Behavior + +### Normal Mode (`isExpanded={false}`) + +- Dialog: max-width = `normalMaxWidth` (default 685px) +- Content: 100% width +- Height: auto (fits content) +- Position: centered with 32px margin +- Children spacing: `normalSpacing={2}` (16px via MUI Stack component) + +### Expanded Mode (`isExpanded={true}`) + +- Dialog: full width, height = `calc(100vh - headerHeight)` +- Content: max-width = `expandedContentMaxWidth` (default 990px), centered +- Position: top = `headerHeight` (preserves header visibility - default 90px) +- Backdrop: opacity = 0 (seamless integration with page) +- Shadow: removed (no elevation in expanded mode) +- Transition: disabled (instant expand/collapse for better UX) +- Title: replaced by back arrow IconButton (calls `onExpandToggle`) +- Children spacing: `expandedSpacing={3}` (24px via MUI Stack component) +- Actions (MuiBox): max-width = `expandedContentMaxWidth` (990px), centered container with buttons right-aligned + - padding: 0 12px + - width: 100% + - justifyContent: flex-end + +## Style Merging + +All `sx` props are **merged** with base styles, not overridden: + +```tsx +// Base styles are preserved, your styles are added + +``` + +## TypeScript Support + +Full type inference and validation: + +```tsx +import { ResponsiveDialog } from "../../components/Dialog"; + +// All props are type-checked + +``` + +## Best Practices + +1. **Use `isExpanded` for Show More/Less**: Toggle between modes for better UX +2. **Provide `onExpandToggle` handler**: Required for back button functionality in expanded mode +3. **Hide expand button in actions when expanded**: Back arrow in header provides collapse action +4. **Keep `normalMaxWidth` reasonable**: 685px works well for forms +5. **Center content in expanded mode**: Default 990px provides good reading width +6. **Preserve header**: Default 90px - adjust via `headerHeight` prop if needed +7. **MUI Stack handles spacing**: Children wrapped in Stack with configurable spacing prop - override with `normalSpacing`/`expandedSpacing` if needed +8. **Seamless expanded mode**: No backdrop/shadow/transition creates clean integration with page +9. **Instant expand**: No animation when expanding provides immediate feedback +10. **Customize with `sx` props**: Avoid creating custom CSS files + +## See Also + +- `EventModal.tsx` - Real-world example usage +- MUI Dialog documentation: https://mui.com/material-ui/react-dialog/ diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx new file mode 100644 index 0000000..21bcd2d --- /dev/null +++ b/src/components/Dialog/ResponsiveDialog.tsx @@ -0,0 +1,170 @@ +import { + Dialog, + DialogActions, + DialogContent, + DialogContentProps, + DialogTitle, + DialogTitleProps, + DialogProps, + IconButton, + Stack, + SxProps, + Theme, +} from "@mui/material"; +import ArrowBackIcon from "@mui/icons-material/ArrowBack"; +import React, { ReactNode } from "react"; + +/** + * ResponsiveDialog - A reusable dialog component that can switch between normal and expanded modes + * + * Features: + * - Normal mode: Dialog with customizable max-width (default 685px) + * - Expanded mode: Full height dialog (excluding app header) with centered content container + * - Fully customizable with sx props for Dialog, DialogTitle, and DialogContent + * - Preserves app header visibility in expanded mode + * + * @example + * ```tsx + * Save} + * contentSx={{ padding: 3 }} + * > + * + * + * ``` + */ +interface ResponsiveDialogProps + extends Omit { + /** Whether the dialog is open */ + open: boolean; + /** Callback fired when the dialog should be closed */ + onClose: () => void; + /** Dialog title - can be string or custom ReactNode */ + title: string | ReactNode; + /** Dialog content - form fields, text, etc. */ + children: ReactNode; + /** Optional actions rendered in DialogActions (buttons, etc.) */ + actions?: ReactNode; + /** Toggle between normal and expanded (fullscreen) mode */ + isExpanded?: boolean; + /** Callback when expand/collapse button is clicked (required if using isExpanded) */ + onExpandToggle?: () => void; + /** Max width in normal mode (default: "685px") */ + normalMaxWidth?: string; + /** Max width of content container in expanded mode (default: "990px") */ + expandedContentMaxWidth?: string; + /** Height of app header to preserve visibility (default: "90px") */ + headerHeight?: string; + /** Spacing between children in normal mode (default: 2 = 16px) */ + normalSpacing?: number; + /** Spacing between children in expanded mode (default: 3 = 24px) */ + expandedSpacing?: number; + /** Custom styles for DialogContent - merged with base styles */ + contentSx?: SxProps; + /** Custom styles for DialogTitle */ + titleSx?: SxProps; + /** Additional props for DialogContent (excluding sx) */ + dialogContentProps?: Omit; + /** Additional props for DialogTitle (excluding sx) */ + dialogTitleProps?: Omit; + /** Whether to display dividers between title/content/actions */ + dividers?: boolean; +} + +function ResponsiveDialog({ + open, + onClose, + title, + children, + actions, + isExpanded = false, + onExpandToggle, + normalMaxWidth = "685px", + expandedContentMaxWidth = "990px", + headerHeight = "90px", + normalSpacing = 2, + expandedSpacing = 3, + contentSx, + titleSx, + dialogContentProps, + dialogTitleProps, + dividers = false, + sx, + ...otherDialogProps +}: ResponsiveDialogProps) { + const baseSx: SxProps = { + "& .MuiBackdrop-root": { + opacity: isExpanded ? "0 !important" : undefined, + transition: isExpanded ? "none !important" : undefined, + }, + "& .MuiDialog-paper": { + maxWidth: isExpanded ? "100%" : normalMaxWidth, + width: "100%", + height: isExpanded ? `calc(100vh - ${headerHeight})` : "auto", + margin: isExpanded ? `${headerHeight} 0 0 0` : "32px", + maxHeight: isExpanded + ? `calc(100vh - ${headerHeight})` + : `calc(100vh - 90px)`, + boxShadow: isExpanded ? "none !important" : undefined, + transition: isExpanded ? "none !important" : undefined, + }, + "& .MuiDialogActions-root .MuiBox-root": { + maxWidth: isExpanded ? expandedContentMaxWidth : undefined, + margin: isExpanded ? "0 auto" : undefined, + padding: isExpanded ? "0 12px" : undefined, + width: isExpanded ? "100%" : undefined, + justifyContent: isExpanded ? "flex-end" : undefined, + }, + }; + + const baseContentSx: SxProps = { + maxWidth: isExpanded ? expandedContentMaxWidth : "100%", + margin: isExpanded ? "0 auto" : "0", + width: "100%", + }; + + const currentSpacing = isExpanded ? expandedSpacing : normalSpacing; + + return ( + + + {isExpanded && onExpandToggle ? ( + + + + ) : ( + title + )} + + + {children} + + {actions && {actions}} + + ); +} + +export default ResponsiveDialog; diff --git a/src/components/Dialog/index.ts b/src/components/Dialog/index.ts new file mode 100644 index 0000000..31a5b06 --- /dev/null +++ b/src/components/Dialog/index.ts @@ -0,0 +1 @@ +export { default as ResponsiveDialog } from "./ResponsiveDialog"; diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx index b3c5bf9..9ecf1a6 100644 --- a/src/features/Events/EventModal.tsx +++ b/src/features/Events/EventModal.tsx @@ -2,14 +2,11 @@ import { CalendarApi, DateSelectArg } from "@fullcalendar/core"; import { Box, Button, - Card, - CardActions, - CardContent, - CardHeader, + Checkbox, FormControl, + FormControlLabel, InputLabel, MenuItem, - Popover, Select, SelectChangeEvent, TextField, @@ -18,7 +15,7 @@ import { import React, { useEffect, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import AttendeeSelector from "../../components/Attendees/AttendeeSearch"; -import { TIMEZONES } from "../../utils/timezone-data"; +import { ResponsiveDialog } from "../../components/Dialog"; import { putEventAsync } from "../Calendars/CalendarSlice"; import { Calendars } from "../Calendars/CalendarTypes"; import { userAttendee } from "../User/userDataTypes"; @@ -26,6 +23,58 @@ import { CalendarEvent, RepetitionObject } from "./EventsTypes"; import { createSelector } from "@reduxjs/toolkit"; import RepeatEvent from "../../components/Event/EventRepeat"; +// Helper component for field with label +const FieldWithLabel = React.memo( + ({ + label, + isExpanded, + children, + }: { + label: string; + isExpanded: boolean; + children: React.ReactNode; + }) => { + if (!isExpanded) { + // Normal mode: label on top + return ( + + + {label} + + {children} + + ); + } + + // Extended mode: label on left + return ( + + + {label} + + {children} + + ); + } +); + +FieldWithLabel.displayName = "FieldWithLabel"; + function EventPopover({ anchorEl, open, @@ -63,7 +112,6 @@ function EventPopover({ const userPersonnalCalendars: Calendars[] = useAppSelector( selectPersonnalCalendars ); - const timezones = TIMEZONES.aliases; const [showMore, setShowMore] = useState(false); const [title, setTitle] = useState(event?.title ?? ""); @@ -90,9 +138,7 @@ function EventPopover({ const [eventClass, setEventClass] = useState(event?.class ?? "PUBLIC"); const [busy, setBusy] = useState(event?.transp ?? "OPAQUE"); - const [timezone, setTimezone] = useState( - Intl.DateTimeFormat().resolvedOptions().timeZone - ); + const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone; useEffect(() => { if (selectedRange) { @@ -111,7 +157,9 @@ function EventPopover({ }, [event, organizer?.cal_address]); const handleClose = () => { - onClose({}, "backdropClick"); // Reset + onClose({}, "backdropClick"); + // Reset state + setShowMore(false); setTitle(""); setDescription(""); setAttendees([]); @@ -126,7 +174,7 @@ function EventPopover({ calId: userPersonnalCalendars[calendarid].id, title, URL: `/calendars/${userPersonnalCalendars[calendarid].id}/${newEventUID}.ics`, - start: new Date(start), + start: new Date(start).toISOString(), allday, uid: newEventUID, description, @@ -150,244 +198,277 @@ function EventPopover({ alarm: { trigger: alarm, action: "EMAIL" }, }; if (end) { - newEvent.end = new Date(end); + newEvent.end = new Date(end).toISOString(); } if (attendees.length > 0) { newEvent.attendee = newEvent.attendee.concat(attendees); } - await dispatch( - putEventAsync({ - cal: userPersonnalCalendars[calendarid], - newEvent, - }) - ); + // Close popup immediately onClose({}, "backdropClick"); - // Reset + // Reset state + setShowMore(false); setTitle(""); setDescription(""); setAttendees([]); setLocation(""); setCalendarid(0); + + // Save to API in background + dispatch( + putEventAsync({ + cal: userPersonnalCalendars[calendarid], + newEvent, + }) + ); }; + const dialogActions = ( + + {!showMore && ( + + )} + + + + + + ); + return ( - setShowMore(!showMore)} + actions={dialogActions} > - - - - setTitle(e.target.value)} - size="small" - margin="dense" - /> - + + setTitle(e.target.value)} + size="small" + margin="dense" + /> + + + setDescription(e.target.value)} + size="small" + margin="dense" + multiline + rows={2} + /> + + + + {!showMore && ( Calendar - - - - { - 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 }} - /> - { - 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 }} - /> - + + + + + {showMore && ( + + Start + + )} + { + const newStart = e.target.value; + setStart(newStart); const newRange = { ...selectedRange, - startStr: allday ? start.split("T")[0] : start, - endStr: allday - ? endDate.toISOString().split("T")[0] - : endDate.toISOString(), - start: new Date(allday ? start.split("T")[0] : start), - end: new Date( - allday - ? endDate.toISOString().split("T")[0] - : endDate.toISOString() - ), + start: new Date(newStart), + startStr: newStart, allDay: allday, }; setSelectedRange(newRange); + calendarRef.current?.select(newRange); }} + size="small" + margin="dense" + InputLabelProps={{ shrink: true }} /> - All day - - setDescription(e.target.value)} - size="small" - margin="dense" - multiline - rows={2} - /> - setLocation(e.target.value)} - size="small" - margin="dense" - /> - - {/* Extended options */} - {showMore && ( - <> - - - Alarm - - - - - Visibility - - - - is Busy - - - - )} - - - - - - - - - - + + {showMore && ( + + End + + )} + { + 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 }} + /> + + + + + + { + const endDate = new Date(end); + const startDate = new Date(start); + setAllDay(!allday); + if (endDate.getDate() === startDate.getDate()) { + endDate.setDate(startDate.getDate() + 1); + setEnd(formatLocalDateTime(endDate)); + } + + const newRange = { + ...selectedRange, + startStr: allday ? start.split("T")[0] : start, + endStr: allday + ? endDate.toISOString().split("T")[0] + : endDate.toISOString(), + start: new Date(allday ? start.split("T")[0] : start), + end: new Date( + allday + ? endDate.toISOString().split("T")[0] + : endDate.toISOString() + ), + allDay: allday, + }; + setSelectedRange(newRange); + }} + /> + } + label="All day" + sx={{ padding: "0 8px 0 0" }} + /> + + + + + + + setLocation(e.target.value)} + size="small" + margin="dense" + /> + + {/* Extended options */} + {showMore && ( + <> + + + + + + + + + + + + + + + + + + + + + )} + ); }