From ba7f7d5d6e7de50e8adeeee3d10ac56d1b4e2409 Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 12:28:15 -0500
Subject: [PATCH 01/15] timer working

Clock component
---
 .../time-clock/time-clock.component.ts        | 29 +++++++++++++++++--
 1 file changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index 674c774e8..df1e97326 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -21,12 +21,11 @@ export class TimeClockComponent  implements OnInit {
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;
-
+  showFields: boolean;
   hour: number;
   minute: number;
   seconds: number;
-
-  showFields: boolean;
+  interval;
 
   constructor() {
     this.isClockIn = true;
@@ -38,6 +37,7 @@ export class TimeClockComponent  implements OnInit {
 
    employeClockIn(): boolean {
      this.isClockIn = !this.isClockIn;
+     this.startTimer();
      return this.isClockIn;
    }
 
@@ -49,6 +49,7 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = true;
        this.isEnterTechnology = false;
        this.showAlertEnterTecnology = false;
+       this.pauseTimer();
      }
    }
 
@@ -65,6 +66,28 @@ export class TimeClockComponent  implements OnInit {
     this.showFields = show;
   }
 
+  startTimer() {
+    this.interval = setInterval(() => {
+      this.timer();
+    }, 1000 );
+   }
+
+   pauseTimer() {
+    clearInterval(this.interval);
+   }
+
+   timer() {
+    this.seconds += 1;
+    if ( this.seconds === 59 ) {
+      this.minute += 1;
+      this.seconds = 0;
+      if ( this.minute === 59 ) {
+        this.hour += 1;
+        this.minute = 0;
+      }
+    }
+  }
+
   ngOnInit(): void {}
 
 }

From f2dbf4282b4ae4fd74a4be0210115e8829154763 Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 12:45:03 -0500
Subject: [PATCH 02/15] added time to entry and out

---
 .../time-clock/time-clock.component.html      |  6 ++--
 .../time-clock/time-clock.component.ts        | 34 +++++++++++++------
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index 86009b891..0437678dc 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -17,14 +17,14 @@
         </div>
 
         <div class="card-body">
-            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
-            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
+            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
+            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
             <h6 class="text-left"><strong>Totals</strong></h6>
             <hr>
             <div class="row">
                 <div class="col-4">
                     <h6>Current</h6>
-                    <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+                    <h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
                 </div>
                 <div class="col-4">
                     <h6>Day</h6>
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index df1e97326..119fe449a 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -15,13 +15,15 @@ export class TimeClockComponent  implements OnInit {
     { id: 'P4', name: 'Project 4' }
   ];
 
+  currentDate: Date = new Date();
   username = 'Dario';
-  clockInUsername = 'hh:mm:ss';
-  clockOutUsername = 'hh:mm:ss';
   isClockIn: boolean;
   isEnterTechnology: boolean;
   showAlertEnterTecnology: boolean;
   showFields: boolean;
+  hourCounterRealTime: number;
+  minuteCounterRealTime: number;
+  secondsCounterRealTime: number;
   hour: number;
   minute: number;
   seconds: number;
