front: display invalid op message in itinerary modal

Signed-off-by: SharglutDev <[email protected]>

Author: SharglutDev

front/public/locales/en/operational-studies.json

@@ -346,13 +346,19 @@
       "addLocationOnMap": "Add a location on the map",
       "focusLocationOnMap": "Focus the map on this operational point",
       "frameAll": "Center on all path steps on map",
+      "invalidOP": "Non recognized point : ",
       "moveLocationOnMap": "Move location on the map",
       "next": "Next",
+      "opId": "Operational point identifier",
       "opName": "Operational point name",
       "openItineraryModal": "New interface for itinerary edition",
       "secondaryCode": "Code",
+      "requestedPoint": "Point on map",
       "track": "Track",
-      "trainName": "Train name"
+      "trackId": "Track identifier",
+      "trainName": "Train name",
+      "trigram": "Trigram",
+      "UIC": "UIC"
     },
     "launchPathFinding": "Launch pathfinding",
     "manageVias": "Steps management",

front/public/locales/fr/operational-studies.json

@@ -346,13 +346,19 @@
       "addLocationOnMap": "Ajouter un point remarquable sur la carte",
       "focusLocationOnMap": "Centrer la carte sur ce point remarquable",
       "frameAll": "Centrer sur tous les points de passage sur la carte",
+      "invalidOP": "Point non reconnu : ",
       "moveLocationOnMap": "Déplacer le point remarquable sur la carte",
       "next": "Suivant",
+      "opId": "Identifiant de point",
       "opName": "Nom du point remarquable",
       "openItineraryModal": "Nouvelle interface d'édition d'itinéraire",
+      "requestedPoint": "Point sur la carte",
       "secondaryCode": "CH",
       "track": "Voie",
-      "trainName": "Nom du train"
+      "trackId": "Identifiant de voie",
+      "trainName": "Nom du train",
+      "trigram": "Trigramme",
+      "UIC": "UIC"
     },
     "launchPathFinding": "Lancer la recherche d'itinéraire",
     "manageVias": "Gestion des étapes",

front/src/applications/operationalStudies/views/Scenario/components/ManageTimetableItem/Itinerary/PathStepItem.tsx

@@ -39,6 +39,39 @@ const PathStepItem = ({
   const mapSettings = useMapSettings();
   const { updateViewport } = useMapSettingsActions();
 
+  const getInvalidMessage = () => {
+    let message = t('invalidOP');
+    if (!pathStepMetadata?.isInvalid || !pathStep?.location) return message;
+
+    const { location } = pathStep;
+
+    if ('track' in location) {
+      return (message += `${t('requestedPoint')}`);
+    }
+
+    const trackInfo = location.track_reference
+      ? 'track_name' in location.track_reference
+        ? `, ${t('track')} ${location.track_reference.track_name}`
+        : `, ${t('trackId')}`
+      : '';
+
+    if ('operational_point' in location) {
+      return (message += `${t('opId')}${trackInfo}`);
+    }
+
+    const secondaryCodeInfo = `${location.secondary_code ? `/${location.secondary_code}` : ''}`;
+
+    if ('trigram' in location) {
+      message += `${t('trigram')} ${location.trigram}`;
+    }
+
+    if ('uic' in location) {
+      message += `${t('UIC')} ${location.uic}`;
+    }
+
+    return (message += `${secondaryCodeInfo}${trackInfo}`);
+  };
+
   const secondaryCodeSuggestions = useMemo(() => {
     if (!isOpRefMetadata(pathStepMetadata)) return [];
     return [
@@ -238,6 +271,9 @@ const PathStepItem = ({
           </button>
         </div>
       </div>
+      {pathStepMetadata?.isInvalid && (
+        <span className="invalid-step-message">{getInvalidMessage()}</span>
+      )}
     </div>
   );
 };

front/src/styles/scss/applications/operationalStudies/_itineraryModal.scss

@@ -3,6 +3,7 @@
   --footer-height: 96px;
   --footer-box-shadow-height: 1px;
   --path-step-row-gap: 8px;
+  --path-step-wrapper-padding-left: 12px;
   --path-step-wrapper-padding-right: 10px;
   --path-step-secondary-code-width: 60px;
   --path-step-track-name-width: 76px;
@@ -148,7 +149,8 @@
 
         // this wrapper is being used to display the "adding location on map" style
         .path-step-wrapper {
-          padding-inline: 12px var(--path-step-wrapper-padding-right);
+          padding-inline: var(--path-step-wrapper-padding-left)
+            var(--path-step-wrapper-padding-right);
           border-radius: 6px;
           padding-bottom: 4px;
 
@@ -278,6 +280,11 @@
               }
             }
           }
+
+          .invalid-step-message {
+            color: var(--error60);
+            padding-left: calc(51px - var(--path-step-wrapper-padding-left));
+          }
         }
       }
     }