TP2:

TP2: Julie Pro Plus!

Consignes (20% de la note finale)

• Lisez toutes les instructions et la grille de correction avant de commencer
• Vous DEVEZ faire au moins les migrations et les commits demandés mais vous pouvez en faire plus sans problème, tant que vous les documentez correctement

danger

Git n'aime pas les répertoires vide et à effacera le répertoire wwwroot/images/upload qui est utilisé pour générer les images d'entraîneurs.

Repository de départ

• TP2 Départ - 🔗GitHub

Terminez de mettre en place i18n

Ce qui est déjà fait :

• Les packages nuget sont installés
• Les vues sont déjà traduites!
• Les modèles aussi!
• Le Inject du IViewLocalizer est aussi déjà présent

Ce qu’il faut faire :

• Il faut configurer i18n dans Program.cs. Les fichiers de traduction resx se trouvent dans le répertoire ** /i18n/ **
• Il faut ajouter une fonction SetLanguage au HomeController
• Il manque le commutateur de langue dans le _Layout. Utilisez une vue partielle et nommez-la _SelectLanguage
• Finalement, il faut gérer la culture correctement en ajoutant les librairies nécessaires et en modifiant la vue partielle _ValidationScriptsPartial. (C'est pas facile de tester cette partie pour l'instant, mais une fois que vous aurez besoin de créer des entrées avec des valeurs décimales, assurez-vous que vous pouvez modifier une entreé avec un nombre avec une décimale en français et en une autre langue sans problème)

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Faites fonctionner le filtre

1. Implémentez la fonction Filter du TrainerController
2. Implémenter la méthode GetAllAsync du service TrainerService pour prendre en compte les paramètres de pagination de TrainerSearchViewModelFilter
3. Dans la même méthode, il faut également ajouter des Where pour filtrer selon chacun des critères de recherche de TrainerSearchViewModelFilter
4. Pour le SelectList de certification centers, il faut obtenir le CertificationCenter (une simple string) de toutes les certifications et enlever les doublons, car il est possible que plusieurs certifications aient le même CertificationCenter.

info

Voici comment faire une requête pour une condition optionnelle dans Linq et ne filtrer que lorsque l'on sélectionne une valeur dans le filtre.

.Where(x=> filter.SelectedCategoryId == null || x.CategoryId == filter.SelectedCategoryId ).ToList() 

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Affichez le détail d'un Trainer dans la page Trainer/Index

1. Écrivez du javascript pour ajouter la classe show à l’élément enfant aside lorsqu'on survole le card d’un entraîneur.
2. Écrivez du javascript pour retirer la classe show à l’élément enfant aside lorsqu'on ne survole plus le card.

info

Comme aside est un enfant de card, si l'utilisateur bouge sa souris à l'extérieur de la photo de l'entraîneur vers le aside, la souris est toujours techniquement au dessus de card et ça ne cause pas d'évênement onmouseout. Ça tombe bien, c'est exactement ce que l'on veut!

danger

Cette vue de détail (encadrée en rouge) est uniquement en anglais et ce n'est pas un problème pour ce TP. Vous n'avez PAS à la traduire.

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Faire fonctionner la pagination

1. Il faut maintenant utiliser Items du modèle TrainerSearchViewModel qui est un IPagniatedList&ltTrainer&gt pour bien afficher les liens de navigations
2. Mettez le code pour que l’ensemble des pages disponibles soient affichées dans la pagination.
3. Ajoutez la logique que Previous et Next fonctionnent et s'affichent lorsque nécessaire.

4. Ajoutez le javascript (l'utilisation de jQuery est permise, mais pas obligatoire) pour que la page change dans le filtre du formulaire et qu'il se soumette automatiquement lorsqu'on clique sur un élément de pagination (incluant Previous et Next). Utilisez les attributs data-page-id qui sont déjà là sur les éléments de navigation. Il y a plusieurs façon d'obtenir le même résultat, mais voici les grandes étapes nécesaires en JS :
   • Exécuter une fonction JS lorsqu'un élément de pagnination est cliqué.
   • Obtenir la valeur du data-page-id de l'élément sur lequel l'utilisateur a cliqué.
   • Obtenir l'élément qui contient l'information du SeletectedPageIndex (libre à vous d'ajouter un Id pour vous aider à l'obtenir plus facilement)
   • Modifier la valeur de l'élément en question
5. Une fois que votre navigation fonctionne bien, mettez le SelectedPageIndex (l'élément mentionné dans le point précédent) en type="hidden" et supprimez le libellé (label associé).

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Générez les vues et contrôleur (RecordController) du modèle Record

attention

Au moment de générez le contrôleur il faut le nommer RecordController et non pas RecordsController (Donc, pas de s!). C'est important car les liens existants et les fichiers de traduction utilisent tous Record et non pas Records!

attention

La génération de contrôleur utilisent des [bind] pour les actions post de Create et Edit. À moins que vous soyez déjà familié avec leur utilisation, vous pouvez simplement les retirer.

1. Générez un contrôleur MVC avec ses vues pour le modèle Record. (Un lien vers cette vue existe déjà dans la barre de navigation)
2. Lorsqu’il y a un dropdown, au lieu de le mettre dans le ViewData ou le ViewBag, faites un ViewModel (RecordViewModel) (ou plusieurs) avec les SelectList et les informations du modèle.

attention

Il existe déjà des fichiers .resx pour le view model RecordViewModel. Si vous utilisez un autre nom ou utiliez d'autres view models, il faudra s'assurer de faire fonctionner la traduction.

3. Lorsque vous affichez Trainer:
   • Affichez le nom complet du Trainer
4. Lorsque vous affichez Discipline
   • Affichez le nom de la Discipline
5. Faites un service pour utiliser ce/ces ViewModels
6. Utilisez le service dans le contrôleur

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Ajoutez une vue pour voir les Records d'un Trainer

1. Ajoutez une action à votre contrôleur qui permet de voir les Records d'un Trainer Record/TrainerIndex(int trainerId)
   • Il existe déjà un icône de trophé sur la vue détaillé du Trainer qui doit permettre d'afficher cette page
2. Ajoutez également la vue nécessaire

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Vérification de la traduction

1. Assurez-vous que vos nouvelles pages sont toutes bien traduites
   • Les resx sont généralement déjà là, utilisez-les
   • Il manque la traduction des messages d’erreur
   • Il faut parfois utiliser un IViewLocalizer pour certaines parties

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

Injection du ILogger

1. Injectez le ILogger dans le contrôleur Record
   • Dans les actions Create et Edit
   • Affichez dans la console les logs de type erreur
   • Affichez dans la console les logs de type information sur la création et modification de Records (nom du Trainer, Discipline et date de la création/modification)

attention

C'est le moment de tester, ajouter des commentaires et faire votre commit et votre push

BONUS

1. Exécuter le filtre lorsqu’on change n’importe quel paramètre du filtre

danger

Une fois que vous avez terminé votre TP, il est temps de merger votre branche TP1 dans votre branche Main.

Grille de correction

Tâche	Nb Points
Terminer de mettre en place i18n	8
Faire fonctionner le filtre	10
Afficher le détail d'un Trainer	8
Faire fonctionner la pagination	10
Ajouter RecordController	12
Ajouter une vue pour les records d'un entraîneur	5
ILogger	2
Traduire le contenu ajouté	5
Total	** /60 **
Point bonus	1