Aller au contenu principal

15-3 Récupérer et afficher le détail du projet via API

Une fois l'identifiant récupéré, on voudra obtenir le détail du projet demandé en utilisant l'API de Supabase. Cela nous permettra d'afficher le tout dans la page de détail.

Nouvelle fonction de service obtenir​

Un service ProjetService a été créé précédemment, alors utilisons-le pour ajouter une nouvelle fonction permettant de récupérer un seul projet et ses informations.

Créez une fonction dans le service, obtenir, acceptant en paramètre un number id.

src/app/core/services/projet-service.ts
async obtenir(id: number): Promise<Projet> {

}
info

Comme la récupération de données via l'API et axios est asynchrone, la fonction doit aussi être asynchrone (async) et retourner une Promise. On typera cette Promise au type Projet puisqu'au final c'est un modèle Projet qu'on désire retourner.

Bâtir et exécuter la requête d'API​

On fera un appel d'API à /projets/ID_DE_PROJET.

La base est la même que pour la fonction supprimer, donc on peut réutiliser l'URL et l'objet de configuration de cette fonction.

  1. Configurer l'URL et la config axios.
    src/app/core/services/projet-service.ts
    async obtenir(id: number): Promise<Projet> {
        const url = "/projets";
        const config: AxiosRequestConfig = {
            params: {
                id: `eq.${id}`
            },
            headers: {
                'Accept': 'application/vnd.pgrst.object+json'
            }
        }
    }
  2. Effectuer l'appel d'API tout en s'assurant de typer le retour.
    src/app/core/services/projet-service.ts
    async obtenir(id: number): Promise<Projet> {
        const url = "/projets";
        const config: AxiosRequestConfig = {
            params: {
                id: `eq.${id}`
            },
            headers: {
                'Accept': 'application/vnd.pgrst.object+json'
            }
        }
        
        const reponse = await api.get<Projet>(url, config);
    }
  3. Retourner le contenu de data sur la réponse.
    src/app/core/services/projet-service.ts
    async obtenir(id: number): Promise<Projet> {
        const url = "/projets";
        const config: AxiosRequestConfig = {
            params: {
                id: `eq.${id}`
            },
            headers: {
                'Accept': 'application/vnd.pgrst.object+json'
            }
        }
        
        const reponse = await api.get<Projet>(url, config);
        return reponse.data;
    }

Appeler la méthode de service à partir de ProjetDetailPage​

La dernière étape est d'appeler le service via la page de détail d'un projet (ProjetDetail).

  1. Injecter ProjetService dans le composant ProjetDetail afin d'avoir accès aux fonctions de ce dernier.

    src/app/features/projets/pages/projet-detail.ts
    export class ProjetDetail implements OnInit {
      protected id: number | null = null;

      constructor(private route: ActivatedRoute,
                  private projetService: ProjetService) {
      }

      ngOnInit(): void {
        const routeParam = this.route.snapshot.paramMap.get('id');
        if(routeParam){
          this.id = +routeParam;
        }
      }
    }
    info

    Lorsque le constructeur possède plusieurs arguments, vous pouvez mettre chaque argument sur une ligne distincte. Cela permettra d'éviter que le tout soit illisible et on s'assure qu'il reste facile de voir le détail du constructeur.

  2. Ajouter une propriété projet, de type Projet pour contenir le projet récupéré

    src/app/features/projets/pages/projet-detail.ts
     export class ProjetDetail implements OnInit {
         protected id: number | null = null;
         protected projet: Projet | null = null;

         //...

  3. Modifier ngOnInit() pour une fonction async puisque nous ferons un appel asynchrone au service et à l'API. Faites aussi en sorte qu'elle retourne une Promise<void>.

    src/app/features/projets/pages/projet-detail.ts
    async ngOnInit(): Promise<void> {
        //...

  4. Récupérer le projet via la fonction obtenir du service, seulement si un paramètre de route id est présent.

    src/app/pages/projets/projet-detail.page.ts
    async ngOnInit(): Promise<void> {
      const routeParam = this.route.snapshot.paramMap.get('id');
      if(routeParam){
        this.id = +routeParam;
        this.projet = await(this.projetService.obtenir(this.id));
      }
    }
    info

    this.route.snapshot.paramMap.get('id') ne garantis pas que le paramètre d'URL demandé existe et il se pourrait donc que le retour soit null. C'est pourquoi on s'assure que routeParam n'est pas null.

Afficher l'information du projet​

Si tout fonctionne, nous pouvons modifier le template pour afficher à tout de moins le titre et la description du projet.

src/app/pages/projets/projet-detail.page.ts
@Component({
  selector: 'app-projet-detail',
  imports: [],
  template: `
    @if (projet) {
      <h1>{{projet.nom}}</h1>
      <p>{{projet.description}}</p>
    }
  `,
  styles: ``
})
info

@if(projet) indique qu'on affiche ce bloc seulement si projet n'est pas null ou encore undefined. Bref, que le projet a été récupéré et qu'il est présent.

Test de l'affichage​

attention

Pour tester, il vous faudra un réel identifiant de projet existant dans Supabase. Allez dans votre projet Supabase et trouvez un identifiant de projet.

Par exemple, le mien est: 1 (le vôtre sera possiblement différent).

Rendez-vous ensuite via votre navigateur vers http://localhost:4200/projets/VOTRE_ID_DE_PROJET en vous assurant de remplacer l'id par le vôtre et le tout devrait fonctionner!

http://localhost:4200/projets/recG1U7q6oROXF9aV

party