Add translations to card component

demarches-simplifiees · Oct 28, 2024 · 6ab55c4 · 6ab55c4
1 parent 48d2721
commit 6ab55c4
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 9 deletions.
diff --git a/app/components/editable_champ/carte_component.rb b/app/components/editable_champ/carte_component.rb
@@ -12,7 +12,13 @@ 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")
+      }
     }
   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,6 @@
+---
+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: "
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,6 @@
+---
+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 : "
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/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">

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);
 
@@ -40,6 +42,7 @@ export default function MapEditor({
         source={adresseSource}
         champId={champId}
         featureCollection={featureCollection}
+        translations={translations}
       />
 
       <MapLibre layers={options.layers}>
@@ -57,7 +60,10 @@ export default function MapEditor({
           />
         ) : null}
       </MapLibre>
-      <PointInput featureCollection={featureCollection} />
+      <PointInput
+        featureCollection={featureCollection}
+        translations={translations}
+      />
     </>
   );
 }