From 58e2f4b63f8b060d8388c09ab9b97b5bc02d06a7 Mon Sep 17 00:00:00 2001 From: Clement FERRERE Date: Mon, 27 Jun 2022 13:45:35 +0200 Subject: [PATCH 1/2] changements d'ui dans la partie collaborateur --- angular.json | 3 + src/app/app-routing.module.ts | 2 + src/app/app.component.html | 76 ++------ src/app/app.component.scss | 57 ++++++ src/app/app.module.ts | 2 + .../collaborateur-add.component.html | 168 +++++++++++++++++ .../collaborateur-add.component.scss | 0 .../collaborateur-add.component.ts | 105 +++++++++++ .../collaborateur.component.html | 174 ++---------------- .../collaborateur/collaborateur.component.ts | 80 ++------ 10 files changed, 374 insertions(+), 293 deletions(-) create mode 100644 src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html create mode 100644 src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.scss create mode 100644 src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts diff --git a/angular.json b/angular.json index b502b3c..3187646 100644 --- a/angular.json +++ b/angular.json @@ -1,5 +1,8 @@ { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "cli": { + "analytics": false + }, "version": 1, "newProjectRoot": "projects", "projects": { diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 4305101..0cd2e35 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -9,11 +9,13 @@ import {BusinessunitComponent} from "./components/businessunit/businessunit.comp import {BusinessunitEditComponent} from "./components/businessunit/businessunit-edit/businessunit-edit.component"; import {PeriodeEssaiComponent} from "./components/periode-essai/periode-essai.component"; import {PeriodeEssaiEditComponent} from "./components/periode-essai/periode-essai-edit/periode-essai-edit.component"; +import {CollaborateurAddComponent} from "./components/collaborateur/collaborateur-add/collaborateur-add.component"; const routes : Routes = [ {path:'', redirectTo:'/home', pathMatch:'full'}, { path: 'home', component:HomeComponent, data:{title:'Services Collaborateurs'}}, { path:'collaborateurs',component:CollaborateurComponent, data:{title:'Collaborateurs'} }, + { path:'collaborateurs/add',component:CollaborateurAddComponent, data:{title:'Collaborateurs'} }, { path: 'collaborateurs/:id', component: CollaborateurEditComponent, data:{title:'Collaborateurs'} }, { path:'agences',component:AgenceComponent, data:{title:'Agences'} }, { path: 'agences/:id', component: AgenceEditComponent, data:{title:'Agences'} }, diff --git a/src/app/app.component.html b/src/app/app.component.html index e7896a5..0155050 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,76 +1,22 @@ - - diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 8b13789..de0f241 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -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; +} diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 61af15d..4699030 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,6 +15,7 @@ import { BusinessunitComponent } from './components/businessunit/businessunit.co import { BusinessunitEditComponent } from './components/businessunit/businessunit-edit/businessunit-edit.component'; import { PeriodeEssaiComponent } from './components/periode-essai/periode-essai.component'; import { PeriodeEssaiEditComponent } from './components/periode-essai/periode-essai-edit/periode-essai-edit.component'; +import { CollaborateurAddComponent } from './components/collaborateur/collaborateur-add/collaborateur-add.component'; @NgModule({ declarations: [ @@ -28,6 +29,7 @@ import { PeriodeEssaiEditComponent } from './components/periode-essai/periode-es BusinessunitEditComponent, PeriodeEssaiComponent, PeriodeEssaiEditComponent, + CollaborateurAddComponent, ], imports: [ diff --git a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html new file mode 100644 index 0000000..4b1a2d1 --- /dev/null +++ b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html @@ -0,0 +1,168 @@ +

Ajouter un collaborateur :

+ +
+ +
+ +
+ + +
+
Le nom d'un collaborateur est obligatoire
+
+
+ +
+ + +
+
Le prénom d'un collaborateur est obligatoire
+
+
+ +
+ + +
+
La date de naissance d'un collaborateur est obligatoire
+
+
+ +
+ + +
+
Vous devez préciser le genre du collaborateur
+
+
+ +
+ +
+ +
+ + +
+
Vous devez préciser le statut du collaborateur
+
+
+ +
+ + +
+
Le nombre d'enfant d'un collaborateur est obligatoire
+
+
+ +
+ + +
+
L'adresse d'un collaborateur est obligatoire
+
+
+ +
+ + +
+
Le numéro de téléphone d'un collaborateur est obligatoire
+
+
+
+ +
+ +
+ + +
+
Le mail personnel d'un collaborateur est obligatoire
+
Le mail personnel d'un collaborateur doit être au format + "exemple@nom.de.domaine" +
+
+
+ +
+ + +
+
Le mail Apside d'un collaborateur est obligatoire
+
Le mail Apside d'un collaborateur doit être au format + "exemple@apside-groupe.com" ou "exemple@apside.fr" +
+
+
+
Le mail Apside que vous avez entré est déjà utilisé pour un autre collaborateur
+
+
+ + +
+ + +
+
La date de départ d'un collaborateur est obligatoire
+
+
+ +
+ +
+ +
+ + +
+
Vous devez préciser le référent du collaborateur
+
+
+ +
+ + +
+
Vous devez préciser la Business Unit du collaborateur
+
+
+ +
+ +
+ + +
+
diff --git a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.scss b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts new file mode 100644 index 0000000..4898228 --- /dev/null +++ b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts @@ -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 f() { + 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); + } + +} diff --git a/src/app/components/collaborateur/collaborateur.component.html b/src/app/components/collaborateur/collaborateur.component.html index 5421d01..3924555 100644 --- a/src/app/components/collaborateur/collaborateur.component.html +++ b/src/app/components/collaborateur/collaborateur.component.html @@ -1,170 +1,22 @@ -
+
-

Ajouter un collaborateur :

- -
- -
- -
- - -
-
Le nom d'un collaborateur est obligatoire
-
-
- -
- - -
-
Le prénom d'un collaborateur est obligatoire
-
-
- -
- - -
-
La date de naissance d'un collaborateur est obligatoire
-
-
- -
- - -
-
Vous devez préciser le genre du collaborateur
-
-
- -
- -
- -
- - -
-
Vous devez préciser le statut du collaborateur
-
-
- -
- - -
-
Le nombre d'enfant d'un collaborateur est obligatoire
-
-
- -
- - -
-
L'adresse d'un collaborateur est obligatoire
-
-
- -
- - -
-
Le numéro de téléphone d'un collaborateur est obligatoire
-
-
-
- -
- -
- - -
-
Le mail personnel d'un collaborateur est obligatoire
-
Le mail personnel d'un collaborateur doit être au format "exemple@nom.de.domaine"
-
-
- -
- - -
-
Le mail Apside d'un collaborateur est obligatoire
-
Le mail Apside d'un collaborateur doit être au format "exemple@apside-groupe.com" ou "exemple@apside.fr"
-
-
-
Le mail Apside que vous avez entré est déjà utilisé pour un autre collaborateur
-
-
- - - -
- - -
-
La date de départ d'un collaborateur est obligatoire
-
-
- -
- -
- -
- - -
-
Vous devez préciser le référent du collaborateur
-
-
- -
- - -
-
Vous devez préciser la Business Unit du collaborateur
-
-
- -
- -
- - -
-
+

Collaborateurs

+
+

Pour ajouter un nouveau collaborateur, cliquez ici :

+ +
-

Collaborateurs

- - - - - - + + + + + + @@ -173,7 +25,7 @@ - +
IDNomPrénomMail Apside
IDNomPrénomMail Apside
{{collaborateur.name}} {{collaborateur.firstName}} {{collaborateur.apsideMail}} Modifier Modifier
diff --git a/src/app/components/collaborateur/collaborateur.component.ts b/src/app/components/collaborateur/collaborateur.component.ts index 259bc51..1d62198 100644 --- a/src/app/components/collaborateur/collaborateur.component.ts +++ b/src/app/components/collaborateur/collaborateur.component.ts @@ -1,8 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, OnInit} from '@angular/core'; import {HttpClient} from "@angular/common/http"; import {CollaborateurService} from "../../services/collaborateur.service"; import {Collaborateur} from "../../interfaces/collaborateur"; -import {FormBuilder, FormGroup, Validators} from "@angular/forms"; import {Businessunit} from "../../interfaces/businessunit"; import {BusinessunitService} from "../../services/businessunit.service"; @@ -12,93 +11,40 @@ import {BusinessunitService} from "../../services/businessunit.service"; styleUrls: ['./collaborateur.component.scss'] }) export class CollaborateurComponent implements OnInit { - collaborateurs : Collaborateur[] = []; + collaborateurs: Collaborateur[] = []; collaborateur = {} as Collaborateur; - businessUnits : Businessunit[] = []; - businessUnit = {} as Businessunit ; + businessUnits: Businessunit[] = []; + businessUnit = {} as Businessunit; - errorValue : number = 0; - rDate : String = ""; - bDate : String = ""; + errorValue: number = 0; + rDate: String = ""; + bDate: String = ""; - registerForm!: FormGroup; submitted = false; constructor( - private http : HttpClient, + 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 { + getCollaborateurs(): void { this.collaborateurService.getCollaborateurs() .subscribe(collaborateurs => this.collaborateurs = collaborateurs); } - getBusinessunits():void { + 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 f() { 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); - } } -- 2.36.3 From 5ee9651fcff1688abfed41ac1400f38dea320c06 Mon Sep 17 00:00:00 2001 From: Clement FERRERE Date: Mon, 27 Jun 2022 13:53:49 +0200 Subject: [PATCH 2/2] =?UTF-8?q?raccourci=20f=20transform=C3=A9=20en=20form?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../collaborateur-add.component.html | 82 +++++++++---------- .../collaborateur-add.component.ts | 2 +- 2 files changed, 42 insertions(+), 42 deletions(-) diff --git a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html index 4b1a2d1..520ed30 100644 --- a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html +++ b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.html @@ -6,40 +6,40 @@
- -
-
Le nom d'un collaborateur est obligatoire
+ +
+
Le nom d'un collaborateur est obligatoire
-
-
Le prénom d'un collaborateur est obligatoire
+ [ngClass]="{ 'is-invalid': submitted && form.firstName.errors }"> +
+
Le prénom d'un collaborateur est obligatoire
-
-
La date de naissance d'un collaborateur est obligatoire
+ [ngClass]="{ 'is-invalid': submitted && form.birthDate.errors }"> +
+
La date de naissance d'un collaborateur est obligatoire
- -
-
Vous devez préciser le genre du collaborateur
+
+
Vous devez préciser le genre du collaborateur
@@ -49,42 +49,42 @@
- -
-
Vous devez préciser le statut du collaborateur
+
+
Vous devez préciser le statut du collaborateur
-
-
Le nombre d'enfant d'un collaborateur est obligatoire
+
+
Le nombre d'enfant d'un collaborateur est obligatoire
- -
-
L'adresse d'un collaborateur est obligatoire
+ +
+
L'adresse d'un collaborateur est obligatoire
-
-
Le numéro de téléphone d'un collaborateur est obligatoire
+ [ngClass]="{ 'is-invalid': submitted && form.telephone.errors }"> +
+
Le numéro de téléphone d'un collaborateur est obligatoire
@@ -94,10 +94,10 @@
-
-
Le mail personnel d'un collaborateur est obligatoire
-
Le mail personnel d'un collaborateur doit être au format + [ngClass]="{ 'is-invalid': submitted && form.personalMail.errors }" placeholder="prenom.nom@example.com"> +
+
Le mail personnel d'un collaborateur est obligatoire
+
Le mail personnel d'un collaborateur doit être au format "exemple@nom.de.domaine"
@@ -106,11 +106,11 @@
-
-
Le mail Apside d'un collaborateur est obligatoire
-
Le mail Apside d'un collaborateur doit être au format +
+
Le mail Apside d'un collaborateur est obligatoire
+
Le mail Apside d'un collaborateur doit être au format "exemple@apside-groupe.com" ou "exemple@apside.fr"
@@ -124,9 +124,9 @@ -
-
La date de départ d'un collaborateur est obligatoire
+ [ngClass]="{ 'is-invalid': submitted && form.resignationDate.errors }"> +
+
La date de départ d'un collaborateur est obligatoire
@@ -137,25 +137,25 @@
-
-
Vous devez préciser le référent du collaborateur
+
+
Vous devez préciser le référent du collaborateur
-
-
Vous devez préciser la Business Unit du collaborateur
+
+
Vous devez préciser la Business Unit du collaborateur
diff --git a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts index 4898228..0316260 100644 --- a/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts +++ b/src/app/components/collaborateur/collaborateur-add/collaborateur-add.component.ts @@ -85,7 +85,7 @@ export class CollaborateurAddComponent implements OnInit { } } - get f() { + get form() { return this.registerForm.controls; } -- 2.36.3