From 2ac3a2bd8976b78ff2fd92efb9ab474ca6d5b36d Mon Sep 17 00:00:00 2001
From: SarahBellaha <sarah.bellaha@sncf.fr>
Date: Thu, 21 Dec 2023 17:33:23 +0100
Subject: [PATCH] front: search op with ci - ch code

---
 front/public/locales/en/map-search.json       |  38 +++---
 front/public/locales/fr/map-search.json       |  38 +++---
 front/src/common/BootstrapSNCF/InputSNCF.tsx  | 114 +++++++++---------
 .../common/Map/Search/MapSearchStation.tsx    |  64 +++++-----
 4 files changed, 131 insertions(+), 123 deletions(-)

diff --git a/front/public/locales/en/map-search.json b/front/public/locales/en/map-search.json
index 749a09080f3..8ed9a5c3e3c 100644
--- a/front/public/locales/en/map-search.json
+++ b/front/public/locales/en/map-search.json
@@ -1,34 +1,34 @@
 {
+  "all": "All",
+  "aspects": "States",
+  "errorMessages": {
+    "unableToSearchSignal": "Signal search impossible"
+  },
+  "labelbvonly": "BV only",
+  "line": "Line",
   "linecode": "Line code",
   "name": "Name",
+  "noAspectSelected": "No state selected",
   "noresult": "No results",
+  "pk": "PK",
+  "placeholderchcode": "CH code",
   "placeholderline": "Line name or number",
+  "placeholdername": "Name, label, CI code",
   "placeholdersignal": "Signal name",
-  "placeholdername": "Name, label",
-  "placeholderchcode": "CH code",
-  "labelbvonly": "BV only",
-  "pk": "PK",
-  "resultsCount_zero": "No results",
+  "reset": "Reset",
   "resultsCount_one": "1 result",
   "resultsCount_other": "{{ count }} results",
+  "resultsCount_zero": "No results",
   "search": "Search",
   "signal": "Signal",
   "signalbox": "Switchbox",
   "station": "Station",
-  "trackname": "Track",
-  "type": "Type",
-  "line": "Line",
-  "reset": "Reset",
-  "aspects": "States",
-  "noAspectSelected": "No state selected",
-  "signalSystem": "Signalling system",
-  "errorMessages": {
-    "unableToSearchSignal": "Signal search impossible"
-  },
-  "all": "All",
   "signalSettings": {
-    "Nf": "Not crossable",
     "distant": "Far",
-    "is_430": "430"
-  }
+    "is_430": "430",
+    "Nf": "Not crossable"
+  },
+  "signalSystem": "Signalling system",
+  "trackname": "Track",
+  "type": "Type"
 }
diff --git a/front/public/locales/fr/map-search.json b/front/public/locales/fr/map-search.json
index d0be610c2e9..5725c733be5 100644
--- a/front/public/locales/fr/map-search.json
+++ b/front/public/locales/fr/map-search.json
@@ -1,34 +1,34 @@
 {
+  "all": "Tous",
+  "aspects": "Aspects",
+  "errorMessages": {
+    "unableToSearchSignal": "Recherche du signal impossible"
+  },
+  "labelbvonly": "BV uniquement",
+  "line": "Ligne",
   "linecode": "Code ligne",
   "name": "Nom",
+  "noAspectSelected": "Aucun aspect sélectionné",
   "noresult": "Aucun résultat",
+  "pk": "PK",
+  "placeholderchcode": "Code CH",
   "placeholderline": "Nom ou numéro de ligne",
+  "placeholdername": "Nom, appelation, libellé, code CI",
   "placeholdersignal": "Nom du signal",
-  "placeholdername": "Nom, appelation, libellé",
-  "placeholderchcode": "Code CH",
-  "labelbvonly": "BV uniquement",
-  "pk": "PK",
-  "resultsCount_zero": "Aucun résultat",
+  "reset": "Réinitialiser",
   "resultsCount_one": "1 résultat",
   "resultsCount_other": "{{ count }} résultats",
+  "resultsCount_zero": "Aucun résultat",
   "search": "Rechercher",
   "signal": "Signal",
   "signalbox": "Poste",
   "station": "Gare",
-  "trackname": "Voie",
-  "type": "Type",
-  "line": "Ligne",
-  "reset": "Réinitialiser",
-  "aspects": "Aspects",
-  "noAspectSelected": "Aucun aspect sélectionné",
-  "signalSystem": "Système de signalisation",
-  "errorMessages": {
-    "unableToSearchSignal": "Recherche du signal impossible"
-  },
-  "all": "Tous",
   "signalSettings": {
-    "Nf": "Non franchissable",
     "distant": "Distant",
-    "is_430": "430"
-  }
+    "is_430": "430",
+    "Nf": "Non franchissable"
+  },
+  "signalSystem": "Système de signalisation",
+  "trackname": "Voie",
+  "type": "Type"
 }
