Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

front: stdcm: persist user-entered date and time in the interface #8942

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
+79 −21
Open

front: stdcm: persist user-entered date and time in the interface #8942

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 22 additions & 4 deletions front/src/applications/stdcmV2/components/StdcmDestination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';

import { useTranslation } from 'react-i18next';

Expand All @@ -8,7 +8,7 @@ import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
import type { PathStep } from 'reducers/osrdconf/types';
import { useAppDispatch } from 'store';
import { replaceElementAtIndex } from 'utils/array';
import { extractDateAndTimefromISO } from 'utils/date';
import { extractDateAndTimefromISO, generateISOArrival } from 'utils/date';

import StdcmCard from './StdcmCard';
import StdcmOperationalPoint from './StdcmOperationalPoint';
Expand All @@ -24,6 +24,13 @@ const StdcmDestination = ({
}) => {
const { t } = useTranslation('stdcm');
const dispatch = useAppDispatch();

const [arrivalDateInput, setArrivalDateInput] = useState<Date | undefined>(undefined);
const [arrivalTimeInput, setArrivalTimeInput] = useState<{ hours: number; minutes: number }>({
hours: 0,
minutes: 0,
});

const {
updateDestination,
updateDestinationArrival,
Expand Down Expand Up @@ -59,10 +66,21 @@ const StdcmDestination = ({

const updateDestinationPoint = (pathStep: PathStep | null) => {
dispatch(updateDestination(pathStep));
if (arrivalDateInput && arrivalTimeInput) {
const newOpArrival = generateISOArrival(arrivalDateInput, arrivalTimeInput);
dispatch(updateDestinationArrival(newOpArrival));
}
};

const onDestinationArrivalChange = (arrival: string) => {
dispatch(updateDestinationArrival(arrival));
const onDestinationArrivalChange = (
date: Date,
{ hours, minutes }: { hours: number; minutes: number }
) => {
setArrivalDateInput(date);
setArrivalTimeInput({ hours, minutes });

const newOpArrival = generateISOArrival(date, { hours, minutes });
dispatch(updateDestinationArrival(newOpArrival));
};

const onDestinationArrivalTypeChange = (arrivalType: ArrivalTimeTypes) => {
Expand Down
15 changes: 4 additions & 11 deletions front/src/applications/stdcmV2/components/StdcmOpSchedule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ import { useTranslation } from 'react-i18next';
import { useSelector } from 'react-redux';

import { useOsrdConfSelectors } from 'common/osrdContext';
import { formatLocaleDateToIsoDate, isArrivalDateInSearchTimeWindow } from 'utils/date';
import { isArrivalDateInSearchTimeWindow } from 'utils/date';

import type { ArrivalTimeTypes } from '../types';

type StdcmOpScheduleProps = {
disabled: boolean;
onArrivalChange: (arrival: string) => void;
onArrivalChange: (date: Date, { hours, minutes }: { hours: number; minutes: number }) => void;
onArrivalTypeChange: (arrivalType: ArrivalTimeTypes) => void;
onArrivalToleranceChange: ({
toleranceBefore,
Expand Down Expand Up @@ -77,13 +77,6 @@ const StdcmOpSchedule = ({
};
}, [opTimingData, opToleranceValues, searchDatetimeWindow]);

const updateOpArrival = (date: Date, { hours, minutes }: { hours: number; minutes: number }) => {
date.setHours(hours);
date.setMinutes(minutes);
const newOpArrival = formatLocaleDateToIsoDate(date);
onArrivalChange(newOpArrival);
};

return (
<div className="d-flex flex-column">
<div className="col-12 pr-1">
Expand Down Expand Up @@ -121,7 +114,7 @@ const StdcmOpSchedule = ({
: undefined,
}}
onDateChange={(e) => {
updateOpArrival(e, {
onArrivalChange(e, {
hours: arrivalTimeHours || 0,
minutes: arrivalTimeMinutes || 0,
});
Expand All @@ -135,7 +128,7 @@ const StdcmOpSchedule = ({
hours={arrivalTimeHours}
minutes={arrivalTimeMinutes}
onTimeChange={({ hours, minutes }) => {
updateOpArrival(arrivalDate, {
onArrivalChange(arrivalDate, {
hours,
minutes,
});
Expand Down
24 changes: 20 additions & 4 deletions front/src/applications/stdcmV2/components/StdcmOrigin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useMemo } from 'react';
import { useEffect, useMemo, useState } from 'react';

import { useTranslation } from 'react-i18next';

Expand All @@ -8,7 +8,7 @@ import type { StdcmConfSliceActions } from 'reducers/osrdconf/stdcmConf';
import type { PathStep } from 'reducers/osrdconf/types';
import { useAppDispatch } from 'store';
import { replaceElementAtIndex } from 'utils/array';
import { extractDateAndTimefromISO } from 'utils/date';
import { extractDateAndTimefromISO, generateISOArrival } from 'utils/date';

import StdcmCard from './StdcmCard';
import StdcmOperationalPoint from './StdcmOperationalPoint';
Expand All @@ -25,6 +25,11 @@ const StdcmOrigin = ({
const { t } = useTranslation('stdcm');
const dispatch = useAppDispatch();

const [arrivalDateInput, setArrivalDateInput] = useState<Date | undefined>(undefined);
const [arrivalTimeInput, setArrivalTimeInput] = useState<
{ hours: number; minutes: number } | undefined
>(undefined);

const { updateOrigin, updateOriginArrival, updateOriginArrivalType, updateOriginTolerances } =
useOsrdConfActions() as StdcmConfSliceActions;

Expand All @@ -50,10 +55,21 @@ const StdcmOrigin = ({

const updateOriginPoint = (pathStep: PathStep | null) => {
dispatch(updateOrigin(pathStep));
if (arrivalDateInput && arrivalTimeInput) {
const newOpArrival = generateISOArrival(arrivalDateInput, arrivalTimeInput);
dispatch(updateOriginArrival(newOpArrival));
}
};

const onOriginArrivalChange = (arrival: string) => {
dispatch(updateOriginArrival(arrival));
const onOriginArrivalChange = (
date: Date,
{ hours, minutes }: { hours: number; minutes: number }
) => {
setArrivalDateInput(date);
setArrivalTimeInput({ hours, minutes });

const newOpArrival = generateISOArrival(date, { hours, minutes });
dispatch(updateOriginArrival(newOpArrival));
};

const onOriginArrivalTypeChange = (arrivalType: ArrivalTimeTypes) => {
Expand Down
6 changes: 4 additions & 2 deletions front/src/reducers/osrdconf/osrdConfCommon/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,19 +302,21 @@ export function buildCommonConfReducers<S extends OsrdConfState>(): CommonConfRe
state.startTime = action.payload;
},
updateOrigin(state: Draft<S>, action: PayloadAction<ArrayElement<S['pathSteps']>>) {
const prevOriginArrivalType = state.pathSteps[0]?.arrivalType;
const newPoint = action.payload
? {
...action.payload,
arrivalType: ArrivalTimeTypes.PRECISE_TIME,
arrivalType: prevOriginArrivalType || ArrivalTimeTypes.PRECISE_TIME,
}
: null;
state.pathSteps = updateOriginPathStep(state.pathSteps, newPoint, true);
},
updateDestination(state: Draft<S>, action: PayloadAction<ArrayElement<S['pathSteps']>>) {
const prevDestinationArrivalType = state.pathSteps[state.pathSteps.length - 1]?.arrivalType;
const newPoint = action.payload
? {
...action.payload,
arrivalType: ArrivalTimeTypes.ASAP,
arrivalType: prevDestinationArrivalType || ArrivalTimeTypes.ASAP,
}
: null;
state.pathSteps = updateDestinationPathStep(state.pathSteps, newPoint, true);
Expand Down
14 changes: 14 additions & 0 deletions front/src/utils/__tests__/date.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import {
parseDateTime,
extractDateAndTimefromISO,
isArrivalDateInSearchTimeWindow,
formatLocaleDateToIsoDate,
generateISOArrival,
} from 'utils/date';

describe('dateTimeToIso', () => {
Expand Down Expand Up @@ -134,3 +136,15 @@ describe('isArrivalDateInSearchTimeWindow', () => {
expect(result).toBe(false);
});
});

describe('generateISOArrival', () => {
it('should correctly set hours and minutes and return ISO string', () => {
const date = new Date('2024-08-01T00:00:00Z');
const time = { hours: 10, minutes: 30 };
const expectedISODate = formatLocaleDateToIsoDate(new Date('2024-08-01T10:30:00Z'));

const result = generateISOArrival(date, time);

expect(result).toBe(expectedISODate);
});
});
15 changes: 15 additions & 0 deletions front/src/utils/date.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,3 +229,18 @@ export function isArrivalDateInSearchTimeWindow(
const arrivalDate = new Date(arrivalTime);
return arrivalDate >= searchDatetimeWindow.begin && arrivalDate <= searchDatetimeWindow.end;
}

/**
* Generates an ISO arrival date string based on the provided date, hours, and minutes.
* @param {Date} date - The base date.
* @param {{ hours: number; minutes: number }} - An object containing the hours and the minutes of the arrival time.
* @returns {string} The ISO formatted arrival date string.
*/
export const generateISOArrival = (
date: Date,
{ hours, minutes }: { hours: number; minutes: number }
Comment on lines +240 to +241
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not really an issue, just a suggestion: we could create an explicit type instead of repeating those parameters

) => {
date.setHours(hours);
date.setMinutes(minutes);
return formatLocaleDateToIsoDate(date);
};
Loading