#3 Time Clock - find project

src/app/app.module.ts

@@ -24,7 +24,8 @@ import { GroupByDatePipe } from './modules/shared/pipes/group-by-date/group-by-d
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
 import { ActivityListComponent } from './modules/activities-management/components/activity-list/activity-list.component';
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
-
+import { FilterProjectPipe } from './modules/shared/pipes/filter-project/filter-project.pipe';
+import { SearchProjectComponent } from './modules/shared/components/search-project/search-project.component';
 import { HomeComponent } from './modules/home/home.component';
 import { LoginComponent } from './modules/login/login.component';
 
@@ -51,17 +52,12 @@ import { LoginComponent } from './modules/login/login.component';
     CreateActivityComponent,
     ActivityListComponent,
     HomeComponent,
-    LoginComponent
-  ],
-  imports: [
-    CommonModule,
-    BrowserModule,
-    AppRoutingModule,
-    FormsModule,
-    ReactiveFormsModule,
-    HttpClientModule
+    LoginComponent,
+    FilterProjectPipe,
+    SearchProjectComponent,
   ],
+  imports: [CommonModule, BrowserModule, AppRoutingModule, FormsModule, ReactiveFormsModule, HttpClientModule],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

src/app/modules/project-management/components/project-list/project-list.component.html

@@ -1,28 +1,40 @@
 <div class="card-body">
+  <app-search-project (changeFilterProject)="filterProjects = $event"></app-search-project>
+  <hr />
   <div class="scroll">
     <div class="accordion" id="accordionProject">
       <div *ngIf="projects?.length > 0; else notShow">
-        <div class="card" *ngFor="let project of projects; let rowIndex = index">
+        <div class="card" *ngFor="let project of projects | filterProject: filterProjects; let rowIndex = index">
           <div class="card-header">
             <h2 class="mb-0">
-              <a type="button" data-toggle="collapse" [attr.data-target]="'#row'+rowIndex" [attr.aria-controls]="'row'+rowIndex">
-                {{project.name}}
+              <a
+                type="button"
+                data-toggle="collapse"
+                [attr.data-target]="'#row' + rowIndex"
+                [attr.aria-controls]="'row' + rowIndex"
+              >
+                {{ project.name }}
               </a>
-              <div class="btn-group float-right" role="group" >
+              <div class="btn-group float-right" role="group">
                 <i (click)="editProject.emit(project.id)" class="far fa-edit btn btn-link"></i>
-                <i (click)="openModal(project)" data-toggle="modal" data-target="#deleteModal" class="far fa-trash-alt btn btn-link"></i>
+                <i
+                  (click)="openModal(project)"
+                  data-toggle="modal"
+                  data-target="#deleteModal"
+                  class="far fa-trash-alt btn btn-link"
+                ></i>
               </div>
             </h2>
           </div>
 
-          <div [id]="'row'+rowIndex" class="collapse" data-parent="#accordionProject">
+          <div [id]="'row' + rowIndex" class="collapse" data-parent="#accordionProject">
             <div class="card-body">
               <h5>Details:</h5>
-              <p>{{project.details}}</p>
+              <p>{{ project.details }}</p>
               <h5>Status:</h5>
-              <p>{{project.status}}</p>
+              <p>{{ project.status }}</p>
               <h5>Completed project:</h5>
-              <p>{{project.completed ? 'Yes' : 'No'}}</p>
+              <p>{{ project.completed ? 'Yes' : 'No' }}</p>
             </div>
           </div>
         </div>
@@ -34,8 +46,14 @@ <h5>Completed project:</h5>
   </div>
 </div>
 
-<app-modal *ngIf = "openDeleteModal" class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true"
-  [list] = "projectToDelete"
-  (removeList) = "removeProject($event)"
+<app-modal
+  *ngIf="openDeleteModal"
+  class="modal fade"
+  id="deleteModal"
+  tabindex="-1"
+  role="dialog"
+  aria-hidden="true"
+  [list]="projectToDelete"
+  (removeList)="removeProject($event)"
 >
 </app-modal>

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

