From 70456c291f012db6a89bdc13732e82a2dda68cdb Mon Sep 17 00:00:00 2001
From: Clement FERRERE <clement.ferrere@apside-groupe.com>
Date: Wed, 29 Dec 2021 14:48:50 +0100
Subject: [PATCH] Gestion des collaborateurs

---
 Collaborateur-Epa-Front.iml                   |  3 +
 src/app/app-routing.module.ts                 | 18 +++++
 .../collaborateur-detail.component.css        | 28 +++++++
 .../collaborateur-detail.component.html       | 50 ++++++++++++
 .../collaborateur-detail.component.spec.ts    | 25 ++++++
 .../collaborateur-detail.component.ts         | 48 +++++++++++
 src/app/collaborateur.service.spec.ts         | 16 ++++
 src/app/collaborateur.service.ts              | 52 ++++++++++++
 .../collaborateur/collaborateur.component.css | 81 +++++++++++++++++++
 .../collaborateur.component.html              | 62 ++++++++++++++
 .../collaborateur.component.spec.ts           | 25 ++++++
 .../collaborateur/collaborateur.component.ts  | 36 +++++++++
 src/app/message.service.spec.ts               | 16 ++++
 src/app/message.service.ts                    | 20 +++++
 src/app/messages/messages.component.css       | 17 ++++
 src/app/messages/messages.component.html      | 11 +++
 src/app/messages/messages.component.spec.ts   | 25 ++++++
 src/app/messages/messages.component.ts        | 16 ++++
 18 files changed, 549 insertions(+)
 create mode 100644 src/app/app-routing.module.ts
 create mode 100644 src/app/collaborateur-detail/collaborateur-detail.component.css
 create mode 100644 src/app/collaborateur-detail/collaborateur-detail.component.html
 create mode 100644 src/app/collaborateur-detail/collaborateur-detail.component.spec.ts
 create mode 100644 src/app/collaborateur-detail/collaborateur-detail.component.ts
 create mode 100644 src/app/collaborateur.service.spec.ts
 create mode 100644 src/app/collaborateur.service.ts
 create mode 100644 src/app/collaborateur/collaborateur.component.css
 create mode 100644 src/app/collaborateur/collaborateur.component.html
 create mode 100644 src/app/collaborateur/collaborateur.component.spec.ts
 create mode 100644 src/app/collaborateur/collaborateur.component.ts
 create mode 100644 src/app/message.service.spec.ts
 create mode 100644 src/app/message.service.ts
 create mode 100644 src/app/messages/messages.component.css
 create mode 100644 src/app/messages/messages.component.html
 create mode 100644 src/app/messages/messages.component.spec.ts
 create mode 100644 src/app/messages/messages.component.ts

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 @@
       <excludeFolder url="file://$MODULE_DIR$/tmp" />
     </content>
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="jquery-3.2.1.slim" level="application" />
+    <orderEntry type="library" name="popper.js" level="application" />
+    <orderEntry type="library" name="bootstrap" level="application" />
   </component>
 </module>
