Note privée fournisseur - Modal

Objectif & besoins

Créer une modale "Note privée fournisseur" permettant à la cliente de rédiger une note privée à destination du transporteur. Cette note, spécifique à chaque voyage, a pour but de transmettre toute information importante concernant le trajet. La note devra être intégrée automatiquement à la feuille de route PDF destinée aux fournisseurs. La modale sera accessible depuis la rubrique "Infos voyages" du dossier, et figurera parmi les actions disponibles pour chaque voyage.

• Étape 1 : Création et affichage de la modale
• Étape 2 : Ajout du champ dans la base de données
• Étape 3 : Enregistrement du message en base de données et affichage du message lors de l’ouverture de la modale
• Étape 4 : Intégration du message dans le PDF dédié aux fournisseurs

Création & affichage de la Modale

Étape 1 : Compréhension de la structure et implémentation d'une modale sous React

Dans un premier temps, j’ai dû me familiariser avec la manière dont une modale est implémentée en React. Cela m’a permis de comprendre que le projet était structuré en plusieurs composants réutilisables, chacun ayant une responsabilité spécifique. L’un des défis a été d’identifier les fichiers concernés, car la logique de la modale n’était pas centralisée dans un seul fichier. Au contraire, plusieurs composants interagissaient entre eux : certains géraient l’affichage de l’interface (UI), d’autres les états via les hooks (useState, useEffect), ou encore les props pour la communication entre composants parents et enfants.

Accès à la Note privée fournisseur via l'icône edit

Affichage de la Modal au clic :

Code

Initialisation de l'état de la modale

Avant de commencer, il a d'abord fallu créer un atom appelé QuoteTravelSupplierCommentModalState 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)
• id : l’identifiant du voyage concerné, pour lier la note au bon dossier,
• onValidate : une fonction qui sera appelée pour envoyer les informations côté serveur.

Pour que ma modale s'affiche au clic, il ne faut pas oublier de l'appeler dans le return.

Mise à jour de l’état de la modale

Ensuite, j’ai utilisé la fonction useSetRecoilState() pour créer setNoteModal, qui me permet de modifier l’état de la modale.

Cette fonction permet de modifier dynamiquement l’état de QuoteTravelSupplierCommentModalState, 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,
• id : l’identifiant du voyage (orderId) à associer à la note.

Tout cela est regroupé dans la fonction CallBack TravelModal qui prend en paramètre l’ID du voyage, et 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.

Une fois la fonction de mise à jour TravelModal mise en place, il a fallu l’associer à l’icône edit (le petit crayon). Dès que l’utilisateur clique sur cette icône, la modale s’affiche automatiquement avec l’ID du voyage correspondant au devis. Cela permettra par la suite d’enregistrer la note dans la base de données, dans le champ prévu à cet effet au sein de la table OrderProductAttribute qui sera ajoutée ultérieurement.

Création et gestion de la modal pour la note privée

Création du composant React dédié à la modale appelé QuoteTravelSupplierCommentModal. Ce composant contient :

• Un état global Recoil (modalState) pour savoir si la modal doit être affichée ou non.
• Deux fonctions :
  • fermer() : ferme la modal.
  • enregistrer() : déclenche la validation du formulaire, puis ferme la modal.

La structure de la modal est composée de deux éléments principaux :

• La fenêtre modale elle-même (affichage visuel).
• Le formulaire à l’intérieur, qui permet à l’utilisateur de saisir un commentaire.

Ce composant permet donc de façon simple d’ajouter ou modifier une note liée à un fournisseur. Pour afficher le champs dans lequel écrire la note (le formulaire), il suffit simplement d'appeler le composant QuoteTravelSupplierCommentForm dans le return de la modal.

Une fois la partie front-end terminée, avec l’affichage de la modale, il reste à développer la partie back-end. L’objectif principal de cette étape était de permettre l’enregistrement de la note saisie dans la base de données. Pour cela, j’ai ajouté un nouveau champ dans la table OrderProductsAttribute, qui contient les infos du voyage. Pour faire en sorte que lors de l’ouverture de la modale, le message précédemment enregistré s’affiche automatiquement. En cas de modification ou de création d’une nouvelle note, celle-ci doit également être enregistrée et intégrée dans le PDF destiné aux fournisseurs, appelé "feuille de route".

Ajout du champ dans la base de données

Pour pouvoir enregistrer la note privée et la revisualiser plus tard, il a fallut dans un premier temps rajouter le champs comment_supplier, à la table OrderProductsAttribute qui contient les détails du voyage. Ce champs servira à stocker le message privée destiné uniquement au transporteurs. Pour cela, j’ai utilisé Portainer afin d’accéder au terminal du conteneur Docker dans lequel le projet CakePHP est exécuté. Comme le projet ne tourne pas directement sur la machine hôte, mais dans un conteneur isolé nommé generator-8-2. Ce conteneur contient tous les outils nécessaires au bon fonctionnement du projet (PHP, MySQL, Composer, CakePHP, etc.).

Je me suis positionnée dans le répertoire racine du projet : /var/www/dahan, où se trouvent tous les fichiers de l’application CakePHP. J’ai ensuite exécuté la commande suivante pour générer une migration : bin/cake bake migration Addsuppliernote comment_supplier -p ProjectDahan/Dahan

Après avoir vérifié la création du fichier de migration dans config/migrations, j’ai appliqué la migration avec : bin/cake migrations migrate -p ProjectDahan/Dahan Puis j’ai vidé le cache de l’application : bin/cake cache clear_all

La fonction up() permet d'ajouter la colonne comment_supplier à la table et elle ne peut pas être null et n'a pas de valeur par défaut. La fonction du dessous elle, down() sert simplement à supprimer la colonne.

Message fournisseur : stockage & affichage

Une fois le champs créer, il faut maitenant faire en sorte que au clic sur le bouton "Valider", le message soit enregistrer en base de données.

Le formulaire est géré par le composant QuoteTravelSupplierCommentForm. Quand le formulaire est ouvert, il récupère les données existantes (s’il y en a) à l’aide d’un useEffect, puis il les affiche dans un champ texte.

Quand l’utilisateur clique sur le bouton pour valider, les données sont envoyées à l’API grâce à la fonction addEditData(). Si la réponse est positive, on exécute la fonction onValidate() pour confirmer l’enregistrement. Pour cette partie, je me suis chargée de l’ensemble du code, à l’exception du code associé à useEffect, qui m’a été fourni.

Intégration du message dans le PDF dédié aux fournisseurs

Maintenant que le message est bien conservé et enregistré dans notre modal, il ne reste plus qu'à trouver le ficher qui permet de rajouter la note privée au pdf adressé aux fournisseurs.

Pour cela, je me suis rendue dans le fichier pdf_travel_infos_section_travel.php

Ici, je viens vérifier si le détail du PDF est bien destiné à un fournisseur avec une conditon if, et si le champ comment_supplier contenu dans l'objet $travel qui correspond au voyage en lui même n'est pas vide.

Si les 2 condtions sont remplis, alors on vient afficher la note.

Rendu Visuel Final

Le message affiché était déjà enregistré en base et s'affiche bien à l'ouverture de la modal

Lorsqu'on appuie sur le bouton "valider", on a bien la requête qui fonctionne pour envoyer le message au serveur.

On retrouve bien ensuite le message dans la feuille de route PDF destiné aux transporteurs.

L'affichage au moment de la génération au format pdf est un problème qui sera rélgé par la suite.