Co-authored-by: lethemanh <lethemanh@lethemanhs-MacBook-Pro.local>
This commit is contained in:
lethemanh
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
|||||||
|
import { Calendar } from '@/features/Calendars/CalendarTypes'
|
||||||
|
import { RepetitionObject } from '@/features/Events/EventsTypes'
|
||||||
|
import { userAttendee } from '@/features/User/models/attendee'
|
||||||
|
import { Resource } from '../Attendees/ResourceSearch'
|
||||||
|
|
||||||
|
export interface EventFormFieldsProps {
|
||||||
|
// Form state
|
||||||
|
title: string
|
||||||
|
setTitle: (title: string) => void
|
||||||
|
description: string
|
||||||
|
setDescription: (description: string) => void
|
||||||
|
location: string
|
||||||
|
setLocation: (location: string) => void
|
||||||
|
start: string
|
||||||
|
setStart: (start: string) => void
|
||||||
|
end: string
|
||||||
|
setEnd: (end: string) => void
|
||||||
|
allday: boolean
|
||||||
|
setAllDay: (allday: boolean) => void
|
||||||
|
repetition: RepetitionObject
|
||||||
|
setRepetition: (repetition: RepetitionObject) => void
|
||||||
|
typeOfAction?: 'solo' | 'all'
|
||||||
|
attendees: userAttendee[]
|
||||||
|
setAttendees: (attendees: userAttendee[]) => void
|
||||||
|
alarm: string
|
||||||
|
setAlarm: (alarm: string) => void
|
||||||
|
busy: string
|
||||||
|
setBusy: (busy: string) => void
|
||||||
|
eventClass: 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL'
|
||||||
|
setEventClass: (eventClass: 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL') => void
|
||||||
|
timezone: string
|
||||||
|
setTimezone: (timezone: string) => void
|
||||||
|
calendarid: string
|
||||||
|
setCalendarid: (calendarid: string) => void
|
||||||
|
hasVideoConference: boolean
|
||||||
|
setHasVideoConference: (hasVideoConference: boolean) => void
|
||||||
|
meetingLink: string | null
|
||||||
|
setMeetingLink: (meetingLink: string | null) => void
|
||||||
|
selectedResources: Resource[]
|
||||||
|
setSelectedResources: (resources: Resource[]) => void
|
||||||
|
|
||||||
|
// UI state
|
||||||
|
showMore: boolean
|
||||||
|
showDescription: boolean
|
||||||
|
setShowDescription: (showDescription: boolean) => void
|
||||||
|
showRepeat: boolean
|
||||||
|
setShowRepeat: (showRepeat: boolean) => void
|
||||||
|
isOpen?: boolean
|
||||||
|
|
||||||
|
// Data
|
||||||
|
userPersonalCalendars: Calendar[]
|
||||||
|
timezoneList: {
|
||||||
|
zones: string[]
|
||||||
|
browserTz: string
|
||||||
|
getTimezoneOffset: (tzName: string, date: Date) => string
|
||||||
|
}
|
||||||
|
eventId?: string | null
|
||||||
|
|
||||||
|
// Event handlers
|
||||||
|
onStartChange?: (newStart: string) => void
|
||||||
|
onEndChange?: (newEnd: string) => void
|
||||||
|
onAllDayChange?: (
|
||||||
|
newAllDay: boolean,
|
||||||
|
newStart: string,
|
||||||
|
newEnd: string
|
||||||
|
) => void
|
||||||
|
onCalendarChange?: (newCalendarId: string) => void
|
||||||
|
|
||||||
|
// Validation
|
||||||
|
onValidationChange?: (isValid: boolean) => void
|
||||||
|
showValidationErrors?: boolean
|
||||||
|
onHasEndDateChangedChange?: (has: boolean) => void
|
||||||
|
}
|
||||||
@@ -0,0 +1,379 @@
|
|||||||
|
import { RepetitionObject } from '@/features/Events/EventsTypes'
|
||||||
|
import { getTimezoneOffset } from '@/utils/timezone'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Button,
|
||||||
|
Checkbox,
|
||||||
|
FormControlLabel,
|
||||||
|
Typography
|
||||||
|
} from '@linagora/twake-mui'
|
||||||
|
import ArrowDropDown from '@mui/icons-material/ArrowDropDown'
|
||||||
|
import React, { useCallback, useState } from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
|
||||||
|
import { DateTimeFields } from './DateTimeFields'
|
||||||
|
import { FieldWithLabel } from '../FieldWithLabel'
|
||||||
|
import { useAllDayToggle } from '../../hooks/useAllDayToggle'
|
||||||
|
import { combineDateTime } from '../../utils/dateTimeHelpers'
|
||||||
|
import { validateEventForm } from '../../utils/formValidation'
|
||||||
|
import type {
|
||||||
|
EventDateTimeFieldProps,
|
||||||
|
TimezoneListResult
|
||||||
|
} from '../../fields/DateTimeField.types'
|
||||||
|
import { TimezoneAutocomplete } from '@/components/Timezone/TimezoneAutocomplete'
|
||||||
|
import { SmallTimezoneSelector } from '@/components/Timezone/SmallTimeZoneSelector'
|
||||||
|
import { DateTimeRepeatPanel } from './DateTimeSubPanels'
|
||||||
|
|
||||||
|
interface DateTimeControlsRowProps {
|
||||||
|
allday: boolean
|
||||||
|
handleAllDayToggle: () => void
|
||||||
|
showRepeat: boolean
|
||||||
|
setShowRepeat: (value: boolean) => void
|
||||||
|
typeOfAction?: 'solo' | 'all'
|
||||||
|
repetition: RepetitionObject
|
||||||
|
setRepetition: (value: RepetitionObject) => void
|
||||||
|
start: string
|
||||||
|
timezone: string
|
||||||
|
setTimezone: (value: string) => void
|
||||||
|
timezoneList: TimezoneListResult
|
||||||
|
showMore: boolean
|
||||||
|
offset: string
|
||||||
|
tzLabel: string | undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
const DateTimeControlsRow: React.FC<DateTimeControlsRowProps> = ({
|
||||||
|
allday,
|
||||||
|
handleAllDayToggle,
|
||||||
|
showRepeat,
|
||||||
|
setShowRepeat,
|
||||||
|
typeOfAction,
|
||||||
|
repetition,
|
||||||
|
setRepetition,
|
||||||
|
start,
|
||||||
|
timezone,
|
||||||
|
setTimezone,
|
||||||
|
timezoneList,
|
||||||
|
showMore,
|
||||||
|
offset,
|
||||||
|
tzLabel
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const { isTooSmall: isMobile } = useScreenSizeDetection()
|
||||||
|
const [timezoneDrawerOpen, setTimezoneDrawerOpen] = useState(false)
|
||||||
|
|
||||||
|
const handleRepeatToggle = (): void => {
|
||||||
|
const newShowRepeat = !showRepeat
|
||||||
|
setShowRepeat(newShowRepeat)
|
||||||
|
if (newShowRepeat) {
|
||||||
|
const days = ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU']
|
||||||
|
const eventStartDate = new Date(start)
|
||||||
|
const jsDay = eventStartDate.getDay()
|
||||||
|
const icsDay = days[(jsDay + 6) % 7]
|
||||||
|
setRepetition({
|
||||||
|
freq: 'weekly',
|
||||||
|
interval: 1,
|
||||||
|
occurrences: 0,
|
||||||
|
endDate: '',
|
||||||
|
byday: [icsDay]
|
||||||
|
} as RepetitionObject)
|
||||||
|
} else {
|
||||||
|
setRepetition({
|
||||||
|
freq: '',
|
||||||
|
interval: 1,
|
||||||
|
occurrences: 0,
|
||||||
|
endDate: '',
|
||||||
|
byday: null
|
||||||
|
} as RepetitionObject)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel label=" " isExpanded={showMore && !isMobile}>
|
||||||
|
<Box
|
||||||
|
display="flex"
|
||||||
|
gap={2}
|
||||||
|
alignItems={isMobile ? 'start' : 'center'}
|
||||||
|
flexDirection={isMobile ? 'column' : 'row'}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox checked={allday} onChange={handleAllDayToggle} />
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<Typography variant="h6">{t('event.form.allDay')}</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<FormControlLabel
|
||||||
|
control={
|
||||||
|
<Checkbox
|
||||||
|
checked={
|
||||||
|
showRepeat || (typeOfAction === 'solo' && !!repetition?.freq)
|
||||||
|
}
|
||||||
|
disabled={typeOfAction === 'solo'}
|
||||||
|
onChange={handleRepeatToggle}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
label={
|
||||||
|
<Typography variant="h6">{t('event.form.repeat')}</Typography>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
{/* Timezone selector */}
|
||||||
|
{isMobile ? (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
variant="text"
|
||||||
|
size="small"
|
||||||
|
onClick={() => setTimezoneDrawerOpen(true)}
|
||||||
|
sx={{ textTransform: 'none', px: 0, color: 'text.secondary' }}
|
||||||
|
>
|
||||||
|
<Typography variant="h6">
|
||||||
|
({offset}) {tzLabel}
|
||||||
|
</Typography>
|
||||||
|
<ArrowDropDown />
|
||||||
|
</Button>
|
||||||
|
<SmallTimezoneSelector
|
||||||
|
open={timezoneDrawerOpen}
|
||||||
|
onClose={() => setTimezoneDrawerOpen(false)}
|
||||||
|
value={timezone}
|
||||||
|
onChange={tz => {
|
||||||
|
setTimezone(tz)
|
||||||
|
setTimezoneDrawerOpen(false)
|
||||||
|
}}
|
||||||
|
referenceDate={new Date(start)}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<TimezoneAutocomplete
|
||||||
|
value={timezone}
|
||||||
|
onChange={setTimezone}
|
||||||
|
zones={timezoneList.zones}
|
||||||
|
getTimezoneOffset={(tzName: string) =>
|
||||||
|
timezoneList.getTimezoneOffset(tzName, new Date(start))
|
||||||
|
}
|
||||||
|
showIcon={false}
|
||||||
|
width={220}
|
||||||
|
size="small"
|
||||||
|
placeholder={t('event.form.timezonePlaceholder')}
|
||||||
|
hideBorder
|
||||||
|
inputPadding="8px 65px 8px 0px"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DateTimeExpanded: React.FC<
|
||||||
|
Pick<
|
||||||
|
EventDateTimeFieldProps,
|
||||||
|
| 'start'
|
||||||
|
| 'setStart'
|
||||||
|
| 'end'
|
||||||
|
| 'setEnd'
|
||||||
|
| 'allday'
|
||||||
|
| 'setAllDay'
|
||||||
|
| 'timezone'
|
||||||
|
| 'setTimezone'
|
||||||
|
| 'repetition'
|
||||||
|
| 'setRepetition'
|
||||||
|
| 'showRepeat'
|
||||||
|
| 'setShowRepeat'
|
||||||
|
| 'showMore'
|
||||||
|
| 'showValidationErrors'
|
||||||
|
| 'timezoneList'
|
||||||
|
| 'typeOfAction'
|
||||||
|
| 'onStartChange'
|
||||||
|
| 'onEndChange'
|
||||||
|
| 'onAllDayChange'
|
||||||
|
> & {
|
||||||
|
startDate: string
|
||||||
|
startTime: string
|
||||||
|
endDate: string
|
||||||
|
endTime: string
|
||||||
|
hasEndDateChanged: boolean
|
||||||
|
setStartTime: (time: string) => void
|
||||||
|
setEndTime: (time: string) => void
|
||||||
|
setStartDate: (date: string) => void
|
||||||
|
setEndDate: (date: string) => void
|
||||||
|
setHasEndDateChanged: (isEndDateChanged: boolean) => void
|
||||||
|
}
|
||||||
|
> = ({
|
||||||
|
start,
|
||||||
|
setStart,
|
||||||
|
end,
|
||||||
|
setEnd,
|
||||||
|
allday,
|
||||||
|
setAllDay,
|
||||||
|
timezone,
|
||||||
|
setTimezone,
|
||||||
|
repetition,
|
||||||
|
setRepetition,
|
||||||
|
showRepeat,
|
||||||
|
setShowRepeat,
|
||||||
|
showMore,
|
||||||
|
hasEndDateChanged,
|
||||||
|
setHasEndDateChanged,
|
||||||
|
showValidationErrors,
|
||||||
|
timezoneList,
|
||||||
|
typeOfAction,
|
||||||
|
onStartChange,
|
||||||
|
onEndChange,
|
||||||
|
onAllDayChange,
|
||||||
|
startDate,
|
||||||
|
startTime,
|
||||||
|
endDate,
|
||||||
|
endTime,
|
||||||
|
setStartTime,
|
||||||
|
setEndTime,
|
||||||
|
setStartDate,
|
||||||
|
setEndDate
|
||||||
|
}) => {
|
||||||
|
const { handleAllDayToggle } = useAllDayToggle({
|
||||||
|
allday,
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
startDate,
|
||||||
|
startTime,
|
||||||
|
endDate,
|
||||||
|
endTime,
|
||||||
|
setStartTime,
|
||||||
|
setEndTime,
|
||||||
|
setStart,
|
||||||
|
setEnd,
|
||||||
|
setAllDay,
|
||||||
|
onAllDayChange
|
||||||
|
})
|
||||||
|
|
||||||
|
const validation = validateEventForm({
|
||||||
|
startDate,
|
||||||
|
startTime,
|
||||||
|
endDate,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
showValidationErrors,
|
||||||
|
hasEndDateChanged,
|
||||||
|
showMore
|
||||||
|
})
|
||||||
|
|
||||||
|
const isMultiDayRange = startDate !== endDate
|
||||||
|
const endDateExplicitlySet = hasEndDateChanged && isMultiDayRange
|
||||||
|
const endDateImplicitlyVisible = !allday && isMultiDayRange
|
||||||
|
const showEndDate =
|
||||||
|
showMore || allday || endDateExplicitlySet || endDateImplicitlyVisible
|
||||||
|
|
||||||
|
const offset = getTimezoneOffset(
|
||||||
|
timezone ? timezone : timezoneList.browserTz,
|
||||||
|
new Date(start)
|
||||||
|
)
|
||||||
|
const tzLabel = timezone
|
||||||
|
? timezone.split('/').pop()?.replace(/_/g, ' ')
|
||||||
|
: timezoneList.browserTz
|
||||||
|
|
||||||
|
const repeatIsActive =
|
||||||
|
showRepeat || (typeOfAction === 'solo' && Boolean(repetition?.freq))
|
||||||
|
|
||||||
|
const handleStartDateChange = useCallback(
|
||||||
|
(newDate: string, newTime?: string) => {
|
||||||
|
setStartDate(newDate)
|
||||||
|
const newStart = combineDateTime(newDate, newTime ?? startTime)
|
||||||
|
if (onStartChange) {
|
||||||
|
onStartChange(newStart)
|
||||||
|
} else {
|
||||||
|
setStart(newStart)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setStartDate, startTime, onStartChange, setStart]
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleStartTimeChange = useCallback(
|
||||||
|
(newTime: string, newDate?: string) => {
|
||||||
|
setStartTime(newTime)
|
||||||
|
const newStart = combineDateTime(newDate ?? startDate, newTime)
|
||||||
|
if (onStartChange) {
|
||||||
|
onStartChange(newStart)
|
||||||
|
} else {
|
||||||
|
setStart(newStart)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setStartTime, startDate, onStartChange, setStart]
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleEndDateChange = useCallback(
|
||||||
|
(newDate: string, newTime?: string) => {
|
||||||
|
setEndDate(newDate)
|
||||||
|
if (showMore) setHasEndDateChanged(true)
|
||||||
|
const newEnd = combineDateTime(newDate, newTime ?? endTime)
|
||||||
|
if (onEndChange) {
|
||||||
|
onEndChange(newEnd)
|
||||||
|
} else {
|
||||||
|
setEnd(newEnd)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setEndDate, showMore, setHasEndDateChanged, endTime, onEndChange, setEnd]
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleEndTimeChange = useCallback(
|
||||||
|
(newTime: string, newDate?: string) => {
|
||||||
|
setEndTime(newTime)
|
||||||
|
const newEnd = combineDateTime(newDate ?? endDate, newTime)
|
||||||
|
if (onEndChange) {
|
||||||
|
onEndChange(newEnd)
|
||||||
|
} else {
|
||||||
|
setEnd(newEnd)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[endDate, onEndChange, setEnd, setEndTime]
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<DateTimeFields
|
||||||
|
startDate={startDate}
|
||||||
|
startTime={startTime}
|
||||||
|
endDate={endDate}
|
||||||
|
endTime={endTime}
|
||||||
|
allday={allday}
|
||||||
|
showMore={showMore}
|
||||||
|
hasEndDateChanged={hasEndDateChanged}
|
||||||
|
validation={validation}
|
||||||
|
onStartDateChange={handleStartDateChange}
|
||||||
|
onStartTimeChange={handleStartTimeChange}
|
||||||
|
onEndDateChange={handleEndDateChange}
|
||||||
|
onEndTimeChange={handleEndTimeChange}
|
||||||
|
showEndDate={showEndDate}
|
||||||
|
onToggleEndDate={() => {}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* All-day, Repeat checkboxes + Timezone selector row */}
|
||||||
|
<DateTimeControlsRow
|
||||||
|
allday={allday}
|
||||||
|
handleAllDayToggle={handleAllDayToggle}
|
||||||
|
showRepeat={showRepeat}
|
||||||
|
setShowRepeat={setShowRepeat}
|
||||||
|
typeOfAction={typeOfAction}
|
||||||
|
repetition={repetition}
|
||||||
|
setRepetition={setRepetition}
|
||||||
|
start={start}
|
||||||
|
timezone={timezone}
|
||||||
|
setTimezone={setTimezone}
|
||||||
|
timezoneList={timezoneList}
|
||||||
|
showMore={showMore}
|
||||||
|
offset={offset}
|
||||||
|
tzLabel={tzLabel}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{repeatIsActive && (
|
||||||
|
<DateTimeRepeatPanel
|
||||||
|
repetition={repetition}
|
||||||
|
setRepetition={setRepetition}
|
||||||
|
start={start}
|
||||||
|
typeOfAction={typeOfAction}
|
||||||
|
showMore={showMore}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import { RepetitionObject } from '@/features/Events/EventsTypes'
|
||||||
|
import React from 'react'
|
||||||
|
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
|
||||||
|
import { DateTimeSummary } from '../DateTimeSummary'
|
||||||
|
import { FieldWithLabel } from '../FieldWithLabel'
|
||||||
|
import RepeatEvent from '../../EventRepeat'
|
||||||
|
|
||||||
|
interface DateTimeSummarySectionProps {
|
||||||
|
startDate: string
|
||||||
|
startTime: string
|
||||||
|
endDate: string
|
||||||
|
endTime: string
|
||||||
|
allday: boolean
|
||||||
|
timezone: string
|
||||||
|
repetition: RepetitionObject
|
||||||
|
hasEndDateChanged: boolean
|
||||||
|
onExpand: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DateTimeSummarySection: React.FC<DateTimeSummarySectionProps> = ({
|
||||||
|
startDate,
|
||||||
|
startTime,
|
||||||
|
endDate,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
timezone,
|
||||||
|
repetition,
|
||||||
|
hasEndDateChanged,
|
||||||
|
onExpand
|
||||||
|
}) => {
|
||||||
|
const isMultiDay = startDate !== endDate
|
||||||
|
const showEndDate = allday || (hasEndDateChanged && isMultiDay) || isMultiDay
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DateTimeSummary
|
||||||
|
startDate={startDate}
|
||||||
|
startTime={startTime}
|
||||||
|
endDate={endDate}
|
||||||
|
endTime={endTime}
|
||||||
|
allday={allday}
|
||||||
|
timezone={timezone}
|
||||||
|
repetition={repetition}
|
||||||
|
showEndDate={showEndDate}
|
||||||
|
onClick={onExpand}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DateTimeRepeatPanelProps {
|
||||||
|
repetition: RepetitionObject
|
||||||
|
setRepetition: (value: RepetitionObject) => void
|
||||||
|
start: string
|
||||||
|
typeOfAction?: 'solo' | 'all'
|
||||||
|
showMore: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DateTimeRepeatPanel: React.FC<DateTimeRepeatPanelProps> = ({
|
||||||
|
repetition,
|
||||||
|
setRepetition,
|
||||||
|
start,
|
||||||
|
typeOfAction,
|
||||||
|
showMore
|
||||||
|
}) => {
|
||||||
|
const { isTooSmall: isMobile } = useScreenSizeDetection()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel label=" " isExpanded={showMore && !isMobile}>
|
||||||
|
<RepeatEvent
|
||||||
|
repetition={repetition}
|
||||||
|
eventStart={new Date(start)}
|
||||||
|
setRepetition={setRepetition}
|
||||||
|
isOwn={typeOfAction !== 'solo'}
|
||||||
|
/>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,75 @@
|
|||||||
|
import { FormControl, TextField } from '@linagora/twake-mui'
|
||||||
|
import React from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { FieldWithLabel } from './FieldWithLabel'
|
||||||
|
import { Resource, ResourceSearch } from '../../Attendees/ResourceSearch'
|
||||||
|
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
|
||||||
|
import { FreeBusyField } from '../fields/FreeBusyField'
|
||||||
|
import { NotificationField } from '../fields/NotificationField'
|
||||||
|
import { VisibilityField } from '../fields/VisibilityField'
|
||||||
|
import { EventFormFieldsProps } from '../EventFormFields.types'
|
||||||
|
|
||||||
|
export const EventFormFieldsExpanded: React.FC<
|
||||||
|
Pick<
|
||||||
|
EventFormFieldsProps,
|
||||||
|
| 'alarm'
|
||||||
|
| 'setAlarm'
|
||||||
|
| 'busy'
|
||||||
|
| 'setBusy'
|
||||||
|
| 'eventClass'
|
||||||
|
| 'setEventClass'
|
||||||
|
| 'showMore'
|
||||||
|
| 'selectedResources'
|
||||||
|
| 'setSelectedResources'
|
||||||
|
>
|
||||||
|
> = ({
|
||||||
|
alarm,
|
||||||
|
setAlarm,
|
||||||
|
busy,
|
||||||
|
setBusy,
|
||||||
|
eventClass,
|
||||||
|
setEventClass,
|
||||||
|
showMore,
|
||||||
|
selectedResources,
|
||||||
|
setSelectedResources
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const { isTooSmall: isMobile } = useScreenSizeDetection()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{showMore && (
|
||||||
|
<FieldWithLabel
|
||||||
|
label={t('event.form.resource')}
|
||||||
|
isExpanded={showMore && !isMobile}
|
||||||
|
>
|
||||||
|
<FormControl fullWidth margin="dense" size="small">
|
||||||
|
<ResourceSearch
|
||||||
|
objectTypes={['resource']}
|
||||||
|
selectedResources={selectedResources}
|
||||||
|
inputSlot={params => <TextField {...params} size="small" />}
|
||||||
|
onChange={(_event: React.SyntheticEvent, value: Resource[]) =>
|
||||||
|
setSelectedResources(value)
|
||||||
|
}
|
||||||
|
hideLabel={true}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<NotificationField
|
||||||
|
alarm={alarm}
|
||||||
|
setAlarm={setAlarm}
|
||||||
|
showMore={showMore}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FreeBusyField busy={busy} setBusy={setBusy} showMore={showMore} />
|
||||||
|
|
||||||
|
<VisibilityField
|
||||||
|
eventClass={eventClass}
|
||||||
|
setEventClass={setEventClass}
|
||||||
|
showMore={showMore}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,196 @@
|
|||||||
|
import { Calendar } from '@/features/Calendars/CalendarTypes'
|
||||||
|
import { defaultColors } from '@/utils/defaultColors'
|
||||||
|
import { makeDisplayName } from '@/utils/makeDisplayName'
|
||||||
|
import { renameDefault } from '@/utils/renameDefault'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Divider,
|
||||||
|
FormControl,
|
||||||
|
Select,
|
||||||
|
SelectChangeEvent,
|
||||||
|
Typography
|
||||||
|
} from '@linagora/twake-mui'
|
||||||
|
import SquareRoundedIcon from '@mui/icons-material/SquareRounded'
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { CalendarItemList } from '../../Calendar/CalendarItemList'
|
||||||
|
import { OwnerCaption } from '../../Calendar/OwnerCaption'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
import { SectionPreviewRow } from '../components/SectionPreviewRow'
|
||||||
|
|
||||||
|
export interface CalendarSelectFieldProps {
|
||||||
|
calendarid: string
|
||||||
|
setCalendarid: (value: string) => void
|
||||||
|
userPersonalCalendars: Calendar[]
|
||||||
|
showMore: boolean
|
||||||
|
/** Optional callback for additional logic on change (e.g. UpdateModal tracks newCalId) */
|
||||||
|
onCalendarChange?: (newCalendarId: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const CalendarSelectFieldCollapsed: React.FC<{
|
||||||
|
calendarid: string
|
||||||
|
userPersonalCalendars: Calendar[]
|
||||||
|
selectedCalendar: Calendar | undefined
|
||||||
|
selectedOwnerDisplayName: string
|
||||||
|
isSelectedDelegated: boolean
|
||||||
|
setHasClickedCalendarSection: (value: boolean) => void
|
||||||
|
}> = ({
|
||||||
|
calendarid,
|
||||||
|
userPersonalCalendars,
|
||||||
|
selectedCalendar,
|
||||||
|
selectedOwnerDisplayName,
|
||||||
|
isSelectedDelegated,
|
||||||
|
setHasClickedCalendarSection
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SectionPreviewRow
|
||||||
|
icon={
|
||||||
|
<SquareRoundedIcon
|
||||||
|
sx={{
|
||||||
|
color:
|
||||||
|
userPersonalCalendars.find(cal => cal.id === calendarid)?.color
|
||||||
|
?.light ?? defaultColors[0].light,
|
||||||
|
width: 24,
|
||||||
|
height: 24
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
onClick={() => setHasClickedCalendarSection(true)}
|
||||||
|
>
|
||||||
|
{selectedCalendar?.name ? (
|
||||||
|
<Box style={{ display: 'flex', flexDirection: 'column' }}>
|
||||||
|
<Typography variant="body2" sx={{ wordBreak: 'break-word' }}>
|
||||||
|
{renameDefault(
|
||||||
|
selectedCalendar.name,
|
||||||
|
selectedOwnerDisplayName,
|
||||||
|
t,
|
||||||
|
!isSelectedDelegated
|
||||||
|
)}
|
||||||
|
</Typography>
|
||||||
|
<OwnerCaption
|
||||||
|
showCaption={
|
||||||
|
isSelectedDelegated && selectedCalendar.name !== '#default'
|
||||||
|
}
|
||||||
|
ownerDisplayName={selectedOwnerDisplayName}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
t('event.form.calendar')
|
||||||
|
)}
|
||||||
|
</SectionPreviewRow>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const CalendarSelectFieldExpanded: React.FC<{
|
||||||
|
calendarid: string
|
||||||
|
setCalendarid: (value: string) => void
|
||||||
|
userPersonalCalendars: Calendar[]
|
||||||
|
calendarSelectOpen: boolean
|
||||||
|
setCalendarSelectOpen: (value: boolean) => void
|
||||||
|
onCalendarChange?: (newCalendarId: string) => void
|
||||||
|
}> = ({
|
||||||
|
calendarid,
|
||||||
|
setCalendarid,
|
||||||
|
userPersonalCalendars,
|
||||||
|
calendarSelectOpen,
|
||||||
|
setCalendarSelectOpen,
|
||||||
|
onCalendarChange
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
const delegatedCalendars = userPersonalCalendars.filter(cal => cal.delegated)
|
||||||
|
const personalCalendars = userPersonalCalendars.filter(cal => !cal.delegated)
|
||||||
|
|
||||||
|
const handleCalendarChange = (newCalendarId: string): void => {
|
||||||
|
setCalendarid(newCalendarId)
|
||||||
|
onCalendarChange?.(newCalendarId)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FormControl fullWidth margin="dense" size="small">
|
||||||
|
<Select
|
||||||
|
value={calendarid ?? ''}
|
||||||
|
label=""
|
||||||
|
SelectDisplayProps={{ 'aria-label': t('event.form.calendar') }}
|
||||||
|
displayEmpty
|
||||||
|
open={calendarSelectOpen}
|
||||||
|
onOpen={() => setCalendarSelectOpen(true)}
|
||||||
|
onClose={() => setCalendarSelectOpen(false)}
|
||||||
|
onChange={(e: SelectChangeEvent) =>
|
||||||
|
handleCalendarChange(e.target.value)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{CalendarItemList(personalCalendars)}
|
||||||
|
{delegatedCalendars.length > 0 && personalCalendars.length > 0 && (
|
||||||
|
<Divider component="li" />
|
||||||
|
)}
|
||||||
|
{CalendarItemList(delegatedCalendars)}
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CalendarSelectField: React.FC<CalendarSelectFieldProps> = ({
|
||||||
|
calendarid,
|
||||||
|
setCalendarid,
|
||||||
|
userPersonalCalendars,
|
||||||
|
showMore,
|
||||||
|
onCalendarChange
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
// Local UI state
|
||||||
|
const [hasClickedCalendarSection, setHasClickedCalendarSection] =
|
||||||
|
useState(false)
|
||||||
|
const [calendarSelectOpen, setCalendarSelectOpen] = useState(false)
|
||||||
|
|
||||||
|
// Auto-open the Select once it mounts after clicking the preview row
|
||||||
|
useEffect(() => {
|
||||||
|
const openSelectAfterClick = (): void => {
|
||||||
|
if (hasClickedCalendarSection) {
|
||||||
|
setCalendarSelectOpen(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
openSelectAfterClick()
|
||||||
|
}, [hasClickedCalendarSection])
|
||||||
|
|
||||||
|
const selectedCalendar = userPersonalCalendars.find(
|
||||||
|
cal => cal.id === calendarid
|
||||||
|
)
|
||||||
|
const selectedOwnerDisplayName = selectedCalendar
|
||||||
|
? (makeDisplayName(selectedCalendar) ?? '')
|
||||||
|
: ''
|
||||||
|
const isSelectedDelegated = !!selectedCalendar?.delegated
|
||||||
|
|
||||||
|
const isCollapsed = !showMore && !hasClickedCalendarSection
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel
|
||||||
|
label={isCollapsed ? '' : t('event.form.calendar')}
|
||||||
|
isExpanded={showMore}
|
||||||
|
>
|
||||||
|
{isCollapsed ? (
|
||||||
|
<CalendarSelectFieldCollapsed
|
||||||
|
calendarid={calendarid}
|
||||||
|
userPersonalCalendars={userPersonalCalendars}
|
||||||
|
setHasClickedCalendarSection={setHasClickedCalendarSection}
|
||||||
|
selectedCalendar={selectedCalendar}
|
||||||
|
selectedOwnerDisplayName={selectedOwnerDisplayName}
|
||||||
|
isSelectedDelegated={isSelectedDelegated}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<CalendarSelectFieldExpanded
|
||||||
|
calendarid={calendarid}
|
||||||
|
setCalendarid={setCalendarid}
|
||||||
|
userPersonalCalendars={userPersonalCalendars}
|
||||||
|
calendarSelectOpen={calendarSelectOpen}
|
||||||
|
setCalendarSelectOpen={setCalendarSelectOpen}
|
||||||
|
onCalendarChange={onCalendarChange}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,44 @@
|
|||||||
|
import { RepetitionObject } from '@/features/Events/EventsTypes'
|
||||||
|
|
||||||
|
export interface TimezoneListResult {
|
||||||
|
zones: string[]
|
||||||
|
browserTz: string
|
||||||
|
getTimezoneOffset: (tzName: string, date: Date) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface EventDateTimeFieldProps {
|
||||||
|
/** Controlled start value (ISO or YYYY-MM-DD) */
|
||||||
|
start: string
|
||||||
|
setStart: (value: string) => void
|
||||||
|
/** Controlled end value */
|
||||||
|
end: string
|
||||||
|
setEnd: (value: string) => void
|
||||||
|
/** All-day flag */
|
||||||
|
allday: boolean
|
||||||
|
setAllDay: (value: boolean) => void
|
||||||
|
/** Current timezone name */
|
||||||
|
timezone: string
|
||||||
|
setTimezone: (value: string) => void
|
||||||
|
/** Repetition rule */
|
||||||
|
repetition: RepetitionObject
|
||||||
|
setRepetition: (value: RepetitionObject) => void
|
||||||
|
showRepeat: boolean
|
||||||
|
setShowRepeat: (value: boolean) => void
|
||||||
|
/** Whether the full (expanded) dialog mode is active */
|
||||||
|
showMore: boolean
|
||||||
|
/** show/hide validation error messages */
|
||||||
|
showValidationErrors: boolean
|
||||||
|
timezoneList: TimezoneListResult
|
||||||
|
typeOfAction?: 'solo' | 'all'
|
||||||
|
/** Optional callbacks for calendar preview sync (EventModal only) */
|
||||||
|
onStartChange?: (newStart: string) => void
|
||||||
|
onEndChange?: (newEnd: string) => void
|
||||||
|
onAllDayChange?: (
|
||||||
|
newAllDay: boolean,
|
||||||
|
newStart: string,
|
||||||
|
newEnd: string
|
||||||
|
) => void
|
||||||
|
onHasEndDateChangedChange?: (has: boolean) => void
|
||||||
|
/** Notify parent when the validation state changes */
|
||||||
|
onValidationChange?: (isValid: boolean) => void
|
||||||
|
}
|
||||||
@@ -0,0 +1,126 @@
|
|||||||
|
import React, { useCallback, useState } from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
import { useDateTimeSplit } from '../hooks/useDateTimeSplit'
|
||||||
|
import { DateTimeExpanded } from '../components/DateTimeFields/DateTimeExpanded'
|
||||||
|
import { DateTimeSummarySection } from '../components/DateTimeFields/DateTimeSubPanels'
|
||||||
|
import type { EventDateTimeFieldProps } from './DateTimeField.types'
|
||||||
|
|
||||||
|
export const EventDateTimeField: React.FC<EventDateTimeFieldProps> = ({
|
||||||
|
start,
|
||||||
|
setStart,
|
||||||
|
end,
|
||||||
|
setEnd,
|
||||||
|
allday,
|
||||||
|
setAllDay,
|
||||||
|
timezone,
|
||||||
|
setTimezone,
|
||||||
|
repetition,
|
||||||
|
setRepetition,
|
||||||
|
showRepeat,
|
||||||
|
setShowRepeat,
|
||||||
|
showMore,
|
||||||
|
showValidationErrors,
|
||||||
|
timezoneList,
|
||||||
|
typeOfAction,
|
||||||
|
onStartChange,
|
||||||
|
onEndChange,
|
||||||
|
onAllDayChange,
|
||||||
|
onHasEndDateChangedChange,
|
||||||
|
onValidationChange
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const { isTooSmall: isMobile } = useScreenSizeDetection()
|
||||||
|
const [hasClickedDateTimeSection, setHasClickedDateTimeSection] =
|
||||||
|
useState(false)
|
||||||
|
const [hasEndDateChanged, setHasEndDateChanged] = useState(false)
|
||||||
|
|
||||||
|
// Validation callback for DateTimeField → notify parent
|
||||||
|
const handleValidationChange = useCallback(
|
||||||
|
(isValid: boolean) => {
|
||||||
|
onValidationChange?.(isValid)
|
||||||
|
},
|
||||||
|
[onValidationChange]
|
||||||
|
)
|
||||||
|
|
||||||
|
const {
|
||||||
|
startDate,
|
||||||
|
setStartDate,
|
||||||
|
startTime,
|
||||||
|
setStartTime,
|
||||||
|
endDate,
|
||||||
|
setEndDate,
|
||||||
|
endTime,
|
||||||
|
setEndTime
|
||||||
|
} = useDateTimeSplit({
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
allday,
|
||||||
|
showMore,
|
||||||
|
hasEndDateChanged,
|
||||||
|
setHasEndDateChanged,
|
||||||
|
showValidationErrors,
|
||||||
|
onEndChange,
|
||||||
|
setEnd,
|
||||||
|
onHasEndDateChangedChange,
|
||||||
|
onValidationChange: handleValidationChange
|
||||||
|
})
|
||||||
|
|
||||||
|
const isCollapsed = !showMore && !hasClickedDateTimeSection
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FieldWithLabel
|
||||||
|
label={isCollapsed ? '' : t('event.form.dateTime')}
|
||||||
|
isExpanded={showMore && !isMobile}
|
||||||
|
>
|
||||||
|
{isCollapsed ? (
|
||||||
|
<DateTimeSummarySection
|
||||||
|
startDate={startDate}
|
||||||
|
startTime={startTime}
|
||||||
|
endDate={endDate}
|
||||||
|
endTime={endTime}
|
||||||
|
allday={allday}
|
||||||
|
timezone={timezone}
|
||||||
|
repetition={repetition}
|
||||||
|
hasEndDateChanged={hasEndDateChanged}
|
||||||
|
onExpand={() => setHasClickedDateTimeSection(true)}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<DateTimeExpanded
|
||||||
|
start={start}
|
||||||
|
setStart={setStart}
|
||||||
|
end={end}
|
||||||
|
setEnd={setEnd}
|
||||||
|
allday={allday}
|
||||||
|
setAllDay={setAllDay}
|
||||||
|
timezone={timezone}
|
||||||
|
setTimezone={setTimezone}
|
||||||
|
repetition={repetition}
|
||||||
|
setRepetition={setRepetition}
|
||||||
|
showRepeat={showRepeat}
|
||||||
|
setShowRepeat={setShowRepeat}
|
||||||
|
showMore={showMore}
|
||||||
|
hasEndDateChanged={hasEndDateChanged}
|
||||||
|
setHasEndDateChanged={setHasEndDateChanged}
|
||||||
|
showValidationErrors={showValidationErrors}
|
||||||
|
timezoneList={timezoneList}
|
||||||
|
typeOfAction={typeOfAction}
|
||||||
|
onStartChange={onStartChange}
|
||||||
|
onEndChange={onEndChange}
|
||||||
|
onAllDayChange={onAllDayChange}
|
||||||
|
startDate={startDate}
|
||||||
|
setStartDate={setStartDate}
|
||||||
|
startTime={startTime}
|
||||||
|
setStartTime={setStartTime}
|
||||||
|
endDate={endDate}
|
||||||
|
setEndDate={setEndDate}
|
||||||
|
endTime={endTime}
|
||||||
|
setEndTime={setEndTime}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</FieldWithLabel>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
MenuItem,
|
||||||
|
Select,
|
||||||
|
SelectChangeEvent
|
||||||
|
} from '@linagora/twake-mui'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
|
||||||
|
export interface FreeBusyFieldProps {
|
||||||
|
busy: string
|
||||||
|
setBusy: (value: string) => void
|
||||||
|
/** Only rendered in expanded (showMore) mode */
|
||||||
|
showMore: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const FreeBusyField: React.FC<FreeBusyFieldProps> = ({
|
||||||
|
busy,
|
||||||
|
setBusy,
|
||||||
|
showMore
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
if (!showMore) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel label={t('event.form.showMeAs')} isExpanded>
|
||||||
|
<FormControl fullWidth margin="dense" size="small">
|
||||||
|
<Select
|
||||||
|
labelId="busy"
|
||||||
|
value={busy}
|
||||||
|
onChange={(e: SelectChangeEvent) => setBusy(e.target.value)}
|
||||||
|
>
|
||||||
|
<MenuItem value="TRANSPARENT">{t('event.form.free')}</MenuItem>
|
||||||
|
<MenuItem value="OPAQUE">{t('event.form.busy')}</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import { TextField } from '@linagora/twake-mui'
|
||||||
|
import { LocationOn as LocationIcon } from '@mui/icons-material'
|
||||||
|
import { useRef, useState } from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { useScreenSizeDetection } from '@/useScreenSizeDetection'
|
||||||
|
import { useEventLocation } from '../hooks/useEventLocation'
|
||||||
|
import { EventFormFieldsProps } from '../EventFormFields.types'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
import { SectionPreviewRow } from '../components/SectionPreviewRow'
|
||||||
|
|
||||||
|
const showInputLabel = (showMore: boolean, label: string): string => {
|
||||||
|
if (showMore) {
|
||||||
|
return label
|
||||||
|
}
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function LocationField({
|
||||||
|
location,
|
||||||
|
setLocation,
|
||||||
|
showMore,
|
||||||
|
isOpen = false
|
||||||
|
}: Pick<
|
||||||
|
EventFormFieldsProps,
|
||||||
|
'location' | 'setLocation' | 'showMore' | 'isOpen'
|
||||||
|
>): JSX.Element {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const { isTooSmall: isMobile } = useScreenSizeDetection()
|
||||||
|
|
||||||
|
const [hasClickedLocationSection, setHasClickedLocationSection] =
|
||||||
|
useState(false)
|
||||||
|
|
||||||
|
const locationInputRef = useRef<HTMLInputElement>(null)
|
||||||
|
|
||||||
|
useEventLocation({
|
||||||
|
isOpen,
|
||||||
|
hasClickedLocationSection,
|
||||||
|
setHasClickedLocationSection,
|
||||||
|
locationInputRef
|
||||||
|
})
|
||||||
|
|
||||||
|
const isLocationExpanded = showMore || hasClickedLocationSection
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel
|
||||||
|
label={showInputLabel(isLocationExpanded, t('event.form.location'))}
|
||||||
|
isExpanded={isLocationExpanded && !isMobile}
|
||||||
|
>
|
||||||
|
{!isLocationExpanded ? (
|
||||||
|
<SectionPreviewRow
|
||||||
|
icon={<LocationIcon />}
|
||||||
|
onClick={() => setHasClickedLocationSection(true)}
|
||||||
|
>
|
||||||
|
{location || t('event.form.locationPlaceholder')}
|
||||||
|
</SectionPreviewRow>
|
||||||
|
) : (
|
||||||
|
<TextField
|
||||||
|
autoComplete="off"
|
||||||
|
fullWidth
|
||||||
|
label=""
|
||||||
|
inputRef={locationInputRef}
|
||||||
|
inputProps={{ 'aria-label': t('event.form.location') }}
|
||||||
|
placeholder={t('event.form.locationPlaceholder')}
|
||||||
|
value={location}
|
||||||
|
onChange={e => setLocation(e.target.value)}
|
||||||
|
size={isMobile ? 'medium' : 'small'}
|
||||||
|
margin="dense"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,76 @@
|
|||||||
|
import {
|
||||||
|
FormControl,
|
||||||
|
MenuItem,
|
||||||
|
Select,
|
||||||
|
SelectChangeEvent
|
||||||
|
} from '@linagora/twake-mui'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
|
||||||
|
export interface NotificationFieldProps {
|
||||||
|
alarm: string
|
||||||
|
setAlarm: (value: string) => void
|
||||||
|
/** Only rendered in expanded (showMore) mode */
|
||||||
|
showMore: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const NotificationField: React.FC<NotificationFieldProps> = ({
|
||||||
|
alarm,
|
||||||
|
setAlarm,
|
||||||
|
showMore
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
if (!showMore) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel label={t('event.form.notification')} isExpanded>
|
||||||
|
<FormControl fullWidth margin="dense" size="small">
|
||||||
|
<Select
|
||||||
|
labelId="notification"
|
||||||
|
value={alarm}
|
||||||
|
displayEmpty
|
||||||
|
onChange={(e: SelectChangeEvent) => setAlarm(e.target.value)}
|
||||||
|
>
|
||||||
|
<MenuItem value="">{t('event.form.notifications.')}</MenuItem>
|
||||||
|
<MenuItem value="-PT1M">
|
||||||
|
{t('event.form.notifications.-PT1M')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT5M">
|
||||||
|
{t('event.form.notifications.-PT5M')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT10M">
|
||||||
|
{t('event.form.notifications.-PT10M')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT15M">
|
||||||
|
{t('event.form.notifications.-PT15M')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT30M">
|
||||||
|
{t('event.form.notifications.-PT30M')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT1H">
|
||||||
|
{t('event.form.notifications.-PT1H')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT2H">
|
||||||
|
{t('event.form.notifications.-PT2H')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT5H">
|
||||||
|
{t('event.form.notifications.-PT5H')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT12H">
|
||||||
|
{t('event.form.notifications.-PT12H')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT1D">
|
||||||
|
{t('event.form.notifications.-PT1D')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT2D">
|
||||||
|
{t('event.form.notifications.-PT2D')}
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem value="-PT1W">
|
||||||
|
{t('event.form.notifications.-PT1W')}
|
||||||
|
</MenuItem>
|
||||||
|
</Select>
|
||||||
|
</FormControl>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,243 @@
|
|||||||
|
import iconCamera from '@/static/images/icon-camera.svg'
|
||||||
|
import {
|
||||||
|
addVideoConferenceToDescription,
|
||||||
|
generateMeetingLink,
|
||||||
|
removeVideoConferenceFromDescription
|
||||||
|
} from '@/utils/videoConferenceUtils'
|
||||||
|
import { Box, Button, IconButton } from '@linagora/twake-mui'
|
||||||
|
import {
|
||||||
|
Close as DeleteIcon,
|
||||||
|
ContentCopy as CopyIcon
|
||||||
|
} from '@mui/icons-material'
|
||||||
|
import React from 'react'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { SnackbarAlert } from '../../Loading/SnackBarAlert'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
import { SectionPreviewRow } from '../components/SectionPreviewRow'
|
||||||
|
|
||||||
|
export interface VideoConferenceFieldProps {
|
||||||
|
hasVideoConference: boolean
|
||||||
|
setHasVideoConference: (value: boolean) => void
|
||||||
|
meetingLink: string | null
|
||||||
|
setMeetingLink: (value: string | null) => void
|
||||||
|
description: string
|
||||||
|
setDescription: (value: string) => void
|
||||||
|
showMore: boolean
|
||||||
|
/** setShowDescription is called when a conference link is added in simple mode */
|
||||||
|
setShowDescription?: (value: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const VideoConferenceFieldInShortMode: React.FC<{
|
||||||
|
hasVideoConference: boolean
|
||||||
|
meetingLink: string | null
|
||||||
|
cameraIcon: React.ReactNode
|
||||||
|
handleCopyMeetingLink: () => Promise<void>
|
||||||
|
handleDeleteVideoConference: () => void
|
||||||
|
handleAddVideoConference: () => void
|
||||||
|
}> = ({
|
||||||
|
hasVideoConference,
|
||||||
|
meetingLink,
|
||||||
|
cameraIcon,
|
||||||
|
handleCopyMeetingLink,
|
||||||
|
handleDeleteVideoConference,
|
||||||
|
handleAddVideoConference
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
if (hasVideoConference && meetingLink) {
|
||||||
|
return (
|
||||||
|
<Box display="flex" gap={1} alignItems="center">
|
||||||
|
<Button
|
||||||
|
startIcon={cameraIcon}
|
||||||
|
onClick={() =>
|
||||||
|
window.open(meetingLink, '_blank', 'noopener,noreferrer')
|
||||||
|
}
|
||||||
|
size="medium"
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
sx={{ borderRadius: '4px', mr: 1 }}
|
||||||
|
>
|
||||||
|
{t('event.form.joinVisioConference')}
|
||||||
|
</Button>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => void handleCopyMeetingLink()}
|
||||||
|
size="small"
|
||||||
|
sx={{ color: 'primary.main' }}
|
||||||
|
aria-label={t('event.form.copyMeetingLink')}
|
||||||
|
title={t('event.form.copyMeetingLink')}
|
||||||
|
>
|
||||||
|
<CopyIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleDeleteVideoConference}
|
||||||
|
size="small"
|
||||||
|
sx={{ color: 'error.main' }}
|
||||||
|
aria-label={t('event.form.removeVideoConference')}
|
||||||
|
title={t('event.form.removeVideoConference')}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SectionPreviewRow icon={cameraIcon} onClick={handleAddVideoConference}>
|
||||||
|
{t('event.form.addVisioConference')}
|
||||||
|
</SectionPreviewRow>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const VideoConferenceFieldInExpanedMode: React.FC<{
|
||||||
|
hasVideoConference: boolean
|
||||||
|
meetingLink: string | null
|
||||||
|
cameraIcon: React.ReactNode
|
||||||
|
handleCopyMeetingLink: () => Promise<void>
|
||||||
|
handleDeleteVideoConference: () => void
|
||||||
|
handleAddVideoConference: () => void
|
||||||
|
}> = ({
|
||||||
|
hasVideoConference,
|
||||||
|
meetingLink,
|
||||||
|
cameraIcon,
|
||||||
|
handleCopyMeetingLink,
|
||||||
|
handleDeleteVideoConference,
|
||||||
|
handleAddVideoConference
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box display="flex" gap={1} alignItems="center">
|
||||||
|
<Button
|
||||||
|
startIcon={cameraIcon}
|
||||||
|
onClick={handleAddVideoConference}
|
||||||
|
size="medium"
|
||||||
|
variant="contained"
|
||||||
|
color="secondary"
|
||||||
|
sx={{
|
||||||
|
borderRadius: '4px',
|
||||||
|
display: hasVideoConference ? 'none' : 'flex'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{t('event.form.addVisioConference')}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{hasVideoConference && meetingLink && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
startIcon={cameraIcon}
|
||||||
|
onClick={() =>
|
||||||
|
window.open(meetingLink, '_blank', 'noopener,noreferrer')
|
||||||
|
}
|
||||||
|
size="medium"
|
||||||
|
variant="contained"
|
||||||
|
color="primary"
|
||||||
|
sx={{ borderRadius: '4px', mr: 1 }}
|
||||||
|
>
|
||||||
|
{t('event.form.joinVisioConference')}
|
||||||
|
</Button>
|
||||||
|
<IconButton
|
||||||
|
onClick={() => void handleCopyMeetingLink()}
|
||||||
|
size="small"
|
||||||
|
sx={{ color: 'primary.main' }}
|
||||||
|
aria-label={t('event.form.copyMeetingLink')}
|
||||||
|
title={t('event.form.copyMeetingLink')}
|
||||||
|
>
|
||||||
|
<CopyIcon />
|
||||||
|
</IconButton>
|
||||||
|
<IconButton
|
||||||
|
onClick={handleDeleteVideoConference}
|
||||||
|
size="small"
|
||||||
|
sx={{ color: 'error.main' }}
|
||||||
|
aria-label={t('event.form.removeVideoConference')}
|
||||||
|
title={t('event.form.removeVideoConference')}
|
||||||
|
>
|
||||||
|
<DeleteIcon />
|
||||||
|
</IconButton>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VideoConferenceField: React.FC<VideoConferenceFieldProps> = ({
|
||||||
|
hasVideoConference,
|
||||||
|
setHasVideoConference,
|
||||||
|
meetingLink,
|
||||||
|
setMeetingLink,
|
||||||
|
description,
|
||||||
|
setDescription,
|
||||||
|
showMore,
|
||||||
|
setShowDescription
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
const [openToast, setOpenToast] = React.useState(false)
|
||||||
|
|
||||||
|
const handleAddVideoConference = (): void => {
|
||||||
|
const newMeetingLink = generateMeetingLink()
|
||||||
|
const updatedDescription = addVideoConferenceToDescription(
|
||||||
|
description,
|
||||||
|
newMeetingLink
|
||||||
|
)
|
||||||
|
setDescription(updatedDescription)
|
||||||
|
setHasVideoConference(true)
|
||||||
|
setMeetingLink(newMeetingLink)
|
||||||
|
if (showMore) {
|
||||||
|
setShowDescription?.(true)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCopyMeetingLink = async (): Promise<void> => {
|
||||||
|
if (!meetingLink) return
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(meetingLink)
|
||||||
|
setOpenToast(true)
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Failed to copy link:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteVideoConference = (): void => {
|
||||||
|
setDescription(removeVideoConferenceFromDescription(description))
|
||||||
|
setHasVideoConference(false)
|
||||||
|
setMeetingLink(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const cameraIcon = (
|
||||||
|
<img src={iconCamera} alt="camera" width={24} height={24} />
|
||||||
|
)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<FieldWithLabel
|
||||||
|
label={showMore ? t('event.form.videoMeeting') : ''}
|
||||||
|
isExpanded={showMore}
|
||||||
|
>
|
||||||
|
{!showMore ? (
|
||||||
|
<VideoConferenceFieldInShortMode
|
||||||
|
hasVideoConference={hasVideoConference}
|
||||||
|
meetingLink={meetingLink}
|
||||||
|
cameraIcon={cameraIcon}
|
||||||
|
handleCopyMeetingLink={handleCopyMeetingLink}
|
||||||
|
handleDeleteVideoConference={handleDeleteVideoConference}
|
||||||
|
handleAddVideoConference={handleAddVideoConference}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<VideoConferenceFieldInExpanedMode
|
||||||
|
hasVideoConference={hasVideoConference}
|
||||||
|
meetingLink={meetingLink}
|
||||||
|
cameraIcon={cameraIcon}
|
||||||
|
handleCopyMeetingLink={handleCopyMeetingLink}
|
||||||
|
handleDeleteVideoConference={handleDeleteVideoConference}
|
||||||
|
handleAddVideoConference={handleAddVideoConference}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</FieldWithLabel>
|
||||||
|
|
||||||
|
<SnackbarAlert
|
||||||
|
setOpen={setOpenToast}
|
||||||
|
open={openToast}
|
||||||
|
message={t('event.form.meetCopied')}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { ToggleButton, ToggleButtonGroup } from '@linagora/twake-mui'
|
||||||
|
import { Public as PublicIcon } from '@mui/icons-material'
|
||||||
|
import LockOutlineIcon from '@mui/icons-material/LockOutline'
|
||||||
|
import { useI18n } from 'twake-i18n'
|
||||||
|
import { FieldWithLabel } from '../components/FieldWithLabel'
|
||||||
|
|
||||||
|
export interface VisibilityFieldProps {
|
||||||
|
eventClass: 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL'
|
||||||
|
setEventClass: (value: 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL') => void
|
||||||
|
/** Only rendered in expanded (showMore) mode */
|
||||||
|
showMore: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VisibilityField: React.FC<VisibilityFieldProps> = ({
|
||||||
|
eventClass,
|
||||||
|
setEventClass,
|
||||||
|
showMore
|
||||||
|
}) => {
|
||||||
|
const { t } = useI18n()
|
||||||
|
|
||||||
|
if (!showMore) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<FieldWithLabel label={t('event.form.visibleTo')} isExpanded>
|
||||||
|
<ToggleButtonGroup
|
||||||
|
value={eventClass}
|
||||||
|
exclusive
|
||||||
|
onChange={(_e, newValue: string) => {
|
||||||
|
if (newValue !== null) {
|
||||||
|
setEventClass(newValue as 'PUBLIC' | 'PRIVATE' | 'CONFIDENTIAL')
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
size="medium"
|
||||||
|
>
|
||||||
|
<ToggleButton value="PUBLIC" sx={{ minWidth: '160px' }}>
|
||||||
|
<PublicIcon sx={{ mr: 1 }} />
|
||||||
|
{t('event.form.visibleAll')}
|
||||||
|
</ToggleButton>
|
||||||
|
<ToggleButton value="PRIVATE" sx={{ minWidth: '160px' }}>
|
||||||
|
<LockOutlineIcon sx={{ mr: 1 }} />
|
||||||
|
{t('event.form.visibleParticipants')}
|
||||||
|
</ToggleButton>
|
||||||
|
</ToggleButtonGroup>
|
||||||
|
</FieldWithLabel>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { combineDateTime } from '../utils/dateTimeHelpers'
|
||||||
|
|
||||||
|
interface UseAutoEndTimeParams {
|
||||||
|
startTime: string
|
||||||
|
endTime: string
|
||||||
|
allday: boolean
|
||||||
|
startDate: string
|
||||||
|
endDate: string
|
||||||
|
setEndTime: (value: string) => void
|
||||||
|
onEndChange?: (newEnd: string) => void
|
||||||
|
setEnd: (value: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Auto-calculates end time as startTime + 1 hour when endTime is not yet set.
|
||||||
|
* Extracted from useDateTimeSplit to keep each hook under the CC threshold.
|
||||||
|
*/
|
||||||
|
export function useAutoEndTime({
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
setEndTime,
|
||||||
|
onEndChange,
|
||||||
|
setEnd
|
||||||
|
}: UseAutoEndTimeParams): void {
|
||||||
|
useEffect(() => {
|
||||||
|
const needsAutoEnd = Boolean(startTime) && !endTime && !allday
|
||||||
|
if (!needsAutoEnd) return
|
||||||
|
const [hours, minutes] = startTime.split(':')
|
||||||
|
const endHour = (parseInt(hours) + 1) % 24
|
||||||
|
const calculatedEndTime = `${endHour.toString().padStart(2, '0')}:${minutes}`
|
||||||
|
setEndTime(calculatedEndTime)
|
||||||
|
const newEnd = combineDateTime(endDate || startDate, calculatedEndTime)
|
||||||
|
if (onEndChange) {
|
||||||
|
onEndChange(newEnd)
|
||||||
|
} else {
|
||||||
|
setEnd(newEnd)
|
||||||
|
}
|
||||||
|
}, [
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
endDate,
|
||||||
|
startDate,
|
||||||
|
onEndChange,
|
||||||
|
setEnd,
|
||||||
|
setEndTime
|
||||||
|
])
|
||||||
|
}
|
||||||
@@ -0,0 +1,58 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
// Effects that auto-focus the title input must not run in the test environment
|
||||||
|
// because jsdom has no layout engine and focus() calls produce false positives.
|
||||||
|
const isNotTestEnv = process.env.NODE_ENV !== 'test'
|
||||||
|
|
||||||
|
function useFocusTitleOnOpen(
|
||||||
|
isOpen: boolean,
|
||||||
|
eventId: string | null | undefined,
|
||||||
|
titleInputRef: React.RefObject<HTMLInputElement>
|
||||||
|
): void {
|
||||||
|
useEffect(() => {
|
||||||
|
const isNewEventOpen = isOpen && !eventId
|
||||||
|
if (!isNewEventOpen || !isNotTestEnv) return
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
titleInputRef.current?.focus()
|
||||||
|
}, 100)
|
||||||
|
return (): void => clearTimeout(timer)
|
||||||
|
}, [isOpen, eventId, titleInputRef])
|
||||||
|
}
|
||||||
|
|
||||||
|
function useFocusTitleOnToggle(
|
||||||
|
isOpen: boolean,
|
||||||
|
showMore: boolean,
|
||||||
|
titleInputRef: React.RefObject<HTMLInputElement>
|
||||||
|
): void {
|
||||||
|
const prevShowMoreRef = useRef<boolean | undefined>(undefined)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const isFirstRender = prevShowMoreRef.current === undefined
|
||||||
|
const hasChanged = prevShowMoreRef.current !== showMore
|
||||||
|
prevShowMoreRef.current = showMore
|
||||||
|
|
||||||
|
const shouldFocusOnToggle =
|
||||||
|
!isFirstRender && isOpen && isNotTestEnv && hasChanged
|
||||||
|
if (!shouldFocusOnToggle) return
|
||||||
|
|
||||||
|
const timer = setTimeout(() => {
|
||||||
|
titleInputRef.current?.focus()
|
||||||
|
}, 150)
|
||||||
|
return (): void => clearTimeout(timer)
|
||||||
|
}, [showMore, isOpen, titleInputRef])
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useAutoFocusTitle = ({
|
||||||
|
isOpen,
|
||||||
|
eventId,
|
||||||
|
titleInputRef,
|
||||||
|
showMore
|
||||||
|
}: {
|
||||||
|
isOpen: boolean
|
||||||
|
eventId?: string | null
|
||||||
|
titleInputRef: React.RefObject<HTMLInputElement>
|
||||||
|
showMore: boolean
|
||||||
|
}): void => {
|
||||||
|
useFocusTitleOnOpen(isOpen, eventId, titleInputRef)
|
||||||
|
useFocusTitleOnToggle(isOpen, showMore, titleInputRef)
|
||||||
|
}
|
||||||
@@ -0,0 +1,123 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { splitDateTime } from '../utils/dateTimeHelpers'
|
||||||
|
import { validateEventForm } from '../utils/formValidation'
|
||||||
|
import { useAutoEndTime } from './useAutoEndTime'
|
||||||
|
|
||||||
|
interface UseDateTimeSplitParams {
|
||||||
|
start: string
|
||||||
|
end: string
|
||||||
|
allday: boolean
|
||||||
|
showMore: boolean
|
||||||
|
hasEndDateChanged: boolean
|
||||||
|
setHasEndDateChanged: (value: boolean) => void
|
||||||
|
showValidationErrors: boolean
|
||||||
|
onEndChange?: (newEnd: string) => void
|
||||||
|
setEnd: (value: string) => void
|
||||||
|
onHasEndDateChangedChange?: (has: boolean) => void
|
||||||
|
onValidationChange?: (isValid: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UseDateTimeSplitResult {
|
||||||
|
startDate: string
|
||||||
|
setStartDate: (value: string) => void
|
||||||
|
startTime: string
|
||||||
|
setStartTime: (value: string) => void
|
||||||
|
endDate: string
|
||||||
|
setEndDate: (value: string) => void
|
||||||
|
endTime: string
|
||||||
|
setEndTime: (value: string) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const changeDateAndTime = (
|
||||||
|
datetime: string,
|
||||||
|
setDate: (date: string) => void,
|
||||||
|
setTime: (time: string) => void
|
||||||
|
): void => {
|
||||||
|
if (!datetime) return
|
||||||
|
|
||||||
|
const { date, time } = splitDateTime(datetime)
|
||||||
|
setDate(date)
|
||||||
|
setTime(time)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useDateTimeSplit({
|
||||||
|
start,
|
||||||
|
end,
|
||||||
|
allday,
|
||||||
|
showMore,
|
||||||
|
hasEndDateChanged,
|
||||||
|
setHasEndDateChanged,
|
||||||
|
showValidationErrors,
|
||||||
|
onEndChange,
|
||||||
|
setEnd,
|
||||||
|
onHasEndDateChangedChange,
|
||||||
|
onValidationChange
|
||||||
|
}: UseDateTimeSplitParams): UseDateTimeSplitResult {
|
||||||
|
const [startDate, setStartDate] = useState('')
|
||||||
|
const [startTime, setStartTime] = useState('')
|
||||||
|
const [endDate, setEndDate] = useState('')
|
||||||
|
const [endTime, setEndTime] = useState('')
|
||||||
|
|
||||||
|
// Sync split fields from parent ISO strings
|
||||||
|
useEffect(() => {
|
||||||
|
changeDateAndTime(start, setStartDate, setStartTime)
|
||||||
|
}, [start])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
changeDateAndTime(end, setEndDate, setEndTime)
|
||||||
|
}, [end])
|
||||||
|
|
||||||
|
// Notify parent about validation
|
||||||
|
const isValid = validateEventForm({
|
||||||
|
startDate,
|
||||||
|
startTime,
|
||||||
|
endDate,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
showValidationErrors,
|
||||||
|
hasEndDateChanged,
|
||||||
|
showMore
|
||||||
|
}).isValid
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
onValidationChange?.(isValid)
|
||||||
|
}, [isValid, onValidationChange])
|
||||||
|
|
||||||
|
// Notify parent when end-date-changed flag changes
|
||||||
|
useEffect(() => {
|
||||||
|
onHasEndDateChangedChange?.(hasEndDateChanged)
|
||||||
|
}, [hasEndDateChanged, onHasEndDateChangedChange])
|
||||||
|
|
||||||
|
// Reset end-date-changed when dates fall back to same day in normal mode
|
||||||
|
useEffect(() => {
|
||||||
|
const shouldReset =
|
||||||
|
!showMore &&
|
||||||
|
hasEndDateChanged &&
|
||||||
|
Boolean(startDate) &&
|
||||||
|
startDate === endDate
|
||||||
|
if (shouldReset) setHasEndDateChanged(false)
|
||||||
|
}, [showMore, hasEndDateChanged, startDate, endDate, setHasEndDateChanged])
|
||||||
|
|
||||||
|
// Auto end-time calculation delegated to its own hook
|
||||||
|
useAutoEndTime({
|
||||||
|
startTime,
|
||||||
|
endTime,
|
||||||
|
allday,
|
||||||
|
startDate,
|
||||||
|
endDate,
|
||||||
|
setEndTime,
|
||||||
|
onEndChange,
|
||||||
|
setEnd
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
startDate,
|
||||||
|
setStartDate,
|
||||||
|
startTime,
|
||||||
|
setStartTime,
|
||||||
|
endDate,
|
||||||
|
setEndDate,
|
||||||
|
endTime,
|
||||||
|
setEndTime
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,27 @@
|
|||||||
|
import React, { useEffect } from 'react'
|
||||||
|
|
||||||
|
export const useEventLocation = ({
|
||||||
|
isOpen,
|
||||||
|
hasClickedLocationSection,
|
||||||
|
setHasClickedLocationSection,
|
||||||
|
locationInputRef
|
||||||
|
}: {
|
||||||
|
isOpen: boolean
|
||||||
|
hasClickedLocationSection: boolean
|
||||||
|
setHasClickedLocationSection: (hasClicked: boolean) => void
|
||||||
|
locationInputRef: React.RefObject<HTMLInputElement>
|
||||||
|
}): void => {
|
||||||
|
// Reset location click state when modal closes
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen) {
|
||||||
|
setHasClickedLocationSection(false)
|
||||||
|
}
|
||||||
|
}, [isOpen, setHasClickedLocationSection])
|
||||||
|
|
||||||
|
// Focus location field when user clicks the location preview row
|
||||||
|
useEffect(() => {
|
||||||
|
if (hasClickedLocationSection && process.env.NODE_ENV !== 'test') {
|
||||||
|
locationInputRef.current?.focus()
|
||||||
|
}
|
||||||
|
}, [hasClickedLocationSection, locationInputRef])
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user