\ 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 @@
+
+<div *ngIf="collaborateur">
+
+  <h2>{{collaborateur.name | uppercase}} Details</h2>
+  <div><span>id : </span>{{collaborateur.id}}</div>
+  <div>
+    <label class="col-3" for="collaborateur-name">Collaborateur name   </label>
+    <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
+
+    <label class="col-3" for="collaborateur-firstName">Collaborateur firstname   </label>
+    <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
+
+    <label class="col-3" for="collaborateur-birthDate">Collaborateur birthDate   </label>
+    <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
+
+    <label class="col-3" for="collaborateur-gender">Collaborateur gender   </label>
+    <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
+
+    <label class="col-3" for="collaborateur-status">Collaborateur status   </label>
+    <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
+
+    <label class="col-3" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
+    <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
+
+    <label class="col-3" for="collaborateur-address">Collaborateur address   </label>
+    <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
+
+    <label class="col-3" for="collaborateur-telephone">Collaborateur telephone   </label>
+    <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
+
+    <label class="col-3" for="collaborateur-personalMail">Collaborateur personalMail   </label>
+    <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
+
+    <label class="col-3" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
+    <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
+
+    <label class="col-3" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
+    <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
+
+    <label class="col-3" for="collaborateur-referrerId">Collaborateur referrerId   </label>
+    <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
+
+    <label class="col-3" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
+    <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
+  </div>
+
+  <button (click)="goBack()">Retour</button>
+  <button (click)="save()">sauvegarder les changements</button>
+  <button (click)="delete()">Supprimer le collaborateur</button>
+</div>
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<CollaborateurDetailComponent>;
+
+  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<Collaborateur[]> {
+    this.log('get all collaborateurs');
+    return this.http.get<Collaborateur[]>(this.collaborateursUrl);
+  }
+
+  getCollaborateur(id : number):Observable<Collaborateur>{
+    this.log(`get collaborateur by id : ${id}`);
+    return this.http.get<Collaborateur>(this.collaborateursUrl+"/"+id);
+  }
+
+  updateCollaborateur(collaborateur : Collaborateur):Observable<any>{
+    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<Collaborateur> {
+    let body = JSON.stringify(collaborateur);
+    this.log(`add collaborateur ${body}`);
+    return this.http.post<Collaborateur>(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 @@
+<div>
+  <h2>Mes Collaborateurs</h2>
+  <ul class="collaborateurs">
+    <li *ngFor="let collaborateur of collaborateurs">
+      <a routerLink="/detail/{{collaborateur.id}}">
+        <span>{{collaborateur.name}} {{collaborateur.firstName}}</span>
+      </a>
+    </li>
+  </ul>
+</div>
+
+
+
+<div>
+
+  <h3>Ajouter un collaborateur : </h3>
+
+  <div>
+  <label class="col-3" for="collaborateur-name">Collaborateur name   </label>
+  <input id="collaborateur-name" [(ngModel)]="collaborateur.name" placeholder="name">
+
+  <label class="col-3" for="collaborateur-firstName">Collaborateur firstname   </label>
+  <input id="collaborateur-firstName" [(ngModel)]="collaborateur.firstName" placeholder="firstname">
+
+  <label class="col-3" for="collaborateur-birthDate">Collaborateur birthDate   </label>
+  <input id="collaborateur-birthDate" [(ngModel)]="collaborateur.birthDate" placeholder="birthDate">
+
+  <label class="col-3" for="collaborateur-gender">Collaborateur name   </label>
+  <input id="collaborateur-gender" [(ngModel)]="collaborateur.gender" placeholder="gender">
+
+  <label class="col-3" for="collaborateur-status">Collaborateur status   </label>
+  <input id="collaborateur-status" [(ngModel)]="collaborateur.status" placeholder="status">
+
+  <label class="col-3" for="collaborateur-childrenNumber">Collaborateur childrenNumber   </label>
+  <input id="collaborateur-childrenNumber" [(ngModel)]="collaborateur.childrenNumber" placeholder="childrenNumber">
+
+  <label class="col-3" for="collaborateur-address">Collaborateur address   </label>
+  <input id="collaborateur-address" [(ngModel)]="collaborateur.address" placeholder="address">
+
+  <label class="col-3" for="collaborateur-telephone">Collaborateur telephone   </label>
+  <input id="collaborateur-telephone" [(ngModel)]="collaborateur.telephone" placeholder="telephone">
+
+  <label class="col-3" for="collaborateur-personalMail">Collaborateur personalMail   </label>
+  <input id="collaborateur-personalMail" [(ngModel)]="collaborateur.personalMail" placeholder="personalMail">
+
+  <label class="col-3" for="collaborateur-apsideMail">Collaborateur apsideMail   </label>
+  <input id="collaborateur-apsideMail" [(ngModel)]="collaborateur.apsideMail" placeholder="apsideMail">
+
+  <label class="col-3" for="collaborateur-resignationDate">Collaborateur resignationDate   </label>
+  <input id="collaborateur-resignationDate" [(ngModel)]="collaborateur.resignationDate" placeholder="resignationDate">
+
+  <label class="col-3" for="collaborateur-referrerId">Collaborateur referrerId   </label>
+  <input id="collaborateur-referrerId" [(ngModel)]="collaborateur.referrerId" placeholder="referrerId">
+
+  <label class="col-3" for="collaborateur-businessUnitId">Collaborateur businessUnitId   </label>
+  <input id="collaborateur-businessUnitId" [(ngModel)]="collaborateur.businessUnitId" placeholder="businessUnitId">
+  </div>
+
+  <button class="add-button" (click)="add(collaborateur)">
+    Ajouter un Collaborateur
+  </button>
+</div>
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<CollaborateurComponent>;
+
+  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 @@
+<div *ngIf="messageService.messages.length">
+
+  <h2>Messages</h2>
+
+  <button (click)="messageService.clear()">Clear messages</button>
+
+  <div *ngFor='let message of messageService.messages'>
+    {{message}}
+  </div>
+
+</div>
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<MessagesComponent>;
+
+  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 {
+  }
+
+}