Merge branch 'scheduling-endtime-display' of Arnei/opencast-admin-interface into main

Pull request #1158

  Fix end time date display for scheduling

Author: gregorydlogan

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";
@@ -431,16 +430,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

@@ -44,7 +44,6 @@ import { checkConflicts, UploadAssetsTrack } from "../../../../slices/eventSlice
 import ModalContentTable from "../../../shared/modals/ModalContentTable";
 import ButtonLikeAnchor from "../../../shared/ButtonLikeAnchor";
 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";
@@ -599,17 +598,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";
 import { ParseKeys } from "i18next";
 
 const SchedulingTime = ({
@@ -13,7 +14,8 @@ const SchedulingTime = ({
 	hourPlaceholder,
 	minutePlaceholder,
 	callbackHour,
-	callbackMinute
+	callbackMinute,
+	date
 }: {
 	hour: string,
 	minute: string,
@@ -23,8 +25,11 @@ const SchedulingTime = ({
 	minutePlaceholder: ParseKeys
 	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>
@@ -65,6 +70,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>
 	)