Table des matières
TD n°2 suite
2- Exercice : Gestion des contacts
-- Objectifs
- Créer un Model
- Utiliser le store
-- Fonctionnalités
- Obtenir la liste des contacts et la filtrer
- Ajouter un contact dans la liste
- Modifier un contact existant
- Supprimer un contact
-- Application/Contrôleurs
| Model | contact |
|---|---|
| nom string, nom du contact |
|
| prenom string, prenom du contact |
|
| email string, adresse mail |
|
| actions | toUpdate(contact) Affiche le formulaire de modification du contact |
| toAdd() Affiche le formulaire d'ajout d'un contact |
|
| toUpdate(contact) Affiche le formulaire de modification d'un contact |
|
| add() Ajoute le contact |
|
| delete(contact) Supprime de la liste le contact |
-- Vue
-- Component à créer
| Nom | Description |
|---|---|
| frm-contact | Affiche un formulaire de modification de contact |
-- Interface
-- Logique applicative / comportement de l'interface
- Zone filter : filtre l'ensemble des contacts affichés.
- Boutons :
- [x] : supprime le contact associé
- […] : affiche le formulaire de modification du contact
- Ajouter : affiche le formulaire d'ajout de contact
- Formulaire d'ajout/modification
- Le champ nom est obligatoire
- Le champ mail doit comporter une adresse email valide
- Le bouton Valider ajoute le contact à la liste des contacts et masque le formulaire
- Le bouton Annuler masque le formulaire
-- Création d'un filtre
Variante sur la suppression permettant l'annulation d'opérations :
- Créer un filtre permettant de retourner, parmi un tableau de contacts, ceux qui ne sont pas marqués comme supprimés : contact.deleted=true
- Appliquer le filtre à l'affichage de la liste de contacts
- Modifier la méthode delete du contrôleur
- Ajouter un bouton Annuler la ou les suppressions (visible s'il existe un élément supprimer) et affichant le nombre de suppressions à annuler, et la méthode cancelOneDeletion()
