Merge pull request #68 from IGNF/dev

Dev

Author: mmohadIGN

.gitignore

@@ -14,4 +14,7 @@ config-*.ini
 test.ini
 
 # Dossiers node_modules
-node_modules/
+node_modules/
+
+#Build
+dist/

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /app
 # Installation des dépendances
 COPY package.json .
 COPY package-lock.json .
-RUN npm ci
+RUN npm ci --loglevel verbose
 
 # Vérifier que les dépendances sont installées
 RUN npm list --depth=0

package-lock.json

@@ -0,0 +1,13 @@
+export type Dalle = {
+  id: string;
+  name: string;
+  url: string;
+  timestamp: number;
+  metadata?: Record<string, any>;
+  isHovered?: boolean;
+};
+
+export type FilterDate = { dateStart: number | null; dateEnd: number };
+
+
+export type File = { url: string; name: string };

src/assets/@types/types.ts

@@ -5,7 +5,6 @@ import {
   FooterConsentManagementItem,
   FooterPersonalDataPolicyItem,
 } from "../../../config/consentMangement";
-import React from "react";
 import { createPortal } from "react-dom";
 import { Button } from "@codegouvfr/react-dsfr/Button";
 
@@ -119,7 +118,7 @@ const AppFooter = () => {
           </>
         }
         contentDescription="
