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