Implémentation de la modification (pas vraiment testée avec json-server...) et de la suppression d'une formation (testée)

master
Yanaël GRETTE 4 years ago
parent 766414f17a
commit 592d98f04d
  1. 5
      src/app/app.module.ts
  2. 2
      src/app/formations/details-formation/formation.component.html
  3. 25
      src/app/formations/details-formation/formation.component.ts
  4. 16
      src/app/formations/edit-formation/edit-formation.component.css
  5. 83
      src/app/formations/edit-formation/edit-formation.component.html
  6. 77
      src/app/formations/edit-formation/edit-formation.component.ts
  7. 8
      src/app/formations/new-formation/new-formation.component.html
  8. 12
      src/app/formations/new-formation/new-formation.component.ts
  9. 16
      src/app/shared/api-swagger/api/formations.service.ts
  10. 5
      src/app/shared/api-swagger/model/formationModel.ts

@ -5,6 +5,11 @@ import { HttpClientModule } from '@angular/common/http';
import { KeycloakAngularModule, KeycloakService } from 'keycloak-angular';
import { RouterModule } from '@angular/router';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr');
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@ -4,7 +4,7 @@
<h2> {{formation.intitule}} </h2>
<ng-container>
<h3>Informations générales</h3>
<button mat-raised-button *ngIf="formation.statut!=statutEnum.Realise">Modifier</button>
<button mat-raised-button *ngIf="formation.statut!=statutEnum.Realise" [routerLink]="['edit']">Modifier</button>
<p>Etat : {{formation.statut}}</p>
<p>{{dateTexte}} {{formation.dateDebut | date:'dd/MM/yyyy à hh:mm'}}</p>
<p>Origine : {{formation.origine}}</p>

