TD n°2

Tous les exercices utilisent Bootstrap pour la partie CSS. ember install ember-bootstrap

Créer le projet td2

1. Model objet
2. Computed properties
3. Tableaux d'objets

1. Lister les produits disponibles
2. Ajouter un ou plusieurs produits disponibles aux produits sélectionnés
3. Ajouter tous les produits disponibles aux produits sélectionnés
4. Retirer un ou plusieurs produits sélectionnés
5. Retirer tous les produits sélectionnés
6. Valider le choix de produits sélectionnés
7. Revenir au choix des produits

dispoItems : à intégrer au model hook

[
		{
			"url": "https://tutorialzine.com/2018/01/what-every-developer-should-know-about-cryptocurrency",
			"title": "What Every Developer Should Know About Cryptocurrency",
			"image": "https://tutorialzine.com/media/2018/01/everything-you-should-know-cryptocurrency.png"
		},
		{
			"url": "https://tutorialzine.com/2018/01/15-interesting-javascript-and-css-libraries-for-january-2018",
			"title": "15 Interesting JavaScript and CSS Libraries for January 2018",
			"image": "https://tutorialzine.com/media/2018/01/15-interesting-js-and-css-libraries-2018.png"
		},
		{
			"url": "https://tutorialzine.com/2017/12/the-best-javascript-and-css-libraries-for-2017",
			"title": "The Best JavaScript and CSS Libraries for 2017",
			"image": "https://tutorialzine.com/media/2017/12/the-best-javascript-and-css-libraries-for-2017.png"
		},
		{
			"url": "https://tutorialzine.com/2017/10/getting-started-with-graphql",
			"title": "Getting Started With GraphQL",
			"image": "https://tutorialzine.com/media/2017/10/getting-started-graphql.png"
		},
		{
			"url": "https://tutorialzine.com/2017/11/9-free-icon-packs-for-web-developers",
			"title": "9 Free Icon Packs For Web Developers",
			"image": "https://tutorialzine.com/media/2017/10/9-free-icon-packs.png"
		},
		{
			"url": "https://tutorialzine.com/2018/01/10-free-programming-books-you-should-read-in-2018",
			"title": "10 Free Programming Books You Should Read in 2018",
			"image": "https://tutorialzine.com/media/2018/01/10-free-programming-books-you-should-read.png"
		},
		{
			"url": "https://tutorialzine.com/2016/12/the-languages-frameworks-tools-you-should-learn-in-2017",
			"title": "The Languages and Frameworks You Should Learn in 2017",
			"image": "https://tutorialzine.com/media/2016/12/the-languages-and-frameworks-you-should-learn-in-2017.png"
		}
	]

ex1/step/1 :

ex1/step/2 :

• Les 4 boutons d'ajout ou de retrait des services à inclure s'activent ou se désactive (disabled) en fonction du contenu des listes et/ou des éléments sélectionnés
  • bouton ▶| : ajoute le(s) élément(s) sélectionnés de la liste de gauche à la liste de droite
  • bouton ▶▶| : ajoute tous les éléments sélectionnés de la liste de gauche à la liste de droite
  • bouton |◀ : retire le(s) élément(s) sélectionnés de la liste de droite et les place dans la liste de gauche
  • bouton |◀◀ : retire tous les éléments sélectionnés de la liste de droite et les place dans la liste de gauche

• Un double clic sur l'un des éléments des 2 listes ajoute ou retire l'élément et le passe dans la liste associée
• Le nombre de produits inclus se met à jour en fonction du nombre d'éléments dans la liste de droite

• Le passage à l'étape suivante n'est possible que si la liste de droite n'est pas vide
  • le bouton “Passer à l'étape suivante” affiche la vue suivante (en passant step à 2)
  • la vue affiche la liste des éléments ajoutés dans les éléments à inclure

1. Obtenir la liste des contacts et la filtrer
2. Ajouter un contact dans la liste
3. Modifier un contact existant
4. Supprimer un contact

Tester l'appli Gestion de contacts

• 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

Variante sur la suppression permettant l'annulation d'opérations :

1. 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
2. Appliquer le filtre à l'affichage de la liste de contacts
3. Modifier la méthode delete du contrôleur
4. 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()