front: search op with ci - ch code

OpenRailAssociation · Jan 17, 2024 · 2ac3a2b · 2ac3a2b
1 parent a823c8c
commit 2ac3a2b
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 123 deletions.
diff --git 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
@@ -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
@@ -1,11 +1,14 @@
+/* eslint-disable jsx-a11y/no-autofocus */
 import React, { InputHTMLAttributes, ReactNode } from 'react';
+import cx from 'classnames';
 
 export type InputSNCFProps = {
   id: string;
   type: string;
   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;