TD n°3
    |  Tous les exercices utilisent Bootstrap pour la partie CSS. ember install ember-bootstrap  | 
	
 pour les fonts : ember install ember-font-awesome  | 
	
 
Prérequis :
Le plugin ember-local-storage remplace le module ember-localstorage-adapter auquel la documentation officielle emberJS fait référence.
Ajouter le plugin ember-local-storage pour stocker des models côté client :
ember install ember-local-storage
Adapter et Serializer
Créer l'adapter :
ember g adapter application
Définir le namespace contact-app, clé sous laquelle les données seront enregistrées dans le local storage
import Adapter from 'ember-local-storage/adapters/local';
export default Adapter.extend({
  modelNamespace: 'contact-app'
});
Créer le serializer :
ember g serializer application
export { default } from 'ember-local-storage/serializers/serializer';
Gestion des contacts
- Objectifs
- Models et Store
 - Computed properties
 - Création de composants
 
- Fonctionnalités
- Obtenir la liste des contacts et la filtrer
 - Ajouter un contact dans la liste
 - Modifier un contact existant
 - Supprimer un contact
 - Annuler la suppression
 
Model
| Model | contact | 
|---|---|
|  nom string  | 
	|
|  prenom string  | 
	|
|  email string  | 
	
- Route/Model/actions
/contacts
Affiche la liste des contacts
| Classe | Contacts | 
|---|---|
|  datas Tableau des contacts provenant du store  | 
	|
|  contacts Liste filtrée des contacts non supprimés (* sur filtre et datas.@each.isDeleted)  | 
	|
|  deleteds Liste des contacts supprimés  | 
	|
|  deletedsCount Nombre de contacts supprimés  | 
	|
| Route handler |  model() Retourne une instance de Contacts initialisée avec le datas des contacts provenant du store  | 
	
| actions |  delete(contact) Supprime le contact (sans sauvegarde dans le store)  | 
	
|  cancelDeletion(deleteds) Annule la suppression de tous les contacts supprimés  | 
	
/contacts/add
Affiche le formulaire d'ajout d'un contact
| Route handler |  model() Retourne l'instance de contact à modifier  | 
	
|---|---|
| actions |  addContact(datas) Ajoute un nouveau contact dans le store  | 
	
/contacts/edit
Affiche le formulaire de modification d'un contact
| Route handler |  model() Retourne l'instance de contact à modifier  | 
	
|---|---|
| actions |  updateContact(datas) Modifie le contact dans le store  | 
	
- Vues
- 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
 
 

