<aside> 💡

Exercice 1

Implémenter la modal de création

</aside>

Nous allons créer un composant Modal qui nous permettra d’afficher un formulaire afin de créer un parcours sur la vue liste.

Création de la modal

On crée premièrement la Modal qui sera utilisée pour différents usages. On définit pour celles-ci des Props ( propriétés ) qui permettent d’indiquer à la modal quand elle doit s’afficher et quel doit être son contenu via la props children

Nous avons notre premier composant, nous l’utiliserons pour la première fois afin de pouvoir ajouter un parcours. Cependant, il nous manque les inputs!

Création des composants d’input

Nous aurons besoin pour le moment de 2 composants d’inputs: l’input classique (text, nombre…) et l’input select.

Pour terminer, on crée un fichier index qui exporte nos composants afin de faciliter les imports de ces derniers.

// Fichier: components/index.ts
export * from './Input'
export * from './Modal'
export * from './InputSelect'

Intégration des composants

Nous allons modifier notre vue parcours en lui ajoutant un bouton lui permettant d’afficher une modal qui contiendra nos inputs, afin de créer notre parcours.

Dans un premier temps créez les types nécessaire pour la création d’un parcours:

parcours/types.ts

export interface Parcours {
  id: number;
  nomParcours: string;
  anneeFormation: number;
  created_at: string;
}

export interface CreateParcoursPayload {
  nomParcours: string;
  anneeFormation?: number;
}

Par la suite, ce sera à vous de récupérer ces types en les construisant par vous-même en inspectant votre modèle back.