Add translations to card component

demarches-simplifiees · Oct 29, 2024 · 363c50f · 363c50f
1 parent 48d2721
commit 363c50f
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 23 deletions.
diff --git a/app/components/editable_champ/carte_component.rb b/app/components/editable_champ/carte_component.rb
@@ -12,7 +12,18 @@ def react_props
       champ_id: @champ.input_id,
       url: update_path,
       adresse_source: data_sources_data_source_adresse_path,
-      options: @champ.render_options
+      options: @champ.render_options,
+      translations: {
+        address_input_label: t(".address_input_label"),
+        address_input_description: t(".address_input_description"),
+        pin_input_label: t(".pin_input_label"),
+        pin_input_description: t(".pin_input_description"),
+        show_pin: t(".show_pin"),
+        add_pin: t(".add_pin"),
+        add_file: t(".add_file"),
+        choose_file: t(".choose_file"),
+        delete_file: t(".delete_file")
+      }
     }
   end
 

diff --git a/app/components/editable_champ/carte_component/carte_component.en.yml b/app/components/editable_champ/carte_component/carte_component.en.yml
@@ -0,0 +1,11 @@
+---
+en:
+  address_input_label: "Find an address"
+  address_input_description: "Enter at least 2 characters"
+  pin_input_label: "Add a point to the map"
+  pin_input_description: "Example: "
+  show_pin: "Show your location on the map"
+  add_pin: "Add the point with the coordinates entered on the map"
+  add_file: "Add a GPX or KML file"
+  choose_file: "Choose a GPX or KML file"
+  delete_file: "Delete the file"
diff --git a/app/components/editable_champ/carte_component/carte_component.fr.yml b/app/components/editable_champ/carte_component/carte_component.fr.yml
@@ -0,0 +1,11 @@
+---
+fr:
+  address_input_label: "Rechercher une adresse"
+  address_input_description: "Saisissez au moins 2 caractères"
+  pin_input_label: "Ajouter un point sur la carte"
+  pin_input_description: "Exemple : "
+  show_pin: "Afficher votre position sur la carte"
+  add_pin: "Ajouter le point avec les coordonnées saisies sur la carte"
+  add_file: "Ajouter un fichier GPX ou KML"
+  choose_file: "Choisir un fichier GPX ou KML"
+  delete_file: "Supprimer le fichier"
diff --git a/app/javascript/components/MapEditor/components/AddressInput.tsx b/app/javascript/components/MapEditor/components/AddressInput.tsx
@@ -6,20 +6,22 @@ import { RemoteComboBox } from '../../ComboBox';
 export function AddressInput({
   source,
   featureCollection,
-  champId
+  champId,
+  translations
 }: {
   source: string;
   featureCollection: FeatureCollection;
   champId: string;
+  translations: Record<string, string>;
 }) {
   return (
     <div style={{ marginBottom: '10px' }}>
       <RemoteComboBox
         minimumInputLength={2}
         id={champId}
         loader={source}
-        label="Rechercher une Adresse"
-        description="Saisissez au moins 2 caractères"
+        label={translations.address_input_label}
+        description={translations.address_input_description}
         onChange={(item) => {
           if (item && item.data) {
             fire(document, 'map:zoom', {

diff --git a/app/javascript/components/MapEditor/components/ImportFileInput.tsx b/app/javascript/components/MapEditor/components/ImportFileInput.tsx
@@ -9,11 +9,13 @@ import { CreateFeatures, DeleteFeatures } from '../hooks';
 export function ImportFileInput({
   featureCollection,
   createFeatures,
-  deleteFeatures
+  deleteFeatures,
+  translations
 }: {
   featureCollection: FeatureCollection;
   createFeatures: CreateFeatures;
   deleteFeatures: DeleteFeatures;
+  translations: Record<string, string>;
 }) {
   const { inputs, addInputFile, removeInputFile, onFileChange } =
     useImportFiles(featureCollection, { createFeatures, deleteFeatures });
@@ -24,14 +26,14 @@ export function ImportFileInput({
         className="fr-btn fr-btn--secondary fr-btn--icon-left fr-icon-add-circle-line"
         onClick={addInputFile}
       >
-        Ajouter un fichier GPX ou KML
+        {translations.add_file}
       </button>
       <div>
         {inputs.map((input) => (
           <div key={input.id}>
             <input
-              title="Choisir un fichier gpx ou kml"
-              style={{ marginTop: '15px' }}
+              title={translations.choose_file}
+              className="fr-mt-2w"
               id={input.id}
               type="file"
               accept=".gpx, .kml"
@@ -40,7 +42,7 @@ export function ImportFileInput({
             />
             {input.hasValue && (
               <span
-                title="Supprimer le fichier"
+                title={translations.delete_file}
                 className="fr-icon-delete-line fr-text-default--error"
                 style={{
                   cursor: 'pointer'

diff --git a/app/javascript/components/MapEditor/components/PointInput.tsx b/app/javascript/components/MapEditor/components/PointInput.tsx
@@ -4,9 +4,11 @@ import type { Feature, FeatureCollection } from 'geojson';
 import CoordinateInput from 'react-coordinate-input';
 
 export function PointInput({
-  featureCollection
+  featureCollection,
+  translations
 }: {
   featureCollection: FeatureCollection;
+  translations: Record<string, string>;
 }) {
   const inputId = useId();
   const [value, setValue] = useState('');
@@ -35,9 +37,10 @@ export function PointInput({
   return (
     <div className="fr-input-group fr-mt-3w">
       <label className="fr-label" htmlFor={inputId}>
-        Ajouter un point sur la carte
+        {translations.pin_input_label}
         <span className="fr-hint-text">
-          Exemple : 43°48&#39;06&#34;N 006°14&#39;59&#34;E
+          {translations.pin_input_description}
+          43°48&#39;06&#34;N 006°14&#39;59&#34;E
         </span>
       </label>
       <div className="flex flex-gap-1 fr-mt-1w">
@@ -46,11 +49,9 @@ export function PointInput({
             type="button"
             className="fr-btn fr-btn--secondary fr-icon-map-pin-2-line"
             onClick={getCurrentPosition}
-            title="Afficher votre position sur la carte"
+            title={translations.show_pin}
           >
-            <span className="sr-only">
-              Afficher votre position sur la carte
-            </span>
+            <span className="sr-only">{translations.show_pin}</span>
           </button>
         ) : null}
         <CoordinateInput
@@ -78,11 +79,9 @@ export function PointInput({
           className="fr-btn fr-icon-add-circle-line"
           onClick={addPoint}
           disabled={!feature}
-          title="Ajouter le point avec les coordonnées saisies sur la carte"
+          title={translations.add_pin}
         >
-          <span className="sr-only">
-            Ajouter le point avec les coordonnées saisies sur la carte
-          </span>
+          <span className="sr-only">{translations.add_pin}</span>
         </button>
       </div>
     </div>

diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx
@@ -16,13 +16,15 @@ export default function MapEditor({
   url,
   adresseSource,
   options,
-  champId
+  champId,
+  translations
 }: {
   featureCollection: FeatureCollection;
   url: string;
   adresseSource: string;
   options: { layers: string[] };
   champId: string;
+  translations: Record<string, string>;
 }) {
   const [cadastreEnabled, setCadastreEnabled] = useState(false);
 
@@ -35,11 +37,16 @@ export default function MapEditor({
     <>
       {error && <FlashMessage message={error} level="alert" fixed={true} />}
 
-      <ImportFileInput featureCollection={featureCollection} {...actions} />
+      <ImportFileInput
+        featureCollection={featureCollection}
+        translations={translations}
+        {...actions}
+      />
       <AddressInput
         source={adresseSource}
         champId={champId}
         featureCollection={featureCollection}
+        translations={translations}
       />
 
       <MapLibre layers={options.layers}>
@@ -57,7 +64,10 @@ export default function MapEditor({
           />
         ) : null}
       </MapLibre>
-      <PointInput featureCollection={featureCollection} />
+      <PointInput
+        featureCollection={featureCollection}
+        translations={translations}
+      />
     </>
   );
 }