Merge branch 'enter-single-startdate-in-daterangepicker' of Arnei/opencast-admin-interface into main

Pull request #1119

  Fix entering single date in date range picker

Author: gregorydlogan

src/components/shared/TableFilters.tsx

@@ -159,26 +159,47 @@ const TableFilters = ({
 			end?.setMinutes(59);
 			end?.setSeconds(59);
 
-			if (start && end && moment(start).isValid() && moment(end).isValid()) {
-				let filter = filterMap.find(({ name }) => name === selectedFilter);
-				if (filter) {
-					dispatch(editFilterValue({
-						filterName: filter.name,
-						value: start.toISOString() + "/" + end.toISOString()
-					}));
-					setFilterSelector(false);
-					dispatch(removeSelectedFilter());
-					// Reload of resource after going to very first page.
-					dispatch(goToPage(0))
-					await dispatch(loadResource());
-					dispatch(loadResourceIntoTable());
-				}
-			}
+			submitDateFilter(start, end);
+
 			if (start) setStartDate(start);
 			if (end) setEndDate(end);
 		}
 	}
 
+	// Workaround for entering a date range by only entering one date
+	// (e.g. 01/01/2025 results in a range of 01/01/2025 - 01/01/2025)
+	const handleDatePickerOnKeyDown = async(keyEvent: React.KeyboardEvent<HTMLElement>) => {
+		if (keyEvent.key === "Enter") {
+			let end = endDate ?? (startDate ? new Date(startDate) : undefined);
+			end?.setHours(23);
+			end?.setMinutes(59);
+			end?.setSeconds(59);
+
+			submitDateFilter(
+				startDate,
+				end
+			)
+		}
+	}
+
+	const submitDateFilter = async(start: Date | undefined | null, end: Date | undefined | null) => {
+		if (start && end && moment(start).isValid() && moment(end).isValid()) {
+			let filter = filterMap.find(({ name }) => name === selectedFilter);
+			if (filter) {
+				dispatch(editFilterValue({
+					filterName: filter.name,
+					value: start.toISOString() + "/" + end.toISOString()
+				}));
+				setFilterSelector(false);
+				dispatch(removeSelectedFilter());
+				// Reload of resource after going to very first page.
+				dispatch(goToPage(0))
+				await dispatch(loadResource());
+				dispatch(loadResourceIntoTable());
+			}
+		}
+	}
+
 	useHotkeys(
     availableHotkeys.general.REMOVE_FILTERS.sequence,
     () => removeFilters(),
@@ -275,6 +296,7 @@ const TableFilters = ({
 										startDate={startDate}
 										endDate={endDate}
 										handleDate={handleDatepicker}
+										handleDatePickerOnKeyDown={handleDatePickerOnKeyDown}
 										handleChange={handleChange}
 										openSecondFilterMenu={openSecondFilterMenu}
 										setOpenSecondFilterMenu={setOpenSecondFilterMenu}
@@ -353,6 +375,7 @@ const TableFilters = ({
 const FilterSwitch = ({
 	filter,
 	handleChange,
+	handleDatePickerOnKeyDown,
 	startDate,
 	endDate,
 	handleDate,
@@ -362,6 +385,7 @@ const FilterSwitch = ({
 } : {
 	filter: FilterData | undefined,
 	handleChange: (name: string, value: string) => void,
+	handleDatePickerOnKeyDown: (keyEvent: React.KeyboardEvent<HTMLElement>) => void,
 	startDate: Date | undefined,
 	endDate: Date | undefined,
 	handleDate: (dates: [Date | undefined | null, Date | undefined | null]) => void,
@@ -429,6 +453,7 @@ const FilterSwitch = ({
 						autoFocus
 						selected={startDate}
 						onChange={(dates) => handleDate(dates)}
+						onKeyDown={(key) => handleDatePickerOnKeyDown(key)}
 						startDate={startDate}
 						endDate={endDate}
 						selectsRange