diff --git a/src/components/form/EventForm.tsx b/src/components/form/EventForm.tsx index f47516f7..cf7b815b 100644 --- a/src/components/form/EventForm.tsx +++ b/src/components/form/EventForm.tsx @@ -54,7 +54,7 @@ const EventForm: React.FC = ({ const unavailableDates = useAppSelector(unavailableDatesSelector); return ( - + = ({ selectedAddress={selectedAddress} selectedContractZone={selectedContractZone} /> - + - +
+ +
= ({ - +
+ +
@@ -222,10 +226,12 @@ const EventForm: React.FC = ({ tagName="h2" id="form.event.title.tools_and_suplies" /> - +
+ +
diff --git a/src/components/form/partitions/DateRange.tsx b/src/components/form/partitions/DateRange.tsx index adeedf82..9da28f43 100644 --- a/src/components/form/partitions/DateRange.tsx +++ b/src/components/form/partitions/DateRange.tsx @@ -1,4 +1,11 @@ -import { addDays, addHours, setHours, startOfDay, subDays } from 'date-fns'; +import { + addDays, + addHours, + format, + setHours, + startOfDay, + subDays, +} from 'date-fns'; import { fi, sv } from 'date-fns/locale'; import { FormikErrors, FormikTouched } from 'formik'; import React from 'react'; @@ -8,7 +15,9 @@ import { useIntl } from 'react-intl'; import { Row, Col } from 'reactstrap'; import DatePicker from '../fields/DatePicker'; +import PrintValue from '../fields/PrintValue'; import TimePicker from '../fields/timePicker/TimePicker'; +import formatTime from '../../../utils/formatTime'; import 'react-datepicker/dist/react-datepicker.css'; import './dateRange.scss'; @@ -51,8 +60,7 @@ const DateRange: React.FC = ({ unavailableDates, values, }) => { - const onChange = (id: string) => (value: Date | null) => { - if (!value) return; + const onChange = (id: string) => (value: Date) => { handleChange({ target: { id, @@ -77,6 +85,7 @@ const DateRange: React.FC = ({ (id: string, oldDate: Date | string | undefined) => (value: Date | null) => { if (!value) return; + const oldDateObj = ensureDate(oldDate); onChange(id)( oldDateObj ? setHours(value, oldDateObj.getHours()) : addHours(value, 9) @@ -139,17 +148,34 @@ const DateRange: React.FC = ({ ); const dateFormat = getDateFormat(locale); const timeFormat = getTimeFormat(locale); + const formatDateValue = (value: Date | undefined) => + value ? format(value, dateFormat) : ''; + const formatTimeValue = (value: Date | undefined) => + value ? formatTime(value, timeFormat, locale) : ''; + const formatPrintSummary = (labelId: string, value: string) => ( +

+ + {formatMessage({ id: labelId })} + + {value} +

+ ); return ( - <> +
= ({ showMonthDropdown useShortMonthInDropdown /> + - + = ({ timeIntervals={timeIntervals} touched={!!touched.start_time} /> + +
+ {formatPrintSummary( + 'form.event.partitions.date_range.start_date.label', + formatDateValue(selectedStartTime) + )} + {formatPrintSummary( + 'form.event.partitions.date_range.start_time.label', + formatTimeValue(selectedStartTime) + )} +
= ({ showMonthDropdown useShortMonthInDropdown /> + - + = ({ timeIntervals={timeIntervals} touched={!!touched.end_time} /> + - +
+ {formatPrintSummary( + 'form.event.partitions.date_range.end_date.label', + formatDateValue(selectedEndTime) + )} + {formatPrintSummary( + 'form.event.partitions.date_range.end_time.label', + formatTimeValue(selectedEndTime) + )} +
+
); }; diff --git a/src/components/form/partitions/Location.tsx b/src/components/form/partitions/Location.tsx index 15c3bfb8..2e206d7f 100644 --- a/src/components/form/partitions/Location.tsx +++ b/src/components/form/partitions/Location.tsx @@ -169,6 +169,11 @@ const Location: React.FC = ({
+

+ {formatMessage({ + id: 'form.event.field.trash_location.placeholder', + })} +