@@ -1,16 +1,16 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ProjectListComponent } from './project-list.component';
+import { FilterProjectPipe } from '../../../shared/pipes';
 
 describe('ProjectListComponent', () => {
   let component: ProjectListComponent;
   let fixture: ComponentFixture<ProjectListComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectListComponent ]
-    })
-    .compileComponents();
+      declarations: [ProjectListComponent, FilterProjectPipe],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -29,7 +29,7 @@ describe('ProjectListComponent', () => {
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
-      completed: true
+      completed: true,
     };
 
     component.projectToDelete = project;
@@ -45,7 +45,7 @@ describe('ProjectListComponent', () => {
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
-      completed: true
+      completed: true,
     };
 
     component.openModal(project);

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

@@ -1,30 +1,23 @@
-import {
-  Component,
-  OnInit,
-  Input,
-  Output,
-  EventEmitter
-} from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Project } from '../../../shared/models';
 
 @Component({
   selector: 'app-project-list',
   templateUrl: './project-list.component.html',
-  styleUrls: ['./project-list.component.scss']
+  styleUrls: ['./project-list.component.scss'],
 })
 export class ProjectListComponent implements OnInit {
-
   @Input() projects: Project[] = [];
   @Output() editProject = new EventEmitter();
   @Output() deleteProject = new EventEmitter();
 
   projectToDelete: Project;
   openDeleteModal = false;
+  filterProjects = '';
 
-  constructor() { }
+  constructor() {}
 
-  ngOnInit(): void {
-  }
+  ngOnInit(): void {}
 
   openModal(projectData) {
     this.projectToDelete = projectData;

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

@@ -6,52 +6,50 @@ 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';
 
 describe('ProjectManagementComponent', () => {
   let component: ProjectManagementComponent;
   let fixture: ComponentFixture<ProjectManagementComponent>;
   let projectService: ProjectService;
 
-  const projects: Project[] = [{
-    id: '1',
-    name: 'app 1',
-    details: 'It is a good app',
-    status: 'inactive',
-    completed: true
-  },
-  {
-    id: '2',
-    name: 'app 2',
-    details: 'It is a good app',
-    status: 'inactive',
-    completed: false
-  },
-  {
-    id: '3',
-    name: 'app 3',
-    details: 'It is a good app',
-    status: 'active',
-    completed: true
-  }
+  const projects: Project[] = [
+    {
+      id: '1',
+      name: 'app 1',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: true,
+    },
+    {
+      id: '2',
+      name: 'app 2',
+      details: 'It is a good app',
+      status: 'inactive',
+      completed: false,
+    },
+    {
+      id: '3',
+      name: 'app 3',
+      details: 'It is a good app',
+      status: 'active',
+      completed: true,
+    },
   ];
 
   const projectServiceStub = {
     getProjects() {
       const projectsMock = projects;
       return of(projectsMock);
-    }
+    },
   };
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ProjectManagementComponent, CreateProjectComponent, ProjectListComponent ],
-      providers: [ { provide: ProjectService, useValue: projectServiceStub }],
-      imports: [
-        FormsModule,
-        ReactiveFormsModule
-      ]
-    })
-    .compileComponents();
+      declarations: [ProjectManagementComponent, CreateProjectComponent, ProjectListComponent, FilterProjectPipe],
+      providers: [{ provide: ProjectService, useValue: projectServiceStub }],
+      imports: [FormsModule, ReactiveFormsModule],
+    }).compileComponents();
   }));
 
   beforeEach(() => {
@@ -63,12 +61,12 @@ describe('ProjectManagementComponent', () => {
     component.projects = projects;
   });
 
-
-  it('Service injected via inject(...) and TestBed.get(...) should be the same instance',
-    inject([ProjectService], (injectService: ProjectService) => {
+  it('Service injected via inject(...) and TestBed.get(...) should be the same instance', inject(
+    [ProjectService],
+    (injectService: ProjectService) => {
       expect(injectService).toBe(projectService);
-    })
-  );
+    }
+  ));
 
   it('should create', () => {
     expect(component).toBeTruthy();
@@ -79,7 +77,7 @@ describe('ProjectManagementComponent', () => {
       name: 'app 4',
       details: 'It is a good app',
       status: 'inactive',
-      completed: true
+      completed: true,
     };
 
     component.editedProjectId = null;
@@ -93,7 +91,7 @@ describe('ProjectManagementComponent', () => {
       name: 'app test',
       details: 'It is a excelent app',
       status: 'inactive',
-      completed: true
+      completed: true,
     };
 
     component.editedProjectId = '1';
@@ -117,7 +115,7 @@ describe('ProjectManagementComponent', () => {
       name: 'app 1',
       details: 'It is a good app',
       status: 'inactive',
-      completed: true
+      completed: true,
     };
 
     component.project = project;
@@ -138,9 +136,7 @@ describe('ProjectManagementComponent', () => {
     expect(componentSpy).toHaveBeenCalledTimes(1);
   });
 
-
   it('should call getProjects and return a list of projects', async(() => {
-
     spyOn(projectService, 'getProjects').and.returnValue(of(projects));
 
     component.ngOnInit();

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

@@ -0,0 +1,3 @@
+<div class="form-group">
+  <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/components/search-project/search-project.component.spec.ts

@@ -0,0 +1,31 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SearchProjectComponent } from './search-project.component';
+
+describe('SearchProjectComponent', () => {
+  let component: SearchProjectComponent;
+  let fixture: ComponentFixture<SearchProjectComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [SearchProjectComponent],
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SearchProjectComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should emit changeFilterProject event #changeFilterValue', () => {
+    component.filterProject = 'angular';
+    spyOn(component.changeFilterProject, 'emit');
+    component.changeFilterValue();
+    expect(component.changeFilterProject.emit).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'app-search-project',
+  templateUrl: './search-project.component.html',
+  styleUrls: ['./search-project.component.scss']
+})
+export class SearchProjectComponent implements OnInit {
+
+  filterProject: string;
+  @Output() changeFilterProject = new EventEmitter();
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  changeFilterValue() {
+    this.changeFilterProject.emit(this.filterProject);
+  }
+
+}