#3 added project service in list

src/app/app.module.ts

@@ -49,7 +49,7 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
     CreateActivityComponent,
     ActivityListComponent,
     FilterProjectPipe,
-    SearchProjectComponent
+    SearchProjectComponent,
   ],
   imports: [
     CommonModule,

src/app/modules/shared/pipes/filter-project/filter-project.pipe.spec.ts

@@ -5,4 +5,8 @@ describe('FilterProjectPipe', () => {
     const pipe = new FilterProjectPipe();
     expect(pipe).toBeTruthy();
   });
+
+  it('test method of pipe', () => {
+    expect(new FilterProjectPipe().transform([], '')).toEqual([]);
+  });
 });

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html

@@ -1,7 +1,10 @@
 <app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
 <ul class="list-group content-projects">
-  <li class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" *ngFor="let item of projects | filterProject:filterProjects;  let i = index" (mouseenter)="showButton = i" (mouseleave)="showButton = -1" (click)="clockIn(item.id)" [ngClass]="{ active: selectedId === item.id }">
-    {{ item.name }}
-    <span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
-  </li>
+  <div *ngFor="let item of listProjects | filterProject:filterProjects;  let i = index" class="container">
+    <li *ngIf="item.status === 'Active'" class="list-group-item list-group-item-action d-flex justify-content-between align-items-center" (mouseenter)="showButton = i" (mouseleave)="showButton = -1" (click)="clockIn(item.id)" [ngClass]="{ active: selectedId === item.id }">
+      {{ item.name }}
+      <span *ngIf="showButton != i" class="badge badge-success">{{ item.status }}</span>
+      <span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
+    </li>
+  </div>
 </ul>

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.spec.ts

@@ -1,15 +1,18 @@
 import { async, ComponentFixture, TestBed, inject } from '@angular/core/testing';
 
 import { ProjectListHoverComponent } from './project-list-hover.component';
-import { FilterProjectPipe } from 'src/app/modules/shared/pipes/filter-project/filter-project.pipe';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { ProjectService } from 'src/app/modules/project-management/services/project.service';
 
 describe('ProjectListHoverComponent', () => {
   let component: ProjectListHoverComponent;
   let fixture: ComponentFixture<ProjectListHoverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProjectListHoverComponent, FilterProjectPipe]
+      imports: [HttpClientTestingModule],
+      declarations: [ProjectListHoverComponent],
+      providers: [ProjectService]
     }).compileComponents();
   }));
 
@@ -19,6 +22,16 @@ describe('ProjectListHoverComponent', () => {
     fixture.detectChanges();
   });
 
+  it('should be created', () => {
+    const service: ProjectService = TestBed.get(ProjectService);
+    expect(service).toBeTruthy();
+  });
+
+  it('should have add function', () => {
+    const service: ProjectService = TestBed.get(ProjectService);
+    expect(service.getProjects).toBeTruthy();
+  });
+
   it('should create', () => {
     expect(component).toBeTruthy();
   });

src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.ts

@@ -16,11 +16,13 @@ export class ProjectListHoverComponent implements OnInit {
   filterProjects: string = '';
   listProjects: Project[] = [];
 
-  constructor() {
+  constructor(private projectService: ProjectService) {
     this.showButton = -1;
   }
 
-  ngOnInit(): void { }
+  ngOnInit(): void {
+    this.projectService.getProjects().subscribe(data => this.listProjects = data);
+  }
 
   clockIn(id: string) {
     this.selectedId = id;

src/app/modules/time-clock/pages/time-clock.component.spec.ts

@@ -3,7 +3,8 @@ import { DebugElement, inject } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TimeClockComponent } from './time-clock.component';
 import { ProjectListHoverComponent } from '../components';
-import { FilterProjectPipe } from '../../shared/pipes/filter-project/filter-project.pipe';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { ProjectService } from '../../project-management/services/project.service';
 
 describe('TimeClockComponent', () => {
   let component: TimeClockComponent;
@@ -12,7 +13,9 @@ describe('TimeClockComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TimeClockComponent, ProjectListHoverComponent, FilterProjectPipe]
+      imports: [HttpClientTestingModule],
+      declarations: [TimeClockComponent, ProjectListHoverComponent],
+      providers: [ProjectService]
     }).compileComponents();
   }));
 
@@ -24,6 +27,16 @@ describe('TimeClockComponent', () => {
   });
 
 
+  it('should be created', () => {
+    const service: ProjectService = TestBed.get(ProjectService);
+    expect(service).toBeTruthy();
+  });
+
+  it('should have add function', () => {
+    const service: ProjectService = TestBed.get(ProjectService);
+    expect(service.getProjects).toBeTruthy();
+  });
+
   it('should be created', () => {
     expect(component).toBeTruthy();
   });