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()


 127.0.0.1
 127.0.0.1