add autocomplete
This commit is contained in:
parent
eaef13f4df
commit
bd9668d97e
|
@ -1 +1,86 @@
|
||||||
import '../../core/Resources/assets/js/admin.js'
|
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()
|
||||||
|
|
|
@ -15,6 +15,7 @@ use Symfony\Component\HttpFoundation\Request;
|
||||||
use Symfony\Component\HttpFoundation\Response;
|
use Symfony\Component\HttpFoundation\Response;
|
||||||
use Symfony\Component\HttpFoundation\Session\Session;
|
use Symfony\Component\HttpFoundation\Session\Session;
|
||||||
use Symfony\Component\Routing\Annotation\Route;
|
use Symfony\Component\Routing\Annotation\Route;
|
||||||
|
use Symfony\Contracts\HttpClient\HttpClientInterface;
|
||||||
|
|
||||||
class EstablishmentAdminController extends CrudController
|
class EstablishmentAdminController extends CrudController
|
||||||
{
|
{
|
||||||
|
@ -58,6 +59,22 @@ class EstablishmentAdminController extends CrudController
|
||||||
return $this->doEdit($entity, $entityManager, $request);
|
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+"})
|
* @Route("/admin/establishment/sort/{page}", name="admin_establishment_sort", methods={"POST"}, requirements={"page":"\d+"})
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in a new issue