Merge branch 'feature/search-refonte' of https://github.com/IGNF/geopf-extensions-openlayers into feature/search-refonte

# Conflicts:
#	src/packages/Controls/SearchEngine/ParcelAdvancedSearch.js

Author: Viglino

src/packages/CSS/Controls/SearchEngine/DSFRsearchEngineStyle.css

@@ -308,9 +308,17 @@ div[id^=GPgeocodeResults-] {
   box-shadow: 0 -1px 0 0 var(--border-default-grey);
 }
 
+[id^="GPsearchEngine"] ul li.GPsearchHistoric {
+  padding-right: 1.75rem;
+}
+
+[id^="GPsearchEngine"] ul li.GPsearchHistoric > span {
+  position: absolute;
+  right: 1rem;
+  color: var(--grey-625-425);
+}
+
 [id^="GPsearchEngine"] ul li:first-child {
-  padding: 0.75rem 0.5rem;
-  color: var(--text-action-high-grey);
   box-shadow: none;
 }
 
@@ -410,4 +418,10 @@ form.GPSearchBar > .GPInputGroup > input[data-empty] ~ .GPOptionsContainer > but
 
 form.GPSearchBar > .GPInputGroup > input[data-empty] ~ .GPOptionsContainer > button[id^="GPSearchEngine-advanced-btn"] {
   display:none;
+}
+
+.fr-icon-ign-mer::before,
+.fr-icon-ign-mer::after {
+  -webkit-mask-image: url("./img/dsfr/ign-mer.svg");
+  mask-image: url("./img/dsfr/ign-mer.svg");
 }

src/packages/CSS/Controls/SearchEngine/img/dsfr/ign-mer.svg

@@ -187,7 +187,7 @@ class SearchEngineAdvanced extends Control {
                     // Focus sur le bouton de recherche avancée
                     this.advancedBtn.focus();
                 } else {
-                    this.baseSearchEngine.subimtBt.focus();
+                    this.eraseBtn.focus();
                 }
             }
         }.bind(this));
@@ -337,6 +337,8 @@ class SearchEngineAdvanced extends Control {
         eraseBtn.addEventListener("click", function () {
             this.baseSearchEngine.input.value = "";
             delete this.baseSearchEngine.input.dataset.empty;
+            // Notifie l'input du changement
+            this.baseSearchEngine.input.dispatchEvent(new Event("input"));
         }.bind(this));
         this.baseSearchEngine.optionscontainer.appendChild(eraseBtn);
     }

src/packages/Controls/SearchEngine/SearchEngineAdvanced.js

@@ -7,9 +7,14 @@ import Helper from "../../Utils/Helper";
 
 // Voir les typedefs partagés dans ./typedefs.js (SearchEngineBaseOptions, SearchServiceOptions, ...)
 
+const history = "fr-icon-history-line";
 const typeClasses = {
-    "history" : "fr-icon-history-line",
-    "search" : "fr-icon-map-pin-2-line",
+    "StreetAddress" : "fr-icon-map-pin-2-line",
+    "PositionOfInterest" : {
+        "administratif" : "fr-icon-france-fill",
+        "hydrographie" : "fr-icon-ign-mer",
+        "default" : "fr-icon-map-pin-2-line",
+    }
 };
 
 var logger = Logger.getLogger("searchengine");
@@ -174,18 +179,9 @@ class SearchEngineBase extends Control {
                             // Réaffiche la valeur précédente de l'utilisateur
                             e.target.value = this._previousValue;
                         }
