#3 added search in time clock view

Author: daros10

src/app/components/options-sidebar/time-clock/time-clock.component.html

@@ -31,7 +31,6 @@ <h3>00:00</h3>
                 </div>
             </div>
             <h6 class="text-left"><strong>Projects</strong></h6>
-            <app-search-project></app-search-project>
             <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>

src/app/components/shared/project-list-hover/project-list-hover.component.html

@@ -1,17 +1,9 @@
+<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 }"
-  >
-    {{ item.name }}
-    <span
-      *ngIf="showButton === i && selectedId !== item.id"
-      class="badge badge-light"
-      >Clock In</span
+    <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>
-</ul>
+</ul>

src/app/components/shared/project-list-hover/project-list-hover.component.ts

@@ -11,6 +11,7 @@ export class ProjectListHoverComponent implements OnInit {
 
   selectedId: string;
   showButton: number;
+  filterProjects = '';
 
   constructor() {
     this.showButton = -1;