Modal de recherche de fournisseurs disponible via l’adresse du devis

Objectif & besoins

Cette tâche consiste à faciliter les besoins de la cliente et des commerciaux dans la gestion des devis établis. Le but ici est d’optimiser et d'automatiser la vérification de la disponibilité des fournisseurs (transporteurs) à partir de l’adresse de départ renseignée dans le formulaire du devis.

L’objectif était d’intégrer une nouvelle fonctionnalité côté front-end et back-end dans le formulaire du devis.
Plus précisément, il a fallu rajouter un bouton "Voir les fournisseurs disponibles" qui, lorsqu’il est cliqué, ouvre une modal affichant dynamiquement les fournisseurs disponibles à proximité. Cette recherche repose sur une requête AJAX qui communique avec le contrôleur pour interroger la base de données selon des critères de distance (calcul à vol d'oiseau entre les suppliers et l'adresse de départ).

Dans cette modal, des filtres ont été intégrés, permettant à l’utilisateur de rechercher les fournisseurs par distance ou par capacité (nombre de places disponibles).
Il faudra également envoyer des requêtes AJAX pour appliquer ces filtres.

Cette fonctionnalité répond à un besoin important : éviter que les commerciaux valident des devis pour lesquels aucun fournisseur n’est réellement disponible.
En effet, lors de l’établissement d’un devis contenant une adresse de départ, il est essentiel de savoir rapidement si des fournisseurs (transporteurs) sont disponibles à proximité. Cette fonctionnalité permettra un gain de temps et réduira les erreurs humaines.


Les différentes étapes pour réaliser cette tâche :

Création & affichage de la modal

Avant de commencer, il a d'abord fallu créer un atom appelé SupplierListModalState pour gérer l’état d’affichage de la modale. Cet état personnalisé permet notamment de transmettre plusieurs paramètres :
open : un booléen pour contrôler l’ouverture ou la fermeture de la modale, ici au départ elle ne sera pas affichée (false)
onValidate : une fonction qui sera appelée plus tard.



Ensuite, j’ai utilisé la fonction useSetRecoilState() pour créer setModalState, qui me permet de modifier l’état de la modal. Cette fonction permet de modifier dynamiquement l’état de SupplierListModalState, en l’appelant avec un nouvel objet contenant : open: true pour afficher la modale, onValidate : une fonction vide pour le moment, à compléter par la suite, Tout cela est regroupé dans la fonction CallBack ShowListModal qui déclenche l’ouverture de la modale en mettant son état (open) à jour. Ici on utilise une fonction de callBack pour ne pas recréer cette fonction à chaque rendu du composant QuoteTravel. QuoteTravel correspond à une partie du front devis. Le reste se trouve dans QuoteTravelDetails.




Pour afficher ma modal en front au clic sur le bouton, il faut d'abord appeler notre modal QuoteSupplierListModal pour qu'elle soit accessible dans le code, et attacher un évènement au clic sur le bouton pour changer son état et l'afficher. C'est ce que fait la fonction handleClick.
Ici, on vient ajouter des props à notre modal et notamment {departureadress} pour lui transmettre l'adresse de départ. Comme on va rechercher les fournisseurs à partir de celle-ci, il faut impérativement que l'adresse soit transmise à la modal et qu'elle puisse ensuite être envoyé au back pour faire la requête.


Modal au départ :




Modal avant ajout des filtres et ajustements :



Modal final :


Contenu de la Modal Finale - QuoteSupplierListModal






Au départ, le but était uniquement d’afficher les suppliers avec leur nom et leur adresse. Ensuite, j’ai dû ajouter une fonctionnalité de recherche permettant de filtrer les résultats par distance et par nombre de places disponibles et les afficher. Puis la dernière modification a été d'adapter l'affichage des informations selon les rôles des utilisateurs : les commerciaux voient seulement une phrase informative et les champs de recherche, tandis que la cliente a accès aux détails complets des suppliers en plus du reste.


Bouton + AJAX : récupération des suppliers disponibles

Comme on peut le voir dans le code ci-dessus, lorsque le bouton "Voir fournisseurs disponibles" est cliqué, la fonction handleClick est appelée.