-                        break;
-                    case "Enter":
-                        // Lance la recherche
-                        let item = list[idx];
-                        if (idx < 0) {
-                            // Pas d'item sélectionné : on prend le premier de la liste
-                            item = list[0];
-                        }
-                        if (item) {
-                            // Simule un clic sur l'élément sélectionné
-                            item.click();
-                        }
+                        // Envoie un événement de type input pour notifier le changement
+                        this.input.dispatchEvent(new Event("input"));
+
                         break;
                     default:
                         if (e.target.value.length && e.target.value.length >= options.minChars && e.target.value !== this._currentValue) {
@@ -500,14 +496,22 @@ class SearchEngineBase extends Control {
         this.input.setAttribute("data-active-option", "");
         // Update list
         this.autocompleteList.innerHTML = "";
-        const iconClass = typeClasses[type] || typeClasses["search"];
         tab.forEach((item, idx) => {
             const li = document.createElement("li");
-            li.id = Helper.getUid("GPsearchHistoric-");
-            li.className = `GPsearchHistoric gpf-panel__item gpf-panel__item-searchengine ${iconClass} fr-icon--sm`;
+            const iconClass = this.getIconClass(item, type);
+
+            li.id = Helper.getUid("GPsearchResult-");
+            li.className = `GPsearchResult gpf-panel__item gpf-panel__item-searchengine ${iconClass} fr-icon--sm`;
             li.setAttribute("role", "option");
             li.setAttribute("data-idx", idx);
             li.innerHTML = li.title = this.getItemTitle(item);
+            if (type === "history") {
+                li.classList.add("GPsearchHistoric");
+                const span = document.createElement("span");
+                span.ariaHidden = "true";
+                span.className = `${history} fr-icon--sm`;
+                li.append(span);
+            }
             this.autocompleteList.appendChild(li);
             li.addEventListener("click", function (e) {
                 const idx = Number(e.target.getAttribute("data-idx"));
@@ -519,6 +523,30 @@ class SearchEngineBase extends Control {
         });    
     }
 
+    /**
+     * Retourne la classe à ajouter pour un résultat d'autocomplétion
+     * @param {AutocompleteResult} item Résultat de l'autocomplétion (ou historique)
+     * @param {String} type Type de la recherche ("history" ou "search")
+     * @returns {String} classe à ajouter
+     */
+    getIconClass (item, type) {
+        // let iconClass = typeClasses[type];
+        let iconClass = typeClasses[item.type];
+        // Cas où l'on a d'autres éléments
+        if (typeof iconClass === "object") {
+            // Cherche les types de POI
+            for (let i = 0; i < item.poiType.length; i++) {
+                const poiType = item.poiType[i];
+                if (Object.hasOwn(iconClass, poiType)) {
+                    iconClass = iconClass[poiType];
+                    break;
+                }
+            }
+            iconClass = typeof iconClass === "object" ? iconClass["default"] : iconClass;
+        }
+        return iconClass;
+    }
+
     /**
      * Retourne le titre à afficher pour un item.
      * @param {Object} item Élément à afficher

src/packages/Controls/SearchEngine/SearchEngineBase.js

@@ -10,10 +10,10 @@ import GeocodeUtils from "../Utils/GeocodeUtils";
 import Search from "./Search";
 import Feature from "ol/Feature.js";
 import Point from "ol/geom/Point.js";
-import { canvasPool } from "ol/renderer/canvas/Layer";
 
 var logger = Logger.getLogger("searchengine");
 
+// logger.log = () => { };
 
 /**
  * @classdesc
@@ -72,11 +72,11 @@ class IGNSearchService extends AbstractSearchService {
             autocomplete : true,
             autocompleteOptions : {
                 serviceOptions : {
-                    maximumResponses : 5,
+                    maximumResponses : 10,
                 },
                 triggerGeocode : false,
                 triggerDelay : 1000,
-                prettifyResults : false
+                prettifyResults : true
             },
         };
 
@@ -137,8 +137,6 @@ class IGNSearchService extends AbstractSearchService {
          * @type {Array<AutocompleteResult>}
          */
         this._suggestedLocations;
-
-        console.log(this.options);
     }
 
 
@@ -332,8 +330,8 @@ class IGNSearchService extends AbstractSearchService {
      * @private
      */
     _prettifyAutocompleteResults (autocompleteResults) {
-        for (var i = autocompleteResults.length - 1; i >= 0; i--) {
-            var autocompleteResult = autocompleteResults[i];
+        for (let i = autocompleteResults.length - 1; i >= 0; i--) {
+            const autocompleteResult = autocompleteResults[i];
             if ((autocompleteResult.type === "StreetAddress" && autocompleteResult.kind === "municipality") ||
             autocompleteResult.type === "PositionOfInterest" && autocompleteResult.poiType[0] === "lieu-dit habité" && autocompleteResult.poiType[1] === "zone d'habitation") {
                 // on retire les éléments streetAdress - municipality car déjà pris en compte par POI
@@ -400,37 +398,82 @@ class IGNSearchService extends AbstractSearchService {
     /**
      * Lance une recherche sur les services de géocodage de l'IGN
      * @see {@link https://data.geopf.fr/geocodage/search}
+     * @see {@link https://data.geopf.fr/geocodage/openapi}
      * @param {IGNSearchObject} object Recherche 
      * @abstract
      */
     search (object) {
         const location = object.location;
-        const filters = object.filters;
+        const filters = object.filters ? object.filters : {};
 
         if (location === undefined) {
             return;
         }
         // on ajoute le texte de l'autocomplétion dans l'input
         let label;
+        let index = this.get("index");
+        let truegeometry = this.get("returnTrueGeometry");
         if (typeof location === "string") {
+            // Location est un texte, on prend les valeurs par défaut
             label = location;
         } else {
+            // location est un objet : on vérifie les informations qu'il comporte
+
+            // Récupère les infos (s'il y'en a)
+            index = location.type ? location.type : index;
             label = GeocodeUtils.getSuggestedLocationFreeform(location);
-        }
+            // TODO : AMÉLIORER CETTE PARTIE (REDONDANTE)
+            // Enlève l'ajout du prettify
+            if ((location.type === "PositionOfInterest" && location.poiType[0] === "administratif" &&
+                (location.poiType[1] === "département" || location.poiType[1] === "région"))) {
+                label = label.substring(0, label.length - (location.poiType[1].length + 2));
+            }
 
-        // on sauvegarde le localisant
-        this._currentGeocodingLocation = label;
+            if (index === "PositionOfInterest") {
+                // Recherche d'un POI : ajout d'infos supplémentaires
+                let poiType = location.poiType[0];
+                if (poiType === "administratif" && location.poiType[1]) {
+                    poiType = location.poiType[1];
+                }
+                filters.category = poiType ? poiType : null;
+
+                // Retourne la géométrie pour certains types seulement
+                truegeometry = false;
+                const trueGeometries = ["administratif", "département", "construction", "hydrographie"];
+                for (let i = 0; i < location.poiType.length; i++) {
+                    const type = location.poiType[i];
+                    if (type !== "lieu-dit habité" && trueGeometries.includes(type)) {
+                        truegeometry = true;
+                        break;
+                    }
+                }
+            }
+            filters.postalCode = location.postalCode ? location.postalCode : null;
+
+            // Retire chaque valeurs nulles
+            for (const key in filters) {
+                if (!Object.hasOwn(filters, key)) {
+                    continue;
+                };
+                if (filters[key] === null) {
+                    delete filters[key];
+                }
+            }
+        }
 
         // on centre la vue et positionne le marker, à la position reprojetée dans la projection de la carte
+
         this._requestGeocoding({
-            index : this.get("index"),
+            index : index,
             limit : this.get("limit"),
-            returnTrueGeometry : this.get("returnTrueGeometry"),
+            returnTrueGeometry : truegeometry,
             location : label,
             filters : filters,
             onSuccess : this._onSuccessSearch.bind(this),
             onFailure : this._onFailureSearch.bind(this, location),
         });
+        // on sauvegarde le localisant
+        this._currentGeocodingLocation = label;
     }
 
 

src/packages/Services/IGNSearchService.js

@@ -48,7 +48,7 @@
  * @typedef {Object} IGNSearchObject
  * @property {AutocompleteResult|String} location - Objet utilisé pour faire la requête.
  * Peut être soit le résultat de l'autocomplétion ou une chaîne de caractère.
- * @property {IGNSearchFilter} [filter] - Filtres optionnels pour
+ * @property {IGNSearchFilter} [filters] - Filtres optionnels pour la recherche
  */
 
 /**
@@ -57,7 +57,7 @@
  * @typedef {Object} IGNSearchFilter
  * @property {string} [postalCode] - Code postal (adresses, toponymes).
  * @property {string} [inseeCode] - Code INSEE (adresses, toponymes).
- * @property {string} [city] - Nom de la ville (adresses uniquement).
+ * @property {string} [city] - Nom de la ville (adresses, toponymes).
  * @property {string} [type] - Type de toponyme (toponymes uniquement).
  * @property {string} [codeDepartement] - Code département (parcelles cadastrales uniquement).
  * @property {string} [codeCommune] - Code commune (parcelles cadastrales uniquement).