Améliorer la gestion de collections

1. Définir les champs de la fiche d’une collection

Les éléments d’une collection sont tous communs entre eux. Ils partagent les mêmes caractéristiques. Rien ne ressemble plus à un film qu’un autre film. Ils ont tous les deux un titre, une année de production, un réalisateur, un scénariste, un synopsis et une liste d’acteurs. Entre autres bien sûr.

Par contre, les éléments de deux collections distinctes peuvent être profondément différents. Si on désire collectionner des timbres, des porte-clefs, des pièces de monnaie ou des bandes dessinées par exemple, ce qui les caractérise n’a que peu de choses à voir avec le cinéma. Ces éléments n’ont pas tous de titre, de réalisateur ou de synopsis.

Il nous faut créer un outil qui nous permette, de manière indépendante, de créer l’ensemble des champs définissant la fiche d’un élément d’une collection. Nous devons réfléchir à un cahier des charges sur lequel nous appuyer pour déterminer comment créer un système souple avec lequel il sera possible pour l’utilisateur de saisir la description de chaque élément de sa collection.

Commençons par analyser les choses : une fiche est un regroupement d’informations permettant de distinguer deux éléments d’une même collection. Chacune de ces informations nécessite une valeur précise saisie par l’utilisateur. Nous pouvons donc déterminer, pour chacune des informations associées à la fiche d’une collection, le type de réponse attendue. C’est ce paramétrage de chaque champ de la fiche qui fait la souplesse du système.

Nous devons maintenant déterminer les types de valeurs possibles pour les champs de saisie d’une fiche de collection :

1. Organiser les champs sur la fiche d’une collection

Il faut maintenant que l’utilisateur puisse organiser les champs sur une fiche de saisie pour créer les éléments de sa collection.

Pour ce faire, il existe un cadre situé dans le centre droit de l’écran, à côté de la liste des champs, qui symbolise une page web, ou du moins, un espace dans lequel les champs de saisie peuvent être affichés. Il s’agit de permettre à l’utilisateur de glisser-déposer (drag and drop) les champs de la liste des champs dans l’espace dédié à l’organisation de la fiche de la collection.

Le véritable composant, dépendant du type du champ déposé, doit apparaître dans ce cadre. Une boîte à outils doit apparaître également, pour permettre de positionner le champ ainsi que de changer sa taille avec précision. Les positions et tailles des composants ainsi définies doivent être enregistrées sur le serveur, rechargées et réappliquées lorsque la page d’édition est ouverte pour modifier le paramétrage d’une collection.

2. Gérer le glissé-déposé des champs vers la fiche

Pour autoriser les champs à être déplacés par l’utilisateur à l’aide de sa souris, nous devons d’abord modifier le code HTML injecté par la fonction drawCollectionFields(). Il suffit en fait d’ajouter un attribut nommé draggable et de le valoriser avec la valeur booléenne true, comme suit :

...<div class="fieldLine" draggable="true" data-id="' + e.FLD_id + '">
<label... 

Cette étape effectuée, on modifie le code de la fonction editCollection() de manière à poser les écouteurs nécessaires à l’opération. Pour cela, on ajoute la ligne suivante juste avant l’instruction drawCollectionFields() :

prepareDrag(); 

Et on crée la fonction prepareDrag() qui pose ces fameux écouteurs.

On a besoin d’un écouteur qui réagit à l’évènement dragstart, déclenché dès qu’un élément commence à être...