Page gestion des employés sur un décors

Quel était l’objectif ?

Le but de cette tâche qui m’avait été donnée était de modifier le code existant pour faire fonctionner le système de Drag&Drop pour la gestion des employés sur un décor. Avant de modifier la page, il n’y avait que le drag des cards qui fonctionnait.

La condition qui m’avait été imposée par mon MAP était d’utiliser la librairie React Aria car c’est celle qu’on utilise de partout dans l’app et qu’elle permet de faire des composants accessibles et faciles d’utilisation.

J’ai commencé par faire le système de drag avec React Aria. Je me suis beaucoup servi de la documentation de React Aria pour d’abord comprendre comment fonctionnait la librairie (c’était la première fois que je l’utilisais). J’ai fait un mini prototype pour faire en sorte que le système de drag & drop fonctionne bien. J’ai ensuite réutilisé le même système dans ma page de gestion des décors.

Exemple de la dropzone de registration

Exemple de la dropzone de setSection

Je me suis ensuite occupé de la partie API. Il y avait déjà des points API utilisés dans la page mais ce n’était pas forcément les bons. J’ai donc essayé de penser la page à ma façon. A la base, je voulais faire un système qui transfère les données d’une DropZone à une autre. J’ai pas mal cherché comment transférer des données via la DropZone et un composant enfant, mais je n’ai rien trouvé. C’est là que j’ai pensé que je pouvais faire différents appels API. J’en aurais une DropZone qui contiendrait tous les employés et une autre qui aurait seulement les employés assignés au décor.

J’ai donc utilisé les points d’API déjà existants et j’en ai modifié d’autres. Il y avait déjà un point d’API qui permettait d’avoir tous les employés d’un groupe d’employés. J’ai donc demandé à Amaury (développeur Back-end) de modifier ce point d’API pour rajouter un paramètre qui permette de choisir si la candidature de l’employé est ‘en attente’ ou ‘validé’ par la production (c’était une condition pour pouvoir assigner un employé à un décor).

Exemple de l’utilisation d’un point d’API

J’ai ensuite créé un point d’API qui me permettait d’avoir seulement les employés assignés au décor. J’ai donc créé ce point d’API en front de zéro, mais la partie back-end, c’est Amaury qui s’en est occupé.

Exemple de l’utilisation d’un point d’API

J’ai ensuite fait les fonctions de Drag & Drop (en suivant la doc React Aria).

Exemple des fonctions de drag and drop

Exemple de mon composant registration

Exemple de mon composant setSection

J’ai aussi fait des filtres pour le nombre de pages ou encore l’état de la candidature des employées.

Exemple du filtre pour l’affichage des employés

Exemple de la fonction pour définir les employés qui sont déjà assigné à un décors

Récap démarche

• Analyse du besoin et compréhension des contraintes (utilisation de React Aria pour l’accessibilité).
• Prise en main de la librairie React Aria.
• Intégration du système de drag & drop dans la page de gestion des décors.
• Création et modification des points d’API existants.
• Développement des fonctions de drag & drop.
• Modification des composants pour la gestion des employés et des décors.
• Mise en place de filtres pour améliorer l’affichage des employés.

Résultat

Pistes d’améliorations

• Unifier un peu plus le code