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

Préambule

• Ce TP vient compléter le TP 1 en utilisant les directives basiques de vuejs pour créer les 2 composants affichant les personnages et les villes.
• Il n'y pas besoin de créer un nouveau projet : il suffit de travailler sur les sources créées dans le TP 1.
• Certaines parties sont "à recopier" et servent d'exemples pour les exercices réels.

1°/ Affichage de listes avec v-for.

• au lieu d'afficher bêtement l'objet JSON contenant tous les personnages, il est possible de créer une liste à puce grâce à <ul> + <li>.
• pour créer autant de balise <li> qu'il y a des personnages, il suffit d'utiliser la directive v-for de vuejs.

A faire dans PersoView :

• remplacez l'affiche de l'objet persos par les lignes suivantes :

<ul>
  <li v-for="(perso, index) in persos" :key="index">{{perso.nom}}</li>
</ul>

• Après recompilation, la page affiche maintenant une liste à puces.

 Exercice :

• Utilisez ce principe pour afficher la liste des villes dans TownsView.

2°/ Champ de saisie et v-model

•  La balise <input> permet de créer des champs de saisie de type texte, case à cocher, bouton radio.
• Pour que l'état du champ soit relié de façon bidirectionnelle à une variable d'un composant, il suffit d'utiliser la directive v-model en lui assignant le nom de la variable.
• De ce fait, si on modifie la valeur de la variable, le changement sera reporté dans le champ et inversement, si l'utilisateur change l'état du champ grâce à une interaction souris/clavier, la valeur de la variable sera modifiée en conséquence.

A faire dans TownsView :

• Dans la partie <script>, modifiez le contenu de l'attribut data (rappel : il contient les variables locales du composant) comme suivant :

 data: () => ({
    filter: '',
    filterActive: false
  }),

• Cela permet d'ajouter 2 variables locales au composant, qui seront observées par vuejs.
• NB : filterActive ne sera utilisée que dans la section 4.4

• Dans la partie <script>, modifiez le contenu de l'attribut computed comme suivant :

  computed: {
    ...mapState(['villes']),
    villesFiltre() {
      return this.villes.filter(v => v.nom.includes(this.filter))
    }
  }

• Cela permet d'ajouter une variable calculée nommée villesFiltre. La valeur de cette variable est un tableau créé en filtrant le tableau villes grâce à la valeur de la variable filter. 
• Selon les principes des variables calculées, dès que filter change, villesFiltre est recalculé.

• Dans la partie <template>, modifiez comme suivant :

<label for="filtertown">filtre : </label><input v-model="filter" id="filtertown">
<ul>
  <li v-for="(ville, index) in villesFiltre" :key="index">{{ville.nom}}</li>
</ul>

• On remarque que v-for opère maintenant sur villesFiltre.
• Conformément aux principes d'observation et de v-model, si l'utilisateur tape des lettres dans le champ de saisie, filter prend comme valeur ce texte, ce qui provoque le recalcul de villesFiltre.
• Comme vuejs observe également villesFiltre, dès qu'il change, la page est acutalisée.

 Exercice :

• Utilisez le même principe pour mettre en place le filtrage dans PersosView.

3°/ Rendu conditionnel avec v-if

• Très souvent, une partie du template d'un composant ne doit être affiché que sous certaines conditions.

A faire dans TownsView :

• Dans la partie template, modifiez comme suivant :

    <label for="filteractive">filtrage possible : </label><input type="checkbox" v-model="filterActive" id="filteractive">
    <div v-if="filterActive">
      <label for="filtertown">filtre : </label><input v-model="filter" id="filtertown">
    </div>
    <ul>
      <li v-for="(ville, index) in villesFiltre" :key="index">{{ville.nom}}</li>
    </ul>

• On remarque que le champ de filtre apparaît ou disparaît en fonction du fait que la case soit cochée ou non.
• En effet, la balise <div> est affichée en fonction de la valeur de filterActive, qui est elle-même mise à jour en (dé)cochant la case.
• Problème fonctionnel : si on décoche la case et qu'un filtre est en place, la liste est toujours filtrée !

Exercice :

• Modifiez TownsView le moins possible afin de régler le problème mentionné ci-dessous.

4°/ Exercices en autonomie

A faire dans TownsView :

• modifier le composant pour que l'affichage soit divisé en 2 parties.
• la partie gauche contient ce qui existe déjà :  le filtre et la liste,
• la partie droite est vide tant qu'il n'a pas exactement une seule ville dans la liste filtrée.
• si il n'y en a qu'une alors la partie droite affiche quelque chose du genre :

A faire dans PersosView :

• modifier le composant pour que l'affichage soit divisé en 2 parties.
• la partie gauche contient une liste déroulante contenant les noms des personnages (s'inspirer de la démonstration du TD n°1)
• quand un personnage est sélectionné, la partie droite affiche quelque chose du genre :

• le chiffre entre [ ] à droite des noms des emplacements est le nombre d'item assignés à cet emplacement. Si aucun item n'est assigné, les [ ] ne doivent pas apparaître.