diff --git a/front/src/common/BootstrapSNCF/InputSNCF.tsx b/front/src/common/BootstrapSNCF/InputSNCF.tsx
index 43caea358d7..b98c8b17213 100644
--- a/front/src/common/BootstrapSNCF/InputSNCF.tsx
+++ b/front/src/common/BootstrapSNCF/InputSNCF.tsx
@@ -1,4 +1,6 @@
+/* eslint-disable jsx-a11y/no-autofocus */
 import React, { InputHTMLAttributes, ReactNode } from 'react';
+import cx from 'classnames';
 
 export type InputSNCFProps = {
   id: string;
@@ -6,6 +8,7 @@ export type InputSNCFProps = {
   name?: string;
   label?: JSX.Element | string;
   placeholder?: string;
+  title?: string;
   onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
   value?: string | number;
   readonly?: boolean;
@@ -39,32 +42,34 @@ export type InputSNCFProps = {
   condensed?: boolean;
   textRight?: boolean;
   disabled?: boolean;
+  ref?: React.MutableRefObject<HTMLInputElement>;
 };
 
 const InputSNCF = ({
   // Basic input props
   id,
   type,
-  name = undefined,
-  label = undefined,
-  placeholder = undefined,
-  onChange = undefined,
-  value = undefined,
+  name,
+  label,
+  placeholder,
+  title,
+  onChange,
+  value,
   readonly = false,
   inputProps = {},
-  list = undefined,
+  list,
   // Error handling
   isInvalid = false,
-  errorMsg = undefined,
+  errorMsg,
   // Clear button
   clearButton = false,
-  onClear = undefined,
+  onClear,
   // Options for the appened icon
-  appendOptions = undefined,
+  appendOptions,
   // Styling props
-  unit = undefined,
-  min = undefined,
-  max = undefined,
+  unit,
+  min,
+  max,
   sm = false,
   whiteBG = false,
   noMargin = false,
@@ -75,33 +80,19 @@ const InputSNCF = ({
   condensed = false,
   textRight = false,
   disabled = false,
+  ref = undefined,
 }: InputSNCFProps): JSX.Element => {
   // Build custom classes
-  const formSize = sm ? 'form-control-sm' : '';
-  const readOnlyFlag = readonly ? 'readonly' : '';
-  const backgroundColor = whiteBG ? 'bg-white' : '';
-  const clearOption = clearButton ? 'clear-option' : '';
-  const flex = isFlex ? 'd-flex align-items-center' : '';
-  const condensedIcon = condensed ? 'condensed-icon' : '';
-  const condensedInput = condensed ? 'px-2' : '';
   const textAlignmentClass = textRight ? 'right-alignment' : 'left-alignment';
-  // Test and adapt display if entry is invalid
-  let invalidClass = '';
-  let invalidMsg: JSX.Element | null = null;
-  if (isInvalid) {
-    invalidClass = 'is-invalid';
-    invalidMsg = <div className="invalid-feedback">{errorMsg}</div>;
-  }
 
-  // Appends a icon button right next to the input field
+  // Appends an icon button right next to the input field
   const appendButton = (small: boolean) => {
-    const newFormSize = small ? 'btn-sm' : '';
     if (appendOptions) {
       return (
         <div className="input-group-append input-group-last">
           <button
             type="button"
-            className={`${newFormSize} btn btn-primary btn-only-icon active`}
+            className={cx('btn', 'btn-primary', 'btn-only-icon', 'active', { 'btn-sm': small })}
             onClick={appendOptions.onClick}
             disabled={disabled}
           >
@@ -115,44 +106,48 @@ const InputSNCF = ({
   };
 
   // Displays a button at the end of the input field to clear the input
-  const addClearButton = () => {
-    const displayClearButton = clearButton && value;
-
-    // Returns null if the clear button is not used
-    if (!displayClearButton) return null;
-
-    // Else renders the button
-    return (
-      <button type="button" className="btn-clear btn-primary" onClick={onClear}>
-        <span className="sr-only">Supprimer le texte</span>
-        <i className="icons-close" aria-hidden="true" />
-      </button>
-    );
-  };
-
+  const addClearButton = () => (
+    <button type="button" className="btn-clear btn-primary" onClick={onClear}>
+      <span className="sr-only">Supprimer le texte</span>
+      <i className="icons-close" aria-hidden="true" />
+    </button>
+  );
   // Renders a basic input field without any underlying list
   const basicInput = () => {
     const inputComponent = (
       <>
         {label && (
           <label
-            className={flex ? 'font-weight-medium mb-0 mr-2' : 'font-weight-medium mb-2'}
+            className={cx('font-weight-medium', { 'mb-0 mr-2': isFlex, 'mb-2': !isFlex })}
             htmlFor={id}
           >
             {label}
           </label>
         )}
-        <div className={appendOptions ? 'input-group' : ''}>
-          <div className={`form-control-container ${invalidClass} ${unit ? 'has-right-icon' : ''}`}>
+        <div className={cx({ 'input-group': appendOptions })}>
+          <div
+            className={cx('form-control-container', {
+              'is-invalid': isInvalid,
+              'has-right-icon': unit,
+            })}
+          >
             <input
+              autoFocus={focus}
               type={type}
               onChange={onChange}
-              className={`form-control ${backgroundColor} ${formSize} ${readOnlyFlag} ${clearOption} ${condensedInput} ${textAlignmentClass}`}
+              className={cx('form-control', textAlignmentClass, {
+                'bg-white': whiteBG,
+                'clear-option': clearButton,
+                'form-control-sm': sm,
+                'px-2': condensed,
+                readonly,
+              })}
               id={id}
               name={name}
               value={disabled ? '' : value}
               placeholder={placeholder}
-              ref={(input) => (focus ? input && input.focus() : null)}
+              title={title}
+              ref={ref}
               min={min}
               max={max}
               disabled={disabled}
@@ -162,22 +157,27 @@ const InputSNCF = ({
               list={list}
             />
             <span className="form-control-state" />
-            {unit && <span className={`form-control-icon small ${condensedIcon}`}>{unit}</span>}
-            {addClearButton()}
+            {unit && (
+              <span className={cx('form-control-icon', 'small', { 'condensed-icon': condensed })}>
+                {unit}
+              </span>
+            )}
+            {clearButton && value && addClearButton()}
           </div>
           {sm && appendButton(sm)}
-          {invalidMsg}
+          {isInvalid && <div className="invalid-feedback">{errorMsg}</div>}
         </div>
       </>
     );
 
-    return flex ? <div className={flex}>{inputComponent}</div> : inputComponent;
+    return isFlex ? (
+      <div className="d-flex align-items-center">{inputComponent}</div>
+    ) : (
+      inputComponent
+    );
   };
 
-  // Build conditional classes
-  const containerMargin = noMargin ? '' : 'mb-4';
-
-  return containerMargin ? <div className={containerMargin}>{basicInput()}</div> : basicInput();
+  return noMargin ? basicInput() : <div className="mb-4">{basicInput()}</div>;
 };
 
 export default InputSNCF;
diff --git a/front/src/common/Map/Search/MapSearchStation.tsx b/front/src/common/Map/Search/MapSearchStation.tsx
index d5de58fdd16..9d800f2bd01 100644
--- a/front/src/common/Map/Search/MapSearchStation.tsx
+++ b/front/src/common/Map/Search/MapSearchStation.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { getMap } from 'reducers/map/selectors';
 import { osrdEditoastApi } from 'common/api/osrdEditoastApi';
 import { onResultSearchClick } from 'common/Map/utils';
-import { updateMapSearchMarker } from 'reducers/map';
 import { useDebounce } from 'utils/helpers';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
+
 import InputSNCF from 'common/BootstrapSNCF/InputSNCF';
 
 import type { SearchQuery, SearchResultItemOperationalPoint } from 'common/api/osrdEditoastApi';
@@ -23,10 +23,10 @@ type MapSearchStationProps = {
 
 const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchStationProps) => {
   const map = useSelector(getMap);
-  const [searchState, setSearch] = useState('');
   const [chCodeFilter, setChCodeFilter] = useState('');
   const [bvOnly, toggleBvOnly] = useState(false);
   const [searchResults, setSearchResults] = useState<SearchResultItemOperationalPoint[]>([]);
+  const [searchState, setSearch] = useState('');
   const [trigramResults, setTrigramResults] = useState<SearchResultItemOperationalPoint[]>([]);
   const [nameResults, setNameResults] = useState<SearchResultItemOperationalPoint[]>([]);
   const infraID = useInfraID();
@@ -37,6 +37,10 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
   const { t } = useTranslation(['map-search']);
 
   const debouncedSearchTerm = useDebounce(searchState, 300);
+  const isSearchingByName = useMemo(() => {
+    const charCode = searchState.charCodeAt(0) ?? 0;
+    return charCode > 57;
+  }, [searchState]);
 
   const resetSearchResult = () => {
     setNameResults([]);
@@ -44,18 +48,25 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
   };
 
   // Create playload based on the type of search "name" or "trigram"
-
   const createPayload = (searchQuery: SearchQuery) => ({
     object: 'operationalpoint',
     query: ['and', searchQuery, infraID !== undefined ? ['=', ['infra_id'], infraID] : true],
   });
 
+  /** Builds the query */
+  const createQuery = (isSearchByTrigram?: boolean) => {
+    if (isSearchByTrigram) return ['=i', ['trigram'], searchState];
+    return isSearchingByName
+      ? ['search', ['name'], searchState]
+      : ['=', ['ci'], Number(searchState)];
+  };
+
   // Sort on name, and on yardname
   const orderResults = (results: SearchResultItemOperationalPoint[]) =>
     results.slice().sort((a, b) => a.name.localeCompare(b.name) || a.ch.localeCompare(b.ch));
 
   const searchByTrigrams = useCallback(async () => {
-    const searchQuery = ['=i', ['trigram'], searchState];
+    const searchQuery = createQuery(true);
     const payload = createPayload(searchQuery);
     await postSearch({
       searchPayload: payload,
@@ -69,9 +80,10 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
       });
   }, [searchState]);
 
-  const searchByNames = useCallback(async () => {
-    const searchQuery = ['search', ['name'], searchState];
+  const searchByCodesAndNames = useCallback(async () => {
+    const searchQuery = createQuery();
     const payload = createPayload(searchQuery);
+
     await postSearch({
       searchPayload: payload,
     })
@@ -85,16 +97,17 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
   }, [searchState]);
 
   const getResult = async () => {
-    if (searchState.length < 3) {
-      setNameResults([]);
-      searchByTrigrams();
+    if (!isSearchingByName && searchState.length !== 6) return;
+    if (searchState.length > 3) {
+      setTrigramResults([]);
+      searchByCodesAndNames();
     } else if (searchState.length === 3) {
       // The trigram search should always appear first, we need two api calls here.
       searchByTrigrams();
-      searchByNames();
-    } else if (searchState.length > 3) {
-      setTrigramResults([]);
-      searchByNames();
+      searchByCodesAndNames();
+    } else if (searchState.length > 0) {
+      setNameResults([]);
+      searchByTrigrams();
     }
   };
 
@@ -132,32 +145,27 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
     closeMapSearchPopUp();
   };
 
-  const clearSearchResult = () => {
-    setSearch('');
-    resetSearchResult();
-    setSearchResults([]);
-    dispatch(updateMapSearchMarker(undefined));
-  };
-
   return (
     <>
       <div className="d-flex mb-2">
-        <span className="flex-grow-1 pr-2">
+        <span className="flex-fill mr-2">
           <InputSNCF
-            type="text"
-            placeholder={t('map-search:placeholdername')}
             id="map-search-station"
+            name="map-search-station"
+            placeholder={t('map-search:placeholdername')}
+            title={t('map-search:placeholdername')}
+            type="text"
+            value={searchState}
             onChange={(e) => {
               setSearch(e.target.value);
             }}
-            onClear={clearSearchResult}
-            value={searchState}
+            onClear={() => setSearch('')}
             clearButton
             noMargin
             sm
           />
         </span>
-        <span className="flex-grow-2 pr-2">
+        <span className="flex-fill mr-2">
           <InputSNCF
             type="text"
             placeholder={t('map-search:placeholderchcode')}
@@ -173,7 +181,7 @@ const MapSearchStation = ({ updateExtViewport, closeMapSearchPopUp }: MapSearchS
             sm
           />
         </span>
-        <span className="d-flex flex-grow-2">
+        <span className="d-flex flex-fill">
           <CheckboxRadioSNCF
             type="checkbox"
             label={t('map-search:labelbvonly')}