#3 search active projects in view projects

Author: daros10

package-lock.json

@@ -28,8 +28,8 @@
     "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.900.5",
-    "@angular/cli": "~9.0.4",
+    "@angular-devkit/build-angular": "^0.901.0",
+    "@angular/cli": "^9.1.0",
     "@angular/compiler-cli": "~9.0.3",
     "@angular/language-service": "~9.0.3",
     "@types/jasmine": "~3.5.0",

package.json

@@ -24,6 +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';
 
 
 @NgModule({
@@ -47,7 +49,9 @@ import { CreateActivityComponent } from './modules/activities-management/compone
     GroupByDatePipe,
     ActivitiesManagementComponent,
     CreateActivityComponent,
-    ActivityListComponent
+    ActivityListComponent,
+    FilterProjectPipe,
+    SearchProjectComponent
   ],
   imports: [
     CommonModule,

src/app/app.module.ts

@@ -5,21 +5,23 @@ <h1 class="card-title">Project</h1>
     <div class="form-group">
       <label for="name">Name:</label>
       <input class="form-control" id="name" type="text" formControlName="name" required>
-      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">Name Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(name.dirty || name.touched) && name.invalid && name.errors.required">NameProject is required.</p>
     </div>
 
     <div class="form-group">
       <label for="details">Details:</label>
       <textarea class="form-control" rows="3" id="details" type="text" formControlName="details" required></textarea>
-      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(details.dirty || details.touched) && details.invalid && details.errors.required">Details Project is
+        required.</p>
     </div>
 
     <div class="form-group">
       <label for="status">Status:</label>
       <select class="form-control" formControlName="status">
         <option *ngFor="let status of projectStatus" [value]="status">{{status}}</option>
       </select>
-      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.</p>
+      <p class="alert alert-danger" *ngIf="(status.dirty || status.touched) && status.invalid && status.errors.required">Status Project is required.
+      </p>
     </div>
 
     <div class="form-group form-check" [hidden]="!projectToEdit">
@@ -35,4 +37,4 @@ <h1 class="card-title">Project</h1>
       </div>
     </div>
   </form>
-</div>
+</div>

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

@@ -1,14 +1,16 @@
 <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>
-              <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>
               </div>
@@ -34,8 +36,5 @@ <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>
+<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.html

@@ -21,6 +21,8 @@ export class ProjectListComponent implements OnInit {
   projectToDelete: Project;
   openDeleteModal = false;
 
+  filterProjects: string = '';
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -0,0 +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">
+</div>

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

@@ -0,0 +1,32 @@
+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('called method', () => {
+    component.changeFilterProject.emit('angular');
+    component.filterProject = 'angular';
+    component.changeFilterValue();
+    expect(component.filterProject).toEqual('angular');
+  });
+});

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

@@ -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);
+  }
+
+}