Elle déclenche deux actions principales :
1. showListModal() : qui modifie l’état pour ouvrir la modal.
2. suppliersListEvent() : qui envoie une requête AJAX via la méthode searchInfosSupplierAjax.call().

Cette requête transmet plusieurs paramètres, dont principalement l’adresse de départ (departureAddress), afin de récupérer les suppliers disponibles.


Une fois la réponse reçue et validée avec un statut SUCCESS, les données retournées sont traitées avec Object.entries().map() pour formater chaque supplier, puis enregistrées dans le state grâce à setSuppliers(suppliers).

Ces suppliers sont ensuite affichés dynamiquement dans la modal sous forme de tableau.

La requête AJAX est la même que celle faite dans une autre partie du code avec juste le rajoute de l'adresse (pas obligatoire)


Côté controller

Pour récupérer les données, j’ai réutilisé la même fonction searchSupplier déjà utilisée dans une autre partie du code que nous avions développée.

Cette fois-ci, j’y ai ajouté la gestion de l’adresse : si une adresse est fournie dans la requête, un traitement spécifique est appliqué. L’objectif ici est d’optimiser le code en mutualisant les appels et les traitements, tout en gardant la logique de base.


Comme une recherche par distance et par nombre de places devait également être intégrée, il a simplement fallu adapter la fonction existante en y ajoutant des conditions supplémentaires.



Dans la modal, deux types de résultats basés sur la distance doivent être gérés. Le premier correspond à l’affichage par défaut des suppliers disponibles dès l’ouverture de la modal. Le second est déclenché lors de l’utilisation du champ de recherche par distance (filtre).

Pour gérer l’affichage par défaut, il a été nécessaire de compléter la condition liée à la distance : si une adresse est renseignée, on vérifie s’il y a également une distance définie. Si c’est le cas, sa valeur est utilisée ; sinon, on applique une valeur par défaut (actuellement fixée à 100 km autour du point de départ).


L’adresse est également gérée différemment dans ce cas. Ici, elle est déjà fournie directement dans la requête, alors que dans l’autre partie du code, il est nécessaire d’aller récupérer cette information dans la table Suppliers, puis de calculer ses coordonnées.

Il a donc été important de bien distinguer les deux logiques de traitement : l’une où l’adresse est fournie, et l’autre où elle doit être récupérée et calculée avant d’être utilisée pour le filtrage par distance.




La réponse pour afficher les suppliers par défaut sera traiter dans QuoteTravel là ou se trouve le bouton Voir les fournisseurs disponibles.



Côté Front :


Rajouter les options de filtres (distance et/ou Nombre de places)

Pour affiner la recherche des fournisseurs disponibles affichés par défaut, deux filtres de recherche ont été ajoutés : par distance et par nombre de places.

Comme mentionné précédemment, un petit formulaire a été intégré dans la modal, avec deux champs de recherche et un bouton Rechercher. L’événement déclenché au clic est lié à la fonction searchInfosSupplierEvent, qui envoie une requête similaire à celle utilisée pour l’adresse. La différence ici est que cette requête inclut en plus les valeurs de distance et/ou de nombre de places.


Côté back-end, le traitement est effectué dans la fonction searchSupplier (voir plus haut). Côté front-end, les résultats sont affichés directement dans la modal. Pour cela, un useState - filteredSuppliers a été mis en place pour stocker les données des suppliers et les mettre à jour à chaque nouvelle recherche. Ensuite, les résultats sont parcourus et affichés sous forme de tableau, en ne conservant que les informations pertinentes.



Gérer l'affichage en fonction du rôle.

La dernière étape de cette tâche a consisté à adapter l’affichage de la modal en fonction du rôle de l’utilisateur “admin” (la cliente) ou commercial (accès restreint).

Pour cela, une condition de rendu avec opératuer logique, a été ajoutée directement dans la modal. En observant le code, on remarque qu’avant la Box contenant la liste des suppliers, une condition {isNotCommercial && ...} est utilisée.

Cela signifie que si isNotCommercial est égal à true, les détails complets des suppliers sont affichés. Dans le cas contraire (si l’utilisateur est un commercial), seule une phrase indicative ainsi que les champs de recherche seront visibles.