Commit d85abe68 authored by François Agneray's avatar François Agneray
Browse files

Les missions => ok

parent c04ed902
Pipeline #6820 passed with stages
in 1 minute and 15 seconds
......@@ -27,9 +27,10 @@ Voici un exemple d'un objet Mission :
1. Dans le module `MissionModule` ajouter une interface `mission.model` pour définir l'objet `Mission`
2. Dans le service `MissionService` ajouter la méthode `loadMissionList` pour charger les missions
3. Dans le service `MissionService` ajouter la méthode `addNewMission` pour ajouter une nouvelle mission
3. Dans le service `MissionService` ajouter la méthode `editMission` pour editer une mission
4. Dans le service `MissionService` ajouter la méthode `deleteMission` pour supprimer une mission
3. Dans la méthode `loadMissionList` appeler l'URL `http://localhost:3000/missions` en GET pour charger les missions
3. Dans le service `MissionService` ajouter la méthode `addNewMission` pour ajouter une nouvelle mission (laisser vide pour le moment)
3. Dans le service `MissionService` ajouter la méthode `editMission` pour editer une mission (laisser vide pour le moment)
4. Dans le service `MissionService` ajouter la méthode `deleteMission` pour supprimer une mission (laisser vide pour le moment)
**Résultat attendu :**
......@@ -60,5 +61,82 @@ Dans l'affichage des missions on peut voir la référence vers l'ID de l'agent c
![mission_s3](img/mission_s3.png#center)
## TP : Formulaire mission
## TP : Ajouter une nouvelle mission
Dans cette partie nous allons voir comment créer un formuaire réactif pour créer une nouvelle mission.
1. Importer le module `ReactiveFormsModule` depuis `@angular/forms` dans le module `mission`
2. Créer un nouveau component `MissionFormComponent`
3. Dans le component `MissionFormComponent` importer le service `FormBuilder`
4. Créer le formulaire réactif `missionForm` qui doit correspondre à l'objet mission (cost, country, date_from, date_to, ref_agent)
5. Dans la vue du component `MissionFormComponent` créer le formualaire html et lier votre formulaire `missionForm`
6. Dans le component `MissionFormComponent` ajouter une variable en input `agents` de type `Agent[]`
7. Dans le component `MissionFormComponent` ajouter une variable en output `onSubmit` de type `EventEmitter<Mission>`
8. Dans le component `MissionFormComponent` ajouter une méthode `submit`
9. Dans la vue du component `MissionFormComponent` lier l'évenement `ngSubmit` avec la méthode `submit`
10. La méthode `submit` doit envoyer un nouvel objet mission dans la variable d'output `onSubmit`
11. Dans la vue du component `MissionFormComponent` le champ de formulaire Agent doit être un `select` avec la liste des agents. Pour cela utiliser la propriété `agents`.
12. Importer le module `BsDatepickerModule.forRoot()` depuis `ngx-bootstrap/datepicker` dans le module `mission`
13. Dans la vue du component `MissionFormComponent` les champs de formulaire `date_from` et `date_to` doivent ouvrir un `datepicker` de sélection. Pour cela ajouter l'attribut `bsDatepicker` et `[bsConfig]="{ dateInputFormat: 'YYYY-MM-DD', isAnimated: true }"` sur les deux inputs
14. Dans la méthode `submit` du component `MissionFormComponent` il faut appeler `toISOString().split('T')[0]` sur les valeurs de `date_from` et `date_to` pour avoir les valeurs au format 'YYYY-MM-DD'
15. Créer un nouveau component `NewMissionComponent` et importer les services `MissionService` et `AgentService`
16. Dans la vue du component `NewMissionComponent` appeler le component `MissionFormComponent`. L'évenement de sortie `onSubmit` doit appeler la méthode `addNewMission` du service `MissionService`
16. Dans le service `MissionService` la méthode `addNewMission(mission: Mission)` doit appeler l'URL `http://localhost:3000/missions/add` en POST. Au retour de la réponse, il faut envoyer un `toastr` pour prévenir que la mission a bien été créée et renvoyer vers la page `mission-list`
17. Dans le routeur `MissionRoutingModule`, ajouter une route `new-mission` vers le component `NewMissionComponent`
18. Dans le component `MissionListComponent` régler le `routerLink` du bouton ajouter une mission vers la route `/new-mission`
**Résultat attendu :**
![mission_s4](img/mission_s4.png#center)
![mission_s5](img/mission_s5.png#center)
## TP : Editer une mission
Dans cette partie nous allons voir comment ré-utiliser le formulaire mission pour éditer une mission éxistante.
Il est possible de passer une variable dans une route Angular. Pour cela il faut définir une route avec un paramètre comme ceci :
```ts
const routes: Routes = [
{ path: 'edit-book/:id_book', component: EditBookComponent },
];
```
Ici nous avons définis une varible `id_book` et si l'utilisateur appel `/edit-book/1` alors `id_book` vaudra 1.
Pour récuperer la variable dans le un component il faut importer le service `ActivatedRoute` et appeler `snapshot.paramMap.get('id_book')` pour avoir la valeur, exemple :
```ts
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router'
@Component({
selector: 'app-edit-book',
templateUrl: './edit-book.component.html',
styleUrls: ['./edit-book.component.scss']
})
export class EditBookComponent {
constructor(private route: ActivatedRoute) { }
getIdBook() {
return this.route.snapshot.paramMap.get('id_book');
}
}
```
1. Dans le componen `MissionFormComponent` ajouter une variable en input `mission` de type `Mission`
2. Ajouter un nouveau component `EditMissionComponent` et importer les services `MissionService` et `AgentService`
3. Ajouter une nouvele route `edit-mission/:id_mission` vers le component `EditMissionComponent`
4. Dans la vue `EditMissionComponent` l'évenement de sortie `onSubmit` doit appeler la méthode `editMission` du service `MissionService`
5. La méthode `editMission` du service `MissionService` doit appeler l'URL `http://localhost:3000/missions/update/:id_mission` en PUT. Au retour de la réponse, il faut envoyer un `toastr` pour prévenir que la mission a bien été éditée et renvoyer vers la page `mission-list`
6. Dans la vue du component `EditMissionComponent` appeler le component `MissionFormComponent` et envoyer la mission qui correspond à `id_mission` passé en paramètre de la route.
7. Dans le component `MissionFormComponent` implémenter l'interface `OnInit` et ajouter la méthode `ngOnInit`
8. Si la variable d'input `mission` est différent de `null` alors éditer le formulaire avec les valeurs de `mission`.
9. Dans la méthode submit si la variable d'input `mission` est null alors mettre `id_mission` = 0 sinon `id_mission` doit être égale à `mission.id_mission`
**Résultat attendu :**
![mission_s6](img/mission_s6.png#center)
![mission_s7](img/mission_s7.png#center)
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment