From 861514dba94d15507b25a38b6107a5042950a49e Mon Sep 17 00:00:00 2001 From: Corinne Durrmeyer Date: Wed, 23 Oct 2024 11:11:37 +0200 Subject: [PATCH] Add translations to card component --- .../editable_champ/carte_component.rb | 13 +++++++++++- .../carte_component/carte_component.en.yml | 11 ++++++++++ .../carte_component/carte_component.fr.yml | 11 ++++++++++ .../MapEditor/components/AddressInput.tsx | 8 ++++--- .../MapEditor/components/ImportFileInput.tsx | 12 ++++++----- .../MapEditor/components/PointInput.tsx | 21 +++++++++---------- app/javascript/components/MapEditor/index.tsx | 16 +++++++++++--- 7 files changed, 69 insertions(+), 23 deletions(-) create mode 100644 app/components/editable_champ/carte_component/carte_component.en.yml create mode 100644 app/components/editable_champ/carte_component/carte_component.fr.yml diff --git a/app/components/editable_champ/carte_component.rb b/app/components/editable_champ/carte_component.rb index 062576ee2..fbbe6d6f7 100644 --- a/app/components/editable_champ/carte_component.rb +++ b/app/components/editable_champ/carte_component.rb @@ -12,7 +12,18 @@ class EditableChamp::CarteComponent < EditableChamp::EditableChampBaseComponent 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 new file mode 100644 index 000000000..1ec1620cf --- /dev/null +++ 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 new file mode 100644 index 000000000..e54f53112 --- /dev/null +++ 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 index 0e7c22a22..8f250adc6 100644 --- a/app/javascript/components/MapEditor/components/AddressInput.tsx +++ b/app/javascript/components/MapEditor/components/AddressInput.tsx @@ -6,11 +6,13 @@ import { RemoteComboBox } from '../../ComboBox'; export function AddressInput({ source, featureCollection, - champId + champId, + translations }: { source: string; featureCollection: FeatureCollection; champId: string; + translations: Record; }) { return (
@@ -18,8 +20,8 @@ export function AddressInput({ 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 index 28122dba5..98cff6c2b 100644 --- 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; }) { 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}
{inputs.map((input) => (
{input.hasValue && ( ; }) { const inputId = useId(); const [value, setValue] = useState(''); @@ -35,9 +37,10 @@ export function PointInput({ return (
@@ -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} > - - Afficher votre position sur la carte - + {translations.show_pin} ) : null} - - Ajouter le point avec les coordonnées saisies sur la carte - + {translations.add_pin}
diff --git a/app/javascript/components/MapEditor/index.tsx b/app/javascript/components/MapEditor/index.tsx index f900e3fac..08bad1c61 100644 --- 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; }) { const [cadastreEnabled, setCadastreEnabled] = useState(false); @@ -35,11 +37,16 @@ export default function MapEditor({ <> {error && } - + @@ -57,7 +64,10 @@ export default function MapEditor({ /> ) : null} - + ); }