new service filter for motifs in admin/agent_searches#index and admin/rdv_wizard#step1

Created by: adipasquale

https://trello.com/c/dQzWcy1m/597-ajouter-un-filtre-par-service-dans-la-vue-trouver-un-cr%C3%A9neau

J'ai envisagé trois solutions différentes :

1. a chaque changement de service, faire une requete AJAX JSON sur /motifs?service_id=x et rafraichir la liste des options dispos dans le select du motif (comme le populate-libelle.js existant)
2. a chaque changement de service, rafraichir la page automatiquement avec le parametre get service_id=x et peupler le select de motifs avec la liste filtrée dans la vue directement
3. a chaque changement de service, filtrer la liste des options dispos dans le select des motifs purement en JS - sans requête AJAX

J'ai fini par choisir 3 pour plusieurs raisons :

• La requête AJAX est superflue et offre une moins bonne UX (plus lente + plus instable) que le pur filtre JS. on peut tout à fait charger tous les motifs initialement et les filtrer ensuite, il n'y a pas de soucis de perfs pour ce genre de petit volume de données
• la 2. est attirante mais après avoir essayé, c'est peu délicat à mettre en place à la fois dans "trouver un créneau" et dans le rdv wizard step 1. ça pose aussi pas mal de questionnements vis-à-vis du remplissage auto de ce champ quand un motif est sélectionné, et comment gérer les soumissions de formulaire avec service , sans service mais avec motif etc.. L'UX est légèrement moins bonne aussi puisque ça implique un refresh de la page.

Finalement 3. me paraît pertinente car ce n'est pas vraiment un champ qu'on rajoute au formulaire, mais juste une aide pour sélectionner le champ important : le motif. ça me va assez bien de voir ça comme purement de la vue. L'UX est assez bonne comme ça.

J'ai donc :

• dans le select de motifs, groupé les options par services dans des optgroup. L'avantage c'est que meme sans filtrer a l'aide du select de services, le choix est déja plus aisé. et ca fonctionne sans JS :)
• rajouté du JS pour que lorsqu'on change la selection dans le dropdown de service ca filtre les options dans le select de motif. malheureusement ça fait beaucoup de JS, plus que je n'aurais aimé.
• géré le cas particulier ou il n'y a qu'un seul service dispo (qui va arriver souvent) pour auto-selectionner ce service.

Le JS est principalement compliqué à cause de deux choses :

• l'API de select2 pour changer les options n'est vraiment pas très agréable, il faut reformatter les options du DOM dans un format précis. Et il faut retagger manuellement l'option selected + rajouter manuellement l'option vide
• gérer turbolinks est relou (par exemple si tu avances puis recules, il faut bien sélectionner le motif)