Passage des collaborateurs avec ngForms, afin d'avoir les champs obligatoires fonctionnels. Il reste encore des détails à corriger
parent
befc71930d
commit
6127980db9
@ -1,102 +0,0 @@ |
||||
<div *ngIf="collaborateur" class="mb-3"> |
||||
|
||||
<div class="row mb-2"> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-name" class="form-label">Nom</label> |
||||
<input class="form-control" id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="Nom"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-firstName" class="form-label">Prénom</label> |
||||
<input class="form-control" id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="Prénom"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-birthDate" class="form-label">Date de naissance</label> |
||||
<input type="date" class="form-control" id="collaborateur-birthDate" (change)="onBirthDateChange($event)" [(ngModel)]="bDate" placeholder="Date de naissance"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label class="form-label">Genre</label> |
||||
<select class="form-select" name="genre" id="collaborateur-gender" [(ngModel)]="collaborateur.gender"> |
||||
<option value="" disabled selected>Genre</option> |
||||
<option value="MASCULIN">Masculin</option> |
||||
<option value="FEMININ">Féminin</option> |
||||
<option value="AUTRE">Autre</option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row mb-2"> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-status" class="form-label">Statut</label> |
||||
<select class="form-select" name="statut" id="collaborateur-status" [(ngModel)]="collaborateur.status"> |
||||
<option value="" disabled selected>Statut</option> |
||||
<option value="CADRE">Cadre</option> |
||||
<option value="NON-CADRE">Non-cadre</option> |
||||
<option value="ALTERNANT">Alternant</option> |
||||
<option value="STAGIAIRE">Stagiaire</option> |
||||
</select> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-childrenNumber" class="form-label">Nombre d'enfants</label> |
||||
<input type="number" min="0" onkeyup="if(this.value<0){this.value= this.value * -1}" class="form-control" id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="Nombre d'enfants"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-address" class="form-label">Adresse</label> |
||||
<input class="form-control" id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="Adresse"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-telephone" class="form-label">Téléphone</label> |
||||
<input class="form-control" id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="Téléphone"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row mb-4"> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-personalMail" class="form-label">Mail personnel</label> |
||||
<input type="email" class="form-control" id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="prenom.nom@example.com"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-apsideMail" class="form-label">Mail Apside</label> |
||||
<input type="email" class="form-control" id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="prenom.nom@apside-groupe.com"> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||
<label for="collaborateur-resignationDate" class="form-label">Date de départ</label> |
||||
<input type="date" class="form-control" id="collaborateur-resignationDate" (change)="onResignationDateChange($event)" [ngModel]="rDate" placeholder="Date de départ"> |
||||
</div> |
||||
</div> |
||||
|
||||
<div class="row mb-2"> |
||||
|
||||
<div class="form-group col-12 col-md-6"> |
||||
<label class="form-label">Référent</label> |
||||
<select class="form-select" name="referrer" id="referrer-select" [(ngModel)]="collaborateur.referrerId"> |
||||
<option value="" disabled selected>Choisissez un référent pour le collaborateur</option> |
||||
<option *ngFor="let collaborateur of collaborateurs" [ngValue]="collaborateur.id">{{collaborateur.name}} {{collaborateur.firstName}}</option> |
||||
</select> |
||||
</div> |
||||
|
||||
<div class="form-group col-12 col-md-6"> |
||||
<label class="form-label">Business Unit</label> |
||||
<select class="form-select" name="businessunit" id="businessunit-select" [(ngModel)]="collaborateur.businessUnitId"> |
||||
<option value="" disabled selected>Choisissez la Business Unit pour le collaborateur</option> |
||||
<option *ngFor="let businessunit of businessunits" [ngValue]="businessunit.id">{{businessunit.name}} </option> |
||||
</select> |
||||
</div> |
||||
</div> |
||||
|
||||
|
||||
<br/> |
||||
<span> |
||||
*Tous les champs sont obligatoires |
||||
</span> |
||||
</div> |
||||
@ -1 +0,0 @@ |
||||
|
||||
@ -1,65 +0,0 @@ |
||||
import {Component, Input, OnInit} from '@angular/core'; |
||||
import {Collaborateur} from "../../../interfaces/collaborateur"; |
||||
import {HttpClient} from "@angular/common/http"; |
||||
import {CollaborateurService} from "../../../services/collaborateur.service"; |
||||
import {BusinessunitService} from "../../../services/businessunit.service"; |
||||
import {Businessunit} from "../../../interfaces/businessunit"; |
||||
@Component({ |
||||
selector: 'app-collaborateur-detail', |
||||
templateUrl: './collaborateur-detail.component.html', |
||||
styleUrls: ['./collaborateur-detail.component.scss'] |
||||
}) |
||||
export class CollaborateurDetailComponent implements OnInit { |
||||
|
||||
businessunits : Businessunit[] = []; |
||||
collaborateurs : Collaborateur[] = []; |
||||
rDate : String = ""; |
||||
bDate : String = ""; |
||||
|
||||
@Input() |
||||
collaborateur = {} as Collaborateur; |
||||
|
||||
constructor( |
||||
private http : HttpClient, |
||||
private collaborateurService: CollaborateurService, |
||||
private businessunitService: BusinessunitService |
||||
) {} |
||||
|
||||
|
||||
ngOnInit(): void { |
||||
this.getCollaborateurs(); |
||||
this.getBusinessunits(); |
||||
if (this.collaborateur.resignationDate) { |
||||
this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0]; |
||||
console.log(this.rDate) |
||||
} |
||||
if (this.collaborateur.birthDate) { |
||||
this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0]; |
||||
console.log(this.bDate) |
||||
} |
||||
} |
||||
|
||||
getCollaborateurs():void { |
||||
this.collaborateurService.getCollaborateurs() |
||||
.subscribe(collaborateurs => this.collaborateurs = collaborateurs); |
||||
} |
||||
|
||||
getBusinessunits():void { |
||||
this.businessunitService.getBusinessunits() |
||||
.subscribe(businessunits => this.businessunits = businessunits); |
||||
} |
||||
|
||||
onResignationDateChange($event: any):void { |
||||
console.log($event.target) |
||||
this.collaborateur.resignationDate = new Date($event.target.value); |
||||
console.log(this.rDate) |
||||
console.log(this.collaborateur.resignationDate) |
||||
} |
||||
|
||||
onBirthDateChange($event: any):void { |
||||
console.log($event.target) |
||||
this.collaborateur.birthDate = new Date($event.target.value); |
||||
console.log(this.bDate) |
||||
console.log(this.collaborateur.birthDate) |
||||
} |
||||
} |
||||
Loading…
Reference in new issue