add autocomplete

assets/js/admin.js

@@ -1 +1,86 @@
 import '../../core/Resources/assets/js/admin.js'
+
+const Routing = require('../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js')
+const routes = require('../../public/js/fos_js_routes.json')
+
+Routing.setRoutingData(routes)
+
+class AddressAutocomplete {
+  constructor () {
+    this.fields = {
+      address: document.querySelector('#establishment_address'),
+      zipCode: document.querySelector('#establishment_zipCode'),
+      city: document.querySelector('#establishment_city')
+    }
+
+    this.results = []
+    this.timer = null
+
+    if (!this.fields.address) {
+      return
+    }
+
+    const that = this
+
+    this.fields.address.addEventListener('keyup', () => {
+      if (that.timer) {
+        clearTimeout(that.timer)
+      }
+
+      that.timer = setTimeout(() => {
+        const query = that.fields.address.value
+
+        fetch(Routing.generate('admin_establishment_address', {
+          q: query
+        }))
+          .then(response => response.json())
+          .then((data) => {
+            that.results = data.features
+            that.renderResults()
+          })
+      }, 500)
+    })
+  }
+
+  renderResults () {
+    const address = this.fields.address
+    const that = this
+
+    let wrapper = address.nextSibling
+
+    if (wrapper) {
+      wrapper.remove()
+    }
+
+    if (this.results.length === 0) {
+      return
+    }
+
+    wrapper = document.createElement('div')
+    wrapper.classList.add('list-group', 'mt-1', 'mb-1')
+
+    for (const address of this.results) {
+      const item = document.createElement('div')
+      item.classList.add('list-group-item', 'btn', 'text-left')
+      item.textContent = address.properties.label
+
+      item.setAttribute('data-name', address.properties.name)
+      item.setAttribute('data-zipCode', address.properties.postcode)
+      item.setAttribute('data-city', address.properties.city)
+
+      item.addEventListener('click', (e) => {
+        that.fields.address.value = e.target.getAttribute('data-name')
+        that.fields.zipCode.value = e.target.getAttribute('data-zipCode')
+        that.fields.city.value = e.target.getAttribute('data-city')
+
+        wrapper.remove()
+      })
+
+      wrapper.appendChild(item)
+    }
+
+    address.parentNode.appendChild(wrapper)
+  }
+}
+
+const addressAutocomplete = new AddressAutocomplete()

src/Controller/EstablishmentAdminController.php

@@ -15,6 +15,7 @@ use Symfony\Component\HttpFoundation\Request;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\HttpFoundation\Session\Session;
 use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Contracts\HttpClient\HttpClientInterface;
 
 class EstablishmentAdminController extends CrudController
 {
@@ -58,6 +59,22 @@ class EstablishmentAdminController extends CrudController
         return $this->doEdit($entity, $entityManager, $request);
     }
 
+    /**
+     * @Route("/admin/establishment/address", name="admin_establishment_address", methods={"GET"}, options={"expose"=true})
+     */
+    public function address(Request $request, HttpClientInterface $client): Response
+    {
+        $url = 'https://api-adresse.data.gouv.fr/search/?';
+        $query = http_build_query([
+            'q' => $request->query->get('q'),
+            'limit' => 10,
+        ]);
+
+        $response = $client->request('GET', $url.$query);
+
+        return $this->json($response->toArray());
+    }
+
     /**
      * @Route("/admin/establishment/sort/{page}", name="admin_establishment_sort", methods={"POST"}, requirements={"page":"\d+"})
      */