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

lmr: add mandatory fields and error messages to the form #10271

Open
wants to merge 1 commit into
base: dev
Choose a base branch
from
Open

lmr: add mandatory fields and error messages to the form #10271

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
1 change: 1 addition & 0 deletions front/public/locales/en/stdcm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"invalidDate": "Select a date between {{startDate}} and {{endDate}}"
},
"incompleteForm": "Incomplete form",
"missingValue": "Missing value",
"viaNotDefined": "Au moins une localisation n'est pas renseignée"
},
"leaveAt": "Leave at {{ time }}",
Expand Down
1 change: 1 addition & 0 deletions front/public/locales/fr/stdcm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
"invalidDate": "Renseignez une date entre le {{startDate}} et le {{endDate}}"
},
"incompleteForm": "Formulaire incomplet",
"missingValue": "Valeur manquante",
"viaNotDefined": "Au moins une localisation n'est pas renseignée"
},
"leaveAt": "Partir à {{ time }}",
Expand Down
9 changes: 6 additions & 3 deletions front/src/applications/stdcm/components/StdcmForm/StdcmConfig.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,15 @@ const StdcmConfig = ({
const formRef = useRef<HTMLDivElement>(null);

const [formErrors, setFormErrors] = useState<StdcmConfigErrors>();
const [showErrors, setShowErrors] = useState(false);

const disabled = isPending || retainedSimulationIndex > -1;

const markersInfo = useMemo(() => extractMarkersInfo(pathSteps), [pathSteps]);

const startSimulation = () => {
setShowErrors(true);

const isPathfindingFailed = !!pathfinding && pathfinding.status !== 'success';
const formErrorsStatus = checkStdcmConfigErrors(isPathfindingFailed, pathSteps, t);
if (pathfinding?.status === 'success' && !formErrorsStatus) {
Expand Down Expand Up @@ -146,13 +149,13 @@ const StdcmConfig = ({
/>
<div className="stdcm-simulation-inputs">
<div className="stdcm-consist-container">
<StdcmConsist disabled={disabled} />
<StdcmConsist disabled={disabled} showErrors={showErrors} />
</div>
<div className="stdcm__separator" />
<div ref={formRef} className="stdcm-simulation-itinerary">
<StdcmOrigin disabled={disabled} />
<StdcmOrigin disabled={disabled} showErrors={showErrors} />
<StdcmVias disabled={disabled} />
<StdcmDestination disabled={disabled} />
<StdcmDestination disabled={disabled} showErrors={showErrors} />
<StdcmLinkedTrainSearch
disabled={disabled}
linkedTrainType="posterior"
Expand Down
33 changes: 32 additions & 1 deletion front/src/applications/stdcm/components/StdcmForm/StdcmConsist.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const ConsistCardTitle = ({
);
};

const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
const StdcmConsist = ({ disabled = false, showErrors }: StdcmConfigCardProps) => {
const { t } = useTranslation('stdcm');
const { speedLimitByTag, speedLimitsByTags, dispatchUpdateSpeedLimitByTag } =
useStoreDataForSpeedLimitByTagSelector({ isStdcm: true });
Expand Down Expand Up @@ -65,6 +65,12 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
filters: towedRsFilters,
} = useFilterTowedRollingStock();

const isTractionEngineEmpty = !filters.text.trim();
const isTowedRollingStockEmpty = !towedRsFilters.text.trim();
const isTotalMassEmpty = totalMass === undefined || totalMass === null;
const isTotalLengthEmpty = totalLength === undefined || totalLength === null;
Comment on lines +68 to +71
Copy link
Contributor

Choose a reason for hiding this comment

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

Instead of that, I think you could use the same logic than @Wadjetz in his consist PR (in StdcmConfig). We could have one object having boolean properties for each required fields changing when these fields changes.

We should also setShowError(false) as soon as the field changes.

const isMaxSpeedEmpty = maxSpeed === undefined || maxSpeed === null;
Comment on lines +70 to +72
Copy link
Contributor

Choose a reason for hiding this comment

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

Can’t we use the same function for all number fields?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes, you're right, it would be clearer. I will change this

Copy link
Contributor

Choose a reason for hiding this comment

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

We could use isNil() from lodash ?


useEffect(() => {
if (towedRollingStock) {
searchTowedRollingStock(towedRollingStock.name);
Expand Down Expand Up @@ -128,6 +134,11 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
suggestions={filteredRollingStockList}
getSuggestionLabel={(suggestion: LightRollingStockWithLiveries) => getLabel(suggestion)}
onSelectSuggestion={onSelectSuggestion}
statusWithMessage={
showErrors && isTractionEngineEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
</div>
<div className="towed-rolling-stock">
Expand All @@ -154,6 +165,11 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
prefillConsist(rollingStock, towed, speedLimitByTag);
dispatch(updateTowedRollingStockID(towed?.id));
}}
statusWithMessage={
showErrors && isTowedRollingStockEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
</div>
<div className="stdcm-consist__properties">
Expand All @@ -166,6 +182,11 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
value={totalMass ?? ''}
onChange={onTotalMassChange}
disabled={disabled}
statusWithMessage={
showErrors && isTotalMassEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
<Input
id="length"
Expand All @@ -176,6 +197,11 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
value={totalLength ?? ''}
onChange={onTotalLengthChange}
disabled={disabled}
statusWithMessage={
showErrors && isTotalLengthEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
</div>
<div className="stdcm-consist__properties">
Expand All @@ -194,6 +220,11 @@ const StdcmConsist = ({ disabled = false }: StdcmConfigCardProps) => {
value={maxSpeed ?? ''}
onChange={onMaxSpeedChange}
disabled={disabled}
statusWithMessage={
showErrors && isMaxSpeedEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
</div>
</StdcmCard>
Expand Down
3 changes: 2 additions & 1 deletion front/src/applications/stdcm/components/StdcmForm/StdcmDestination.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import StdcmOperationalPoint from './StdcmOperationalPoint';
import StdcmOpSchedule from './StdcmOpSchedule';
import type { ArrivalTimeTypes, ScheduleConstraint, StdcmConfigCardProps } from '../../types';

const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
const StdcmDestination = ({ disabled = false, showErrors }: StdcmConfigCardProps) => {
const { t } = useTranslation('stdcm');
const dispatch = useAppDispatch();

Expand Down Expand Up @@ -77,6 +77,7 @@ const StdcmDestination = ({ disabled = false }: StdcmConfigCardProps) => {
location={destination.location}
pathStepId={destination.id}
disabled={disabled}
showErrors={showErrors}
/>
<StdcmOpSchedule
onArrivalChange={onArrivalChange}
Expand Down
15 changes: 14 additions & 1 deletion front/src/applications/stdcm/components/StdcmForm/StdcmOperationalPoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ type StdcmOperationalPointProps = {
location?: StdcmPathStep['location'];
pathStepId: string;
disabled?: boolean;
showErrors?: boolean;
};

type Option = { label: string; value: string; uic: number };
Expand All @@ -24,7 +25,12 @@ function formatChCode(chCode: string) {
return chCode === '' ? 'BV' : chCode;
}

const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperationalPointProps) => {
const StdcmOperationalPoint = ({
location,
pathStepId,
disabled,
showErrors,
}: StdcmOperationalPointProps) => {
const { t } = useTranslation('stdcm');
const dispatch = useAppDispatch();

Expand All @@ -36,6 +42,8 @@ const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperatio

const { updateStdcmPathStep } = useOsrdConfActions() as StdcmConfSliceActions;

const isFieldEmpty = !searchTerm.trim();

const operationalPointsSuggestions = useMemo(
() =>
// Temporary filter added to show a more restrictive list of suggestions inside the stdcm app.
Expand Down Expand Up @@ -149,6 +157,11 @@ const StdcmOperationalPoint = ({ location, pathStepId, disabled }: StdcmOperatio
getSuggestionLabel={(option: Option) => option?.label}
onSelectSuggestion={onSelectSuggestion}
disableDefaultFilter
statusWithMessage={
showErrors && isFieldEmpty
? { tooltip: 'left', status: 'error', message: t('form.missingValue') }
: undefined
}
/>
</div>
<div className="col-3 p-0">
Expand Down
3 changes: 2 additions & 1 deletion front/src/applications/stdcm/components/StdcmForm/StdcmOrigin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import StdcmOperationalPoint from './StdcmOperationalPoint';
import StdcmOpSchedule from './StdcmOpSchedule';
import type { ArrivalTimeTypes, ScheduleConstraint, StdcmConfigCardProps } from '../../types';

const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
const StdcmOrigin = ({ disabled = false, showErrors }: StdcmConfigCardProps) => {
const { t } = useTranslation('stdcm');
const dispatch = useAppDispatch();

Expand Down Expand Up @@ -81,6 +81,7 @@ const StdcmOrigin = ({ disabled = false }: StdcmConfigCardProps) => {
location={origin.location}
pathStepId={origin.id}
disabled={disabled}
showErrors={showErrors}
/>
<StdcmOpSchedule
onArrivalChange={onOriginArrivalChange}
Expand Down
1 change: 1 addition & 0 deletions front/src/applications/stdcm/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ export type StdcmSimulation = {
/** This type is used for StdcmConsist, StdcmOrigin, StdcmDestination and StdcmVias components */
export type StdcmConfigCardProps = {
disabled?: boolean;
showErrors?: boolean;
};

export enum ArrivalTimeTypes {
Expand Down
5 changes: 5 additions & 0 deletions front/src/styles/scss/applications/stdcm/_configError.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,3 +32,8 @@
line-height: 24px;
}
}

// TODO: Should be removed when the modification on the tooltip on OSRD_UI are done
.status-message-wrapper-tooltip.tooltip-left {
left: -5px !important;
}
Loading