Ajoute le bouton pour remettre à 0 les filtres de la carte

betagouv · Oct 14, 2024 · a400c3c · a400c3c
1 parent c6e3e46
commit a400c3c
Showing 1 changed file with 35 additions and 8 deletions.
diff --git a/src/components/Map/components/ReseauxDeChaleurFilters.tsx b/src/components/Map/components/ReseauxDeChaleurFilters.tsx
@@ -1,22 +1,44 @@
+import { Button } from '@codegouvfr/react-dsfr/Button';
 import { Select } from '@codegouvfr/react-dsfr/SelectNext';
+import React from 'react';
 
+import RangeFilter from '@components/Map/components/RangeFilter';
+import useFCUMap from '@components/Map/MapProvider';
 import Accordion from '@components/ui/Accordion';
 import Divider from '@components/ui/Divider';
 import { FiltreEnergieConfKey, filtresEnergies, percentageMaxInterval } from 'src/services/Map/map-configuration';
 
-import RangeFilter from './RangeFilter';
 import { DeactivatableBox } from './SimpleMapLegend.style';
-import useFCUMap from '../MapProvider';
 
 function ReseauxDeChaleurFilters() {
   const { mapConfiguration, setMapConfiguration, updateScaleInterval } = useFCUMap();
+
+  const [isFiltering, toggleFiltering] = React.useState(false);
+
+  const filterAndUpdateScaleInterval: typeof updateScaleInterval = (property) => {
+    toggleFiltering(true);
+    return updateScaleInterval(property);
+  };
+
+  const resetFilters = () => {
+    setMapConfiguration({
+      ...mapConfiguration,
+      reseauxDeChaleur: {
+        ...mapConfiguration.reseauxDeChaleur,
+        ...mapConfiguration.reseauxDeChaleur.limits,
+      },
+    });
+    toggleFiltering(false);
+  };
+
   return (
     <DeactivatableBox disabled={!mapConfiguration.reseauxDeChaleur.show}>
       <Select
         label="Énergie mobilisée"
         nativeSelectProps={{
           value: mapConfiguration.reseauxDeChaleur.energieMobilisee,
           onChange: (e) => {
+            toggleFiltering(true);
             mapConfiguration.reseauxDeChaleur.energieMobilisee =
               e.target.value === '' ? undefined : (e.target.value as FiltreEnergieConfKey);
             setMapConfiguration({ ...mapConfiguration });
@@ -42,7 +64,7 @@ function ReseauxDeChaleurFilters() {
               label={filtreEnergie.label}
               domain={percentageMaxInterval}
               value={mapConfiguration.reseauxDeChaleur[`energie_ratio_${filtreEnergie.confKey}`]}
-              onChange={updateScaleInterval(`reseauxDeChaleur.energie_ratio_${filtreEnergie.confKey}`)}
+              onChange={(interval) => filterAndUpdateScaleInterval(`reseauxDeChaleur.energie_ratio_${filtreEnergie.confKey}`)(interval)}
               unit="%"
             />
           ))}
@@ -54,15 +76,15 @@ function ReseauxDeChaleurFilters() {
         label="Taux d’EnR&R"
         domain={percentageMaxInterval}
         value={mapConfiguration.reseauxDeChaleur.tauxENRR}
-        onChange={updateScaleInterval('reseauxDeChaleur.tauxENRR')}
+        onChange={(interval) => filterAndUpdateScaleInterval('reseauxDeChaleur.tauxENRR')(interval)}
         unit="%"
       />
       <Divider />
       <RangeFilter
         label="Émissions de CO2"
         domain={mapConfiguration.reseauxDeChaleur.limits.emissionsCO2}
         value={mapConfiguration.reseauxDeChaleur.emissionsCO2}
-        onChange={updateScaleInterval('reseauxDeChaleur.emissionsCO2')}
+        onChange={(interval) => filterAndUpdateScaleInterval('reseauxDeChaleur.emissionsCO2')(interval)}
         unit="gCO2/kWh"
         tooltip="Émissions en analyse du cycle de vie (directes et indirectes)"
       />
@@ -71,7 +93,7 @@ function ReseauxDeChaleurFilters() {
         label="Prix moyen de la chaleur"
         domain={mapConfiguration.reseauxDeChaleur.limits.prixMoyen}
         value={mapConfiguration.reseauxDeChaleur.prixMoyen}
-        onChange={updateScaleInterval('reseauxDeChaleur.prixMoyen')}
+        onChange={(interval) => filterAndUpdateScaleInterval('reseauxDeChaleur.prixMoyen')(interval)}
         unit="€TTC/MWh"
         tooltip="La comparaison avec le prix d'autres modes de chauffage n’est pertinente qu’en coût global annuel, en intégrant les coûts d’exploitation, de maintenance et d’investissement, amortis sur la durée de vie des installations."
       />
@@ -80,7 +102,7 @@ function ReseauxDeChaleurFilters() {
         label="Livraisons annuelles de chaleur"
         domain={mapConfiguration.reseauxDeChaleur.limits.livraisonsAnnuelles}
         value={mapConfiguration.reseauxDeChaleur.livraisonsAnnuelles}
-        onChange={updateScaleInterval('reseauxDeChaleur.livraisonsAnnuelles')}
+        onChange={(interval) => filterAndUpdateScaleInterval('reseauxDeChaleur.livraisonsAnnuelles')(interval)}
         domainTransform={{
           percentToValue: (v) => roundNumberProgressively(getLivraisonsAnnuellesFromPercentage(v)),
           valueToPercent: (v) => roundNumberProgressively(getPercentageFromLivraisonsAnnuelles(v)),
@@ -93,8 +115,13 @@ function ReseauxDeChaleurFilters() {
         label="Année de construction"
         domain={mapConfiguration.reseauxDeChaleur.limits.anneeConstruction}
         value={mapConfiguration.reseauxDeChaleur.anneeConstruction}
-        onChange={updateScaleInterval('reseauxDeChaleur.anneeConstruction')}
+        onChange={(interval) => updateScaleInterval('reseauxDeChaleur.anneeConstruction')(interval)}
       />
+      {isFiltering && (
+        <Button type="button" onClick={resetFilters} priority="secondary" size="small" iconId="fr-icon-back-line" className="fr-mb-2w">
+          Réinitialiser les filtres
+        </Button>
+      )}
     </DeactivatableBox>
   );
 }