18-2 Implémenter la modification

Pour procéder à la modification, nous aurons besoin de:

1. Une interface contenant les propriétés attendues lors de la modification
2. Une fonction de service pour procéder à la requête d'API
3. Lier l'action du formulaire au service

Créer une interface ProjetModifierRequete

Au même titre que nous avons une interface pour la requête de création, on créera une interface pour la requête de modification. Cette dernière est la même que la création dans ce cas précis.

1. Sous le dossier src/app/core/requetes, créez une nouvelle interface

   ng g interface core/requetes/projet-modifier-requete

2. Comme le contenu est exactement le même, on peut simplement hériter de la création.

   src/app/core/requetes/projet-modifier-requete.ts

   import {ProjetCreerRequete} from './projet-creer-requete';
   
   export interface ProjetModifierRequete extends ProjetCreerRequete{
   }

   info

   extends en TypeScript permet de définir la notion d'héritage.

   Nous aurions pu définir une requête avec ses propres propriétés. En effet, il n'est pas rare de voir que les informations demandées lors de la création sont différentes de celles demandées lors de la modification.

Créer la fonction modifier() dans ProjetService

1. La fonction modifier() du service prendra en argument un id de projet et un projet qui sera en fait un projet partiel. Le tout retournera une Promise<Projet>.
   src/app/core/services/projet-service.ts

   async modifier(id: number, projet: ProjetModifierRequete): Promise<Projet> {
     
   }

2. Nous pouvons réutiliser les mêmes en-têtes que pour obtenir()
   src/app/core/services/projet-service.ts

   async modifier(id: number, projet: ProjetModifierRequete): Promise<Projet> {
     const url = "/projets";
     const config: AxiosRequestConfig = {
       params: {
         id: `eq.${id}`
       },
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     
   }

3. Finalement, on peut procéder au patch et retourner le contenu de la réponse.
   src/app/core/services/projet-service.ts

   async modifier(id: number, projet: ProjetModifierRequete): Promise<Projet> {
     const url = "/projets";
     const config: AxiosRequestConfig = {
       params: {
         id: `eq.${id}`
       },
       headers: {
         'Accept': 'application/vnd.pgrst.object+json',
         'Prefer': 'return=representation'
       }
     }
   
     const reponse = await api.patch<Projet>(url, projet, config);
     return reponse.data;
   }

Soumettre le formulaire

L'action soumettre() est liée à une action de création. Modifions pour qu'elle soit flexible.

1. Ajoutez une condition si nous sommes en mode édition, autrement exécutez l'action de création
   src/app/features/projets/pages/projet-creer.ts

     protected async soumettre() {
       if(this.projetForm.valid){
         const valeurForm = this.projetForm.value;
   
         const projetRequete: ProjetCreerRequete = {
           nom: valeurForm.nom!,
           description: valeurForm.description || undefined
         }
   
         if(this.estModeEdition && this.projetId) {
   
         } else {
           const projet = await this.projetService.creer(projetRequete);
           this.router.navigate(['/projets']);
         }
       }
     }
   }

2. Appelez le service pour la modification
   src/app/features/projets/pages/projet-creer.ts

   protected async soumettre() {
     if(this.projetForm.valid){
       const valeurForm = this.projetForm.value;
   
       const projetRequete: ProjetCreerRequete = {
         nom: valeurForm.nom!,
         description: valeurForm.description || undefined
       }
   
       if(this.estModeEdition && this.projetId) {
         const projet = await this.projetService.modifier(this.projetId, projetRequete);
         this.router.navigate(['/projets', this.projetId]);
       } else {
         const projet = await this.projetService.creer(projetRequete);
         this.router.navigate(['/projets']);
       }
     }
   }

   info

   On peut utiliser la même requête ProjetCreerRequete puisque le service accepte une instance de ModifierProjetRequete et que cette dernière hérite de ProjetCreerRequete!

Vous devriez avec une modification fonctionnelle!

Ajouter un bouton Annuler

On peut ajouter un bouton annuler qui nous ramène au projet dans le cas de modification ou nous ramène à la liste en cas de création.

<!-- -->
      <button type="submit" class="btn btn-primary">Soumettre</button>
      <button class="btn btn-secondary ms-2" [routerLink]="estModeEdition ? ['/projets', this.projetId] : ['/projets']">Annuler</button>
    </form>
  </div>
</div>

Renommer le composant pour ProjetEdition

Nous avons initialement créé le composant avec l'idée d'une création, mais il est maintenant utilisé autant pour la création que la modification. Ainsi, on lui donnera un nom qui représente ce nouveau rôle: ProjetEdition.

Pour cela, on peut utiliser la fonction Refactor -> Rename... de Webstorm.

1. Clic droit sur le nom du fichier
2. Refactor -> Rename...
3. Renommez le fichier
4. Choisir Yes pour aussi renommer la classe