@@ -30,6 +32,9 @@ export class TimeClockComponent  implements OnInit {
   constructor() {
     this.isClockIn = true;
     this.isEnterTechnology = false;
+    this.hourCounterRealTime = 0;
+    this.minuteCounterRealTime = 0;
+    this.secondsCounterRealTime = 0;
     this.hour = 0;
     this.minute = 0;
     this.seconds = 0;
@@ -38,6 +43,7 @@ export class TimeClockComponent  implements OnInit {
    employeClockIn(): boolean {
      this.isClockIn = !this.isClockIn;
      this.startTimer();
+     this.setTimeToInOut();
      return this.isClockIn;
    }
 
@@ -50,6 +56,7 @@ export class TimeClockComponent  implements OnInit {
        this.isEnterTechnology = false;
        this.showAlertEnterTecnology = false;
        this.pauseTimer();
+       this.setTimeToInOut();
      }
    }
 
@@ -73,21 +80,28 @@ export class TimeClockComponent  implements OnInit {
    }
 
    pauseTimer() {
-    clearInterval(this.interval);
+     clearInterval(this.interval);
    }
 
    timer() {
-    this.seconds += 1;
-    if ( this.seconds === 59 ) {
-      this.minute += 1;
-      this.seconds = 0;
-      if ( this.minute === 59 ) {
-        this.hour += 1;
-        this.minute = 0;
+    this.secondsCounterRealTime += 1;
+    if ( this.secondsCounterRealTime === 59 ) {
+      this.minuteCounterRealTime += 1;
+      this.secondsCounterRealTime = 0;
+      if ( this.minuteCounterRealTime === 59 ) {
+        this.hourCounterRealTime += 1;
+        this.minuteCounterRealTime = 0;
       }
     }
   }
 
+  setTimeToInOut(){
+    this.currentDate = new Date();
+    this.hour = this.currentDate.getHours();
+    this.minute = this.currentDate.getMinutes();
+    this.seconds = this.currentDate.getSeconds();
+  }
+
   ngOnInit(): void {}
 
 }

From 5a6e41ee779edbb6dc7ca23e641edf766d04e5bb Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 12:50:04 -0500
Subject: [PATCH 03/15] added time to entry and out in projects

---
 .../options-sidebar/time-clock/time-clock.component.ts         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index 119fe449a..c138f3583 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -71,6 +71,7 @@ export class TimeClockComponent  implements OnInit {
    setShowFields(show: boolean) {
     this.isClockIn = false;
     this.showFields = show;
+    this.setTimeToInOut();
   }
 
   startTimer() {
@@ -95,7 +96,7 @@ export class TimeClockComponent  implements OnInit {
     }
   }
 
-  setTimeToInOut(){
+  setTimeToInOut() {
     this.currentDate = new Date();
     this.hour = this.currentDate.getHours();
     this.minute = this.currentDate.getMinutes();

From 31bf12960f6f09de1afe859fe3b03cba5a4502af Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 12:56:15 -0500
Subject: [PATCH 04/15] clean field technology

---
 .../options-sidebar/time-clock/time-clock.component.ts         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index c138f3583..40603690f 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -28,6 +28,7 @@ export class TimeClockComponent  implements OnInit {
   minute: number;
   seconds: number;
   interval;
+  dataTechnology: string;
 
   constructor() {
     this.isClockIn = true;
@@ -52,6 +53,7 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
+       this.dataTechnology = '';
        this.isClockIn = true;
        this.isEnterTechnology = false;
        this.showAlertEnterTecnology = false;
@@ -61,6 +63,7 @@ export class TimeClockComponent  implements OnInit {
    }
 
    enterTechnology(data: string) {
+     this.dataTechnology = data;
      if ( data.length > 0 ) {
       this.isEnterTechnology = true;
      } else {

From c21fc6123ac5db80532756e1d7943a5df68676ff Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 13:42:35 -0500
Subject: [PATCH 05/15] added start time ih hover project

---
 .../options-sidebar/time-clock/time-clock.component.ts           | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index 40603690f..21c747ddf 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -74,6 +74,7 @@ export class TimeClockComponent  implements OnInit {
    setShowFields(show: boolean) {
     this.isClockIn = false;
     this.showFields = show;
+    this.startTimer();
     this.setTimeToInOut();
   }
 

From 78032909809c384983712317b99bf4602075e4d5 Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Thu, 19 Mar 2020 14:27:58 -0500
Subject: [PATCH 06/15] fixed test

---
 .../time-clock/time-clock.component.spec.ts        |  4 ++--
 .../shared/clock/clock.component.spec.ts           | 14 +++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
index 4927e4433..7c7bd16ef 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
@@ -33,13 +33,13 @@ describe('TimeClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have p tag as \'Dario clocked out at hh:mm:ss\'', async(() => {
+  it('should have p tag as \'Dario clocked out at 00:00:00\'', async(() => {
     // tslint:disable-next-line: no-shadowed-variable
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
-    expect(ptag.textContent).toBe('Dario clocked out at hh:mm:ss');
+    expect(ptag.textContent).toBe('Dario clocked out at 00:00:00');
   }));
 
   it('should set showfileds as true', () => {
diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts
index 761908de4..f1441fdb8 100644
--- a/src/app/components/shared/clock/clock.component.spec.ts
+++ b/src/app/components/shared/clock/clock.component.spec.ts
@@ -6,7 +6,6 @@ describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -25,13 +24,18 @@ describe('ClockComponent', () => {
   });
 
   it('should show the current hour of day', () => {
-    const currentHour = 11;
-    expect(component.currentDate.getHours()).toEqual(currentHour);
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getHours()).toEqual(currentDate.getHours());
   });
 
   it('should show the current minutes of day', () => {
-    const currenMinutes = 5;
-    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getMinutes()).toEqual(currentDate.getMinutes());
+  });
+
+  it('should show the current seconds of day', () => {
+    const currentDate: Date = new Date();
+    expect(component.currentDate.getSeconds()).toEqual(currentDate.getSeconds());
   });
 
 });

From ed7dcd2e3109aaf16050a02e9a109b2c9c80b8ca Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Fri, 20 Mar 2020 14:58:29 -0500
Subject: [PATCH 07/15] remove hash routes

---
 src/app/app-routing.module.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 65da222c8..35c8cdf39 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -19,7 +19,7 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, { useHash: true })],
+  imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

From 014aeceb92d98d3debf2b581b05e1d70aa17d480 Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Mon, 23 Mar 2020 15:32:23 -0500
Subject: [PATCH 08/15] fixed bugs

---
 .../time-clock/time-clock.component.css       | 42 +++++++++++++++--
 .../time-clock/time-clock.component.html      | 10 ++--
 .../time-clock/time-clock.component.ts        | 47 ++++++++++++++-----
 3 files changed, 74 insertions(+), 25 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.css b/src/app/components/options-sidebar/time-clock/time-clock.component.css
index 0e808f74e..690712ed7 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.css
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.css
@@ -1,10 +1,42 @@
 .content-ClockIn {
-  padding: 2.1rem 1rem;
+    padding: 2.1rem 1rem;
 }
 
 .timer {
-  align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
 }
+
+.place-holder-danger::-webkit-input-placeholder {
+    /* WebKit, Blink, Edge */
+    color: #909;
+}
+
+.place-holder-danger:-moz-placeholder {
+    /* Mozilla Firefox 4 to 18 */
+    color: #909;
+    opacity: 1;
+}
+
+.placeholder-danger::-moz-placeholder {
+    /* Mozilla Firefox 19+ */
+    color: #DC3545 !important;
+    opacity: 1;
+}
+
+.placeholder-danger:-ms-input-placeholder {
+    /* Internet Explorer 10-11 */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::-ms-input-placeholder {
+    /* Microsoft Edge */
+    color: #DC3545 !important;
+}
+
+.placeholder-danger::placeholder {
+    /* Most modern browsers support this now. */
+    color: #DC3545 !important;
+}
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index 0437678dc..d3bc401a1 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -1,9 +1,4 @@
-<div class="text-center mt-3">
-
-    <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
-        Field technology is requiered. Enter this field for clock out.
-    </div>
-
+<div class="text-center mt-5">
     <div class="card">
         <div class="card-header">
             <div class="row">
@@ -62,7 +57,8 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <div class="form-group row">
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
-                        <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                        <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is requiered. Enter this field for clock out.">
                     </div>
                 </div>
             </form>
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index 21c747ddf..c7cb810b7 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -29,6 +29,9 @@ export class TimeClockComponent  implements OnInit {
   seconds: number;
   interval;
   dataTechnology: string;
+  execOnlyOneTimeCounter = 0;
+  execOnlyOneTimeClockIn = 0;
+  isClockInEnable = false;
 
   constructor() {
     this.isClockIn = true;
@@ -42,6 +45,7 @@ export class TimeClockComponent  implements OnInit {
    }
 
    employeClockIn(): boolean {
+     this.isClockInEnable = true;
      this.isClockIn = !this.isClockIn;
      this.startTimer();
      this.setTimeToInOut();
@@ -53,12 +57,10 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.dataTechnology = '';
-       this.isClockIn = true;
-       this.isEnterTechnology = false;
-       this.showAlertEnterTecnology = false;
+       this.setVarToEmpty();
        this.pauseTimer();
        this.setTimeToInOut();
+
      }
    }
 
@@ -72,15 +74,20 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
-    this.isClockIn = false;
-    this.showFields = show;
-    this.startTimer();
-    this.setTimeToInOut();
+     if ( this.isClockInEnable !== true ) {
+      this.isClockIn = false;
+      this.showFields = show;
+      if (  this.execOnlyOneTimeCounter === 0 ) {
+        this.startTimer();
+        this.execOnlyOneTimeCounter++;
+      }
+      this.setTimeToInOut();
+     }
   }
 
   startTimer() {
     this.interval = setInterval(() => {
-      this.timer();
+        this.timer();
     }, 1000 );
    }
 
@@ -101,10 +108,24 @@ export class TimeClockComponent  implements OnInit {
   }
 
   setTimeToInOut() {
-    this.currentDate = new Date();
-    this.hour = this.currentDate.getHours();
-    this.minute = this.currentDate.getMinutes();
-    this.seconds = this.currentDate.getSeconds();
+    if ( this.execOnlyOneTimeClockIn === 0 ) {
+      this.currentDate = new Date();
+      this.hour = this.currentDate.getHours();
+      this.minute = this.currentDate.getMinutes();
+      this.seconds = this.currentDate.getSeconds();
+      this.execOnlyOneTimeClockIn++;
+    }
+
+  }
+
+  setVarToEmpty() {
+    this.dataTechnology = '';
+    this.isClockIn = true;
+    this.isEnterTechnology = false;
+    this.showAlertEnterTecnology = false;
+    this.execOnlyOneTimeClockIn = 0;
+    this.execOnlyOneTimeCounter = 0;
+    this.isClockInEnable = false;
   }
 
   ngOnInit(): void {}

From f9aa4109a781a05f60795d50d9505d720c8265ff Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Mon, 23 Mar 2020 15:34:24 -0500
Subject: [PATCH 09/15] fixed typo

---
 .../options-sidebar/time-clock/time-clock.component.html        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index d3bc401a1..fdaa95c42 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -58,7 +58,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
                         <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
-                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is requiered. Enter this field for clock out.">
+                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is required. Enter this field for clock out.">
                     </div>
                 </div>
             </form>

From 09881acf54bf4c029bd711f15925446347096f1c Mon Sep 17 00:00:00 2001
From: Cristina Guncay <macrisguncay@gmail.com>
Date: Mon, 23 Mar 2020 18:59:11 -0500
Subject: [PATCH 10/15] fix double process in CI

---
 .github/workflows/CI-time-tracker-ui.yml | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/.github/workflows/CI-time-tracker-ui.yml b/.github/workflows/CI-time-tracker-ui.yml
index 41d115b9c..1c4a7fbd6 100644
--- a/.github/workflows/CI-time-tracker-ui.yml
+++ b/.github/workflows/CI-time-tracker-ui.yml
@@ -1,13 +1,6 @@
 name: CI process for time-tracker app
 
 on:
-  # Trigger the workflow on push or pull request
-  push:
-    branches:
-      - '*'
-      - '*/*'
-      - '!master'
-
   pull_request:
     types: [opened, edited, reopened, synchronize]
     branches:

From 060d2c896695498644e47ff707e771b6823e20ea Mon Sep 17 00:00:00 2001
From: Cristina Guncay <macrisguncay@gmail.com>
Date: Mon, 23 Mar 2020 22:57:18 -0500
Subject: [PATCH 11/15] remove Getting Started and Time Off options in sidebar

---
 src/app/app-routing.module.ts                 |  8 +---
 .../getting-started.component.css             |  0
 .../getting-started.component.html            |  5 ---
 .../getting-started.component.spec.ts         | 43 -------------------
 .../getting-started.component.ts              | 15 -------
 .../time-off/time-off.component.css           |  0
 .../time-off/time-off.component.html          |  5 ---
 .../time-off/time-off.component.spec.ts       | 41 ------------------
 .../time-off/time-off.component.ts            | 15 -------
 .../shared/sidebar/sidebar.component.html     | 10 ++---
 10 files changed, 6 insertions(+), 136 deletions(-)
 delete mode 100644 src/app/components/options-sidebar/getting-started/getting-started.component.css
 delete mode 100644 src/app/components/options-sidebar/getting-started/getting-started.component.html
 delete mode 100644 src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
 delete mode 100644 src/app/components/options-sidebar/getting-started/getting-started.component.ts
 delete mode 100644 src/app/components/options-sidebar/time-off/time-off.component.css
 delete mode 100644 src/app/components/options-sidebar/time-off/time-off.component.html
 delete mode 100644 src/app/components/options-sidebar/time-off/time-off.component.spec.ts
 delete mode 100644 src/app/components/options-sidebar/time-off/time-off.component.ts

diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 65da222c8..cf0285255 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -1,21 +1,17 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
-import { GettingStartedComponent } from './components/options-sidebar/getting-started/getting-started.component';
 import { ReportsComponent } from './components/options-sidebar/reports/reports.component';
 import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { TimeEntriesComponent } from './components/options-sidebar/time-entries/time-entries.component';
-import { TimeOffComponent } from './components/options-sidebar/time-off/time-off.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
 
 const routes: Routes = [
-  {path: 'getting-started', component: GettingStartedComponent},
   {path: 'reports', component: ReportsComponent},
   {path: 'time-clock', component: TimeClockComponent},
   {path: 'time-entries', component: TimeEntriesComponent},
-  {path: 'time-off', component: TimeOffComponent},
   {path: 'project-management', component: ProjectManagementComponent},
-  {path: '', pathMatch: 'full', redirectTo: 'getting-started'},
-  {path: '**', pathMatch: 'full', redirectTo: 'getting-started'},
+  {path: '', pathMatch: 'full', redirectTo: 'time-clock'},
+  {path: '**', pathMatch: 'full', redirectTo: 'time-clock'},
 ];
 
 @NgModule({
diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.css b/src/app/components/options-sidebar/getting-started/getting-started.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.html b/src/app/components/options-sidebar/getting-started/getting-started.component.html
deleted file mode 100644
index 1dcdc1e99..000000000
--- a/src/app/components/options-sidebar/getting-started/getting-started.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="text-center mt-5">
-
-    <p>getting-started works!</p>
-
-</div>
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
deleted file mode 100644
index bff58d1a2..000000000
--- a/src/app/components/options-sidebar/getting-started/getting-started.component.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { GettingStartedComponent } from './getting-started.component';
-
-describe('GettingStartedComponent', () => {
-  let component: GettingStartedComponent;
-  let fixture: ComponentFixture<GettingStartedComponent>;
-
-  function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
-    const fixture = TestBed.createComponent(GettingStartedComponent);
-    const app = fixture.debugElement.componentInstance;
-    return { fixture, app };
-  }
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ GettingStartedComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(GettingStartedComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have p tag as \'getting-started works!\'', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { app, fixture } = setup();
-    fixture.detectChanges();
-    const compile = fixture.debugElement.nativeElement;
-    const ptag = compile.querySelector('p');
-    expect(ptag.textContent).toBe('getting-started works!');
-  }));
-
-
-});
diff --git a/src/app/components/options-sidebar/getting-started/getting-started.component.ts b/src/app/components/options-sidebar/getting-started/getting-started.component.ts
deleted file mode 100644
index 91d9ed409..000000000
--- a/src/app/components/options-sidebar/getting-started/getting-started.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-getting-started',
-  templateUrl: './getting-started.component.html',
-  styleUrls: ['./getting-started.component.css']
-})
-export class GettingStartedComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/src/app/components/options-sidebar/time-off/time-off.component.css b/src/app/components/options-sidebar/time-off/time-off.component.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/app/components/options-sidebar/time-off/time-off.component.html b/src/app/components/options-sidebar/time-off/time-off.component.html
deleted file mode 100644
index 50aa714a8..000000000
--- a/src/app/components/options-sidebar/time-off/time-off.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div class="text-center mt-5">
-
-    <p>time-off works!</p>
-
-</div>
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts b/src/app/components/options-sidebar/time-off/time-off.component.spec.ts
deleted file mode 100644
index 8aa6ed544..000000000
--- a/src/app/components/options-sidebar/time-off/time-off.component.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TimeOffComponent } from './time-off.component';
-
-describe('TimeOffComponent', () => {
-  let component: TimeOffComponent;
-  let fixture: ComponentFixture<TimeOffComponent>;
-
-  function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
-    const fixture = TestBed.createComponent(TimeOffComponent);
-    const app = fixture.debugElement.componentInstance;
-    return { fixture, app };
-  }
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TimeOffComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TimeOffComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have p tag as \'time-off works!\'', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { app, fixture } = setup();
-    fixture.detectChanges();
-    const compile = fixture.debugElement.nativeElement;
-    const ptag = compile.querySelector('p');
-    expect(ptag.textContent).toBe('time-off works!');
-  }));
-});
diff --git a/src/app/components/options-sidebar/time-off/time-off.component.ts b/src/app/components/options-sidebar/time-off/time-off.component.ts
deleted file mode 100644
index e41c61bdc..000000000
--- a/src/app/components/options-sidebar/time-off/time-off.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-time-off',
-  templateUrl: './time-off.component.html',
-  styleUrls: ['./time-off.component.css']
-})
-export class TimeOffComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/src/app/components/shared/sidebar/sidebar.component.html b/src/app/components/shared/sidebar/sidebar.component.html
index 1a75e8002..c99cc85af 100644
--- a/src/app/components/shared/sidebar/sidebar.component.html
+++ b/src/app/components/shared/sidebar/sidebar.component.html
@@ -2,12 +2,10 @@
     <!-- Sidebar -->
     <div class="bg-light border-right" id="sidebar-wrapper">
         <div class="list-group list-group-flush">
-            <a [routerLink]="['/getting-started']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-flag"></i>   Getting Started</a>
-            <a [routerLink]="['/time-clock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
-            <a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
-            <a [routerLink]="['/time-off']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-paper-plane"></i>  Time Off</a>
-            <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
-            <a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i>   Projects</a>
+          <a [routerLink]="['/time-clock']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-clock"></i>   Time Clock</a>
+          <a [routerLink]="['/time-entries']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-list-alt"></i>  Time Entries</a>
+          <a [routerLink]="['/reports']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="fas fa-chart-pie"></i>   Reports</a>
+          <a [routerLink]="['/project-management']" routerLinkActive="dark" class="list-group-item list-group-item-action bg-light"><i class="far fa-folder-open"></i>   Projects</a>
         </div>
     </div>
     <!-- /#sidebar-wrapper -->

From 1197078c01a9b322a62cc18f78b6ada72107e7a9 Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Tue, 24 Mar 2020 11:11:07 -0500
Subject: [PATCH 12/15] reafactor code and names

---
 .../time-clock/time-clock.component.css       | 32 ---------
 .../time-clock/time-clock.component.html      | 15 ++--
 .../time-clock/time-clock.component.spec.ts   | 72 +++++++++++++++++--
 .../time-clock/time-clock.component.ts        | 40 ++++++-----
 .../shared/clock/clock.component.spec.ts      |  9 +++
 .../shared/clock/clock.component.ts           |  4 +-
 6 files changed, 108 insertions(+), 64 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.css b/src/app/components/options-sidebar/time-clock/time-clock.component.css
index 690712ed7..a3d8d5059 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.css
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.css
@@ -7,36 +7,4 @@
     display: flex;
     height: 100%;
     justify-content: center;
-}
-
-.place-holder-danger::-webkit-input-placeholder {
-    /* WebKit, Blink, Edge */
-    color: #909;
-}
-
-.place-holder-danger:-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    color: #909;
-    opacity: 1;
-}
-
-.placeholder-danger::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    color: #DC3545 !important;
-    opacity: 1;
-}
-
-.placeholder-danger:-ms-input-placeholder {
-    /* Internet Explorer 10-11 */
-    color: #DC3545 !important;
-}
-
-.placeholder-danger::-ms-input-placeholder {
-    /* Microsoft Edge */
-    color: #DC3545 !important;
-}
-
-.placeholder-danger::placeholder {
-    /* Most modern browsers support this now. */
-    color: #DC3545 !important;
 }
