Présentation

I. Prérequis & installation

II. Utilisation du router et gestion des parcours

III. Gestion des UEs

IV. Gestion des étudiants

V. Gestion des notes

VI. Pour aller plus loin

Liste des exercices

<aside> 💡

Exercice 1 : En vous inspirant des lignes précédentes, rajoutez un nouveau lien pour aller sur la page des parcours "/parcours

</aside>

<aside> 💡

Exercice 2: Dans le composant ParcoursForm.vue, déclencher la fonction saveParcours lorsque l’utilisateur clique sur le bouton Enregistrer.

</aside>

<aside> 💡

Exercice 3 : modifier le formulaire pour afficher une erreur si le champ de l’année de formation n’est pas un entier compris entre 2000 et 2100 (ou sinon l’année actuelle – 20 ans et l’année actuelle + 20 ans).

</aside>

<aside> 💡

Exercice 4

• Modifier ParcoursDAO afin d’utiliser axios pour récupérer la liste des parcours depuis votre API, inspirez-vous de la création d’un parcours mais cette fois il faudra utiliser la méthode get d’axios.
• Modifier CustomTable pour que la description d’une colonne puisse recevoir un paramètre style de type string ou null, ce style devra être appliqué sur une cellule, exemple :

<td :style="column.style">

• Appliquer un style sur les colonnes pour que votre tableau ressemble à ceci :

Les colonnes edition et suppression sont plus petites et les icones sont centrées.

</aside>

<aside> 💡

Exercice 5 : Modifier la méthode saveParcours de ParcoursForm.vue pour pouvoir sauvegarder un parcours déjà existant.

</aside>

<aside> 💡

Exercice 6 : Faites la même chose pour la mise à jour d’un parcours, attention la fonction onParcoursUpdated devra cette fois remplacer un élément (au même endroit dans la liste) et non en ajouter un.

</aside>

<aside> 💡

Exercice 7 : Modifier la méthode delete du ParcoursDAO afin de faire un appel de suppression vers votre back.

</aside>

<aside> 💡

Exercice 8 : Mettre en place l’écran de la liste des UEs avec son DAO, ajouter le lien au routeur et à la navbar.

</aside>

<aside> 💡

Exercice 9 : Mettre en place la gestion des étudiants, basez-vous sur la liste des parcours pour une UE pour gérer le parcours d’un étudiant (le champ ne doit pas être multiple, un étudiant ne suit qu’un seul parcours).

</aside>

<aside> 💡

Exercice 10 (notation individuelle) :

En vous basant sur cette maquette figma :

https://www.figma.com/design/LLvhqjpjHz0Hn8gsOEwtcU/Gestion-des-UEs?node-id=0-1&m=dev&t=JGg4By8GRghK7BzB-1

Vous devez créer une nouvelle page de gestion d’une UE, celle-ci doit être accessible lorsque l’on clique sur le stylo pour modifier une UE.

Cette page doit permettre de :

• Modifier les informations de base de l’UE (numéro et intitulé)
• Gérer les parcours qui comportent cette UE
  • Ajouter un/plusieurs parcours
  • Supprimer un/plusieurs parcours
  • ⚠️ Lors de ces modifications la liste des étudiants (notes) doit être mise à jour
• Gérer les notes des étudiants
  • Afficher la liste des étudiants des parcours ainsi que leur note pour l’UE (__ si aucune note)
  • Ajouter/Modifier une note

⚠️ Pour cet exercice, vous devrez modifier votre back-end, cependant dans cette UE nous noterons que les modifications apportées au front

ℹ️ Exemple de bibliothèque pouvant être utilisée pour ajouter des notifications similaires à celles de la maquette :

https://www.npmjs.com/package/@kyvg/vue3-notification

</aside>