From e82d6596d039734f056699345b0fef65938623fd Mon Sep 17 00:00:00 2001
From: florimondmanca <florimond.manca@fairness.coop>
Date: Mon, 30 Sep 2024 17:21:05 +0200
Subject: [PATCH] =?UTF-8?q?Ajoute=20une=20recherche=20de=20lieu=20=C3=A0?=
 =?UTF-8?q?=20la=20carte?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/customElements/map.js                  | 12 +++++
 src/Application/RoadGeocoderInterface.php     |  2 +
 .../Adapter/BdTopoRoadGeocoder.php            |  5 +++
 .../Map/Fragments/MapSearchController.php     | 45 +++++++++++++++++++
 templates/map/_search_form.html.twig          | 40 +++++++++++++++++
 .../map/fragments/search_results.html.twig    |  7 +++
 templates/map/map.html.twig                   |  3 ++
 translations/messages.fr.xlf                  |  8 ++++
 8 files changed, 122 insertions(+)
 create mode 100644 src/Infrastructure/Controller/Map/Fragments/MapSearchController.php
 create mode 100644 templates/map/_search_form.html.twig
 create mode 100644 templates/map/fragments/search_results.html.twig

diff --git a/assets/customElements/map.js b/assets/customElements/map.js
index ea0ff6d18..afee0b225 100644
--- a/assets/customElements/map.js
+++ b/assets/customElements/map.js
@@ -219,6 +219,14 @@ class MapLibreMap {
         });
     }
 
