#3 added project service in list

Author: daros10

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';
 import { NavbarComponent } from './modules/shared/components/navbar/navbar.component';
@@ -27,7 +26,6 @@ import { CreateActivityComponent } from './modules/activities-management/compone
 import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-project.pipe';
 import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 
-
 @NgModule({
   declarations: [
     AppComponent,
@@ -51,7 +49,7 @@ import { SearchProjectComponent } from './modules/shared/components/search-proje
     CreateActivityComponent,
     ActivityListComponent,
     FilterProjectPipe,
-    SearchProjectComponent
+    SearchProjectComponent,
   ],
   imports: [
     CommonModule,

src/app/modules/activities-management/components/activity-list/activity-list.component.html

@@ -1,31 +1,31 @@
 <div class="card-body">
-    <div class="scroll">
-        <div class="accordion" id="accordionActivities">
-            <div *ngIf="activities?.length > 0; else notShow">
-                <div class="card" *ngFor="let activity of activities; let rowIndex = index">
-                    <div class="card-header">
-                        <h2 class="mb-0">
-                            <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
-                                {{activity.name}}
-                            </a>
-                            <div class="btn-group float-right" role="group">
-                                <i class="far fa-edit btn btn-link"></i>
-                                <i class="far fa-trash-alt btn btn-link"></i>
-                            </div>
-                        </h2>
-                    </div>
+  <div class="scroll">
+    <div class="accordion" id="accordionActivities">
+      <div *ngIf="activities?.length > 0; else notShow">
+        <div class="card" *ngFor="let activity of activities; let rowIndex = index">
+          <div class="card-header">
+            <h2 class="mb-0">
+              <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex">
+                {{activity.name}}
+              </a>
+              <div class="btn-group float-right" role="group">
+                <i class="far fa-edit btn btn-link"></i>
+                <i class="far fa-trash-alt btn btn-link"></i>
+              </div>
+            </h2>
+          </div>
 
-                    <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
-                        <div class="card-body">
-                            <h5>Description:</h5>
-                            <p>{{activity.description}}</p>
-                        </div>
-                    </div>
-                </div>
+          <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionActivities">
+            <div class="card-body">
+              <h5>Description:</h5>
+              <p>{{activity.description}}</p>
             </div>
-            <ng-template #notShow>
-                <app-empty-state></app-empty-state>
-            </ng-template>
+          </div>
         </div>
+      </div>
+      <ng-template #notShow>
+        <app-empty-state></app-empty-state>
+      </ng-template>
     </div>
-</div>
+  </div>
+</div>

src/app/modules/shared/components/clock/clock.component.html

@@ -1,8 +1,8 @@
 <div class="row">
-    <div class="col mt-1  time-clock-color">
-        <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
-    </div>
-    <div *ngIf="displayTime" class="col time-clock-color">
-        <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
-    </div>
+  <div class="col mt-1  time-clock-color">
+    <i *ngIf="!displayTime" class="fas fa-sync-alt fa fa-spin"></i>
+  </div>
+  <div *ngIf="displayTime" class="col time-clock-color">
+    <h3>{{ hour | number: '2.0-2' }}:{{ minutes | number: '2.0-2' }}:{{ seconds | number: '2.0-2' }}</h3>
+  </div>
 </div>

src/app/modules/shared/components/clock/clock.component.spec.ts

@@ -8,9 +8,9 @@ describe('ClockComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ClockComponent ]
+      declarations: [ClockComponent]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {
@@ -44,4 +44,18 @@ describe('ClockComponent', () => {
     expect(component.showClock).toHaveBeenCalled();
   });
 
-});
+  it('should be verify the init state of vars', () => {
+    expect(component.hour).toEqual(0);
+    expect(component.minutes).toEqual(0);
+    expect(component.seconds).toEqual(0);
+    expect(component.displayTime).toBeFalsy();
+  });
+
+  it('should enter if and assign the value to vars', () => {
+    component.showClock();
+    expect(component.hour).toEqual(0);
+    expect(component.minutes).toEqual(0);
+    expect(component.seconds).toEqual(0);
+  });
+
+});

src/app/modules/shared/components/clock/clock.component.ts

@@ -17,22 +17,25 @@ export class ClockComponent implements OnInit {
   constructor() {
     this.showClock();
     this.displayTime = false;
+    this.hour = 0;
+    this.minutes = 0;
+    this.seconds = 0;
     setTimeout(() => {
       this.displayTime = true;
     }, 3000);
-   }
+  }
 
-   showClock() {
+  showClock() {
     const timenInterval = interval(1000);
-    timenInterval.subscribe( (data) => {
+    timenInterval.subscribe((data) => {
       this.currentDate = new Date();
       this.hour = this.currentDate.getHours();
       this.minutes = this.currentDate.getMinutes();
       this.seconds = this.currentDate.getSeconds();
     });
-   }
+  }
 
   ngOnInit(): void {
   }
 
-}
+}

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 } from '@angular/core/testing';
+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

@@ -1,4 +1,6 @@
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Project } from 'src/app/modules/shared/models/project.model';
+import { ProjectService } from 'src/app/modules/project-management/services/project.service';
 
 @Component({
   selector: 'app-project-list-hover',
@@ -11,14 +13,16 @@ export class ProjectListHoverComponent implements OnInit {
 
   selectedId: string;
   showButton: number;
-
   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

@@ -1,9 +1,10 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { DebugElement } from '@angular/core';
+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();
   }));
 
@@ -23,6 +26,16 @@ describe('TimeClockComponent', () => {
     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 be created', () => {
     expect(component).toBeTruthy();
   });
@@ -41,14 +54,6 @@ describe('TimeClockComponent', () => {
     expect(component.setShowFields).toHaveBeenCalledWith(true);
   });
 
-  it('should be called the setShowFields event #2', () => {
-    spyOn(component, 'setShowFields');
-    const showFields = de.query(By.directive(ProjectListHoverComponent));
-    const li = showFields.query(By.css('li'));
-    li.nativeElement.click();
-    expect(component.setShowFields).toHaveBeenCalledWith(true);
-  });
-
   /* ---------------------- EMPLOYE CLOCK IN ------------------------------------- */
   it('should be verify the init state of vars', () => {
     expect(component.isClockIn).toBeTruthy();