Implémentation de la modification (pas vraiment testée avec json-server...) et de la suppression d'une formation (testée)
Yanaël GRETTE
4 years ago
parent
766414f17a
commit
592d98f04d
@ -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(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue