Environnement

Angular 12 et PrimeNG 12

Lien du template : https://www.primefaces.org/ultima-ng

Lien de la documentation https://primefaces.org/primeng/showcase/#/setup

Vous trouverer a la racine du projet le fichier .zip du template ultima. Vous pouvez vous appuyer dessus pour la mise en page de vos components.

Exercice 1

L'objectif est de développer le module candidat.

Liste des Components
  • Le component "CandidatListComponent" affichera la liste des candidats avec pagination. il sera possible de faire une recherche sur cette liste en incluant le component CandidateSearchComponent.
  • Le component "CandidatSearchbarComponent" affichera un formulaire de recherche par prenom, nom, email. Ce component devra apparaitre sur la liste des candidats.
  • Le component "CandidatDetailComponent" affichera un formulaire de mise a jour du candidat.
  • Le component "CandidatSidebarComponent" affichera une fenetre sidebar qui permettra de creer un nouveau candidat ou mettre à jour rapidement le candidat selectionné.
Liste des services
  • Le service "candidate.service.ts" devra comporter les api de Search, getById et Delete
  • Le service "candidate-list.service.ts" sera utilisé dans le cadre du chargement des candidats. (Voir Recommandations)
Stories

- Ajouter une nouvelle entrée "Candidats" au menu de gauche.

En tant qu'utilisateur, je clique sur l'entrée "Candidats" du menu gauche principal.
Une fois sur la liste des candidats, je peux faire une recherche en fonction du nom, prenom ou email du candidat.
La liste sera un tableau de 5 colonnes [Id, Prenom, Nom, Emails, Actions(edit,delete) ] avec une pagination. Sur cette liste ajouter un bouton "Add". En cliquant sur Add, j'affiche le component Sidebar qui permet de créer un nouveau candidat. Vous pouvez editer le candidat de deux facons :

  • Soit en cliquant sur le bouton edit en fin de chaque ligne. Cette action ouvrira l'écran de detail du candidat avec les données préchargées à mettre à jour./li>
  • Soit en cliquant sur la ligne. Cela ouvrira l'ecran sidebar de modification d'un candidat.
Recommandations

- Pour les formulaires, vous pouvez utliser soit les Template-Driven ou Reactive Forms

- Sur les components "candidate-list", "candidate-sidebar" et "candidate-searchbar", il faudra utiliser les "BehaviorSubject" et "Resolve".
Voici quelque liens explicatifs:

- Les fichiers de données seront stockés dans le repertoire: "assets/demo/data" au format JSON

Organisation du projet