R3.01 - dev. web - côté client (vuejs)

Préambule

• L'objectif principal de ce TP est d'utiliser les slots afin de pouvoir "customiser" certains composants créés dans les TPs précédents.

1°/ Refonte de NavBar

• L'objectif est de permettre au composant qui va instancier NavBar de déterminer l'apparence des liens affichés, sans changer la fonctionnalité de base qui est de suivre une route en cas de clic.
• Pour cela, NavBar va utiliser des scoped-slots.

• Modifier le composant NavBar (en partant du TP 5)
  • au lieu d'utiliser v-for sur une balise pour créer des boutons (par ex, <button> ou <v-btn>), mettre le v-for sur une balise <span>. Par exemple : <span v-for="(link, index) in titles" ...> 
  • en cas de clic sur la balise <span>, au lieu d'émettre directement un événement, appeler une fonction goTo(index), l'index étant le second itérateur du v-for
  • à l'intérieur de <span>, créer un scoped-slot nommé link-to, qui donne accès au premier itérateur (c.a.d. link dans l'exemple juste avant) au composant père, avec comme nom link
  • ce slot doit avoir un visuel par défaut qui est simplement le texte de link.
  • dans methods, ajouter une fonction goTo(index), qui permet d'émettre un événement menu-clicked avec comme valeur index, puis de suivre la route choisie, c.a.d. celle indiquée par this.titles[index].path

• Modifier App :
  • dans la balise <NavBar>, définir le contenu du slot link-to en récupérant l'objet link fourni par le fils.
  • le slot doit afficher un bouton dont le texte et la couleur sont donnés dans cet objet link

2°/ Refonte de CheckedList

• L'objectif est de se passer de la props fields qui défini quelles colonnes du tableau data passé en props à CheckedList doivent être affichées.
• A la place, on utilise un scoped-slot que le père devra définir, grâce à l'item donné par le fils.
• De façon similaire, on va utiliser un scoped-slot afin de rendre customisable l'apparence des boutons d'items, et un slot simple pour celle du bouton de fin de liste. 

• Modifier CheckedList (en se basant sur la solution du TP 3) :
  • modifier les props comme suivant :
    • supprimer la props fields,
    • les props itemButton et listButton deviennent des simples booléens.
  • à la place de la balise <span> avec un v-for permettant d'afficher les colonnes voulues, mettre simplement un scoped-slot nommé item, qui donne accès aux itérateurs item et indexRow (cf. solution TP 3) au composant père.
  • au lieu d'utiliser une balise <v-btn> pour créer les boutons après chaque item (si itemButton vaut true), utiliser une balise <span>. A l'intérieur de cette balise, définir un scoped-slot nommé item-button, qui donne également accès aux itérateurs item et indexRow au composant père.
  • dans le même registre, remplacer le bouton final par une balise <span> avec à l'intérieur un slot simple nommé list-button.

• Modifier ShopDetails :
  •  pour la CheckedList utilisée pour afficher les items en stock :
    • définir le slot item afin qu'il affiche une ligne au format "nom_item : X po"
    • définir le slot item-button afin qu'il affiche un bouton intitulé "Buy" et une couleur de fond rouge ou bleu en fonction de si l'indice de l'item est pair ou impair (NB : ce scoped-slot permet de récupérer l'objet item à afficher ainsi que son indice).
    • définir le slot list-button afin qu'il affiche un bouton intitulé "Buy all".
  • pour la CheckedList utilisée pour afficher les items sur commande :
    • définir le slot item afin qu'il affiche une ligne au format "nom_item : délai_commande". Le délai de commande doit correspondre au temps tiré aléatoirement dans le TP 4 avant que l'item soit intégré dans le stock. Cependant, il faut que ce temps ne soit pas tiré aléatoirement au moment du clic sur le bouton, mais en avance afin d'être affiché. A vous de trouver une solution pour cela.
    • définir le slot item-button afin qu'il affiche un bouton intitulé "Order" et une couleur qui dépend de la catégorie de l'item.

• Si vous avez d'autres composants utilisant CheckedList, modifiez-les afin qu'ils utilisent correctement la nouvelle version.

3°/ Refonte de PersoCaracs

• Modifier PersoCaracs :
  • les caractéristiques niveau, vitalité, vie et or doivent être affichées via un scoped-slot qui donne accès à la valeur numérique de la caractéristique au composant père.

• Modifier PersosView :
  • le niveau du personnage doit être affiché sous la forme d'une suite d'icônes de forme ronde, carrée, étoile, ... à vous de choisir. L'icône peut être textuel ou bien une image.
  • la vitalité du personnage doit être affichée avec un rectangle rouge d'une largeur arbitraire correspondant à la vitalité du personnage. La vie du personnage doit être un rectangle vert qui vient en superposition du rectangle rouge de la vitalité.
  • l'or du personnage doit être affiché en chiffres romains :-) avec une petite image de pièces d'or à côté.