+    /**
+     * Center map on a given location.
+     * @param {[number, number]} coordinates 
+     */
+    flyTo(coordinates) {
+        this.#map.flyTo({ center: coordinates });
+    }
+
     /**
      *
      * @param {[number, number]} pos
@@ -283,6 +291,10 @@ class MapElement extends HTMLElement {
             // useful to debug the map in the JS console of your browser : access it with "document.getElementsByTagName('d-map')[0].map"
             this.map = mapInstance;
         });
+
+        this.addEventListener('fly', (/** @type {Event} */ event) => {
+            map.flyTo(event.detail.center);
+        });
     }
 
     /**
diff --git a/src/Application/RoadGeocoderInterface.php b/src/Application/RoadGeocoderInterface.php
index 4322de4f3..761dc4193 100644
--- a/src/Application/RoadGeocoderInterface.php
+++ b/src/Application/RoadGeocoderInterface.php
@@ -30,4 +30,6 @@ public function findRoadNames(string $search, string $cityCode): array;
     public function findSectionsInArea(string $areaGeometry, array $excludeTypes = [], ?bool $clipToArea = false): string;
 
     public function convertPolygonRoadToLines(string $geometry): string;
+
+    public function findPlacesForMap(string $search): array;
 }
diff --git a/src/Infrastructure/Adapter/BdTopoRoadGeocoder.php b/src/Infrastructure/Adapter/BdTopoRoadGeocoder.php
index fc948858f..f7a2b1781 100644
--- a/src/Infrastructure/Adapter/BdTopoRoadGeocoder.php
+++ b/src/Infrastructure/Adapter/BdTopoRoadGeocoder.php
@@ -387,4 +387,9 @@ public function convertPolygonRoadToLines(string $geometry): string
 
         return $row['geom'];
     }
+
+    public function findPlacesForMap(string $search): array
+    {
+        return [];
+    }
 }
diff --git a/src/Infrastructure/Controller/Map/Fragments/MapSearchController.php b/src/Infrastructure/Controller/Map/Fragments/MapSearchController.php
new file mode 100644
index 000000000..b323ae969
--- /dev/null
+++ b/src/Infrastructure/Controller/Map/Fragments/MapSearchController.php
@@ -0,0 +1,45 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Infrastructure\Controller\Map\Fragments;
+
+use App\Application\RoadGeocoderInterface;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\BadRequestHttpException;
+use Symfony\Component\Routing\Annotation\Route;
+
+final class MapSearchController
+{
+    public function __construct(
+        private \Twig\Environment $twig,
+        private RoadGeocoderInterface $roadGeocoder,
+    ) {
+    }
+
+    #[Route(
+        '/carte/search',
+        name: 'fragment_carto_search',
+        methods: ['GET'],
+    )]
+    public function __invoke(Request $request): Response
+    {
+        $search = $request->query->get('search');
+
+        if (!$search) {
+            throw new BadRequestHttpException();
+        }
+
+        $results = $this->roadGeocoder->findPlacesForMap($search);
+
+        return new Response(
+            $this->twig->render(
+                name: 'map/fragments/search_results.html.twig',
+                context: [
+                    'results' => $results,
+                ],
+            ),
+        );
+    }
+}
diff --git a/templates/map/_search_form.html.twig b/templates/map/_search_form.html.twig
new file mode 100644
index 000000000..e68e24e56
--- /dev/null
+++ b/templates/map/_search_form.html.twig
@@ -0,0 +1,40 @@
+<div
+    class="fr-x-autocomplete-wrapper"
+    data-controller="autocomplete"
+    data-autocomplete-url-value="{{ path('fragment_carto_search') }}"
+    data-autocomplete-query-param-value="search"
+    data-autocomplete-min-length-value="3"
+    data-autocomplete-delay-value="500"
+    data-autocomplete-loading-status-value="{{ 'common.autocomplete.status.loading'|trans }}"
+    data-autocomplete-empty-status-value="{{ 'common.autocomplete.status.min_chars'|trans({ '%minChars%': 3 }) }}"
+    data-action="autocomplete.change->reset#reset"
+>
+    <div class="fr-search-bar">
+        <label for="map_search" class="app-sr-only">
+            {{ 'map.search_form.search'|trans }}
+        </label>
+
+        <input
+            id="map_search"
+            name="map_search"
+            type="text"
+            class="fr-input"
+            spellcheck="false"
+            autocomplete="false"
+            data-autocomplete-target="input"
+            placeholder="{{ 'map.search_form.search.placeholder'|trans }}"
+        >
+
+        <button class="fr-btn" aria-label="{{ 'common.form.search'|trans }}">{{ 'common.form.search'|trans }}</button>
+    </div>
+
+    <ul
+        id="map_search-results"
+        role="listbox"
+        aria-label="{{ 'map.search_form.results_label'|trans }}"
+        class="fr-x-autocomplete"
+        data-autocomplete-target="results"
+    >
+        <li role="status" data-autocomplete-target="status"></li>
+    </ul>
+</div>
diff --git a/templates/map/fragments/search_results.html.twig b/templates/map/fragments/search_results.html.twig
new file mode 100644
index 000000000..df3e0e667
--- /dev/null
+++ b/templates/map/fragments/search_results.html.twig
@@ -0,0 +1,7 @@
+{% for result in results %}
+    <li role="option" data-autocomplete-value="{{ result.coordinates }}">{{ result.label }}</li>
+{% endfor %}
+
+<template id="status">
+    {{ 'common.autocomplete.results_count'|trans({ '%count%': results|length }) }}
+</template>
diff --git a/templates/map/map.html.twig b/templates/map/map.html.twig
index fac3251eb..57488c9a0 100644
--- a/templates/map/map.html.twig
+++ b/templates/map/map.html.twig
@@ -14,6 +14,9 @@
         <div class="fr-grid-row fr-x-h-full">
             <div class="fr-col-12 fr-col-sm-4 fr-col-md-3 fr-container fr-pt-2w fr-pb-6w">
                 <h1 class="fr-h4">{{ 'map.title'|trans }} </h1>
+
+                {% include 'map/_search_form.html.twig' with {} only %}
+
                 <h2 class="fr-h6">{{ 'map.filters.title'|trans }}</h2>
 
                 <d-map-form target="map" urlAttribute="dataUrl">
diff --git a/translations/messages.fr.xlf b/translations/messages.fr.xlf
index 186a0e0d2..18d8254d8 100644
--- a/translations/messages.fr.xlf
+++ b/translations/messages.fr.xlf
@@ -2068,6 +2068,14 @@
                 <source>map.loading</source>
                 <target>Chargement de la carte en cours...</target>
             </trans-unit>
+            <trans-unit id="map.search_form.search">
+                <source>map.search_form.search</source>
+                <target>Rechercher un lieu</target>
+            </trans-unit>
+            <trans-unit id="map.search_form.search.placeholder">
+                <source>map.search_form.search.placeholder</source>
+                <target>Rechercher un lieu</target>
+            </trans-unit>
             <trans-unit id="map.filters.title">
                 <source>map.filters.title</source>
                 <target>Filtres</target>