fix_champs_non_modifies #12
Merged
Clement.Ferrere
merged 11 commits from fix_champs_non_modifies into develop 3 years ago
@ -1,24 +1,26 @@ |
||||
|
||||
<div *ngIf="businessunit"> |
||||
|
||||
<h2>{{businessunit.name | uppercase}} </h2> |
||||
<div><span>id : </span>{{businessunit.id}}</div> |
||||
<h2>{{bu.name | uppercase}} </h2> |
||||
<div><span>id : </span>{{bu.id}}</div> |
||||
|
||||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" > |
||||
<form |
||||
*ngIf="businessunit | async;" |
||||
[formGroup]="registerForm" |
||||
(ngSubmit)="onSubmit()" > |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2"> |
||||
<label class="form-label">Nom</label> |
||||
<input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }" [value]="businessunit.name"> |
||||
<input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && f.name.errors }"> |
||||
<div *ngIf="submitted && f.name.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.name.errors.required">Le nom d'une business unit est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<button (click)="goBack()">Retour</button> |
||||
<button type="submit">Sauvegarder les changements</button> |
||||
<button (click)="delete()">Supprimer la business unit</button> |
||||
<button type="reset" (click)="onReset()">Effacer</button> |
||||
<button (click)="goBack()">Retour</button> |
||||
</div> |
||||
</form> |
||||
</div> |
||||
|
||||
@ -0,0 +1,69 @@ |
||||
<div xmlns=""> |
||||
|
||||
<h3>Ajouter une Période d'Essai : </h3> |
||||
|
||||
<form *ngIf="periodeEssaiObservable | async;" |
||||
[formGroup]="registerForm" |
||||
(ngSubmit)="onSubmit()" > |
||||
|
||||
<div class="form-group col-12 col-md-6"> |
||||
<label class="form-label">Collaborateur</label> |
||||
<select class="form-select" formControlName="collaborateurId" id="collaborateur-select" [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }"> |
||||
<option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option> |
||||
<option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}}</option> |
||||
</select> |
||||
<div *ngIf="submitted && f.collaborateurId.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.collaborateurId.errors.required">Vous devez choisir le collaborateur concerné par cette période d'essai </div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de début</label> |
||||
<input type="date" class="form-control" formControlName="startingDate" (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }"> |
||||
<div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de fin prévue</label> |
||||
<input type="date" class="form-control" formControlName="plannedEndingDate" (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }"> |
||||
<div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de fin réelle</label> |
||||
<input type="date" class="form-control" formControlName="realEndingDate" (change)="onRealEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.realEndingDate.errors }"> |
||||
<div *ngIf="submitted && f.realEndingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.realEndingDate.errors.required">La date de fin réelle d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2"> |
||||
<label class="form-label">Commentaire</label> |
||||
<input class="form-control" formControlName="comment" [ngClass]="{ 'is-invalid': submitted && f.comment.errors }"> |
||||
<div *ngIf="submitted && f.comment.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.comment.errors.required">Le commentaire d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2"> |
||||
<label class="form-label">Issue</label> |
||||
<input class="form-control" formControlName="issue" [ngClass]="{ 'is-invalid': submitted && f.issue.errors }"> |
||||
<div *ngIf="submitted && f.issue.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.issue.errors.required">L'issue d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div> |
||||
<button type="submit">Sauvegarder les changements</button> |
||||
<button (click)="delete()">Supprimer la période d'essai</button> |
||||
<button type="reset" (click)="onReset()">Effacer</button> |
||||
<button (click)="goBack()">Retour</button> |
||||
</div> |
||||
|
||||
</form> |
||||
|
||||
</div> |
||||
@ -0,0 +1,124 @@ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; |
||||
import {PeriodeEssai} from "../../../interfaces/periode-essai"; |
||||
import {Collaborateur} from "../../../interfaces/collaborateur"; |
||||
import {CollaborateurService} from "../../../services/collaborateur.service"; |
||||
import {PeriodeEssaiService} from "../../../services/periode-essai.service"; |
||||
import {Observable} from "rxjs"; |
||||
import {ActivatedRoute} from "@angular/router"; |
||||
import {take, tap} from "rxjs/operators"; |
||||
import {Location} from "@angular/common"; |
||||
|
||||
@Component({ |
||||
selector: 'app-periode-essai-edit', |
||||
templateUrl: './periode-essai-edit.component.html', |
||||
styleUrls: ['./periode-essai-edit.component.scss'] |
||||
}) |
||||
export class PeriodeEssaiEditComponent implements OnInit { |
||||
|
||||
periodeEssaiObservable! : Observable<PeriodeEssai>; |
||||
id: number; |
||||
|
||||
collaborateurs : Collaborateur[] = []; |
||||
collaborateur = {} as Collaborateur; |
||||
|
||||
periodeEssais : PeriodeEssai[] = []; |
||||
periodeEssai = {} as PeriodeEssai; |
||||
|
||||
registerForm!: FormGroup; |
||||
submitted = false; |
||||
|
||||
startingDate : String = ""; |
||||
plannedEndingDate : String = ""; |
||||
realEndingDate : String = ""; |
||||
|
||||
constructor( |
||||
private route: ActivatedRoute, |
||||
private location: Location, |
||||
private collaborateurService: CollaborateurService, |
||||
private periodeEssaiService: PeriodeEssaiService, |
||||
private formBuilder: FormBuilder |
||||
) { |
||||
this.id = Number(this.route.snapshot.paramMap.get('id')) |
||||
} |
||||
|
||||
async ngOnInit() { |
||||
this.getCollaborateurs(); |
||||
this.registerForm = this.formBuilder.group({ |
||||
comment: ['', Validators.required], |
||||
collaborateurId: ['',Validators.required], |
||||
issue: ['',Validators.required], |
||||
plannedEndingDate: ['',Validators.required], |
||||
realEndingDate: ['',Validators.required], |
||||
startingDate: ['',Validators.required] |
||||
}); |
||||
this.periodeEssaiObservable = this.periodeEssaiService.getPeriodeEssai(this.id).pipe(tap(periodeEssai => this.registerForm.patchValue(periodeEssai))) |
||||
this.periodeEssai = await this.periodeEssaiObservable.pipe(take(1)).toPromise() |
||||
if (this.periodeEssai.startingDate) { |
||||
this.startingDate = new Date(this.periodeEssai.startingDate).toISOString().split('T')[0]; |
||||
} |
||||
if (this.periodeEssai.plannedEndingDate) { |
||||
this.plannedEndingDate = new Date(this.periodeEssai.plannedEndingDate).toISOString().split('T')[0]; |
||||
} |
||||
if (this.periodeEssai.realEndingDate) { |
||||
this.realEndingDate = new Date(this.periodeEssai.realEndingDate).toISOString().split('T')[0]; |
||||
} |
||||
} |
||||
|
||||
getCollaborateurs():void { |
||||
this.collaborateurService.getCollaborateurs() |
||||
.subscribe(collaborateurs => this.collaborateurs = collaborateurs); |
||||
} |
||||
|
||||
goBack(): void { |
||||
this.location.back(); |
||||
} |
||||
|
||||
delete():void { |
||||
if (this.periodeEssai){ |
||||
this.periodeEssaiService.deletePeriodeEssai(this.periodeEssai) |
||||
.subscribe(()=>this.goBack()); |
||||
} |
||||
} |
||||
|
||||
onSubmit() { |
||||
this.submitted = true; |
||||
|
||||
if (this.registerForm.invalid) { |
||||
return; |
||||
} |
||||
this.periodeEssai.comment = this.registerForm.value.comment |
||||
this.periodeEssai.collaborateurId = this.registerForm.value.collaborateurId |
||||
this.periodeEssai.issue = this.registerForm.value.issue |
||||
this.periodeEssai.plannedEndingDate = this.registerForm.value.plannedEndingDate |
||||
this.periodeEssai.realEndingDate = this.registerForm.value.realEndingDate |
||||
this.periodeEssai.startingDate = this.registerForm.value.startingDate |
||||
|
||||
if (this.periodeEssai){ |
||||
this.periodeEssaiService.updatePeriodeEssai(this.periodeEssai) |
||||
.subscribe(()=>this.goBack()); |
||||
} |
||||
} |
||||
|
||||
get f() { return this.registerForm.controls; } |
||||
|
||||
onReset() { |
||||
this.submitted = false; |
||||
this.registerForm.reset(); |
||||
} |
||||
|
||||
onStartingDateChange($event: any):void { |
||||
this.periodeEssai.startingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
onPlannedEndingDateChange($event: any):void { |
||||
this.periodeEssai.plannedEndingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
onRealEndingDateChange($event: any):void { |
||||
this.periodeEssai.realEndingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
@ -0,0 +1,92 @@ |
||||
<div xmlns=""> |
||||
|
||||
<h3>Ajouter une Période d'Essai : </h3> |
||||
|
||||
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()" > |
||||
|
||||
<div class="form-group col-12 col-md-6"> |
||||
<label class="form-label">Collaborateur</label> |
||||
<select class="form-select" formControlName="collaborateurId" id="collaborateur-select" [ngClass]="{ 'is-invalid': submitted && f.collaborateurId.errors }"> |
||||
<option value="" disabled selected>Choisissez le collaborateur concerné par cette période d'essai</option> |
||||
<option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}}</option> |
||||
</select> |
||||
<div *ngIf="submitted && f.collaborateurId.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.collaborateurId.errors.required">Vous devez choisir le collaborateur concerné par cette période d'essai </div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de début</label> |
||||
<input type="date" class="form-control" formControlName="startingDate" (change)="onStartingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.startingDate.errors }"> |
||||
<div *ngIf="submitted && f.startingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.startingDate.errors.required">La date de début d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de fin prévue</label> |
||||
<input type="date" class="form-control" formControlName="plannedEndingDate" (change)="onPlannedEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.plannedEndingDate.errors }"> |
||||
<div *ngIf="submitted && f.plannedEndingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.plannedEndingDate.errors.required">La date de fin prévue d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Date de fin réelle</label> |
||||
<input type="date" class="form-control" formControlName="realEndingDate" (change)="onRealEndingDateChange($event)" [ngClass]="{ 'is-invalid': submitted && f.realEndingDate.errors }"> |
||||
<div *ngIf="submitted && f.realEndingDate.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.realEndingDate.errors.required">La date de fin réelle d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2"> |
||||
<label class="form-label">Commentaire</label> |
||||
<input class="form-control" formControlName="comment" [ngClass]="{ 'is-invalid': submitted && f.comment.errors }"> |
||||
<div *ngIf="submitted && f.comment.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.comment.errors.required">Le commentaire d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3 mb-2"> |
||||
<label class="form-label">Issue</label> |
||||
<input class="form-control" formControlName="issue" [ngClass]="{ 'is-invalid': submitted && f.issue.errors }"> |
||||
<div *ngIf="submitted && f.issue.errors" class="invalid-feedback"> |
||||
<div *ngIf="f.issue.errors.required">L'issue d'une période d'essai est obligatoire</div> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
<div> |
||||
<button type="submit">Créer la période d'essai</button> |
||||
<button type="reset" (click)="onReset()">Effacer</button> |
||||
</div> |
||||
</form> |
||||
|
||||
<h2 class = mb-4>Périodes d'essai</h2> |
||||
|
||||
<div style="overflow-x:auto;" class="mb-5 col-12"> |
||||
<table class="table"> |
||||
<thead> |
||||
<tr> |
||||
<th scope="col">ID</th> |
||||
<th scope="col">Collaborateur ID</th> |
||||
<th scope="col">Issue</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
<tr *ngFor="let periodeEssai of periodeEssais"> |
||||
<th scope="row">{{periodeEssai.id}}</th> |
||||
<td> {{periodeEssai.collaborateurId}} </td> |
||||
<td> {{periodeEssai.issue}}</td> |
||||
<td> <a routerLink="{{periodeEssai.id}}"> Modifier </a></td> |
||||
</tr> |
||||
</tbody> |
||||
</table> |
||||
</div> |
||||
|
||||
|
||||
|
||||
|
||||
</div> |
||||
@ -0,0 +1,107 @@ |
||||
import { Component, OnInit } from '@angular/core'; |
||||
import {HttpClient} from "@angular/common/http"; |
||||
import {FormBuilder, FormGroup, Validators} from '@angular/forms'; |
||||
import {PeriodeEssai} from "../../interfaces/periode-essai"; |
||||
import {Collaborateur} from "../../interfaces/collaborateur"; |
||||
import {CollaborateurService} from "../../services/collaborateur.service"; |
||||
import {PeriodeEssaiService} from "../../services/periode-essai.service"; |
||||
|
||||
@Component({ |
||||
selector: 'app-periode-essai', |
||||
templateUrl: './periode-essai.component.html', |
||||
styleUrls: ['./periode-essai.component.scss'] |
||||
}) |
||||
export class PeriodeEssaiComponent implements OnInit { |
||||
|
||||
collaborateurs : Collaborateur[] = []; |
||||
collaborateur = {} as Collaborateur; |
||||
|
||||
periodeEssais : PeriodeEssai[] = []; |
||||
periodeEssai = {} as PeriodeEssai; |
||||
|
||||
registerForm!: FormGroup; |
||||
submitted = false; |
||||
|
||||
startingDate : String = ""; |
||||
plannedEndingDate : String = ""; |
||||
realEndingDate : String = ""; |
||||
|
||||
constructor( |
||||
private http : HttpClient, |
||||
private collaborateurService: CollaborateurService, |
||||
private periodeEssaiService: PeriodeEssaiService, |
||||
private formBuilder: FormBuilder |
||||
) { } |
||||
|
||||
ngOnInit(): void { |
||||
this.getCollaborateurs(); |
||||
this.getPeriodeEssais(); |
||||
this.registerForm = this.formBuilder.group({ |
||||
comment: ['', Validators.required], |
||||
collaborateurId: ['',Validators.required], |
||||
issue: ['',Validators.required], |
||||
plannedEndingDate: ['',Validators.required], |
||||
realEndingDate: ['',Validators.required], |
||||
startingDate: ['',Validators.required] |
||||
}); |
||||
if (this.periodeEssai.startingDate) { |
||||
this.startingDate = new Date(this.periodeEssai.startingDate).toISOString().split('T')[0]; |
||||
} |
||||
if (this.periodeEssai.plannedEndingDate) { |
||||
this.plannedEndingDate = new Date(this.periodeEssai.plannedEndingDate).toISOString().split('T')[0]; |
||||
} |
||||
if (this.periodeEssai.realEndingDate) { |
||||
this.realEndingDate = new Date(this.periodeEssai.realEndingDate).toISOString().split('T')[0]; |
||||
} |
||||
} |
||||
|
||||
getCollaborateurs():void { |
||||
this.collaborateurService.getCollaborateurs() |
||||
.subscribe(collaborateurs => this.collaborateurs = collaborateurs); |
||||
} |
||||
|
||||
add(periodeEssai: PeriodeEssai): void { |
||||
this.periodeEssaiService.addPeriodeEssai(periodeEssai) |
||||
.subscribe(periodeEssai => { |
||||
this.periodeEssais.push(periodeEssai); |
||||
}); |
||||
} |
||||
|
||||
onSubmit() { |
||||
this.submitted = true; |
||||
if (this.registerForm.invalid) { |
||||
return; |
||||
} |
||||
this.periodeEssai.comment = this.registerForm.value.comment |
||||
this.periodeEssai.collaborateurId = this.registerForm.value.collaborateurId |
||||
this.periodeEssai.issue = this.registerForm.value.issue |
||||
this.periodeEssai.plannedEndingDate = this.registerForm.value.plannedEndingDate |
||||
this.periodeEssai.realEndingDate = this.registerForm.value.realEndingDate |
||||
this.periodeEssai.startingDate = this.registerForm.value.startingDate |
||||
this.add(this.periodeEssai) |
||||
} |
||||
|
||||
get f() { return this.registerForm.controls; } |
||||
|
||||
onReset() { |
||||
this.submitted = false; |
||||
this.registerForm.reset(); |
||||
} |
||||
|
||||
onStartingDateChange($event: any):void { |
||||
this.periodeEssai.startingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
onPlannedEndingDateChange($event: any):void { |
||||
this.periodeEssai.plannedEndingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
onRealEndingDateChange($event: any):void { |
||||
this.periodeEssai.realEndingDate = new Date($event.target.value); |
||||
} |
||||
|
||||
getPeriodeEssais() { |
||||
this.periodeEssaiService.getPeriodeEssais() |
||||
.subscribe(periodeEssais => this.periodeEssais = periodeEssais); |
||||
} |
||||
} |
||||
@ -0,0 +1,9 @@ |
||||
export interface PeriodeEssai { |
||||
id: number; |
||||
collaborateurId : number; |
||||
startingDate : Date; |
||||
plannedEndingDate : Date; |
||||
realEndingDate : Date; |
||||
comment : string; |
||||
issue : string; |
||||
} |
||||
@ -0,0 +1,41 @@ |
||||
import { Injectable } from '@angular/core'; |
||||
import {HttpClient, HttpHeaders} from "@angular/common/http"; |
||||
import {Observable} from "rxjs"; |
||||
import {periodeessaisUrl} from "../../ressources/routes/routesPreprod"; |
||||
import {PeriodeEssai} from "../interfaces/periode-essai"; |
||||
|
||||
|
||||
@Injectable({ |
||||
providedIn: 'root' |
||||
}) |
||||
export class PeriodeEssaiService{ |
||||
private periodeessaisUrl = periodeessaisUrl; |
||||
|
||||
httpOptions = { |
||||
headers: new HttpHeaders({ 'Content-Type': 'application/json' }) |
||||
}; |
||||
|
||||
constructor(private http: HttpClient) { } |
||||
|
||||
getPeriodeEssais():Observable<PeriodeEssai[]> { |
||||
return this.http.get<PeriodeEssai[]>(this.periodeessaisUrl); |
||||
} |
||||
|
||||
getPeriodeEssai(id : number):Observable<PeriodeEssai>{ |
||||
return this.http.get<PeriodeEssai>(this.periodeessaisUrl+"/"+id); |
||||
} |
||||
|
||||
updatePeriodeEssai(periodeEssai : PeriodeEssai):Observable<PeriodeEssai>{ |
||||
let body = JSON.stringify(periodeEssai); |
||||
return this.http.put<PeriodeEssai>(this.periodeessaisUrl + "/" + periodeEssai.id, body, this.httpOptions); |
||||
} |
||||
|
||||
deletePeriodeEssai(periodeEssai: PeriodeEssai) { |
||||
return this.http.delete(this.periodeessaisUrl + "/" + periodeEssai.id); |
||||
} |
||||
|
||||
addPeriodeEssai(periodeEssai: PeriodeEssai): Observable<PeriodeEssai> { |
||||
let body = JSON.stringify(periodeEssai); |
||||
return this.http.post<PeriodeEssai>(this.periodeessaisUrl, body, this.httpOptions); |
||||
} |
||||
} |
||||
@ -1,3 +1,4 @@ |
||||
export const collaborateursUrl = 'https://collaborateur-epa.apsdigit.lan/api/collaborateurs'; |
||||
export const agencesUrl = 'https://collaborateur-epa.apsdigit.lan/api/agences'; |
||||
export const businessunitsUrl = 'https://collaborateur-epa.apsdigit.lan/api/businessunits'; |
||||
export const periodeessaisUrl = 'https://collaborateur-epa.apsdigit.lan/api/periodeessais'; |
||||
|
||||
Loading…
Reference in new issue