changements d'ui dans la partie collaborateur #13
Merged
AlexandreRuiz
merged 2 commits from changements_ui_collabs into develop 2 years ago
@ -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