diff --git a/Collaborateur-Epa-Front.iml b/Collaborateur-Epa-Front.iml
index 887f744..8644f84 100644
--- a/Collaborateur-Epa-Front.iml
+++ b/Collaborateur-Epa-Front.iml
@@ -7,5 +7,8 @@
+
+
+
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
new file mode 100644
index 0000000..6d3bb28
--- /dev/null
+++ b/src/app/app-routing.module.ts
@@ -0,0 +1,18 @@
+import {NgModule} from '@angular/core';
+import {RouterModule,Routes} from "@angular/router";
+import {CollaborateurComponent} from "./collaborateur/collaborateur.component";
+import {CollaborateurDetailComponent} from "./collaborateur-detail/collaborateur-detail.component";
+
+const routes : Routes = [
+ { path: '', redirectTo: '/collaborateurs', pathMatch: 'full' },
+
+ { path:'collaborateurs',component:CollaborateurComponent },
+ { path: 'detail/:id', component: CollaborateurDetailComponent },
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+
+export class AppRoutingModule { }
diff --git a/src/app/collaborateur-detail/collaborateur-detail.component.css b/src/app/collaborateur-detail/collaborateur-detail.component.css
new file mode 100644
index 0000000..4661c00
--- /dev/null
+++ b/src/app/collaborateur-detail/collaborateur-detail.component.css
@@ -0,0 +1,28 @@
+/* HeroDetailComponent's private CSS styles */
+label {
+ color: #435960;
+ font-weight: bold;
+}
+input {
+ font-size: 1em;
+ padding: .3rem;
+ margin: .5rem;
+}
+
+button {
+ padding: 5px;
+ text-decoration: none;
+ margin: 2px;
+ display: inline-block;
+ background-color: #E77620;
+ color: white;
+ border-radius: 4px;
+}
+button:hover {
+ background-color: #42545C;
+}
+button:disabled {
+ background-color: #eee;
+ color: #ccc;
+ cursor: auto;
+}
diff --git a/src/app/collaborateur-detail/collaborateur-detail.component.html b/src/app/collaborateur-detail/collaborateur-detail.component.html
new file mode 100644
index 0000000..fc9513d
--- /dev/null
+++ b/src/app/collaborateur-detail/collaborateur-detail.component.html
@@ -0,0 +1,50 @@
+
+
diff --git a/src/app/collaborateur-detail/collaborateur-detail.component.spec.ts b/src/app/collaborateur-detail/collaborateur-detail.component.spec.ts
new file mode 100644
index 0000000..93bbcea
--- /dev/null
+++ b/src/app/collaborateur-detail/collaborateur-detail.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollaborateurDetailComponent } from './collaborateur-detail.component';
+
+describe('CollaborateurDetailComponent', () => {
+ let component: CollaborateurDetailComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CollaborateurDetailComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CollaborateurDetailComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/collaborateur-detail/collaborateur-detail.component.ts b/src/app/collaborateur-detail/collaborateur-detail.component.ts
new file mode 100644
index 0000000..83815a5
--- /dev/null
+++ b/src/app/collaborateur-detail/collaborateur-detail.component.ts
@@ -0,0 +1,48 @@
+import {Component, OnInit} from '@angular/core';
+import {Collaborateur} from "../collaborateur";
+import { ActivatedRoute } from '@angular/router';
+import { Location } from '@angular/common';
+import { CollaborateurService} from "../collaborateur.service";
+
+@Component({
+ selector: 'app-collaborateur-detail',
+ templateUrl: './collaborateur-detail.component.html',
+ styleUrls: ['./collaborateur-detail.component.css']
+})
+export class CollaborateurDetailComponent implements OnInit {
+ collaborateur : Collaborateur | undefined;
+
+ constructor(
+ private route: ActivatedRoute,
+ private collaborateurService: CollaborateurService,
+ private location: Location
+ ) { }
+
+ ngOnInit(): void {
+ this.getCollaborateur()
+ }
+
+ getCollaborateur(): void {
+ const id = Number(this.route.snapshot.paramMap.get('id'))
+ this.collaborateurService.getCollaborateur(id)
+ .subscribe(collaborateur => this.collaborateur = collaborateur);
+ }
+
+ goBack(): void {
+ this.location.back();
+ }
+
+ save():void{
+ if (this.collaborateur){
+ this.collaborateurService.updateCollaborateur(this.collaborateur)
+ .subscribe(()=>this.goBack());
+ }
+ }
+
+ delete():void {
+ if (this.collaborateur){
+ this.collaborateurService.deleteCollaborateur(this.collaborateur)
+ .subscribe(()=>this.goBack());
+ }
+ }
+}
diff --git a/src/app/collaborateur.service.spec.ts b/src/app/collaborateur.service.spec.ts
new file mode 100644
index 0000000..98522b0
--- /dev/null
+++ b/src/app/collaborateur.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { CollaborateurService } from './collaborateur.service';
+
+describe('CollaborateurService', () => {
+ let service: CollaborateurService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(CollaborateurService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/collaborateur.service.ts b/src/app/collaborateur.service.ts
new file mode 100644
index 0000000..aeb4275
--- /dev/null
+++ b/src/app/collaborateur.service.ts
@@ -0,0 +1,52 @@
+import {Collaborateur} from "./collaborateur";
+import {Injectable} from '@angular/core';
+import {Observable} from "rxjs";
+import {MessageService} from "./message.service";
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+
+
+@Injectable({providedIn: 'root'})
+
+export class CollaborateurService {
+
+ private collaborateursUrl = 'https://localhost:7125/api/collaborateurs';
+
+ httpOptions = {
+ headers: new HttpHeaders({ 'Content-Type': 'application/json' })
+ };
+
+ constructor(private http: HttpClient,
+ private messageService : MessageService) { }
+
+ private log(message : string){
+ this.messageService.add(`CollaborateurService : ${message}`)
+ }
+
+ getCollaborateurs():Observable {
+ this.log('get all collaborateurs');
+ return this.http.get(this.collaborateursUrl);
+ }
+
+ getCollaborateur(id : number):Observable{
+ this.log(`get collaborateur by id : ${id}`);
+ return this.http.get(this.collaborateursUrl+"/"+id);
+ }
+
+ updateCollaborateur(collaborateur : Collaborateur):Observable{
+ let body = JSON.stringify(collaborateur);
+ this.log(`update collaborateur ${collaborateur.id}`)
+ return this.http.put(this.collaborateursUrl + "/" + collaborateur.id, body, this.httpOptions);
+ }
+
+ deleteCollaborateur(collaborateur: Collaborateur) {
+ this.log(`delete collaborateur ${collaborateur.id}`)
+ return this.http.delete(this.collaborateursUrl + "/" + collaborateur.id);
+ }
+
+ /** POST: add a new hero to the server */
+ addCollaborateur(collaborateur: Collaborateur): Observable {
+ let body = JSON.stringify(collaborateur);
+ this.log(`add collaborateur ${body}`);
+ return this.http.post(this.collaborateursUrl, body, this.httpOptions);
+ }
+}
diff --git a/src/app/collaborateur/collaborateur.component.css b/src/app/collaborateur/collaborateur.component.css
new file mode 100644
index 0000000..85b3bff
--- /dev/null
+++ b/src/app/collaborateur/collaborateur.component.css
@@ -0,0 +1,81 @@
+/* HeroesComponent's private CSS styles */
+
+label {
+ color: #435960;
+ font-weight: bold;
+}
+input {
+ font-size: 1em;
+ padding: .3rem;
+ margin: .5rem;
+}
+
+.collaborateurs {
+ margin: 0 0 2em 0;
+ list-style-type: none;
+ padding: 0;
+ width: 15em;
+}
+.collaborateurs li {
+ position: relative;
+ cursor: pointer;
+}
+
+.collaborateurs li:hover {
+ left: .1em;
+}
+
+.collaborateurs a {
+ padding: 5px;
+ text-decoration: none;
+ margin: 2px;
+ display: inline-block;
+ background-color: #E77620;
+ color: white;
+ border-radius: 4px;
+
+}
+
+.collaborateurs a:hover {
+ background-color: #42545C;
+}
+
+.collaborateurs a:active {
+ background-color: #525252;
+ color: #fafafa;
+}
+
+.collaborateurs .badge {
+ display: inline-block;
+ font-size: small;
+ color: white;
+ padding: 0.8em 0.7em 0 0.7em;
+ background-color:#405061;
+ line-height: 1em;
+ position: relative;
+ left: -1px;
+ top: -4px;
+ height: 1.8em;
+ min-width: 16px;
+ text-align: right;
+ margin-right: .8em;
+ border-radius: 4px 0 0 4px;
+}
+
+button {
+ padding: 5px;
+ text-decoration: none;
+ margin: 2px;
+ display: inline-block;
+ background-color: #E77620;
+ color: white;
+ border-radius: 4px;
+}
+button:hover {
+ background-color: #42545C;
+}
+button:disabled {
+ background-color: #eee;
+ color: #ccc;
+ cursor: auto;
+}
diff --git a/src/app/collaborateur/collaborateur.component.html b/src/app/collaborateur/collaborateur.component.html
new file mode 100644
index 0000000..229f68c
--- /dev/null
+++ b/src/app/collaborateur/collaborateur.component.html
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/src/app/collaborateur/collaborateur.component.spec.ts b/src/app/collaborateur/collaborateur.component.spec.ts
new file mode 100644
index 0000000..4c23c8c
--- /dev/null
+++ b/src/app/collaborateur/collaborateur.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CollaborateurComponent } from './collaborateur.component';
+
+describe('CollaborateurComponent', () => {
+ let component: CollaborateurComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ CollaborateurComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(CollaborateurComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/collaborateur/collaborateur.component.ts b/src/app/collaborateur/collaborateur.component.ts
new file mode 100644
index 0000000..eba75f0
--- /dev/null
+++ b/src/app/collaborateur/collaborateur.component.ts
@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {CollaborateurService} from "../collaborateur.service";
+import {Collaborateur} from "../collaborateur";
+
+@Component({
+ selector: 'app-collaborateur',
+ templateUrl: './collaborateur.component.html',
+ styleUrls: ['./collaborateur.component.css']
+})
+export class CollaborateurComponent implements OnInit {
+ collaborateurs : Collaborateur[] = [];
+ collaborateur = {} as Collaborateur ;
+
+ constructor(
+ private http : HttpClient,
+ private collaborateurService: CollaborateurService,
+ ) { }
+
+ ngOnInit(): void {
+ this.getCollaborateurs();
+ }
+
+ getCollaborateurs():void {
+ this.collaborateurService.getCollaborateurs()
+ .subscribe(collaborateurs => this.collaborateurs = collaborateurs);
+ }
+
+ add(collaborateur: Collaborateur): void {
+ this.collaborateurService.addCollaborateur(collaborateur)
+ .subscribe(collaborateur => {
+ this.collaborateurs.push(collaborateur);
+ });
+ }
+
+}
diff --git a/src/app/message.service.spec.ts b/src/app/message.service.spec.ts
new file mode 100644
index 0000000..1db761b
--- /dev/null
+++ b/src/app/message.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MessageService } from './message.service';
+
+describe('MessageService', () => {
+ let service: MessageService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(MessageService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/src/app/message.service.ts b/src/app/message.service.ts
new file mode 100644
index 0000000..eef12a6
--- /dev/null
+++ b/src/app/message.service.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class MessageService {
+
+ messages : string[] = [];
+
+ add(message: string){
+ this.messages.push(message)
+ }
+
+ clear(){
+ this.messages = [];
+ }
+
+ constructor() { }
+
+}
diff --git a/src/app/messages/messages.component.css b/src/app/messages/messages.component.css
new file mode 100644
index 0000000..7c8fa51
--- /dev/null
+++ b/src/app/messages/messages.component.css
@@ -0,0 +1,17 @@
+button {
+ padding: 5px;
+ text-decoration: none;
+ margin: 2px;
+ display: inline-block;
+ background-color: #E77620;
+ color: white;
+ border-radius: 4px;
+}
+button:hover {
+ background-color: #42545C;
+}
+button:disabled {
+ background-color: #eee;
+ color: #ccc;
+ cursor: auto;
+}
diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html
new file mode 100644
index 0000000..d7ac4b0
--- /dev/null
+++ b/src/app/messages/messages.component.html
@@ -0,0 +1,11 @@
+
+
+
Messages
+
+
+
+
+ {{message}}
+
+
+
diff --git a/src/app/messages/messages.component.spec.ts b/src/app/messages/messages.component.spec.ts
new file mode 100644
index 0000000..69163f1
--- /dev/null
+++ b/src/app/messages/messages.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MessagesComponent } from './messages.component';
+
+describe('MessagesComponent', () => {
+ let component: MessagesComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ declarations: [ MessagesComponent ]
+ })
+ .compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MessagesComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/messages/messages.component.ts b/src/app/messages/messages.component.ts
new file mode 100644
index 0000000..dfdd37d
--- /dev/null
+++ b/src/app/messages/messages.component.ts
@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+import { MessageService} from "../message.service";
+
+@Component({
+ selector: 'app-messages',
+ templateUrl: './messages.component.html',
+ styleUrls: ['./messages.component.css']
+})
+export class MessagesComponent implements OnInit {
+
+ constructor(public messageService : MessageService) { }
+
+ ngOnInit(): void {
+ }
+
+}