@ -28,11 +28,12 @@ export class FormationComponent implements OnInit {
dataSource : MatTableDataSource<DisplayParticipation>;
displayedColumns: string[]= ["agence", "collaborateur", "dateinscription", "ep"];
id:any
constructor(private service:FormationsService,private route:ActivatedRoute) {}
ngOnInit() {
let id = this.route.snapshot.paramMap.get('id');
this.formationSubscription = this.service.getFormationById(id).subscribe(
this.id = this.route.snapshot.paramMap.get('id');
this.formationSubscription = this.service.getFormationById(this.id).subscribe(
formation => this.initFormation(formation)
);
}
@ -72,26 +73,6 @@ export class FormationComponent implements OnInit {
this.dataSource = new MatTableDataSource(this.participationsDisplay);
}
/*
getStatut(statut:number) {
let value ="";
switch(statut) {
case 0:
value = "Plannifiée";
break;
case 1:
value = "Replannifiée";
break;
case 2:
value = "Réalisée";
break;
case 3:
value = "Annulée";
break;
}
return value;
}
*/
ngOnDestroy() {
if(this.formationSubscription != undefined) {
this.formationSubscription.unsubscribe();

@ -0,0 +1,16 @@
div {
margin-left: 5%;
margin-bottom: 1%;
}
.input{
width: 30%;
}
.input2 {
width: 14%;
}
.moveright {
margin-left: 2%;
}

@ -1,2 +1,83 @@
<app-nav-menu></app-nav-menu>
<h1> Edit formation </h1>
<h1> Modifier une formation </h1>
<div>
<button mat-raised-button on-click="supprimerFormation()" color="red">Supprimer la formation</button>
</div>
<form *ngIf="formationForm != undefined" [formGroup]="formationForm" (ngSubmit)="updateFormation()">
<div>
<mat-form-field class="input">
<input matInput placeholder="Intitulé" formControlName="intitule">
</mat-form-field>
</div>
<div>
<mat-form-field class="input">
<input matInput placeholder="Origine" formControlName="origine">
</mat-form-field>
</div>
<div>
<mat-form-field class="input2">
<mat-label>Statut</mat-label>
<mat-select formControlName="statut" >
<mat-option *ngFor="let key of keysStatuts" value="{{statuts[key]}}">{{statuts[key]}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-form-field class="input">
<input matInput placeholder="Organisme" formControlName="organisme">
</mat-form-field>
</div>
<div>
<mat-form-field >
<input matInput [ngxMatDatetimePicker]="datedebut" placeholder="Date prévue" formControlName="dateDebut">
<mat-datepicker-toggle matSuffix [for]="datedebut"> </mat-datepicker-toggle>
<ngx-mat-datetime-picker #datedebut></ngx-mat-datetime-picker>
</mat-form-field>
<mat-form-field class="moveright">
<input matInput [matDatepicker]="datefin" placeholder="Date fin" formControlName="dateFin">
<mat-datepicker-toggle matSuffix [for]="datefin"> </mat-datepicker-toggle>
<mat-datepicker #datefin></mat-datepicker>
</mat-form-field>
</div>
<div>
<mat-form-field class="input2">
<mat-label>Nombre de jours</mat-label>
<input matInput type="number" formControlName="jour" min=1 value="1">
</mat-form-field>
<mat-form-field class="moveright input2">
<mat-label>Nombre d'heures</mat-label>
<input matInput type="number" formControlName="heure" min="1" value="1">
</mat-form-field>
</div>
<div>
<mat-form-field class="input2">
<mat-label>Type formation</mat-label>
<mat-select formControlName="type" >
<mat-option *ngFor="let key of keysTypes" value="{{types[key]}}">{{types[key]}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="moveright input2">
<mat-label>Mode formation</mat-label>
<mat-select formControlName="mode">
<mat-option *ngFor="let key of keysModes" value="{{modes[key]}}">{{modes[key]}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<mat-checkbox matInput formControlName="estCertifie">Certifiée</mat-checkbox>
</div>
<div>
<button mat-raised-button>Mettre à jour la formation</button>
</div>
</form>

@ -1,15 +1,88 @@
import { Component, OnInit } from '@angular/core';
import { Observable, Subscription } from 'rxjs';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import {MatTableDataSource} from '@angular/material/table';
import {MatPaginator} from '@angular/material/paginator';
import {MatSort} from '@angular/material/sort';
import { FormationModel } from '@shared/api-swagger/model/models';
import { FormationsService } from '@shared/api-swagger/api/api';
/**
*/
@Component({
selector: 'app-edit-formation',
templateUrl: './edit-formation.component.html'
templateUrl: './edit-formation.component.html',
styleUrls: ["edit-formation.component.css"]
})
export class EditFormationComponent implements OnInit {
formation:FormationModel;
formationSubscription: Subscription;
formationForm: FormGroup;
id :any;
statuts = FormationModel.StatutEnum;
modes = FormationModel.ModeEnum;
types = FormationModel.TypeEnum;
keysStatuts: any[];
keysModes: any[];
keysTypes: any[];
constructor() {}
constructor(private service: FormationsService, private fb: FormBuilder,
private activatedRoute:ActivatedRoute, private router: Router) {}
ngOnInit() {
this.id = this.activatedRoute.snapshot.paramMap.get('id');
this.formationSubscription = this.service.getFormationById(this.id).subscribe(
formation => this.initFormation(formation)
);
this.keysStatuts = Object.keys(this.statuts).filter(String);
this.keysModes = Object.keys(this.modes).filter(String);
this.keysTypes = Object.keys(this.types).filter(String);
}
initFormation(formation:FormationModel) {
this.formation = formation;
this.formationForm= this.fb.group(
{
intitule: [this.formation.intitule],
origine: [this.formation.origine],
statut : [this.formation.statut],
dateDebut: [new Date(this.formation.dateDebut)],
dateFin: [new Date(this.formation.dateFin)],
heure: [this.formation.heure],
jour: [this.formation.jour],
organisme: [this.formation.organisme],
mode: [this.formation.mode],
type: [this.formation.type],
estCertifie: [this.formation.estCertifie]
});
}
updateFormation() {
this.formation = this.formationForm.value;
this.formation.id = this.id;
this.formationSubscription = this.service.updateFormation(this.formation).subscribe(
response => {
this.router.navigate(['/formations',this.id]);
}
);
}
supprimerFormation() {
this.formationSubscription = this.service.deleteFormation(this.formation.id).subscribe(
response => this.router.navigate([""])
);
}
ngOnDestroy() {
if(this.formationSubscription != undefined) {
this.formationSubscription.unsubscribe();
}
}
}

@ -49,16 +49,14 @@
<mat-form-field class="input2">
<mat-label>Type formation</mat-label>
<mat-select formControlName="type" >
<mat-option value="Interne">Interne</mat-option>
<mat-option value="Externe">Externe</mat-option>
<mat-option *ngFor="let key of keysTypes" value="{{types[key]}}">{{types[key]}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="moveright input2">
<mat-label>Mode formation</mat-label>
<mat-select formControlName="mode">
<mat-option value="Présentiel">Présentiel</mat-option>
<mat-option value="Conférence">Conférence</mat-option>
<mat-option *ngFor="let key of keysModes" value="{{modes[key]}}">{{modes[key]}}</mat-option>
</mat-select>
</mat-form-field>
</div>
@ -67,6 +65,6 @@
<mat-checkbox matInput formControlName="estCertifie">Certifiée</mat-checkbox>
</div>
<div>
<button mat-raised-button>Ajouter formation</button>
<button mat-raised-button>Ajouter une formation</button>
</div>
</form>

@ -32,10 +32,16 @@ export class NewFormationComponent implements OnInit {
estCertifie: [""]
}
);
modes = FormationModel.ModeEnum;
types = FormationModel.TypeEnum;
keysModes: any[];
keysTypes: any[];
constructor(private fb: FormBuilder, private service:FormationsService, private router: Router) { }
ngOnInit() {
this.keysModes = Object.keys(this.modes).filter(String);
this.keysTypes = Object.keys(this.types).filter(String);
}
ajouterFormation() {
@ -46,4 +52,10 @@ export class NewFormationComponent implements OnInit {
}
);
}
ngOnDestroy() {
if(this.formationSubscription != undefined) {
this.formationSubscription.unsubscribe();
}
}
}

@ -63,10 +63,10 @@ export class FormationsService {
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public deleteFormation(idFormation: string, observe?: 'body', reportProgress?: boolean): Observable<any>;
public deleteFormation(idFormation: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
public deleteFormation(idFormation: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
public deleteFormation(idFormation: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
public deleteFormation(idFormation: number, observe?: 'body', reportProgress?: boolean): Observable<any>;
public deleteFormation(idFormation: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<any>>;
public deleteFormation(idFormation: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<any>>;
public deleteFormation(idFormation: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
if (idFormation === null || idFormation === undefined) {
throw new Error('Required parameter idFormation was null or undefined when calling deleteFormation.');
@ -165,10 +165,10 @@ export class FormationsService {
* @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
* @param reportProgress flag to report request and response progress.
*/
public getFormationById(idFormation: string, observe?: 'body', reportProgress?: boolean): Observable<FormationModel>;
public getFormationById(idFormation: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<FormationModel>>;
public getFormationById(idFormation: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<FormationModel>>;
public getFormationById(idFormation: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
public getFormationById(idFormation: number, observe?: 'body', reportProgress?: boolean): Observable<FormationModel>;
public getFormationById(idFormation: number, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<FormationModel>>;
public getFormationById(idFormation: number, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<FormationModel>>;
public getFormationById(idFormation: number, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
if (idFormation === null || idFormation === undefined) {
throw new Error('Required parameter idFormation was null or undefined when calling getFormationById.');

@ -34,6 +34,11 @@ export namespace FormationModel {
Realise: 'Réalisée' as StatutEnum,
Annule: 'Annulée' as StatutEnum
};
export type ModeEnum = 'Présentiel' | 'Visioconférence';
export const ModeEnum = {
Presentiel: 'Présentiel' as ModeEnum,
Visioconference: 'Visioconférence' as ModeEnum
};
export type TypeEnum = 'Externe' | 'Interne';
export const TypeEnum = {
Externe: 'Externe' as TypeEnum,

Loading…
Cancel
Save