Nested single day events always shown only with time (#2122)

client/components/Events/EventDateTime.tsx

@@ -8,6 +8,8 @@ import {eventUtils, timeUtils} from '../../utils';
 import {DateTime} from '../UI';
 
 import './style.scss';
+import {Spacer} from 'superdesk-ui-framework/react';
+import {isSameDay} from './../../helpers';
 
 interface IProps {
   item: IEventItem;
@@ -23,7 +25,8 @@ export class EventDateTime extends React.PureComponent<IProps> {
         const start = eventUtils.getStartDate(item);
         const end = eventUtils.getEndDate(item);
         const isAllDay = eventUtils.isEventAllDay(start, end);
-        const multiDay = !eventUtils.isEventSameDay(start, end);
+        const multiDay = !isSameDay(start, end);
+        const isEventAndPlanningSameDate = isSameDay(start, this.props.planningProps?.date);
         const showEventStartDate = eventUtils.showEventStartDate(start, multiDay, this.props.planningProps?.date);
         const isRemoteTimeZone = timeUtils.isEventInDifferentTimeZone(item);
         const withYear = multiDay && start.year() !== end.year();
@@ -71,7 +74,18 @@ export class EventDateTime extends React.PureComponent<IProps> {
 
         return isAllDay && !ignoreAllDay ? (
             <span className="EventDateTime sd-list-item__slugline sd-no-wrap">
-                {gettext('All day')}
+                <Spacer h gap={'4'}>
+                    {(!isEventAndPlanningSameDate || multiDay) && (
+                        <DateTime
+                            withDate={showEventStartDate}
+                            withYear={false}
+                            date={start}
+                            {...commonProps}
+                            withTime={false}
+                        />
+                    )}
+                    {gettext('All day')}
+                </Spacer>
             </span>
         ) : (
             <span className="EventDateTime sd-list-item__slugline sd-no-wrap">

client/components/Events/EventScheduleInput/index.tsx

@@ -9,6 +9,7 @@ import {TO_BE_CONFIRMED_FIELD} from '../../../constants';
 
 import {Row, DateTimeInput, LineInput, ToggleInput, Field, TimeZoneInput} from '../../UI/Form';
 import {RecurringRulesInput} from '../RecurringRulesInput';
+import {isSameDay} from './../../../helpers';
 
 interface IProps {
     item: IEventItem;
@@ -42,7 +43,7 @@ export class EventScheduleInput extends React.Component<IProps, IState> {
 
         this.state = {
             isAllDay: eventUtils.isEventAllDay(dates.start, dates.end, true),
-            isMultiDay: !eventUtils.isEventSameDay(dates.start, dates.end),
+            isMultiDay: !isSameDay(dates.start, dates.end),
         };
 
         this.onChange = this.onChange.bind(this);
@@ -197,7 +198,7 @@ export class EventScheduleInput extends React.Component<IProps, IState> {
     componentWillReceiveProps(nextProps: Readonly<IProps>) {
         const nextDates = nextProps.diff?.dates ?? {};
         const isAllDay = eventUtils.isEventAllDay(nextDates.start, nextDates.end, true);
-        const isMultiDay = !eventUtils.isEventSameDay(nextDates.start, nextDates.end);
+        const isMultiDay = !isSameDay(nextDates.start, nextDates.end);
 
         const newState: Partial<IState> = {};
 

client/components/ItemActionConfirmation/forms/rescheduleEventForm.tsx

@@ -20,6 +20,7 @@ import {Row} from '../../UI/Preview';
 import {TextAreaInput, Field} from '../../UI/Form';
 
 import '../style.scss';
+import {isSameDay} from './../../../helpers';
 
 export class RescheduleEventComponent extends React.Component {
     constructor(props) {
@@ -134,8 +135,8 @@ export class RescheduleEventComponent extends React.Component {
             fieldsToValidate // Validate only those fields which can change while rescheduling.
         );
 
-        const multiDayChanged = eventUtils.isEventSameDay(original.dates.start, original.dates.end) &&
-            !eventUtils.isEventSameDay(diff.dates.start, diff.dates.end);
+        const multiDayChanged = isSameDay(original.dates.start, original.dates.end) &&
+            !isSameDay(diff.dates.start, diff.dates.end);
 
         if ((!diff[TO_BE_CONFIRMED_FIELD] &&
             eventUtils.eventsDatesSame(diff, original, TIME_COMPARISON_GRANULARITY.MINUTE)) ||

client/components/UI/DateTime.tsx

@@ -1,12 +1,25 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import moment from 'moment';
 
 import {appConfig} from 'appConfig';
 import {superdeskApi} from '../../superdeskApi';
 import {timeUtils} from '../../utils';
 
 import './style.scss';
+import {IDateTime} from 'interfaces';
+
+interface IPropsDateTime {
+    date: IDateTime,
+    withTime?: boolean,
+    withYear?: boolean,
+    withDate?: boolean,
+    padLeft?: boolean,
+    toBeConfirmed?: boolean,
+    isFullDay?: boolean,
+    isEndEventDateTime?: boolean,
+    noEndTime?: boolean,
+    multiDay?: boolean,
+}
 
 /**
  * @ngdoc react
@@ -24,7 +37,7 @@ function DateTime({
     isEndEventDateTime,
     noEndTime,
     multiDay,
-}) {
+}: IPropsDateTime) {
     const {gettext} = superdeskApi.localization;
     const dateFormat = appConfig.planning.dateformat;
     const timeFormat = appConfig.planning.timeformat;
@@ -71,24 +84,4 @@ function DateTime({
     );
 }
 
-DateTime.propTypes = {
-    date: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-    withTime: PropTypes.bool,
-    withYear: PropTypes.bool,
-    withDate: PropTypes.bool,
-    padLeft: PropTypes.bool,
-    toBeConfirmed: PropTypes.bool,
-    isFullDay: PropTypes.bool,
-    isEndEventDateTime: PropTypes.bool,
-    noEndTime: PropTypes.bool,
-    multiDay: PropTypes.bool,
-};
-
-DateTime.defaultProps = {
-    withTime: true,
-    withDate: true,
-    withYear: true,
-    padLeft: false,
-};
-
 export default DateTime;

client/components/fields/editor/EventSchedule.tsx

@@ -11,6 +11,7 @@ import {EditorFieldStartDateTime} from './StartDateTime';
 import {Row, TimeZoneInput} from '../../UI/Form';
 import {eventUtils, timeUtils} from '../../../utils';
 import {TO_BE_CONFIRMED_FIELD} from '../../../constants';
+import {isSameDay} from './../../../helpers';
 
 interface IProps extends IEditorFieldProps {
     item: IEventItem;
@@ -80,7 +81,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
         const _startTime = this.props.item?._startTime;
         const defaultDurationOnChange = this.props.profile?.editor?.dates?.default_duration_on_change ?? 1;
         const isAllDay = eventUtils.isEventAllDay(startDate, endDate, true);
-        const isMultiDay = !eventUtils.isEventSameDay(startDate, endDate);
+        const isMultiDay = !isSameDay(startDate, endDate);
         const newStartDate = !startDate ?
             value :
             moment(startDate)
@@ -130,7 +131,7 @@ export class EditorFieldEventSchedule extends React.PureComponent<IProps> {
             endDate.hour(value.hour()).minute(value.minute()) :
             value;
         const isAllDay = eventUtils.isEventAllDay(startDate, endDate, true);
-        const isMultiDay = !eventUtils.isEventSameDay(startDate, endDate);
+        const isMultiDay = !isSameDay(startDate, endDate);
         const changes = {'dates.end': newEndDate};
 
         if (((_endTime && isAllDay) || !_endTime) &&

client/helpers.ts

@@ -1,5 +1,6 @@
+import moment from 'moment';
 import {GENERIC_ITEM_ACTIONS} from './constants';
-import {IItemAction} from './interfaces';
+import {IDateTime, IItemAction} from './interfaces';
 
 export function isItemAction(
     x: IItemAction | typeof GENERIC_ITEM_ACTIONS.DIVIDER | typeof GENERIC_ITEM_ACTIONS.LABEL,
@@ -11,4 +12,8 @@ export function isMenuDivider(
     x: IItemAction | typeof GENERIC_ITEM_ACTIONS.DIVIDER | typeof GENERIC_ITEM_ACTIONS.LABEL,
 ): x is typeof GENERIC_ITEM_ACTIONS.DIVIDER {
     return x['label'] != null && x['label'] === GENERIC_ITEM_ACTIONS.DIVIDER.label;
-}
+}
+
+export function isSameDay(startingDate: IDateTime, endingDate: IDateTime): boolean {
+    return moment(startingDate).format('DD/MM/YYYY') === moment(endingDate).format('DD/MM/YYYY');
+}

client/utils/events.ts

@@ -57,6 +57,7 @@ import {
     sanitizeItemFields,
 } from './index';
 import {toUIFrameworkInterface, getRelatedEventIdsForPlanning} from './planning';
+import {isSameDay} from './../helpers';
 
 
 /**
@@ -76,10 +77,6 @@ function isEventAllDay(startingDate: IDateTime, endingDate: IDateTime, checkMult
         end.isSame(end.clone().endOf('day'), 'minute');
 }
 
-function isEventSameDay(startingDate: IDateTime, endingDate: IDateTime): boolean {
-    return moment(startingDate).format('DD/MM/YYYY') === moment(endingDate).format('DD/MM/YYYY');
-}
-
 function showEventStartDate(eventDate: IDateTime, multiDay: boolean, planningDate?: IDateTime): boolean {
     if (planningDate == null) {
         return true;
@@ -843,7 +840,7 @@ function getEventActions(
         const CREATE_PLANNING = callBacks[EVENTS.ITEM_ACTIONS.CREATE_PLANNING.actionName];
         const CREATE_AND_OPEN_PLANNING = callBacks[EVENTS.ITEM_ACTIONS.CREATE_AND_OPEN_PLANNING.actionName];
 
-        (!withMultiPlanningDate || self.isEventSameDay(item)) ?
+        (!withMultiPlanningDate || isSameDay(item)) ?
             self.getSingleDayPlanningActions(item, actions, CREATE_PLANNING, CREATE_AND_OPEN_PLANNING) :
             self.getMultiDayPlanningActions(item, actions, CREATE_PLANNING, CREATE_AND_OPEN_PLANNING);
     }
@@ -1361,7 +1358,6 @@ const self = {
     canUpdateEventTime,
     canConvertToRecurringEvent,
     canUpdateEventRepetitions,
-    isEventSameDay,
     showEventStartDate,
     isEventRecurring,
     getDateStringForEvent,

client/validators/events.ts

@@ -7,6 +7,7 @@ import {gettext, eventUtils} from '../utils';
 import * as selectors from '../selectors';
 import {formProfile} from './profile';
 import {PRIVILEGES, EVENTS, TO_BE_CONFIRMED_FIELD} from '../constants';
+import {isSameDay} from './../helpers';
 
 const validateRequiredDates = ({value, errors, messages, diff}) => {
     if (!get(value, 'start')) {
@@ -46,7 +47,7 @@ const validateDateRange = ({value, errors, messages}) => {
     }
 
     if (endDate.isSameOrBefore(startDate, 'minutes')) {
-        if (eventUtils.isEventSameDay(value.start, value.end)) {
+        if (isSameDay(value.start, value.end)) {
             set(errors, '_endTime', gettext('End time should be after start time'));
             messages.push(gettext('END TIME should be after START TIME'));
         } else {