#3 search active projects in view timeClockIn

Author: daros10

src/app/modules/project-management/components/project-list/project-list.component.spec.ts

@@ -1,16 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProjectListComponent } from './project-list.component';
+import { FilterProjectPipe } from 'src/app/modules/shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
   let fixture: ComponentFixture<ProjectListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectListComponent ]
+      declarations: [ProjectListComponent, FilterProjectPipe]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/modules/project-management/pages/project-management.component.spec.ts

@@ -6,6 +6,7 @@ import { CreateProjectComponent, ProjectListComponent } from '../components';
 import { Project } from '../../shared/models';
 import { ProjectManagementComponent } from './project-management.component';
 import { ProjectService } from '../services/project.service';
+import { FilterProjectPipe } from '../../shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
@@ -44,14 +45,14 @@ describe('ProjectManagementComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent ],
-      providers: [ { provide: ProjectService, useValue: projectServiceStub }],
+      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent, FilterProjectPipe],
+      providers: [{ provide: ProjectService, useValue: projectServiceStub }],
       imports: [
         FormsModule,
         ReactiveFormsModule
       ]
     })
-    .compileComponents();
+      .compileComponents();
   }));
 
   beforeEach(() => {

src/app/modules/shared/components/search-project/search-project.component.html

@@ -1,3 +1,3 @@
 <div class="form-group">
-  <input (keyup)="changeFilterValue()" type="text" class="form-control" placeholder="&#xF002; Search active projects..." name="filterProject" [(ngModel)]="filterProject" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
+  <input (keyup)="changeFilterValue()" type="text" class="form-control" placeholder="&#xF002; Search projects..." name="filterProject" [(ngModel)]="filterProject" style="font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif, FontAwesome">
 </div>

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

@@ -7,19 +7,13 @@ import { Project } from 'src/app/modules/shared/models/project.model';
 export class FilterProjectPipe implements PipeTransform {
 
   transform(value: Project[] = [], arg: string): string[] {
-
     const restultProjects = [];
     // tslint:disable-next-line: prefer-for-of
     for (let i = 0; i < value.length; i++) {
       if (value[i].name.toLowerCase().indexOf(arg.toLowerCase()) > -1) {
-        if (arg.length < 1) {
-          restultProjects.push(value[i]);
-        } else if (value[i].status === 'Active') {
-          restultProjects.push(value[i]);
-        }
+        restultProjects.push(value[i]);
       }
     }
-    console.log(restultProjects.length);
     return restultProjects;
   }
 

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

@@ -1,17 +1,7 @@
+<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; let i = index"
-    (mouseenter)="showButton = i"
-    (mouseleave)="showButton = -1"
-    (click)="clockIn(item.id)"
-    [ngClass]="{ active: selectedId === item.id }"
-  >
+  <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
-    >
+    <span *ngIf="showButton === i && selectedId !== item.id" class="badge badge-light">Clock In</span>
   </li>
-</ul>
+</ul>

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

@@ -1,14 +1,15 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProjectListHoverComponent } from './project-list-hover.component';
+import { FilterProjectPipe } from 'src/app/modules/shared/pipes/filter-project/filter-project.pipe';
 
 describe('ProjectListHoverComponent', () => {
   let component: ProjectListHoverComponent;
   let fixture: ComponentFixture<ProjectListHoverComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ProjectListHoverComponent]
+      declarations: [ProjectListHoverComponent, FilterProjectPipe]
     }).compileComponents();
   }));
 

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

@@ -12,11 +12,13 @@ export class ProjectListHoverComponent implements OnInit {
   selectedId: string;
   showButton: number;
 
+  filterProjects: string = '';
+
   constructor() {
     this.showButton = -1;
   }
 
-  ngOnInit(): void {}
+  ngOnInit(): void { }
 
   clockIn(id: string) {
     this.selectedId = id;

src/app/modules/time-clock/pages/time-clock.component.html

@@ -11,11 +11,9 @@
       </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
+      <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
+      <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>
@@ -36,7 +34,6 @@ <h3>00:00</h3>
         </div>
       </div>
       <h6 class="text-left"><strong>Projects</strong></h6>
-      <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>
@@ -57,10 +54,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 *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">
+            <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>
@@ -72,8 +67,7 @@ <h6 *ngIf="showAlertEnterTecnology" class="text-danger text-left">Technology fie
       <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">
+            <button class="btn btn-light btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
               Options
             </button>
           </div>