From bd9668d97edbbbba163a20688c41d7b195ac9b1f Mon Sep 17 00:00:00 2001 From: Simon Vieille Date: Tue, 8 Mar 2022 15:31:57 +0100 Subject: [PATCH] add autocomplete --- assets/js/admin.js | 85 +++++++++++++++++++ .../EstablishmentAdminController.php | 17 ++++ 2 files changed, 102 insertions(+) diff --git a/assets/js/admin.js b/assets/js/admin.js index da5f170..2286dd1 100644 --- a/assets/js/admin.js +++ b/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() diff --git a/src/Controller/EstablishmentAdminController.php b/src/Controller/EstablishmentAdminController.php index 1367a73..fc598c5 100644 --- a/src/Controller/EstablishmentAdminController.php +++ b/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+"}) */