21-3 Modèle de requête et fonction creer() de IssueService

Modèle de requête

Pour la création d'une issue, on aura besoin d'un modèle de requête afin de modéliser une requête de création.

1. Créez une interface CreerIssueRequete:

ng g interface core/requetes/issue-creer-requete 

2. Configurez les propriétés propres à une issue.

src/app/core/requetes/issue-creer-requete.ts

export interface IssueCreerRequete {
  titre: string;
  auteur: string;
  contenu: string;
  projet_id: number;
}

info

Remarquez la présence de projet_id! Il faut en effet identifier à quel projet l'issue est associée.

Modèle Issue

Créez un modèle pour représenter une Issue.

1. Créer le modèle

   ng g interface core/models/issue

2. Mettez-y les champs propres à une issue Vous êtes capables de créer un modèle pour l'issue! :)

   Je vous donne le point de départ pour au moins inclure projet_id, le reste vous appartient!

   src/app/core/models/issue.ts

   export interface Issue {
     // Complétez avec les autres propriétés!
     projet_id: number;
   }

   

Fonction creer() de IssueService

La fonction de création est une requête assez standard: on accepte en entrée CreerIssueRequete et on retourne la réponse, soit aussi une Issue.

1. Créer un service pour les issues

   ng g service core/services/issue-service

2. Ajouter la fonction de création
   src/app/core/services/issue-service.ts

   async creer(issue: IssueCreerRequete): Promise<Issue> {
     const url = "/issues";
     const config: AxiosRequestConfig = {
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     const reponse = await api.post<Issue>(url, issue, config)
   
     return reponse.data;
   }

Injecter le service dans le composant de modal

Il est important de ne pas oublier l'injection du service dans le composant de modale afin d'exécuter l'appel d'API requis.

src/app/features/issues/components/issue-creer-modal.ts

constructor(public activeModal: NgbActiveModal,
            private issueService: IssueService) {
}