Merge pull request 'changements d'ui dans la partie collaborateur' (#13) from changements_ui_collabs into develop
Reviewed-on: Clement.Ferrere/Collaborateur_Epa_Front#13pull/14/head
commit
0947e263f4
@ -1 +1,58 @@ |
|||||||
|
:host { |
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
||||||
|
font-size: 14px; |
||||||
|
color: #333; |
||||||
|
box-sizing: border-box; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
-moz-osx-font-smoothing: grayscale; |
||||||
|
} |
||||||
|
|
||||||
|
h1, |
||||||
|
h2, |
||||||
|
h3, |
||||||
|
h4, |
||||||
|
h5, |
||||||
|
h6 { |
||||||
|
margin: 8px 0; |
||||||
|
} |
||||||
|
|
||||||
|
p { |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.toolbar { |
||||||
|
top: 0; |
||||||
|
left: 0; |
||||||
|
right: 0; |
||||||
|
height: 60px; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
background-color: #183650; |
||||||
|
color: white; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.terminal pre { |
||||||
|
font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; |
||||||
|
color: white; |
||||||
|
padding: 0 1rem 1rem; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
nav a { |
||||||
|
padding: 5px; |
||||||
|
text-decoration: none; |
||||||
|
margin: 5px; |
||||||
|
display: inline-block; |
||||||
|
background-color: #E77620; |
||||||
|
color: white; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
nav a:hover { |
||||||
|
background-color: #42545C; |
||||||
|
} |
||||||
|
|
||||||
|
.dropdown-menu{ |
||||||
|
min-width: fit-content; |
||||||
|
} |
||||||
|
|||||||
@ -0,0 +1,168 @@ |
|||||||
|
<h3>Ajouter un collaborateur : </h3> |
||||||
|
|
||||||
|
<form [formGroup]="registerForm" (ngSubmit)="onSubmit()"> |
||||||
|
|
||||||
|
<div class="row mb-2"> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Nom</label> |
||||||
|
<input class="form-control" formControlName="name" [ngClass]="{ 'is-invalid': submitted && form.name.errors }"> |
||||||
|
<div *ngIf="submitted && form.name.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.name.errors.required">Le nom d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Prénom</label> |
||||||
|
<input class="form-control" formControlName="firstName" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.firstName.errors }"> |
||||||
|
<div *ngIf="submitted && form.firstName.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.firstName.errors.required">Le prénom d'un collaborateur 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 naissance</label> |
||||||
|
<input type="date" class="form-control" formControlName="birthDate" (change)="onBirthDateChange($event)" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }"> |
||||||
|
<div *ngIf="submitted && form.birthDate.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.birthDate.errors.required">La date de naissance d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</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" formControlName="gender" [ngClass]="{ 'is-invalid': submitted && form.gender.errors }"> |
||||||
|
<option value="" disabled selected>Genre</option> |
||||||
|
<option value="MASCULIN">Masculin</option> |
||||||
|
<option value="FEMININ">Féminin</option> |
||||||
|
<option value="AUTRE">Autre</option> |
||||||
|
</select> |
||||||
|
<div *ngIf="submitted && form.gender.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.gender.errors.required">Vous devez préciser le genre du collaborateur</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row mb-2"> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Statut</label> |
||||||
|
<select class="form-select" formControlName="status" [ngClass]="{ 'is-invalid': submitted && form.status.errors }"> |
||||||
|
<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 *ngIf="submitted && form.status.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.status.errors.required">Vous devez préciser le statut du collaborateur</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Nombre d'enfants</label> |
||||||
|
<input class="form-control" formControlName="childrenNumber" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.childrenNumber.errors }" type="number" min="0" |
||||||
|
onkeyup="if(this.value<0){this.value= this.value * -1}"> |
||||||
|
<div *ngIf="submitted && form.childrenNumber.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.childrenNumber.errors.required">Le nombre d'enfant d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Adresse</label> |
||||||
|
<input class="form-control" formControlName="address" [ngClass]="{ 'is-invalid': submitted && form.address.errors }"> |
||||||
|
<div *ngIf="submitted && form.address.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.address.errors.required">L'adresse d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Téléphone</label> |
||||||
|
<input class="form-control" formControlName="telephone" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.telephone.errors }"> |
||||||
|
<div *ngIf="submitted && form.telephone.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.telephone.errors.required">Le numéro de téléphone d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="row mb-2"> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Mail personnel</label> |
||||||
|
<input type="email" class="form-control" formControlName="personalMail" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" placeholder="prenom.nom@example.com"> |
||||||
|
<div *ngIf="submitted && form.personalMail.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.personalMail.errors.required">Le mail personnel d'un collaborateur est obligatoire</div> |
||||||
|
<div *ngIf="form.personalMail.errors.pattern">Le mail personnel d'un collaborateur doit être au format |
||||||
|
"exemple@nom.de.domaine" |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-sm-6 col-md-4 col-lg-3"> |
||||||
|
<label class="form-label">Mail Apside</label> |
||||||
|
<input type="email" class="form-control" formControlName="apsideMail" |
||||||
|
[ngClass]="{ 'is-invalid': (submitted && form.apsideMail.errors) || errorValue==1 }" |
||||||
|
placeholder="prenom.nom@apside-groupe.com" [value]="collaborateur.apsideMail"> |
||||||
|
<div *ngIf="submitted && form.apsideMail.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.apsideMail.errors.required">Le mail Apside d'un collaborateur est obligatoire</div> |
||||||
|
<div *ngIf="form.apsideMail.errors.pattern">Le mail Apside d'un collaborateur doit être au format |
||||||
|
"exemple@apside-groupe.com" ou "exemple@apside.fr" |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div *ngIf="submitted && errorValue==1" class="invalid-feedback"> |
||||||
|
<div *ngIf="errorValue==1">Le mail Apside que vous avez entré est déjà utilisé pour un autre collaborateur</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épart</label> |
||||||
|
<input type="date" class="form-control" formControlName="resignationDate" |
||||||
|
(change)="onResignationDateChange($event)" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }"> |
||||||
|
<div *ngIf="submitted && form.resignationDate.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.resignationDate.errors.required">La date de départ d'un collaborateur est obligatoire</div> |
||||||
|
</div> |
||||||
|
</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" formControlName="referrerId" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.referrerId.errors }"> |
||||||
|
<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 *ngIf="submitted && form.referrerId.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.referrerId.errors.required">Vous devez préciser le référent du collaborateur</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div class="form-group col-12 col-md-6"> |
||||||
|
<label class="form-label">Business Unit</label> |
||||||
|
<select class="form-select" formControlName="businessUnitId" |
||||||
|
[ngClass]="{ 'is-invalid': submitted && form.businessUnitId.errors }"> |
||||||
|
<option value="" disabled selected>Choisissez une Business Unit pour le collaborateur</option> |
||||||
|
<option *ngFor="let businessUnit of businessUnits" [ngValue]="businessUnit.id">{{businessUnit.name}} </option> |
||||||
|
</select> |
||||||
|
<div *ngIf="submitted && form.businessUnitId.errors" class="invalid-feedback"> |
||||||
|
<div *ngIf="form.businessUnitId.errors.required">Vous devez préciser la Business Unit du collaborateur</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
<div> |
||||||
|
<button type="submit">Ajouter le collaborateur</button> |
||||||
|
<button type="reset" (click)="onReset()">Effacer</button> |
||||||
|
</div> |
||||||
|
</form> |
||||||
@ -0,0 +1,105 @@ |
|||||||
|
import {Component, OnInit} from '@angular/core'; |
||||||
|
import {FormBuilder, FormGroup, Validators} from "@angular/forms"; |
||||||
|
import {Collaborateur} from "../../../interfaces/collaborateur"; |
||||||
|
import {Businessunit} from "../../../interfaces/businessunit"; |
||||||
|
import {HttpClient} from "@angular/common/http"; |
||||||
|
import {BusinessunitService} from "../../../services/businessunit.service"; |
||||||
|
import {CollaborateurService} from "../../../services/collaborateur.service"; |
||||||
|
|
||||||
|
@Component({ |
||||||
|
selector: 'app-collaborateur-add', |
||||||
|
templateUrl: './collaborateur-add.component.html', |
||||||
|
styleUrls: ['./collaborateur-add.component.scss'] |
||||||
|
}) |
||||||
|
export class CollaborateurAddComponent implements OnInit { |
||||||
|
|
||||||
|
collaborateurs: Collaborateur[] = []; |
||||||
|
collaborateur = {} as Collaborateur; |
||||||
|
businessUnits: Businessunit[] = []; |
||||||
|
businessUnit = {} as Businessunit; |
||||||
|
|
||||||
|
errorValue: number = 0; |
||||||
|
rDate: String = ""; |
||||||
|
bDate: String = ""; |
||||||
|
|
||||||
|
registerForm!: FormGroup; |
||||||
|
submitted = false; |
||||||
|
|
||||||
|
constructor(private http: HttpClient, |
||||||
|
private businessunitService: BusinessunitService, |
||||||
|
private collaborateurService: CollaborateurService, |
||||||
|
private formBuilder: FormBuilder) { |
||||||
|
} |
||||||
|
|
||||||
|
ngOnInit(): void { |
||||||
|
this.getCollaborateurs(); |
||||||
|
this.getBusinessunits(); |
||||||
|
this.registerForm = this.formBuilder.group({ |
||||||
|
name: ['', Validators.required], |
||||||
|
firstName: ['', Validators.required], |
||||||
|
birthDate: ['', Validators.required], |
||||||
|
gender: ['', Validators.required], |
||||||
|
status: ['', Validators.required], |
||||||
|
childrenNumber: ['', Validators.required], |
||||||
|
address: ['', Validators.required], |
||||||
|
telephone: ['', Validators.required], |
||||||
|
personalMail: ['', Validators.compose([Validators.required, Validators.pattern(".*@[a-z]*\.[a-z]*")])], |
||||||
|
apsideMail: ['', Validators.compose([Validators.required, Validators.pattern(".*@apside-groupe\.com|.*@apside\.fr")])], |
||||||
|
resignationDate: ['', Validators.required], |
||||||
|
referrerId: ['', Validators.required], |
||||||
|
businessUnitId: ['', Validators.required], |
||||||
|
}); |
||||||
|
if (this.collaborateur.resignationDate) { |
||||||
|
this.rDate = new Date(this.collaborateur.resignationDate).toISOString().split('T')[0]; |
||||||
|
} |
||||||
|
if (this.collaborateur.birthDate) { |
||||||
|
this.bDate = new Date(this.collaborateur.birthDate).toISOString().split('T')[0]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
getCollaborateurs(): void { |
||||||
|
this.collaborateurService.getCollaborateurs() |
||||||
|
.subscribe(collaborateurs => this.collaborateurs = collaborateurs); |
||||||
|
} |
||||||
|
|
||||||
|
getBusinessunits(): void { |
||||||
|
this.businessunitService.getBusinessunits() |
||||||
|
.subscribe(businessunits => this.businessUnits = businessunits); |
||||||
|
} |
||||||
|
|
||||||
|
onSubmit() { |
||||||
|
this.submitted = true; |
||||||
|
if (this.registerForm.invalid) { |
||||||
|
return; |
||||||
|
} |
||||||
|
this.collaborateur = this.registerForm.value |
||||||
|
if (this.collaborateur) { |
||||||
|
this.collaborateurService.addCollaborateur(this.collaborateur).subscribe({ |
||||||
|
next: () => { |
||||||
|
}, |
||||||
|
error: () => { |
||||||
|
this.errorValue = 1; |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
get form() { |
||||||
|
return this.registerForm.controls; |
||||||
|
} |
||||||
|
|
||||||
|
onReset() { |
||||||
|
this.submitted = false; |
||||||
|
this.registerForm.reset(); |
||||||
|
} |
||||||
|
|
||||||
|
onResignationDateChange($event: any): void { |
||||||
|
this.collaborateur.resignationDate = new Date($event.target.value); |
||||||
|
} |
||||||
|
|
||||||
|
onBirthDateChange($event: any): void { |
||||||
|
this.collaborateur.birthDate = new Date($event.target.value); |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
Loading…
Reference in new issue