06. Le module show: la liste des séries

Nous allons dans cette leçon, créer la page qui servira à lister les séries gérées par notre application.

Création du controller

Nous allons créer dans le module show un nouveau controller qui va injecter le service créé dans la leçon précédente.

// src/modules/show/controllers/ShowListController.js
'use strict';

app.controller('ShowListController', ['showService', function(showService) {
        var vm = this;

        vm.shows = [];

        showService.getShows().then(function(shows){
            vm.shows = shows;
        }, function(err){
            toastr.error('Loading error !');
        });
    }
]);

Le controller n’aura alors qu’à appeler la méthode getShows() et stocker le résultat dans la propriété shows du scope.

Attention, ne pas oublier d'inclure les fichiers js correspondant à ce nouveau controller et au service

Création de la vue

Créer un nouveau fichier HTML (src/module/show/views/show-list.html) qui servira de vue pour afficher un tableau contenant la liste des séries.

<div>

    <h1>
        Show <small>List</small> 
        <!-- lien vers la page edit sans paramètre pour ajouter un nouvel élément -->
        <a href="#/show" class="btn btn-success pull-right">Add</a> 
    </h1>

    <table class="table table-striped table-hover table-condensed">
        <thead>
            <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Seasons</th>
                <th style="width:100px"></th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="show in listCtrl.shows">
                <td>{{show.id}}</td>
                <td>{{show.title}}</td>
                <td>{{show.seasons.length || 0}}</td>
                <td style="padding:1px">
                    <!-- lien vers la page edit pour modifier un élément -->
                    <a href="#show/{{show.id}}" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-edit"></span></a>
                    <!-- lien pour supprimer un élément -->
                    <a ng-click="listCtrl.deleteShow(show.id)" class="btn btn-sm btn-default"><span class="glyphicon glyphicon-trash"></span></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

On utilise la directive ng-repeat sur la liste des séries chargées depuis notre controller.

Chaque élément du tableau est stocké dans la variable temporaire show. Il est alors possible d’utiliser le templating pour afficher les propriétés de l’élément.

Suppression d’un élément

Vous l'aurez remarqué, j’ai dans la vue précédente, utilisé la directive ng-click pour appeler la fonction deleteShow() du controller afin de pouvoir supprimer une série.

Ajoutons d’abord cette fonction dans notre service showService :

var getShows, // = ... 

    deleteShow = function (id) {
        var deferred = $q.defer();

        getShows().then(function (shows) {
            var i = shows.length;
            while (i--) {
                if (shows[i].id == id) {
                    shows.splice(i, 1);
                    break;
                }
            }
            deferred.resolve();
        }, function (response) {
            deferred.reject(response);
        });

        return deferred.promise;
    };

    return {
        getShows: getShows,
        deleteShow: deleteShow
    };

Puis, dans le controller ne reste plus qu'à l'appeler.

// src/modules/show/controllers/ShowListController.js
'use strict';

app.controller('ShowListController', ['showService', function(showService) {
        var vm = this;

        vm.shows = [];

        showService.getShows().then(function(shows){
            vm.shows = shows;
        }, function(err){
            // gestion de l'erreur
        });

        vm.deleteShow = function(id) {
            if(confirm('Are you sure ?')) {
                showService.deleteShow(id).then(function(){
                    toastr.success('Item deleted');
                }, function(err){
                    toastr.error('Error !');
                });
            }
        };
    }
]);