-            Cartes.gouv.fr est développé par l'Institut national de l'information géographique et forestière (IGN) et ses partenaires. Le site s'appuie sur la Géoplateforme, la nouvelle infrastructure publique, ouverte et collaborative des données géographiques.
+            Cartes.gouv.fr est le service public des cartes et données du territoire français. Porté par l'IGN et ses partenaires, il offre à tous un accès à la référence de la cartographie publique et permet à chacun de créer, d'héberger et de publier ses propres données et représentations.
           "
         bottomItems={[
           {

src/components/features/Layout/AppFooter.tsx

@@ -15,22 +15,23 @@ const route = getRouteApi("/telechargement/$downloadUrl");
 const MapComponent = () => {
   const { downloadUrl } = route.useParams();
 
-  const selectedDalle = useDalleStore((state) => state.selectedProduits);
   const addProduit = useDalleStore((state) => state.addProduit);
   const isProduitSelected = useDalleStore((state) => state.isProduitSelected);
   const removeDalle = useDalleStore((state) => state.removeProduit);
   const addProduitLayer = useDalleStore((state) => state.addProduitLayer);
+  const addChantierLayer = useDalleStore((state) => state.addChantierLayer);
   const setIsMetadata = useDalleStore((state) => state.setIsMetadata);
 
   const mapContainerRef = useRef<HTMLDivElement>(null);
 
-  const mapInstance = useMap(
+useMap(
     mapContainerRef,
     downloadUrl,
     addProduit,
     isProduitSelected,
     removeDalle,
     addProduitLayer,
+    addChantierLayer,
     setIsMetadata
   );
 

src/components/features/Map.tsx

@@ -5,7 +5,7 @@ import { Select } from "@codegouvfr/react-dsfr/Select";
 import { useState, useEffect } from "react";
 import { RadioButtons } from "@codegouvfr/react-dsfr/RadioButtons";
 import Button from "@codegouvfr/react-dsfr/Button";
-import {  formatBytes } from "../../../utils/formatters";
+import { formatBytes } from "../../../utils/formatters";
 
 export const downloadModal = createModal({
   id: "download-modal",
@@ -31,12 +31,11 @@ const DownloadModal = () => {
         } catch (e) {
           console.error(
             `Erreur lors de la récupération de la taille pour ${dalle.name}:`,
-            e
+            e,
           );
         }
       }
       setTotalSize(sum);
-
     };
     resolveSizes();
   }, [selectedDalles]);
@@ -45,7 +44,7 @@ const DownloadModal = () => {
     e.preventDefault();
     if (!downloadMethod) {
       alert(
-        "Veuillez sélectionner une option et une méthode de téléchargement"
+        "Veuillez sélectionner une option et une méthode de téléchargement",
       );
       return;
     }
@@ -74,7 +73,6 @@ const DownloadModal = () => {
 
   const count = selectedDalles.length;
 
-
   return (
     <downloadModal.Component title="Télécharger" iconId="fr-icon-download-fill">
       <form className="download-modal-form" onSubmit={handleSubmit}>
@@ -90,7 +88,7 @@ const DownloadModal = () => {
         }
 
         <div className="download-modal-content">
-          {isMetadata && (
+          {/* {isMetadata && (
             <div className="download-options">
               <Select
                 label="Donnée associée"
@@ -108,7 +106,7 @@ const DownloadModal = () => {
                 <option value="4">Option 4</option>
               </Select>
             </div>
-          )}
+          )} */}
 
           <div className="download-method">
             <RadioButtons

src/components/features/MenuCompenents/DownloadModal.tsx

@@ -1,16 +1,29 @@
 filter {
   display: flex;
-flex-direction: column;
-align-items: center;
-gap: 16px;
-align-self: stretch;
+  width: 28.1875rem;
+  height: 37.75rem;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+.filter-back-button {
+  display: flex;
+  padding: 0.25rem 0.75rem 0.25rem 0.25rem;
+  margin-top: auto;
+  margin-bottom: 0.7rem;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
 }
 .filter-header {
   display: flex;
-  width: 418px;
-  height: 39px;
+  height: 2.4375rem;
   justify-content: space-between;
   align-items: flex-end;
+  align-self: stretch;
+  margin-right: 0.5rem;
+  margin-left: 0.5rem;
 }
 
 .filter-label {
@@ -25,3 +38,29 @@ align-self: stretch;
   font-weight: 700;
   line-height: 32px; /* 133.333% */
 }
+
+.filter-date {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+/* Largeur fixe en desktop */
+.filter-date > .fr-input-group {
+  width: 17rem;
+}
+
+/* Responsive : en-dessous de 768px, on passe en colonne */
+@media (max-width: 768px) {
+  .filter-date {
+    flex-direction: column;
+  }
+
+  /* largeur 100% en mobile */
+  .filter-date > .fr-input-group {
+    width: 100%;
+  }
+}

src/components/features/MenuCompenents/FilterComponents/Filter.css

@@ -1,32 +1,52 @@
-import React from "react";
 import { Button } from "@codegouvfr/react-dsfr/Button";
-import { Alert } from "@codegouvfr/react-dsfr/Alert";
 import "./Filter.css";
 import FilterDate from "./FilterDate";
+import { useFilterStore } from "../../../../hooks/store/useFilterStore";
+import { useState } from "react";
+import useDalleStore from "../../../../hooks/store/useDalleStore";
 
 const Filter = ({ onClose } = {}) => {
+
+    const isFiltered = useFilterStore((state) => state.isFiltered);
+    const resetFilter = useFilterStore((state) => state.resetFilter);
+    const filter = useFilterStore((state) => state.filter);
+    const filteredProduits = useDalleStore((state) => state.filteredProduits);
+    const [resetKey, setResetKey] = useState(0);
+    const handleReset = () => {
+        resetFilter();        // logique store si nécessaire
+
+        filteredProduits({ dateStart: null, dateEnd: Date.now() });   // re-applique les filtres
+        setResetKey((k) => k + 1); // force le reset du composant enfant
+    };
+
+
     return (
         <div className="filter">
 
-            {onClose ? (
+            <Button
+                iconId="fr-icon-arrow-left-line"
+                iconPosition="left"
+                priority="tertiary no outline"
+                size="medium"
+                onClick={onClose}
+                className="filter-back-button">
+                Retour
+            </Button>
+
+            <div className="filter-header">
+                <h5>Filtrer</h5>
                 <Button
-                    iconId="fr-icon-arrow-left-line"
                     iconPosition="left"
-                    priority="tertiary no outline"
+                    priority="secondary"
                     size="medium"
-                    onClick={onClose}>
-                    Retour
+                    onClick={handleReset}>
+                    Réinitialiser
                 </Button>
-            ) : null}
-
-            <div className="filter-body" style={{ marginTop: 12 }}>
-                <strong>Aucun filtre disponible</strong>
-                <div style={{ marginTop: 6 }}>
-                    Pour cette donnée, aucun critère de filtrage n'est proposé pour l'instant.
-                </div>
-
-
             </div>
+            <>
+                <FilterDate key={resetKey} />
+            </>
+
         </div>
     );
 };

src/components/features/MenuCompenents/FilterComponents/Filter.jsx

@@ -1,13 +1,47 @@
-import { Range } from "@codegouvfr/react-dsfr/Range";
+import { Input } from "@codegouvfr/react-dsfr/Input";
+import { useFilterStore } from "../../../../hooks/store/useFilterStore"
+import { use, useEffect, useState } from "react";
+import { useDalleStore } from "../../../../hooks/store/useDalleStore";
 
 const FilterDate = () => {
+
+  const filter = useFilterStore((state) => state.filter);
+  const selectedProduits = useDalleStore((state) => state.selectedProduits);
+  const filteredProduits = useDalleStore((state) => state.filteredProduits);
+  const setFilterOnChange = useFilterStore((state) => state.setFilterOnChange);
+  const [dateStart, setDateStart] = useState(filter.dateStart);
+  const [dateEnd, setDateEnd] = useState(filter.dateEnd);
+  
+
   return (
-    <Range
-      double
-      label="date"
-      min="2000-01-01"
-      max="2024-12-31"
-    />
+    <div className="filter-date">
+      <Input
+        nativeInputProps={{
+          type: 'date',
+
+          onChange: (e) => {
+            setDateStart(new Date(e.target.value).getTime());
+            filteredProduits({ dateStart: new Date(e.target.value).getTime(), dateEnd: dateEnd });
+            setFilterOnChange({ dateStart: new Date(e.target.value).getTime(), dateEnd: dateEnd });
+          },
+          value: dateStart ? new Date(dateStart).toISOString().slice(0, 10) : null,
+        }}
+        label="Date de début"
+      />
+
+
+      <Input
+        nativeInputProps={{
+          type: 'date',
+          onChange: (e) => {
+            setDateEnd(new Date(e.target.value).getTime());
+            filteredProduits({ dateStart: dateStart, dateEnd: new Date(e.target.value).getTime() });
+            setFilterOnChange({ dateStart: dateStart, dateEnd: new Date(e.target.value).getTime() });
+          },
+          value: new Date(dateEnd).toISOString().slice(0, 10)
+        }}
+        label="Date de fin" />
+    </div>
   );
 };