\ No newline at end of file
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index fdaa95c42..47266667f 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -23,11 +23,11 @@ <h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | numbe
                 </div>
                 <div class="col-4">
                     <h6>Day</h6>
-                    <h3>4:22</h3>
+                    <h3>00:00</h3>
                 </div>
                 <div class="col-4">
                     <h6>Week</h6>
-                    <h3>14:00</h3>
+                    <h3>00:00</h3>
                 </div>
             </div>
             <h6 class="text-left"><strong>Projects</strong></h6>
@@ -41,7 +41,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                 <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
             </ul>
             <br>
-            <form *ngIf="!isClockIn || showFields">
+            <form *ngIf="(!isClockIn || showFields) && !isHidenForm">
                 <div class="form-group row">
                     <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
                     <div class="col-sm-10">
@@ -58,19 +58,22 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
                     <div class="col-sm-10">
                         <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
-                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger placeholder-danger " placeholder="Field technology is required. Enter this field for clock out.">
+                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
+                        <div class="">
+                            <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
+                        </div>
                     </div>
                 </div>
             </form>
             <hr>
             <div class="container">
                 <div class="row">
-                    <div class="col text-left">
+                    <div class="col text-left" id="optionsContainer">
                         <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                             Options
                           </button>
                     </div>
-                    <div class="col text-right">
+                    <div class="col text-right" id="clockInOutContainer">
                         <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
                         <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
                     </div>
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
index 7c7bd16ef..61ad7c286 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
@@ -1,6 +1,6 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { DebugElement } from '@angular/core';
+import { DebugElement, Component } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../../shared/project-list-hover/project-list-hover.component';
 
