06. Suppression et route vers l'édition

Dans cette leçon, nous allons ajouter de nouvelles méthodes au service de gestion des séries que nous utiliserons ensuite pour enrichir notre application.

Ajout des méthodes de suppression et de récupération d’un élément

Etant donné que nous n’avons pas un vrai service, nous allons le simuler en créant un système de cache. Pour cela, modifions la méthode getShows() pour stocker dans une variable temporaire _shows le résultat. Ainsi, nous pourrons simuler l’ajout, la suppression et la modification en travaillant sur ce tableau.

import { Observable, Observer } from 'rxjs/Rx';

export class ShowRepository {

    private _shows: Show[];

    public getShows() : Observable<Show[]> {

        var obs = new Observable<Show[]>((observer: Observer<Show[]>) => {

            if(this._shows) {
                observer.next(this._shows);
            } else {
                this._http.get('api/shows.js')
                    .map((res:Response) => <Show[]>res.json().entities)
                    .catch(this.error)
                    .subscribe(shows => {
                        this._shows = shows;
                        observer.next(this._shows);
                    });
            }

        });

        return obs;
    }
}

Ensuite, dans chacune des autres méthodes nous commencerons par appeler getShows() pour s’assurer que le tableau est bien initialisé. Nous pouvons donc maintenant facilement implémenter les méthodes delete() et getShow() en modifiant le tableau mis en cache. Ces méthodes retournerons une Promise afin de continuer à travailler en asynchrone.

export class ShowRepository {

    public deleteShow(id:number) : Promise<Show> {

        let promise = new Promise((resolve, reject) => {

            this.getShows().subscribe((shows:Show[]) => {
                let idx = shows.findIndex(s => s.id == id);
                let show;
                if(idx >= 0) {
                    show = shows[idx];
                    shows.splice(idx, 1);
                    resolve(show);
                } else {
                    reject();
                }
            }, err => reject(err));

        });

        return promise;

    }

    public getShow(id:number) : Promise<Show> {
        return new Promise((resolve, reject) => {
            this.getShows().subscribe(
                shows => resolve(shows.find(s => s.id == id)), 
                err => reject(err))
        });
    }
}

Ajout de ces fonctionnalités dans la page liste

Nous allons modifier la vue afin d’ajouter un bouton de suppression et un lien vers la page d’édition. nous allons également mettre en haut, un bouton, pour ajouter un nouvel élément.

Nous allons créer la route juste après. Mais elle sera de la forme /show/id et quand id aura une valeur de 0 c’est que nous voulons faire un ajout. Pour créer ce genre de lien, c’est toujours l’attribut routerLink qui cette fois aura un tableau avec comme premier argument le chemin de la route et ensuite les paramètres.

<div class="row">
    <div class="column">
        <h1>
            Shows <small>List</small>
            <a [routerLink]="['/show', 0]" class="button success small pull-right">Add</a>
        </h1>
    </div>
</div>

<div class="row">
    <div class="column">

        <table>
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Title</th>
                    <th style="width:80px"></th>
                </tr>
            </thead>
            <tbody *ngIf="shows">
                <tr *ngFor="let s of shows">
                    <td>{{s.id}}</td>
                    <td>{{s.title}}</td>
                    <td>
                        <a [routerLink]="['/show', s.id]"><i class="fa fa-pencil-square-o fa-lg"></i></a>
                        <a (click)="deleteShow(s.id)"><i class="fa fa-trash fa-lg"></i></a>
                    </td>
                </tr>
            </tbody>
        </table>

    </div>
</div>

Pour la suppression, on appelle au click la méthode deleteShow() que nous allons créer dans la partie code du composant. Il suffit alors d’appeler la méthode correspondante dans notre service de gestion.

export class ShowListComponent implements OnInit {

    deleteShow(id:number) {
        this._showRepo.deleteShow(id).then(
            ok => console.log('ok'),
            ko => console.log('ko')
        );
    }

}

Ajout d'une route pour l'édition

Pour l’édition, nous ajoutons un nouveau composant comme ShowListComponent mais qui s’appellera ShowEditComponent, ce qui donne :

// src/show/components/show-edit.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
    selector: 'show-edit',
    templateUrl: './app/show/components/show-edit.component.html'
})
export class ShowEditComponent implements OnInit {

    ngOnInit(){

    }

}

Et pour la vue:

<!-- src/show/components/show-edit.component.html -->
<div class="row">
    <div class="column">
        <h1>Shows <small>Edit </small></h1>
    </div>
</div>

Maintenant, créons la route associée dans le module show en ajoutant un élément au tableau des routes.

// src/show/show.module.ts

import { ShowEditComponent } from './components/show-edit.component';
import { FormsModule } from '@angular/forms';

const showRoutes: Routes = [
    {
        path: 'shows',
        component: ShowListComponent
    },
    {
        path: 'show/:id',
        component: ShowEditComponent
    }
];

@NgModule({
    imports:[CommonModule, FormsModule, RouterModule.forChild(showRoutes)],
    declarations:[ShowListComponent, ShowEditComponent],
    providers: [ShowRepository]
})
export class ShowModule{}

Pour indiquer que la route peut contenir un paramètre, il convient de mettre le nom du paramètre et le précéder d’un :.

Il ne faut pas oublier de déclarer le composant ShowEditComponent dans le tableau des déclarations.

J'ai également ajouté le module FormsModule qui sera nécessaire pour la création du formulaire dans la page d'édition.