Aller au contenu principal

14-3 Supprimer le projet

Le lien entre les composants fonctionne, mais on ne supprimer pas réellement le projet.

Pour cela, nous créerons une fonction de service et on appellera cette fonction dans la gestion de l'événement.

Créer la fonction de servier supprimer()​

src/app/core/services/projet-service.ts
export class ProjetService {

  async obtenirTous(): Promise<Projet[]> {
    const url = "/projets";

    let reponse = await api.get<Projet[]>(url);
    return reponse.data;
  }

  async supprimer(id: number): Promise<void> {

  }
}

Faire l'appel d'API pour supprimer​

  1. Premièrement, l'URL de base est /projets

    src/app/core/services/projet-service.ts
    async supprimer(id: number): Promise<void> {
      const url = "/projets";
    }

  2. Cependant, dans le cas de la suppression, on doit passer un query string tel que id: eq.{id} pour spécifier quel id supprimer. Pour cela, on peut se faire un objet de configuration, de type `AxiosRequestConfig.

    src/app/core/services/projet-service.ts
    async supprimer(id: number): Promise<void> {
      const url = "/projets";
      const config: AxiosRequestConfig = {

      }
    }

  3. Cet objet peut accepter une propriété params qui sert de query strings à passer à la requête.

    src/app/core/services/projet-service.ts
    async supprimer(id: number): Promise<void> {
      const url = "/projets";
      const config: AxiosRequestConfig = {
        params: {
          
        }
      }
    }

  4. Ensuite, on précise notre paramètre pour filtrer l'identifiant

    src/app/core/services/projet-service.ts
      async supprimer(id: number): Promise<void> {
      const url = "/projets";
      const config: AxiosRequestConfig = {
        params: {
          id: `eq.${id}`
        }
      }
    }
    info

    Ici eq.${id} utilise l'interpolation de string pour créer une string qui remplacera id par sa valeur afin de donner quelque chose comme eq.1.

  5. Pour compléter, on envoie aussi dans l'en-tête Accept la valeur application/vnd.pgrst.object+json afin que si l'id n'existe pas, que la requête retourne une erreur.

    src/app/core/services/projet-service.ts
    async supprimer(id: number): Promise<void> {
      const url = "/projets";
      const config: AxiosRequestConfig = {
        params: {
          id: `eq.${id}`
        },
        headers: {
          'Accept': 'application/vnd.pgrst.object+json'
        }
      }
    }

  6. Finalement, on peut faire l'appel d'API delete en utilisant l'URL et l'objet de configuration.

    src/app/core/services/projet-service.ts
    async supprimer(id: number): Promise<void> {
      const url = "/projets";
      const config: AxiosRequestConfig = {
        params: {
          id: `eq.${id}`
        },
        headers: {
          'Accept': 'application/vnd.pgrst.object+json'
        }
      }

      await api.delete(url, config);
    }

Utiliser le service dans ProjetsIndex​

Maintenant, plutôt qu'un simple console.log(), on peut faire l'appel au service pour procéder à la suppression!

src/app/features/projets/pages/projets-index.ts
//...

protected async gestionProjetDeleted(projetId: number) {
  await this.projetService.supprimer(projetId);
}

Vous pouvez maintenant tester, et avec votre onglet réseau d'ouvert, filtré aux requêtes fetch / XHR, vous devriez voir la requête de suppression passer!

img