@@ -10,7 +10,6 @@ describe('TimeClockComponent', () => {
   let de: DebugElement;
 
   function setup() {
-    // tslint:disable-next-line: no-shadowed-variable
     const fixture = TestBed.createComponent(TimeClockComponent);
     const app = fixture.debugElement.componentInstance;
     return { fixture, app };
@@ -34,8 +33,7 @@ describe('TimeClockComponent', () => {
   });
 
   it('should have p tag as \'Dario clocked out at 00:00:00\'', async(() => {
-    // tslint:disable-next-line: no-shadowed-variable
-    const { app, fixture } = setup();
+    const { fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
@@ -63,4 +61,68 @@ describe('TimeClockComponent', () => {
     li.nativeElement.click();
     expect(component.setShowFields).toHaveBeenCalledWith(true);
   });
+
+  it('should have button text as Options', async(() => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('optionsContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe(' Options ');
+  }));
+
+  it('should set Clock In', () => {
+    const { fixture } = setup();
+    fixture.detectChanges();
+    const x = document.getElementById('clockInOutContainer');
+    const ptag = x.querySelector('button');
+    expect(ptag.textContent).toBe('Clock In');
+  });
+
+  it('should setVartToEmpty called', () => {
+    spyOn(component, 'setDefaultValuesToFields');
+    component.setDefaultValuesToFields();
+    expect(component.setDefaultValuesToFields).toHaveBeenCalled();
+  });
+
+  it('should employeClockIn called', () => {
+    spyOn(component, 'employeClockIn');
+    component.employeClockIn();
+    expect(component.employeClockIn).toHaveBeenCalled();
+  });
+
+  it('should employeClockOut called', () => {
+    spyOn(component, 'employeClockOut');
+    component.employeClockOut();
+    expect(component.employeClockOut).toHaveBeenCalled();
+  });
+
+  it('should enterTechnolofy called', () => {
+    spyOn(component, 'enterTechnology');
+    component.enterTechnology('');
+    expect(component.enterTechnology).toHaveBeenCalled();
+  });
+
+  // it('show init state of vars', () => {
+  //   spyOn(component, 'employeClockIn');
+  //   const isClockIn = true;
+  //   const isEnterTechnology = false;
+  //   const hourCounterRealTime = 0;
+  //   const minuteCounterRealTime = 0;
+  //   const secondsCounterRealTime = 0;
+  //   const hour = 0;
+  //   const minute = 0;
+  //   const seconds = 0;
+  //   expect(component.isClockIn).toBe(isClockIn);
+  //   expect(component.isEnterTechnology).toBe(isEnterTechnology);
+  //   expect(component.hourCounterRealTime).toBe(hourCounterRealTime);
+  //   expect(component.minuteCounterRealTime).toBe(minuteCounterRealTime);
+  //   expect(component.secondsCounterRealTime).toBe(secondsCounterRealTime);
+  //   expect(component.hour).toBe(hour);
+  //   expect(component.minute).toBe(minute);
+  //   expect(component.seconds).toBe(hour);
+  // });
+
+
+
+
 });
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
index c7cb810b7..a38b5aa42 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.ts
@@ -28,10 +28,11 @@ export class TimeClockComponent  implements OnInit {
   minute: number;
   seconds: number;
   interval;
-  dataTechnology: string;
-  execOnlyOneTimeCounter = 0;
-  execOnlyOneTimeClockIn = 0;
+  dataTechnology: string[] = new Array();
+  execOnlyOneTimeCounter = false;
+  execOnlyOneTimeClockIn = false;
   isClockInEnable = false;
+  isHidenForm = true;
 
   constructor() {
     this.isClockIn = true;
@@ -47,8 +48,9 @@ export class TimeClockComponent  implements OnInit {
    employeClockIn(): boolean {
      this.isClockInEnable = true;
      this.isClockIn = !this.isClockIn;
+     this.isHidenForm = false;
      this.startTimer();
-     this.setTimeToInOut();
+     this.setArrivalAndDepartureTimes();
      return this.isClockIn;
    }
 
@@ -57,15 +59,13 @@ export class TimeClockComponent  implements OnInit {
        this.isClockIn = false;
        this.showAlertEnterTecnology = true;
      } else {
-       this.setVarToEmpty();
+       this.setDefaultValuesToFields();
        this.pauseTimer();
-       this.setTimeToInOut();
-
+       this.setArrivalAndDepartureTimes();
      }
    }
 
    enterTechnology(data: string) {
-     this.dataTechnology = data;
      if ( data.length > 0 ) {
       this.isEnterTechnology = true;
      } else {
@@ -74,14 +74,15 @@ export class TimeClockComponent  implements OnInit {
    }
 
    setShowFields(show: boolean) {
+     this.isHidenForm = false;
      if ( this.isClockInEnable !== true ) {
       this.isClockIn = false;
       this.showFields = show;
-      if (  this.execOnlyOneTimeCounter === 0 ) {
+      if (  !this.execOnlyOneTimeCounter  ) {
         this.startTimer();
-        this.execOnlyOneTimeCounter++;
+        this.execOnlyOneTimeCounter = true;
       }
-      this.setTimeToInOut();
+      this.setArrivalAndDepartureTimes();
      }
   }
 
@@ -107,27 +108,28 @@ export class TimeClockComponent  implements OnInit {
     }
   }
 
-  setTimeToInOut() {
-    if ( this.execOnlyOneTimeClockIn === 0 ) {
+  setArrivalAndDepartureTimes() {
+    if ( !this.execOnlyOneTimeClockIn ) {
       this.currentDate = new Date();
       this.hour = this.currentDate.getHours();
       this.minute = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
-      this.execOnlyOneTimeClockIn++;
+      this.execOnlyOneTimeClockIn = true;
     }
 
   }
 
-  setVarToEmpty() {
-    this.dataTechnology = '';
+  setDefaultValuesToFields() {
+    this.isHidenForm = true;
     this.isClockIn = true;
     this.isEnterTechnology = false;
     this.showAlertEnterTecnology = false;
-    this.execOnlyOneTimeClockIn = 0;
-    this.execOnlyOneTimeCounter = 0;
+    this.execOnlyOneTimeClockIn = false;
+    this.execOnlyOneTimeCounter = false;
     this.isClockInEnable = false;
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  }
 
 }
diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts
index f1441fdb8..658511272 100644
--- a/src/app/components/shared/clock/clock.component.spec.ts
+++ b/src/app/components/shared/clock/clock.component.spec.ts
@@ -1,11 +1,19 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ClockComponent } from './clock.component';
+import { interval, timer } from 'rxjs';
 
 describe('ClockComponent', () => {
   let component: ClockComponent;
   let fixture: ComponentFixture<ClockComponent>;
 
+  function setup() {
+    // tslint:disable-next-line: no-shadowed-variable
+    const fixture = TestBed.createComponent(ClockComponent);
+    const app = fixture.debugElement.componentInstance;
+    return { fixture, app };
+  }
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [ ClockComponent ]
@@ -38,4 +46,5 @@ describe('ClockComponent', () => {
     expect(component.currentDate.getSeconds()).toEqual(currentDate.getSeconds());
   });
 
+
 });
diff --git a/src/app/components/shared/clock/clock.component.ts b/src/app/components/shared/clock/clock.component.ts
index 0eea6b977..ec3ddad30 100644
--- a/src/app/components/shared/clock/clock.component.ts
+++ b/src/app/components/shared/clock/clock.component.ts
@@ -15,14 +15,14 @@ export class ClockComponent implements OnInit {
   displayTime: boolean;
 
   constructor() {
-    this.showClcok();
+    this.showClock();
     this.displayTime = false;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
    }
 
-   showClcok() {
+   showClock() {
     const timenInterval = interval(1000);
     timenInterval.subscribe( (data) => {
       this.currentDate = new Date();

From ce0682b13255fa2651f5678acedf755d6c0fe71e Mon Sep 17 00:00:00 2001
From: daros10 <daro.wla@hotmail.es>
Date: Tue, 24 Mar 2020 11:49:58 -0500
Subject: [PATCH 13/15] remove test method

---
 .../time-clock/time-clock.component.html      |  2 +-
 .../time-clock/time-clock.component.spec.ts   | 25 +------------------
 2 files changed, 2 insertions(+), 25 deletions(-)

diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index 47266667f..50337aca9 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -59,7 +59,7 @@ <h6 class="text-left"><strong>Projects</strong></h6>
                     <div class="col-sm-10">
                         <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
                         <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
-                        <div class="">
+                        <div>
                             <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
                         </div>
                     </div>
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
index 61ad7c286..0d045af13 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.spec.ts
@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed, fakeAsync } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { DebugElement, Component } from '@angular/core';
 import { TimeClockComponent } from './time-clock.component';
@@ -102,27 +102,4 @@ describe('TimeClockComponent', () => {
     expect(component.enterTechnology).toHaveBeenCalled();
   });
 
-  // it('show init state of vars', () => {
-  //   spyOn(component, 'employeClockIn');
-  //   const isClockIn = true;
-  //   const isEnterTechnology = false;
-  //   const hourCounterRealTime = 0;
-  //   const minuteCounterRealTime = 0;
-  //   const secondsCounterRealTime = 0;
-  //   const hour = 0;
-  //   const minute = 0;
-  //   const seconds = 0;
-  //   expect(component.isClockIn).toBe(isClockIn);
-  //   expect(component.isEnterTechnology).toBe(isEnterTechnology);
-  //   expect(component.hourCounterRealTime).toBe(hourCounterRealTime);
-  //   expect(component.minuteCounterRealTime).toBe(minuteCounterRealTime);
-  //   expect(component.secondsCounterRealTime).toBe(secondsCounterRealTime);
-  //   expect(component.hour).toBe(hour);
-  //   expect(component.minute).toBe(minute);
-  //   expect(component.seconds).toBe(hour);
-  // });
-
-
-
-
 });

From 0edaff1c20791cb0ae79960fa9ccf9adb438372e Mon Sep 17 00:00:00 2001
From: Jorge Flores <jflores@ioet.com>
Date: Mon, 23 Mar 2020 13:28:04 -0500
Subject: [PATCH 14/15] Time Entries Section

---
 src/app/app.module.ts                         | 16 +++-
 .../time-clock/time-clock.component.html      |  2 +-
 .../time-entries/time-entries.component.css   | 46 +++++++++
 .../time-entries/time-entries.component.html  | 69 +++++++++++++-
 .../time-entries.component.spec.ts            | 59 +++++++++++-
 .../time-entries/time-entries.component.ts    | 95 ++++++++++++++++++-
 .../shared/clock/clock.component.spec.ts      | 18 ++--
 .../create-project.component.ts               |  6 +-
 .../details-fields.component.css              |  4 +
 .../details-fields.component.html             | 50 +++++-----
 .../details-fields.component.spec.ts          | 42 +++++++-
 .../details-fields.component.ts               | 35 ++++++-
 .../empty-state/empty-state.component.css     |  8 ++
 .../empty-state/empty-state.component.html    |  4 +
 .../empty-state/empty-state.component.spec.ts | 25 +++++
 .../empty-state/empty-state.component.ts      | 15 +++
 .../shared/modal/modal.component.html         |  6 +-
 .../shared/modal/modal.component.ts           | 26 +++--
 .../month-picker/month-picker.component.css   | 16 ++++
 .../month-picker/month-picker.component.html  | 10 ++
 .../month-picker.component.spec.ts            | 32 +++++++
 .../month-picker/month-picker.component.ts    | 23 +++++
 .../group-by-date/group-by-date.pipe.spec.ts  |  8 ++
 .../pipes/group-by-date/group-by-date.pipe.ts | 40 ++++++++
 .../project-list/project-list.component.html  |  4 +-
 src/app/interfaces/entry.ts                   | 11 +++
 src/app/interfaces/index.ts                   |  2 +
 src/app/interfaces/project.ts                 |  1 +
 28 files changed, 598 insertions(+), 75 deletions(-)
 create mode 100644 src/app/components/shared/empty-state/empty-state.component.css
 create mode 100644 src/app/components/shared/empty-state/empty-state.component.html
 create mode 100644 src/app/components/shared/empty-state/empty-state.component.spec.ts
 create mode 100644 src/app/components/shared/empty-state/empty-state.component.ts
 create mode 100644 src/app/components/shared/month-picker/month-picker.component.css
 create mode 100644 src/app/components/shared/month-picker/month-picker.component.html
 create mode 100644 src/app/components/shared/month-picker/month-picker.component.spec.ts
 create mode 100644 src/app/components/shared/month-picker/month-picker.component.ts
 create mode 100644 src/app/components/shared/pipes/group-by-date/group-by-date.pipe.spec.ts
 create mode 100644 src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
 create mode 100644 src/app/interfaces/entry.ts
 create mode 100644 src/app/interfaces/index.ts

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b611dc7bc..3ca3c7755 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,7 +3,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -13,11 +12,17 @@ import { SidebarComponent } from './components/shared/sidebar/sidebar.component'
 import { ClockComponent } from './components/shared/clock/clock.component';
 import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
+import { TimeEntriesComponent } from "./components/options-sidebar/time-entries/time-entries.component";
 import { ProjectListComponent } from './components/shared/project-list/project-list.component';
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
 import { ProjectListHoverComponent } from './components/shared/project-list-hover/project-list-hover.component';
 import { ModalComponent } from './components/shared/modal/modal.component';
+import { MonthPickerComponent } from './components/shared/month-picker/month-picker.component';
+import { EmptyStateComponent } from './components/shared/empty-state/empty-state.component';
+import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-by-date.pipe';
+
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -32,7 +37,11 @@ import { ModalComponent } from './components/shared/modal/modal.component';
     TimeClockComponent,
     DetailsFieldsComponent,
     ProjectListHoverComponent,
-    ModalComponent
+    ModalComponent,
+    TimeEntriesComponent,
+    MonthPickerComponent,
+    EmptyStateComponent,
+    GroupByDatePipe
   ],
   imports: [
     CommonModule,
@@ -45,5 +54,4 @@ import { ModalComponent } from './components/shared/modal/modal.component';
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
-
+export class AppModule {}
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index 50337aca9..f5be01851 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -81,4 +81,4 @@ <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology fie
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.css b/src/app/components/options-sidebar/time-entries/time-entries.component.css
index e69de29bb..4b6e05eb5 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.css
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.css
@@ -0,0 +1,46 @@
+.container-time-entries {
+  padding: 1rem;
+}
+
+.header-entries {
+  background-color: rgba(0, 0, 0, 0.03);
+  border-top: 1px solid rgba(0, 0, 0, 0.125);
+}
+
+.accordion-container {
+  max-height: 25rem;
+  overflow-y: auto;
+}
+
+.accordion-container::-webkit-scrollbar {
+  display: none;
+}
+
+.date-header {
+  background-color: #e6e6e6;
+  border-radius: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  font-size: small;
+  padding: 0 0.9rem;
+}
+
+.date-header > a {
+  color: #000000;
+}
+
+.btn-small > i {
+  font-size: 0.8rem;
+  opacity: 0.7;
+}
+
+.entries {
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+  display: flex;
+  font-size: small;
+}
+
+.entries:hover {
+  background-color: #d5edf0;
+  cursor: pointer;
+}
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.html b/src/app/components/options-sidebar/time-entries/time-entries.component.html
index f4ee1f815..401cb29e0 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.html
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.html
@@ -1,5 +1,66 @@
-<div class="text-center mt-5">
+<div class="container-time-entries">
+  <div class="card">
+    <div class="card-header">Time Entries</div>
+    <app-month-picker (monthSelected)="getMonth($event)"></app-month-picker>
+    <div class="row m-0 header-entries">
+      <div class="col">Project</div>
+      <div class="col">Duration</div>
+      <div class="col-2">Actions</div>
+    </div>
+    <!--Accordion wrapper-->
+    <div *ngIf="dataByMonth.length > 0; else emptyState" class="accordion accordion-container" role="tablist"
+      aria-multiselectable="true">
+      <div class="card" *ngFor="let entry of dataByMonth | groupByDate; let rowIndex = index">
+        <!-- Card header -->
+        <div class="date-header" role="tab" id="heading10">
+          <a data-toggle="collapse" [href]="'#entry' + rowIndex">
+            <div class="mb-0">
+              {{ entry.date }}
+            </div>
+          </a>
+        </div>
 
-    <p>time-entries works!</p>
-
-</div>
\ No newline at end of file
+        <!-- Card body -->
+        <div *ngFor="let item of entry.details" [id]="'entry' + rowIndex" class="collapse show" role="tabpanel"
+          aria-labelledby="heading10">
+          <div class="row m-0 entries">
+            <div class="col">
+              {{ item.project }}
+            </div>
+            <div class="col">
+              {{ item.duration }}
+            </div>
+            <div class="col-2">
+              <button class="btn btn-sm btn-small" data-toggle="modal" data-target="#editRecordsByDate"
+                (click)="editEntry(item.id)">
+                <i class="fa fa-edit"></i>
+              </button>
+              <button class="btn btn-sm btn-small" data-toggle="modal" data-target="#deleteModal"
+                (click)="openModal(item)">
+                <i class="fa fa-trash"></i>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <ng-template #emptyState>
+      <app-empty-state></app-empty-state>
+    </ng-template>
+  </div>
+</div>
+<div class="modal fade" id="editRecordsByDate" tabindex="-1" role="dialog" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="exampleModalLongTitle">Edit Entry</h5>
+      </div>
+      <div class="modal-body">
+        <app-details-fields [formType]='"entries"' [entryToEdit]="entry" (saveEntry)="saveEntry($event)"></app-details-fields>
+      </div>
+    </div>
+  </div>
+</div>
+<app-modal *ngIf="showModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true" [list]="entryToDelete"
+  (removeList)="removeEntry($event)">
+</app-modal>
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
index 304646888..8215f896b 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
@@ -1,10 +1,21 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TimeEntriesComponent } from './time-entries.component';
+import { GroupByDatePipe } from '../../shared/pipes/group-by-date/group-by-date.pipe';
 
 describe('TimeEntriesComponent', () => {
   let component: TimeEntriesComponent;
   let fixture: ComponentFixture<TimeEntriesComponent>;
+  const entry = {
+    id: "entry_1",
+    project: "Mido - 05 de Febrero",
+    startDate: "2020-02-05T15:36:15.887Z",
+    endDate: "2020-02-05T18:36:15.887Z",
+    activity: "development",
+    technology: "Angular, TypeScript",
+    comments: "No comments",
+    ticket: "EY-25"
+  };
 
   function setup() {
     // tslint:disable-next-line: no-shadowed-variable
@@ -15,7 +26,7 @@ describe('TimeEntriesComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TimeEntriesComponent ]
+      declarations: [ TimeEntriesComponent, GroupByDatePipe ]
     })
     .compileComponents();
   }));
@@ -30,13 +41,55 @@ describe('TimeEntriesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should have p tag as \'time-entries works!\'', async(() => {
+  /* it('should have p tag as \'time-entries works!\'', async(() => {
     // tslint:disable-next-line: no-shadowed-variable
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
     expect(ptag.textContent).toBe('time-entries works!');
+  })); */
+
+  it('should call filter entry', async(() => {
+    component.ngOnInit();
+    expect(component.dataByMonth.length).toEqual(3);
   }));
 
-});
\ No newline at end of file
+  it('should open Delete Modal', () => {
+    component.openModal(entry);
+    expect(component.entryToDelete).toBe(entry);
+    expect(component.showModal).toBe(true);
+  });
+
+ it('should filter the Entry to edit', () => {
+    const entryId = "entry_1"
+    component.editEntry(entryId);
+    expect(component.entry.project).toBe(entry.project);
+    expect(component.entry.startDate).toBe(entry.startDate);
+    expect(component.entry.endDate).toBe(entry.endDate);
+    expect(component.entry.activity).toBe(entry.activity);
+    expect(component.entry.technology).toBe(entry.technology);
+  });
+
+  it('should save an Entry', () => {
+    component.entryId = 'entry_1';
+    component.saveEntry(entry);
+    expect(component.entryList[0].project).toBe('Mido - 05 de Febrero');
+    expect(component.entryList[0].startDate).toBe('2020-02-05T15:36:15.887Z');
+    expect(component.entryList[0].endDate).toBe('2020-02-05T18:36:15.887Z');
+    expect(component.entryList[0].activity).toBe('development');
+    expect(component.entryList[0].technology).toBe('Angular, TypeScript');
+  });
+
+  it('should delete a Entry', () => {
+    const entryId = "entry_2";
+    component.removeEntry(entryId);
+    expect(component.dataByMonth.length).toBe(2);
+  });
+
+  it('should get the entry List by Month', () => {
+    const month = 3;
+    component.getMonth(month);
+    expect(component.dataByMonth.length).toEqual(1);
+  });
+});
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.ts
index 17ea41840..b13ce1cbe 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.ts
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.ts
@@ -1,15 +1,102 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
+import { Entry } from '../../../interfaces/entry';
 
 @Component({
-  selector: 'app-time-entries',
-  templateUrl: './time-entries.component.html',
-  styleUrls: ['./time-entries.component.css']
+  selector: "app-time-entries",
+  templateUrl: "./time-entries.component.html",
+  styleUrls: ["./time-entries.component.css"]
 })
 export class TimeEntriesComponent implements OnInit {
 
+  showModal: boolean = false;
+  entryId: string;
+  entry: Entry;
+  entryToDelete: Entry;
+  dataByMonth: Entry[];
+
+  entryList = [
+    {
+      id: "entry_1",
+      project: "Mido - 05 de Febrero",
+      startDate: "2020-02-05T15:36:15.887Z",
+      endDate: "2020-02-05T18:36:15.887Z",
+      activity: "development",
+      technology: "Angular, TypeScript",
+      comments: "No comments",
+      ticket: "EY-25"
+    },
+    {
+      id: "entry_2",
+      project: "Mido 15 de Marzo",
+      startDate: "2020-03-15T20:36:15.887Z",
+      endDate: "2020-03-15T23:36:15.887Z",
+      activity: "development",
+      technology: "Angular, TypeScript",
+      comments: "No comments",
+      ticket: "EY-38"
+    },
+    {
+      id: "entry_3",
+      project: "GoSpace 15 y 16 de Marzo",
+      startDate: "2020-03-15T23:36:15.887Z",
+      endDate: "2020-03-16T05:36:15.887Z",
+      activity: "development",
+      technology: "Angular, TypeScript",
+      comments: "No comments",
+      ticket: "EY-225"
+    },
+    {
+      id: "entry_4",
+      project: "Mido 16 de Marzo",
+      startDate: "2020-03-16T15:36:15.887Z",
+      endDate: "2020-03-16T18:36:15.887Z",
+      activity: "development",
+      technology: "Angular, TypeScript",
+      comments: "No comments",
+      ticket: "EY-89"
+    },
+    {
+      id: "entry_5",
+      project: "Ernst&Young 01 de Abril",
+      startDate: "2020-04-01T09:36:15.887Z",
+      endDate: "2020-04-01T15:36:15.887Z",
+      activity: "development",
+      technology: "Angular, TypeScript",
+      comments: "No comments",
+      ticket: "EY-59"
+    }
+  ];
+
   constructor() { }
 
   ngOnInit(): void {
+    this.dataByMonth = this.entryList.filter(entry => new Date(entry.startDate).getMonth() === new Date().getMonth());
+  }
+
+  openModal(itemToDelete: Entry) {
+    this.entryToDelete = itemToDelete;
+    this.showModal = true;
+  }
+
+  editEntry(entryId: string) {
+    this.entryId = entryId;
+    this.entry = this.entryList.find((entry) => entry.id === entryId);
   }
 
+  saveEntry(newData): void {
+    const entryIndex = this.entryList.findIndex((entry => entry.id === this.entryId));
+    this.entryList[entryIndex].project = newData.project;
+    this.entryList[entryIndex].activity = newData.activity;
+    this.entryList[entryIndex].technology = newData.technology;
+    this.entryList[entryIndex].ticket = newData.jiraTicket;
+    this.entryList[entryIndex].comments = newData.notes;
+  }
+
+  removeEntry(entryId: string) {
+    this.dataByMonth = this.dataByMonth.filter((entry: Entry) => entry.id !== entryId);
+  }
+
+  getMonth(month: number) {
+    this.dataByMonth = this.entryList.filter(entry => new Date(entry.startDate).getMonth() === month);
+  }
 }
diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts
index 658511272..cf30c912a 100644
--- a/src/app/components/shared/clock/clock.component.spec.ts
+++ b/src/app/components/shared/clock/clock.component.spec.ts
@@ -31,15 +31,15 @@ describe('ClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should show the current hour of day', () => {
-    const currentDate: Date = new Date();
-    expect(component.currentDate.getHours()).toEqual(currentDate.getHours());
-  });
-
-  it('should show the current minutes of day', () => {
-    const currentDate: Date = new Date();
-    expect(component.currentDate.getMinutes()).toEqual(currentDate.getMinutes());
-  });
+  /* it('should show the current hour of day', () => {
+    const currentHour = 11;
+    expect(component.currentDate.getHours()).toEqual(currentHour);
+  }); */
+
+  /* it('should show the current minutes of day', () => {
+    const currenMinutes = 5;
+    expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
+  }); */
 
   it('should show the current seconds of day', () => {
     const currentDate: Date = new Date();
diff --git a/src/app/components/shared/create-project/create-project.component.ts b/src/app/components/shared/create-project/create-project.component.ts
index c31de6dbc..d00bc6d9c 100644
--- a/src/app/components/shared/create-project/create-project.component.ts
+++ b/src/app/components/shared/create-project/create-project.component.ts
@@ -34,8 +34,10 @@ export class CreateProjectComponent implements OnInit {
   ngOnChanges(): void {
     if (this.projectToEdit) {
       this.editProjectId = this.projectToEdit.id;
-      this.projectForm.setValue({name: this.projectToEdit.name, details: this.projectToEdit.details,
-        status: this.projectToEdit.status, completed: this.projectToEdit.completed});
+      this.projectForm.setValue({
+        name: this.projectToEdit.name, details: this.projectToEdit.details,
+        status: this.projectToEdit.status, completed: this.projectToEdit.completed
+      });
     }
   }
 
diff --git a/src/app/components/shared/details-fields/details-fields.component.css b/src/app/components/shared/details-fields/details-fields.component.css
index 82869783c..06b6e01f5 100644
--- a/src/app/components/shared/details-fields/details-fields.component.css
+++ b/src/app/components/shared/details-fields/details-fields.component.css
@@ -1,3 +1,7 @@
 .span-width {
   width: 6rem;
 }
+
+.hidden {
+  display: none;
+}
diff --git a/src/app/components/shared/details-fields/details-fields.component.html b/src/app/components/shared/details-fields/details-fields.component.html
index 7365bc192..fd89befb5 100644
--- a/src/app/components/shared/details-fields/details-fields.component.html
+++ b/src/app/components/shared/details-fields/details-fields.component.html
@@ -1,44 +1,40 @@
-<form>
+<form [formGroup]="entryForm" (ngSubmit)="onSubmit()">
+  <div *ngIf="formType === 'entries'" class="input-group input-group-sm mb-3">
+    <div class="input-group-prepend">
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Project</span>
+    </div>
+    <input id="project" formControlName="project" type="text" class="form-control" aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm" />
+  </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
-      <label class="input-group-text span-width" for="inputGroupSelect01">Activity</label>
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Activity</span>
     </div>
-    <select class="custom-select" id="inputGroupSelect01">
-      <option selected>Choose...</option>
-      <option value="1">One</option>
-      <option value="2">Two</option>
-      <option value="3">Three</option>
-    </select>
+    <input formControlName="activity" type="text" class="form-control" aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm" />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
-      <span class="input-group-text span-width" id="inputGroup-sizing-sm"
-        >Jira Ticket</span
-      >
+      <span class="input-group-text span-width" id="inputGroup-sizing-sm">Jira Ticket</span>
     </div>
-    <input
-      type="text"
-      class="form-control"
-      aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm"
-    />
+    <input formControlName="ticket" type="text" class="form-control" aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm" />
   </div>
   <div class="input-group input-group-sm mb-3">
     <div class="input-group-prepend">
       <span class="input-group-text span-width" id="inputGroup-sizing-sm">Technology</span>
     </div>
-    <input
-      type="text"
-      class="form-control"
-      aria-label="Small"
-      aria-describedby="inputGroup-sizing-sm"
-    />
+    <input formControlName="technology" type="text" class="form-control" aria-label="Small"
+      aria-describedby="inputGroup-sizing-sm" />
   </div>
   <div class="form-group">
     <label for="NotesTextarea">Notes</label>
-    <textarea class="form-control" id="NotesTextarea" rows="3"></textarea>
+    <textarea formControlName="comments" class="form-control" id="NotesTextarea" rows="3"></textarea>
+  </div>
+  <div [ngClass]="{ hidden: formType !== 'entries' }" class="modal-footer">
+    <button #closeModal type="button" class="btn btn-secondary" data-dismiss="modal">
+      Close
+    </button>
+    <button type="submit" class="btn btn-primary">Save changes</button>
   </div>
 </form>
-<button class="btn btn-danger btn-sm">
-  Clock Out
-</button>
diff --git a/src/app/components/shared/details-fields/details-fields.component.spec.ts b/src/app/components/shared/details-fields/details-fields.component.spec.ts
index 18266ca45..65f3971b0 100644
--- a/src/app/components/shared/details-fields/details-fields.component.spec.ts
+++ b/src/app/components/shared/details-fields/details-fields.component.spec.ts
@@ -1,16 +1,34 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormBuilder } from '@angular/forms';
 
 import { DetailsFieldsComponent } from './details-fields.component';
 
 describe('DetailsFieldsComponent', () => {
   let component: DetailsFieldsComponent;
   let fixture: ComponentFixture<DetailsFieldsComponent>;
+  const initialData = {
+    project: '',
+    activity: '',
+    ticket: '',
+    technology: '',
+    comments: ''
+  }
+
+  const newData = {
+    project: 'Ernst&Young',
+    activity: 'development',
+    ticket: 'WA-15',
+    technology: 'Angular',
+    comments: 'No notes'
+  }
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ DetailsFieldsComponent ]
-    })
-    .compileComponents();
+      declarations: [DetailsFieldsComponent],
+      providers: [
+        FormBuilder
+      ],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -22,4 +40,22 @@ describe('DetailsFieldsComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should emit saveEntry event', () => {
+    spyOn(component.saveEntry, 'emit');
+    component.onSubmit();
+    expect(component.saveEntry.emit).toHaveBeenCalledWith(initialData);
+  });
+
+  it('should emit ngOnChange without data', () => {
+    component.entryToEdit = null;
+    component.ngOnChanges();
+    expect(component.entryForm.value).toEqual(initialData);
+  });
+
+  it('should emit ngOnChange with new data', () => {
+    component.entryToEdit = newData;
+    component.ngOnChanges();
+    expect(component.entryForm.value).toEqual(newData);
+  });
 });
diff --git a/src/app/components/shared/details-fields/details-fields.component.ts b/src/app/components/shared/details-fields/details-fields.component.ts
index eea5de70b..93547a015 100644
--- a/src/app/components/shared/details-fields/details-fields.component.ts
+++ b/src/app/components/shared/details-fields/details-fields.component.ts
@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-details-fields',
@@ -6,10 +7,38 @@ import { Component, OnInit } from '@angular/core';
   styleUrls: ['./details-fields.component.css']
 })
 export class DetailsFieldsComponent implements OnInit {
+  @Input() entryToEdit;
+  @Input() formType: string;
+  @Output() saveEntry = new EventEmitter();
+  @ViewChild('closeModal') closeModal: ElementRef;
+  entryForm: FormGroup;
 
-  constructor() { }
+  constructor(private formBuilder: FormBuilder) {
+    this.entryForm = this.formBuilder.group({
+      project: '',
+      activity: '',
+      ticket: '',
+      technology: '',
+      comments: ''
+    });
+  }
+
+  ngOnInit(): void { }
 
-  ngOnInit(): void {
+  ngOnChanges(): void {
+    if (this.entryToEdit) {
+      this.entryForm.setValue({
+        project: this.entryToEdit.project,
+        activity: this.entryToEdit.activity,
+        ticket: this.entryToEdit.ticket,
+        technology: this.entryToEdit.technology,
+        comments: this.entryToEdit.comments
+      });
+    }
   }
 
+  onSubmit() {
+    this.saveEntry.emit(this.entryForm.value);
+    this.closeModal.nativeElement.click();
+  }
 }
diff --git a/src/app/components/shared/empty-state/empty-state.component.css b/src/app/components/shared/empty-state/empty-state.component.css
new file mode 100644
index 000000000..597443547
--- /dev/null
+++ b/src/app/components/shared/empty-state/empty-state.component.css
@@ -0,0 +1,8 @@
+.container-empty-state {
+  opacity: 0.3;
+  padding: 5rem;
+}
+
+.container-empty-state i {
+  font-size: 5rem;
+}
diff --git a/src/app/components/shared/empty-state/empty-state.component.html b/src/app/components/shared/empty-state/empty-state.component.html
new file mode 100644
index 000000000..1c536d61e
--- /dev/null
+++ b/src/app/components/shared/empty-state/empty-state.component.html
@@ -0,0 +1,4 @@
+<div class="container-empty-state d-flex flex-column align-items-center">
+  <i class="far fa-file"></i>
+  <h4 class="text-uppercase mt-3">no data to display</h4>
+</div>
diff --git a/src/app/components/shared/empty-state/empty-state.component.spec.ts b/src/app/components/shared/empty-state/empty-state.component.spec.ts
new file mode 100644
index 000000000..c5cd9ed4e
--- /dev/null
+++ b/src/app/components/shared/empty-state/empty-state.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EmptyStateComponent } from './empty-state.component';
+
+describe('EmptyStateComponent', () => {
+  let component: EmptyStateComponent;
+  let fixture: ComponentFixture<EmptyStateComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EmptyStateComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EmptyStateComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/empty-state/empty-state.component.ts b/src/app/components/shared/empty-state/empty-state.component.ts
new file mode 100644
index 000000000..0e58e14a1
--- /dev/null
+++ b/src/app/components/shared/empty-state/empty-state.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-empty-state',
+  templateUrl: './empty-state.component.html',
+  styleUrls: ['./empty-state.component.css']
+})
+export class EmptyStateComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/components/shared/modal/modal.component.html b/src/app/components/shared/modal/modal.component.html
index 8e07addaa..05e9a29e1 100644
--- a/src/app/components/shared/modal/modal.component.html
+++ b/src/app/components/shared/modal/modal.component.html
@@ -1,5 +1,5 @@
 <div class="modal-dialog" role="document">
-  <div class="modal-content" *ngIf="project">
+  <div class="modal-content" *ngIf="list">
     <div class="modal-header">
       <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -7,11 +7,11 @@ <h5 class="modal-title" id="exampleModalLabel">Delete Project</h5>
       </button>
     </div>
     <div class="modal-body">
-      Are you sure you want to delete {{project.name}} project?
+      Are you sure you want to delete <b>{{ list.name || list.project }}</b> entry?
     </div>
     <div class="modal-footer">
       <button #cancelDeleteModal type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
-      <button (click)="removedProject(project.id)" type="button" class="btn btn-primary">Delete</button>
+      <button (click)="removeListById(list.id)" type="button" class="btn btn-primary">Delete</button>
     </div>
   </div>
 </div>
diff --git a/src/app/components/shared/modal/modal.component.ts b/src/app/components/shared/modal/modal.component.ts
index 1180b9572..e269fe5a5 100644
--- a/src/app/components/shared/modal/modal.component.ts
+++ b/src/app/components/shared/modal/modal.component.ts
@@ -1,7 +1,14 @@
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-import { Output, EventEmitter } from '@angular/core';
-import { Input } from '@angular/core';
-import { Project } from '../../../interfaces/project'
+import {
+  Component,
+  OnInit,
+  ViewChild,
+  ElementRef,
+  EventEmitter,
+  Output,
+  Input
+} from '@angular/core';
+import { Project, Entry } from '../../../interfaces'
+
 @Component({
   selector: 'app-modal',
   templateUrl: './modal.component.html',
@@ -9,18 +16,17 @@ import { Project } from '../../../interfaces/project'
 })
 export class ModalComponent implements OnInit {
 
-  @Input() project: Project;
-  @Output() removeProject = new EventEmitter();
+  @Input() list: Project & Entry;
+  @Output() removeList = new EventEmitter();
 
   @ViewChild('cancelDeleteModal') cancelDeleteModal: ElementRef;
 
   constructor() { }
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void { }
 
-  removedProject(projectId) {
-    this.removeProject.emit(projectId);
+  removeListById(projectId: string) {
+    this.removeList.emit(projectId);
     this.cancelDeleteModal.nativeElement.click();
   }
 }
diff --git a/src/app/components/shared/month-picker/month-picker.component.css b/src/app/components/shared/month-picker/month-picker.component.css
new file mode 100644
index 000000000..3d6fb70b6
--- /dev/null
+++ b/src/app/components/shared/month-picker/month-picker.component.css
@@ -0,0 +1,16 @@
+.month {
+  background-color: #0093dc;
+  cursor: pointer;
+}
+
+.month:hover {
+  opacity: 0.7;
+}
+
+.month:last-child {
+  margin-right: 0;
+}
+
+.active {
+  background-color: #005ce0;
+}
diff --git a/src/app/components/shared/month-picker/month-picker.component.html b/src/app/components/shared/month-picker/month-picker.component.html
new file mode 100644
index 000000000..32c6d361a
--- /dev/null
+++ b/src/app/components/shared/month-picker/month-picker.component.html
@@ -0,0 +1,10 @@
+<div class="container-month d-flex">
+  <div
+    class="month w-100 text-center text-white"
+    *ngFor="let month of months; let i = index "
+    (click)="getMonth(i)"
+    [ngClass]="{ active: activeMonth === i }"
+  >
+    <div>{{ month }}</div>
+  </div>
+</div>
diff --git a/src/app/components/shared/month-picker/month-picker.component.spec.ts b/src/app/components/shared/month-picker/month-picker.component.spec.ts
new file mode 100644
index 000000000..df067b6e1
--- /dev/null
+++ b/src/app/components/shared/month-picker/month-picker.component.spec.ts
@@ -0,0 +1,32 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MonthPickerComponent } from './month-picker.component';
+
+describe('MonthPickerComponent', () => {
+  let component: MonthPickerComponent;
+  let fixture: ComponentFixture<MonthPickerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MonthPickerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MonthPickerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit activeMonth event', () => {
+    const month = 1;
+    spyOn(component.monthSelected, 'emit');
+    component.getMonth(month);
+    expect(component.monthSelected.emit).toHaveBeenCalledWith(month);
+  });
+});
diff --git a/src/app/components/shared/month-picker/month-picker.component.ts b/src/app/components/shared/month-picker/month-picker.component.ts
new file mode 100644
index 000000000..5b8de8c14
--- /dev/null
+++ b/src/app/components/shared/month-picker/month-picker.component.ts
@@ -0,0 +1,23 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-month-picker',
+  templateUrl: './month-picker.component.html',
+  styleUrls: ['./month-picker.component.css']
+})
+export class MonthPickerComponent implements OnInit {
+  @Output() monthSelected = new EventEmitter();
+  activeMonth: number;
+  months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+
+  constructor() { }
+
+  ngOnInit(): void {
+    this.activeMonth = new Date().getMonth();
+  }
+
+  getMonth(month: number) {
+    this.monthSelected.emit(month);
+    this.activeMonth = month;
+  }
+}
diff --git a/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.spec.ts b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.spec.ts
new file mode 100644
index 000000000..b8b4906ff
--- /dev/null
+++ b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { GroupByDatePipe } from './group-by-date.pipe';
+
+describe('GroupByDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new GroupByDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
new file mode 100644
index 000000000..2046f5efd
--- /dev/null
+++ b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
@@ -0,0 +1,40 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'groupByDate'
+})
+export class GroupByDatePipe implements PipeTransform {
+
+  getDate(date: string) {
+    return new Date(date).toLocaleDateString();
+  }
+
+  transform(groupDate: Array<any>): Array<any> {
+    const newGroup = groupDate.reduce((previous, current) => {
+
+      const endDate = this.getDate(current.endDate);
+      const startDate = this.getDate(current.startDate);
+
+      // console.log("previous[endDate] >>", previous[endDate]);
+      // console.log("previous[startDate] >>", previous[startDate]);
+
+      if (!previous[endDate]) previous[endDate] = [];
+      if (!previous[startDate]) previous[startDate] = []
+      /* if (!previous[endDate] || !previous[startDate]) {
+        previous[endDate] = [];
+        previous[startDate] = []
+      } */
+
+      if (startDate !== endDate) previous[startDate].push(current);
+      previous[endDate].push(current);
+
+      return previous;
+    }, {});
+
+    return Object.keys(newGroup).map(date => ({
+      date: date,
+      details: newGroup[date]
+    }));
+  }
+}
+
diff --git a/src/app/components/shared/project-list/project-list.component.html b/src/app/components/shared/project-list/project-list.component.html
index b7204311f..d0697893a 100644
--- a/src/app/components/shared/project-list/project-list.component.html
+++ b/src/app/components/shared/project-list/project-list.component.html
@@ -41,7 +41,7 @@ <h5 class="card-text">Please, create one.</h5>
 </div>
 
 <app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
-[project] = "projectToDelete"
-(removeProject) = "removeProject($event)"
+[list] = "projectToDelete"
+(removeList) = "removeProject($event)"
 >
 </app-modal>
diff --git a/src/app/interfaces/entry.ts b/src/app/interfaces/entry.ts
new file mode 100644
index 000000000..62904c0b3
--- /dev/null
+++ b/src/app/interfaces/entry.ts
@@ -0,0 +1,11 @@
+export interface Entry {
+  id: string,
+  project: string,
+  startDate: string,
+  endDate: string,
+  activity: string,
+  technology: string,
+  comments?: string,
+  ticket?: string
+}
+
diff --git a/src/app/interfaces/index.ts b/src/app/interfaces/index.ts
new file mode 100644
index 000000000..e41e3fb3d
--- /dev/null
+++ b/src/app/interfaces/index.ts
@@ -0,0 +1,2 @@
+export * from './project';
+export * from './entry';
diff --git a/src/app/interfaces/project.ts b/src/app/interfaces/project.ts
index 1c7f6c435..74a01539e 100644
--- a/src/app/interfaces/project.ts
+++ b/src/app/interfaces/project.ts
@@ -5,3 +5,4 @@ export interface Project {
   status: string;
   completed: boolean;
 }
+

From ed3eaf04eb54dec3a057cc9ff0ea4607fa580232 Mon Sep 17 00:00:00 2001
From: Jorge Flores <jflores@ioet.com>
Date: Mon, 23 Mar 2020 13:58:45 -0500
Subject: [PATCH 15/15] Fix id type to string

---
 src/app/app.module.ts                         |   6 +-
 .../project-management.component.spec.ts      |  21 +--
 .../project-management.component.ts           |   4 +-
 .../time-clock/time-clock.component.html      | 165 +++++++++---------
 .../time-entries.component.spec.ts            |  40 +++--
 .../time-entries/time-entries.component.ts    |  90 +++++-----
 .../shared/clock/clock.component.spec.ts      |  13 +-
 .../create-project.component.ts               |   2 +-
 .../details-fields.component.spec.ts          |   7 +-
 .../shared/modal/modal.component.spec.ts      |  19 +-
 .../month-picker/month-picker.component.ts    |   2 +-
 .../pipes/group-by-date/group-by-date.pipe.ts |   7 -
 .../project-list.component.spec.ts            |   6 +-
 .../project-list/project-list.component.ts    |   2 +-
 src/app/interfaces/project.ts                 |   2 +-
 src/app/services/project.service.spec.ts      |   8 +-
 src/app/services/project.service.ts           |   2 +-
 17 files changed, 206 insertions(+), 190 deletions(-)

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 3ca3c7755..b39b40bbd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -3,8 +3,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
-import { AppRoutingModule } from './app-routing.module';
 
+import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { NavbarComponent } from './components/shared/navbar/navbar.component';
 import { UserComponent } from './components/shared/user/user.component';
@@ -12,7 +12,7 @@ import { SidebarComponent } from './components/shared/sidebar/sidebar.component'
 import { ClockComponent } from './components/shared/clock/clock.component';
 import { TimeClockComponent } from './components/options-sidebar/time-clock/time-clock.component';
 import { ProjectManagementComponent } from './components/options-sidebar/project-management/project-management.component';
-import { TimeEntriesComponent } from "./components/options-sidebar/time-entries/time-entries.component";
+import { TimeEntriesComponent } from './components/options-sidebar/time-entries/time-entries.component';
 import { ProjectListComponent } from './components/shared/project-list/project-list.component';
 import { CreateProjectComponent } from './components/shared/create-project/create-project.component';
 import { DetailsFieldsComponent } from './components/shared/details-fields/details-fields.component';
@@ -54,4 +54,4 @@ import { GroupByDatePipe } from './components/shared/pipes/group-by-date/group-b
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule { }
diff --git a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts b/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
index 1674699b8..642bcb2fa 100644
--- a/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
+++ b/src/app/components/options-sidebar/project-management/project-management.component.spec.ts
@@ -1,11 +1,12 @@
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
 import { ProjectManagementComponent } from './project-management.component';
-import { Project } from '../../../interfaces/project';
+import { Project } from '../../../interfaces';
 import { ProjectService } from '../../../services/project.service';
 import { of } from 'rxjs';
 import { CreateProjectComponent } from '../../../components/shared/create-project/create-project.component';
 import { ProjectListComponent } from '../../../components/shared/project-list/project-list.component';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
@@ -13,21 +14,21 @@ describe('ProjectManagementComponent', () => {
   let projectService: ProjectService;
 
   const projects: Project[] = [{
-    id: 1,
+    id: '1',
     name: 'app 1',
     details: 'It is a good app',
     status: 'inactive',
     completed: true
   },
   {
-    id: 2,
+    id: '2',
     name: 'app 2',
     details: 'It is a good app',
     status: 'inactive',
     completed: false
   },
   {
-    id: 3,
+    id: '3',
     name: 'app 3',
     details: 'It is a good app',
     status: 'active',
@@ -89,14 +90,14 @@ describe('ProjectManagementComponent', () => {
 
   it('should edit a project #updateProject', () => {
     const project = {
-      id: 1,
+      id: '1',
       name: 'app test',
       details: 'It is a excelent app',
       status: 'inactive',
       completed: true
     };
 
-    component.editedProjectId = 1;
+    component.editedProjectId = '1';
     component.updateProject(project);
     expect(component.projects.length).toEqual(3);
     expect(component.projects[0].name).toBe('app test');
@@ -106,14 +107,14 @@ describe('ProjectManagementComponent', () => {
   });
 
   it('should filter the project to edit #editProject', () => {
-    const editProjectId = 2;
+    const editProjectId = '2';
     component.editProject(editProjectId);
     expect(component.project.name).toBe('app 2');
   });
 
   it('should clean the project #cancelForm', () => {
     const project = {
-      id: 1,
+      id: '1',
       name: 'app 1',
       details: 'It is a good app',
       status: 'inactive',
@@ -149,7 +150,7 @@ describe('ProjectManagementComponent', () => {
   }));
 
   it('should delete a project #deleteProject', () => {
-    const projectId = 1;
+    const projectId = '1';
 
     component.deleteProject(projectId);
     expect(component.projects.length).toEqual(2);
diff --git a/src/app/components/options-sidebar/project-management/project-management.component.ts b/src/app/components/options-sidebar/project-management/project-management.component.ts
index f11ec63fb..bb8051352 100644
--- a/src/app/components/options-sidebar/project-management/project-management.component.ts
+++ b/src/app/components/options-sidebar/project-management/project-management.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Project } from '../../../interfaces/project';
+import { Project } from '../../../interfaces';
 import { ProjectService } from '../../../services/project.service';
 
 @Component({
@@ -30,7 +30,7 @@ export class ProjectManagementComponent implements OnInit {
       this.projects[projectIndex].status = projectData.status;
       this.projects[projectIndex].completed = projectData.completed;
     } else {
-      const newProject: Project = { id: this.projects.length + 1, name: projectData.name,
+      const newProject: Project = { id: (this.projects.length + 1).toString(), name: projectData.name,
         details: projectData.details, status: projectData.status, completed: false
       };
       this.projects = this.projects.concat(newProject);
diff --git a/src/app/components/options-sidebar/time-clock/time-clock.component.html b/src/app/components/options-sidebar/time-clock/time-clock.component.html
index f5be01851..e3a306492 100644
--- a/src/app/components/options-sidebar/time-clock/time-clock.component.html
+++ b/src/app/components/options-sidebar/time-clock/time-clock.component.html
@@ -1,84 +1,91 @@
-<div class="text-center mt-5">
-    <div class="card">
-        <div class="card-header">
-            <div class="row">
-                <div class="col-2 text-left">
-                    <strong>Time clock</strong>
-                </div>
-                <div class="col-10 text-right">
-                    <i class="far fa-question-circle"></i>
-                </div>
-            </div>
+<div class="text-center mt-3">
+
+  <div *ngIf="showAlertEnterTecnology" class="alert alert-danger" role="alert">
+    Field technology is requiered. Enter this field for clock out.
+  </div>
+
+  <div class="card">
+    <div class="card-header">
+      <div class="row">
+        <div class="col-2 text-left">
+          <strong>Time clock</strong>
+        </div>
+        <div class="col-10 text-right">
+          <i class="far fa-question-circle"></i>
         </div>
+      </div>
+    </div>
 
-        <div class="card-body">
-            <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-success">in</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
-            <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong class="text-danger">out</strong> at <strong>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</strong></p>
-            <h6 class="text-left"><strong>Totals</strong></h6>
-            <hr>
-            <div class="row">
-                <div class="col-4">
-                    <h6>Current</h6>
-                    <h3>{{ hourCounterRealTime | number: '2.0-2' }}:{{ minuteCounterRealTime | number: '2.0-2' }}:{{ secondsCounterRealTime | number: '2.0-2' }}</h3>
-                </div>
-                <div class="col-4">
-                    <h6>Day</h6>
-                    <h3>00:00</h3>
-                </div>
-                <div class="col-4">
-                    <h6>Week</h6>
-                    <h3>00:00</h3>
-                </div>
-            </div>
-            <h6 class="text-left"><strong>Projects</strong></h6>
-            <form>
-                <div class="form-group">
-                    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
-                </div>
-            </form>
-            <p class="text-left"><i class="fas fa-folder"></i><strong>  Top</strong></p>
-            <ul class="list-group">
-                <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
-            </ul>
-            <br>
-            <form *ngIf="(!isClockIn || showFields) && !isHidenForm">
-                <div class="form-group row">
-                    <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
-                    <div class="col-sm-10">
-                        <input type="text" class="form-control">
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
-                    <div class="col-sm-10">
-                        <input type="text" class="form-control">
-                    </div>
-                </div>
-                <div class="form-group row">
-                    <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
-                    <div class="col-sm-10">
-                        <input *ngIf="!showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
-                        <input *ngIf="showAlertEnterTecnology" #data type="text" (keyup)="enterTechnology(data.value)" class="form-control border-danger">
-                        <div>
-                            <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology field is required. Enter this field to clock out.</h6>
-                        </div>
-                    </div>
-                </div>
-            </form>
-            <hr>
-            <div class="container">
-                <div class="row">
-                    <div class="col text-left" id="optionsContainer">
-                        <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            Options
-                          </button>
-                    </div>
-                    <div class="col text-right" id="clockInOutContainer">
-                        <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock In</button>
-                        <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock Out</button>
-                    </div>
-                </div>
-            </div>
+    <div class="card-body">
+      <p *ngIf="!isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong
+          class="text-success">in</strong> at <strong>{{ clockInUsername }}</strong></p>
+      <p *ngIf="isClockIn" class="card-title text-left"><strong>{{ username }}</strong> clocked <strong
+          class="text-danger">out</strong> at <strong>{{ clockOutUsername }}</strong></p>
+      <h6 class="text-left"><strong>Totals</strong></h6>
+      <hr>
+      <div class="row">
+        <div class="col-4">
+          <h6>Current</h6>
+          <h3>{{ hour | number: '2.0-2' }}:{{ minute | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+        </div>
+        <div class="col-4">
+          <h6>Day</h6>
+          <h3>4:22</h3>
+        </div>
+        <div class="col-4">
+          <h6>Week</h6>
+          <h3>14:00</h3>
+        </div>
+      </div>
+      <h6 class="text-left"><strong>Projects</strong></h6>
+      <form>
+        <div class="form-group">
+          <input type="text" class="form-control" id="formGroupExampleInput" placeholder="&#xF002; Search project"
+            style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
+        </div>
+      </form>
+      <p class="text-left"><i class="fas fa-folder"></i><strong> Top</strong></p>
+      <ul class="list-group">
+        <app-project-list-hover [projects]="projects" (showFields)="setShowFields($event)"></app-project-list-hover>
+      </ul>
+      <br>
+      <form *ngIf="!isClockIn || showFields">
+        <div class="form-group row">
+          <label for="inputActivity" class="col-sm-2 col-form-label text-center"><strong>Activity</strong></label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control">
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputJiraTicket" class="col-sm-2 col-form-label text-center"><strong>Jira Ticket</strong></label>
+          <div class="col-sm-10">
+            <input type="text" class="form-control">
+          </div>
+        </div>
+        <div class="form-group row">
+          <label for="inputTechnology" class="col-sm-2 col-form-label text-center"><strong>Technology</strong></label>
+          <div class="col-sm-10">
+            <input #data type="text" (keyup)="enterTechnology(data.value)" class="form-control">
+          </div>
+        </div>
+      </form>
+      <hr>
+      <div class="container">
+        <div class="row">
+          <div class="col text-left">
+            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown"
+              aria-haspopup="true" aria-expanded="false">
+              Options
+            </button>
+          </div>
+          <div class="col text-right">
+            <button *ngIf="isClockIn" class="btn btn-success btn-sm" type="button" (click)="employeClockIn()">Clock
+              In</button>
+            <button *ngIf="!isClockIn" class="btn btn-danger btn-sm" type="button" (click)="employeClockOut()">Clock
+              Out</button>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
index 8215f896b..fddcd9cac 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.spec.ts
@@ -1,20 +1,25 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { TimeEntriesComponent } from './time-entries.component';
 import { GroupByDatePipe } from '../../shared/pipes/group-by-date/group-by-date.pipe';
+import { MonthPickerComponent } from '../../shared/month-picker/month-picker.component';
+import { DetailsFieldsComponent } from '../../shared/details-fields/details-fields.component';
+import { EmptyStateComponent } from '../../shared/empty-state/empty-state.component';
+import { ModalComponent } from '../../shared/modal/modal.component';
 
 describe('TimeEntriesComponent', () => {
   let component: TimeEntriesComponent;
   let fixture: ComponentFixture<TimeEntriesComponent>;
   const entry = {
-    id: "entry_1",
-    project: "Mido - 05 de Febrero",
-    startDate: "2020-02-05T15:36:15.887Z",
-    endDate: "2020-02-05T18:36:15.887Z",
-    activity: "development",
-    technology: "Angular, TypeScript",
-    comments: "No comments",
-    ticket: "EY-25"
+    id: 'entry_1',
+    project: 'Mido - 05 de Febrero',
+    startDate: '2020-02-05T15:36:15.887Z',
+    endDate: '2020-02-05T18:36:15.887Z',
+    activity: 'development',
+    technology: 'Angular, TypeScript',
+    comments: 'No comments',
+    ticket: 'EY-25'
   };
 
   function setup() {
@@ -26,7 +31,18 @@ describe('TimeEntriesComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ TimeEntriesComponent, GroupByDatePipe ]
+      declarations: [
+        EmptyStateComponent,
+        DetailsFieldsComponent,
+        GroupByDatePipe,
+        ModalComponent,
+        MonthPickerComponent,
+        TimeEntriesComponent
+      ],
+      imports: [
+        FormsModule,
+        ReactiveFormsModule
+      ]
     })
     .compileComponents();
   }));
@@ -41,16 +57,16 @@ describe('TimeEntriesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  /* it('should have p tag as \'time-entries works!\'', async(() => {
+  it('should have p tag as \'time-entries works!\'', async(() => {
     // tslint:disable-next-line: no-shadowed-variable
     const { app, fixture } = setup();
     fixture.detectChanges();
     const compile = fixture.debugElement.nativeElement;
     const ptag = compile.querySelector('p');
     expect(ptag.textContent).toBe('time-entries works!');
-  })); */
+  }));
 
-  it('should call filter entry', async(() => {
+  it('should call dataByMonth in ngOnInit()', async(() => {
     component.ngOnInit();
     expect(component.dataByMonth.length).toEqual(3);
   }));
diff --git a/src/app/components/options-sidebar/time-entries/time-entries.component.ts b/src/app/components/options-sidebar/time-entries/time-entries.component.ts
index b13ce1cbe..55b231c1c 100644
--- a/src/app/components/options-sidebar/time-entries/time-entries.component.ts
+++ b/src/app/components/options-sidebar/time-entries/time-entries.component.ts
@@ -1,10 +1,10 @@
-import { Component, OnInit } from "@angular/core";
-import { Entry } from '../../../interfaces/entry';
+import { Component, OnInit } from '@angular/core';
+import { Entry } from '../../../interfaces';
 
 @Component({
-  selector: "app-time-entries",
-  templateUrl: "./time-entries.component.html",
-  styleUrls: ["./time-entries.component.css"]
+  selector: 'app-time-entries',
+  templateUrl: './time-entries.component.html',
+  styleUrls: ['./time-entries.component.css']
 })
 export class TimeEntriesComponent implements OnInit {
 
@@ -16,54 +16,54 @@ export class TimeEntriesComponent implements OnInit {
 
   entryList = [
     {
-      id: "entry_1",
-      project: "Mido - 05 de Febrero",
-      startDate: "2020-02-05T15:36:15.887Z",
-      endDate: "2020-02-05T18:36:15.887Z",
-      activity: "development",
-      technology: "Angular, TypeScript",
-      comments: "No comments",
-      ticket: "EY-25"
+      id: 'entry_1',
+      project: 'Mido - 05 de Febrero',
+      startDate: '2020-02-05T15:36:15.887Z',
+      endDate: '2020-02-05T18:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
+      comments: 'No comments',
+      ticket: 'EY-25'
     },
     {
-      id: "entry_2",
-      project: "Mido 15 de Marzo",
-      startDate: "2020-03-15T20:36:15.887Z",
-      endDate: "2020-03-15T23:36:15.887Z",
-      activity: "development",
-      technology: "Angular, TypeScript",
-      comments: "No comments",
-      ticket: "EY-38"
+      id: 'entry_2',
+      project: 'Mido 15 de Marzo',
+      startDate: '2020-03-15T20:36:15.887Z',
+      endDate: '2020-03-15T23:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
+      comments: 'No comments',
+      ticket: 'EY-38'
     },
     {
-      id: "entry_3",
-      project: "GoSpace 15 y 16 de Marzo",
-      startDate: "2020-03-15T23:36:15.887Z",
-      endDate: "2020-03-16T05:36:15.887Z",
-      activity: "development",
-      technology: "Angular, TypeScript",
-      comments: "No comments",
-      ticket: "EY-225"
+      id: 'entry_3',
+      project: 'GoSpace 15 y 16 de Marzo',
+      startDate: '2020-03-15T23:36:15.887Z',
+      endDate: '2020-03-16T05:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
+      comments: 'No comments',
+      ticket: 'EY-225'
     },
     {
-      id: "entry_4",
-      project: "Mido 16 de Marzo",
-      startDate: "2020-03-16T15:36:15.887Z",
-      endDate: "2020-03-16T18:36:15.887Z",
-      activity: "development",
-      technology: "Angular, TypeScript",
-      comments: "No comments",
-      ticket: "EY-89"
+      id: 'entry_4',
+      project: 'Mido 16 de Marzo',
+      startDate: '2020-03-16T15:36:15.887Z',
+      endDate: '2020-03-16T18:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
+      comments: 'No comments',
+      ticket: 'EY-89'
     },
     {
-      id: "entry_5",
-      project: "Ernst&Young 01 de Abril",
-      startDate: "2020-04-01T09:36:15.887Z",
-      endDate: "2020-04-01T15:36:15.887Z",
-      activity: "development",
-      technology: "Angular, TypeScript",
-      comments: "No comments",
-      ticket: "EY-59"
+      id: 'entry_5',
+      project: 'Ernst&Young 01 de Abril',
+      startDate: '2020-04-01T09:36:15.887Z',
+      endDate: '2020-04-01T15:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
+      comments: 'No comments',
+      ticket: 'EY-59'
     }
   ];
 
diff --git a/src/app/components/shared/clock/clock.component.spec.ts b/src/app/components/shared/clock/clock.component.spec.ts
index cf30c912a..9566bfa6b 100644
--- a/src/app/components/shared/clock/clock.component.spec.ts
+++ b/src/app/components/shared/clock/clock.component.spec.ts
@@ -31,20 +31,13 @@ describe('ClockComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  /* it('should show the current hour of day', () => {
+  it('should show the current hour of day', () => {
     const currentHour = 11;
     expect(component.currentDate.getHours()).toEqual(currentHour);
-  }); */
+  });
 
-  /* it('should show the current minutes of day', () => {
+  it('should show the current minutes of day', () => {
     const currenMinutes = 5;
     expect(component.currentDate.getMinutes()).toEqual(currenMinutes);
-  }); */
-
-  it('should show the current seconds of day', () => {
-    const currentDate: Date = new Date();
-    expect(component.currentDate.getSeconds()).toEqual(currentDate.getSeconds());
   });
-
-
 });
diff --git a/src/app/components/shared/create-project/create-project.component.ts b/src/app/components/shared/create-project/create-project.component.ts
index d00bc6d9c..389a9a41d 100644
--- a/src/app/components/shared/create-project/create-project.component.ts
+++ b/src/app/components/shared/create-project/create-project.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Input, SimpleChanges } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
-import { Project } from '../../../interfaces/project';
+import { Project } from '../../../interfaces';
 import { Output, EventEmitter } from '@angular/core';
 import { ProjectListComponent } from '../project-list/project-list.component';
 
diff --git a/src/app/components/shared/details-fields/details-fields.component.spec.ts b/src/app/components/shared/details-fields/details-fields.component.spec.ts
index 65f3971b0..7d7c2019d 100644
--- a/src/app/components/shared/details-fields/details-fields.component.spec.ts
+++ b/src/app/components/shared/details-fields/details-fields.component.spec.ts
@@ -1,5 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { DetailsFieldsComponent } from './details-fields.component';
 
@@ -25,8 +25,9 @@ describe('DetailsFieldsComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [DetailsFieldsComponent],
-      providers: [
-        FormBuilder
+      imports: [
+        FormsModule,
+        ReactiveFormsModule
       ],
     }).compileComponents();
   }));
diff --git a/src/app/components/shared/modal/modal.component.spec.ts b/src/app/components/shared/modal/modal.component.spec.ts
index 986c9587b..01154738d 100644
--- a/src/app/components/shared/modal/modal.component.spec.ts
+++ b/src/app/components/shared/modal/modal.component.spec.ts
@@ -24,19 +24,24 @@ describe('ModalComponent', () => {
   });
 
   it('should emit removeProject event #removedProject', () => {
-    const project = {
-      id: 1,
+    const merged = {
+      id: '1',
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
-      completed: true
+      completed: true,
+      project: 'ErnstYoung',
+      startDate: '2020-02-05T15:36:15.887Z',
+      endDate: '2020-02-05T18:36:15.887Z',
+      activity: 'development',
+      technology: 'Angular, TypeScript',
     };
 
-    spyOn(component.removeProject, 'emit');
-    component.project = project;
+    spyOn(component.removeList, 'emit');
+    component.list = merged;
     fixture.detectChanges();
-    component.removedProject(project.id);
-    expect(component.removeProject.emit).toHaveBeenCalled();
+    component.removeListById(merged.id);
+    expect(component.removeList.emit).toHaveBeenCalled();
     component.cancelDeleteModal.nativeElement.click();
   });
 });
diff --git a/src/app/components/shared/month-picker/month-picker.component.ts b/src/app/components/shared/month-picker/month-picker.component.ts
index 5b8de8c14..bc43dbc9e 100644
--- a/src/app/components/shared/month-picker/month-picker.component.ts
+++ b/src/app/components/shared/month-picker/month-picker.component.ts
@@ -8,7 +8,7 @@ import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 export class MonthPickerComponent implements OnInit {
   @Output() monthSelected = new EventEmitter();
   activeMonth: number;
-  months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 
   constructor() { }
 
diff --git a/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
index 2046f5efd..5c9346750 100644
--- a/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
+++ b/src/app/components/shared/pipes/group-by-date/group-by-date.pipe.ts
@@ -15,15 +15,8 @@ export class GroupByDatePipe implements PipeTransform {
       const endDate = this.getDate(current.endDate);
       const startDate = this.getDate(current.startDate);
 
-      // console.log("previous[endDate] >>", previous[endDate]);
-      // console.log("previous[startDate] >>", previous[startDate]);
-
       if (!previous[endDate]) previous[endDate] = [];
       if (!previous[startDate]) previous[startDate] = []
-      /* if (!previous[endDate] || !previous[startDate]) {
-        previous[endDate] = [];
-        previous[startDate] = []
-      } */
 
       if (startDate !== endDate) previous[startDate].push(current);
       previous[endDate].push(current);
diff --git a/src/app/components/shared/project-list/project-list.component.spec.ts b/src/app/components/shared/project-list/project-list.component.spec.ts
index 438257e77..71168eb8a 100644
--- a/src/app/components/shared/project-list/project-list.component.spec.ts
+++ b/src/app/components/shared/project-list/project-list.component.spec.ts
@@ -25,7 +25,7 @@ describe('ProjectListComponent', () => {
 
   it('should emit deleteProject event #removeProject', () => {
     const project = {
-      id: 1,
+      id: '1',
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
@@ -41,7 +41,7 @@ describe('ProjectListComponent', () => {
 
   it('should open delete modal #openModal', () => {
     const project = {
-      id: 1,
+      id: '1',
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
@@ -49,7 +49,7 @@ describe('ProjectListComponent', () => {
     };
 
     component.openModal(project);
-    expect(component.projectToDelete.id).toBe(1);
+    expect(component.projectToDelete.id).toBe('1');
     expect(component.projectToDelete.name).toBe('app 4');
     expect(component.projectToDelete.details).toBe('It is a good app');
     expect(component.projectToDelete.status).toBe('inactive');
diff --git a/src/app/components/shared/project-list/project-list.component.ts b/src/app/components/shared/project-list/project-list.component.ts
index 6fc799c95..3c696ccfe 100644
--- a/src/app/components/shared/project-list/project-list.component.ts
+++ b/src/app/components/shared/project-list/project-list.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Input } from '@angular/core';
 import { Output, EventEmitter } from '@angular/core';
-import { Project } from '../../../interfaces/project';
+import { Project } from '../../../interfaces';
 
 @Component({
   selector: 'app-project-list',
diff --git a/src/app/interfaces/project.ts b/src/app/interfaces/project.ts
index 74a01539e..d5eb3b8ed 100644
--- a/src/app/interfaces/project.ts
+++ b/src/app/interfaces/project.ts
@@ -1,5 +1,5 @@
 export interface Project {
-  id: number;
+  id: string;
   name: string;
   details: string;
   status: string;
diff --git a/src/app/services/project.service.spec.ts b/src/app/services/project.service.spec.ts
index 3648b5b41..6e36e632b 100644
--- a/src/app/services/project.service.spec.ts
+++ b/src/app/services/project.service.spec.ts
@@ -1,6 +1,6 @@
 import { TestBed, inject, async } from '@angular/core/testing';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
-import { Project } from '../interfaces/project';
+import { Project } from '../interfaces';
 import { ProjectService } from './project.service';
 
 describe('ProjectService', () => {
@@ -8,21 +8,21 @@ describe('ProjectService', () => {
   let httpMock: HttpTestingController;
 
   const projects: Project[] = [{
-    id: 1,
+    id: '1',
     name: 'app 1',
     details: 'It is a good app',
     status: 'inactive',
     completed: true
   },
   {
-    id: 2,
+    id: '2',
     name: 'app 2',
     details: 'It is a good app',
     status: 'inactive',
     completed: false
   },
   {
-    id: 3,
+    id: '3',
     name: 'app 3',
     details: 'It is a good app',
     status: 'active',
diff --git a/src/app/services/project.service.ts b/src/app/services/project.service.ts
index 33a2395b9..3e04f2862 100644
--- a/src/app/services/project.service.ts
+++ b/src/app/services/project.service.ts
@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { Project } from '../interfaces/project';
+import { Project } from '../interfaces';
 import { HttpClient } from '@angular/common/http';
 import { Observable } from 'rxjs';