Fix end time date display for scheduling

Fixes display behaviour for the end time date display on the scheduling
pages to go back to how it was before.
Namely the end time date is now again displayed in the same row
as the end time, and is only actually displayed if the end time is
"before" the start time (at which the ui assumes that the end time has
to be on the next day).

Author: Arnei

src/components/events/partials/ModalTabsAndPages/EventDetailsSchedulingTab.tsx

@@ -47,7 +47,6 @@ import { Recording } from "../../../../slices/recordingSlice";
 import { useTranslation } from "react-i18next";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import SchedulingTime from "../wizards/scheduling/SchedulingTime";
-import SchedulingEndDateDisplay from "../wizards/scheduling/SchedulingEndDateDisplay";
 import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
 import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
 import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
@@ -410,16 +409,15 @@ const EventDetailsSchedulingTab = ({
 																	checkConflictsWrapper
 																)
 															}}
+															date={
+																hasAccessRole &&
+																(new Date(formik.values.scheduleEndDate).getDate() !==
+																new Date(formik.values.scheduleStartDate).getDate())
+																? formik.values.scheduleEndDate
+																: undefined
+															}
 														/>
 													)}
-													{hasAccessRole &&
-														formik.values.scheduleEndDate.toString() !==
-															formik.values.scheduleStartDate.toString() && (
-																<SchedulingEndDateDisplay
-																	scheduleEndDate={formik.values.scheduleEndDate}
-																/>
-														)
-													}
 													{!hasAccessRole && (
 													<tr>
 														<td>

src/components/events/partials/ModalTabsAndPages/NewSourcePage.tsx

@@ -42,7 +42,6 @@ import { parseISO } from "date-fns";
 import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
 import { checkConflicts, UploadAssetsTrack } from "../../../../slices/eventSlice";
 import SchedulingTime from "../wizards/scheduling/SchedulingTime";
-import SchedulingEndDateDisplay from "../wizards/scheduling/SchedulingEndDateDisplay";
 import SchedulingLocation from "../wizards/scheduling/SchedulingLocation";
 import SchedulingInputs from "../wizards/scheduling/SchedulingInputs";
 import SchedulingConflicts from "../wizards/scheduling/SchedulingConflicts";
@@ -601,17 +600,15 @@ const Schedule = <T extends {
 									);
 								}
 							}}
+							date={
+								formik.values.sourceMode === "SCHEDULE_SINGLE" &&
+								(new Date(formik.values.scheduleEndDate).getDate() !==
+								new Date(formik.values.scheduleStartDate).getDate())
+								? formik.values.scheduleEndDate
+								: undefined
+							}
 						/>
 
-						{/* display end date if on different day to start date, only if this is current source mode */}
-						{formik.values.sourceMode === "SCHEDULE_SINGLE" &&
-							formik.values.scheduleEndDate.toString() !==
-								formik.values.scheduleStartDate.toString() && (
-									<SchedulingEndDateDisplay
-										scheduleEndDate={formik.values.scheduleEndDate}
-									/>
-							)}
-
 						<SchedulingLocation
 								location={formik.values.location}
 								inputDevices={inputDevices}

src/components/events/partials/wizards/scheduling/SchedulingEndDateDisplay.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from "react-i18next";
 import DropDown from "../../../../shared/DropDown";
 import { hours, minutes } from "../../../../../configs/modalConfig";
 import { formatTimeForDropdown } from "../../../../../utils/dropDownUtils";
+import { getCurrentLanguageInformation } from "../../../../../utils/utils";
 
 const SchedulingTime = ({
 	hour,
@@ -12,7 +13,8 @@ const SchedulingTime = ({
 	hourPlaceholder,
 	minutePlaceholder,
 	callbackHour,
-	callbackMinute
+	callbackMinute,
+	date
 }: {
 	hour: string,
 	minute: string,
@@ -22,8 +24,11 @@ const SchedulingTime = ({
 	minutePlaceholder: string
 	callbackHour: (value: string) => void
 	callbackMinute: (value: string) => void
+	date?: string | Date
 }) => {
 	const { t } = useTranslation();
+	// Get info about the current language and its date locale
+	const currentLanguage = getCurrentLanguageInformation();
 
 	return (
 		<tr>
@@ -64,6 +69,16 @@ const SchedulingTime = ({
 					disabled={disabled}
 					customCSS={{width: 70}}
 				/>
+
+				{/* Displays given date. Can be used to signify which date the
+				  scheduling time belong to*/}
+				{date &&
+					<span style={{ marginLeft: "10px" }}>
+						{new Date(date).toLocaleDateString(
+							currentLanguage ? currentLanguage.dateLocale.code : undefined
+						)}
+					</span>
+				}
 			</td>
 		</tr>
 	)