Ajout fonction recherche

trombinoscope/src/app/app.component.css

@@ -8,3 +8,22 @@ header h1 {
   font-weight: 400;
   letter-spacing: 0.6px;
 }
+
+input[type=text] {
+  color: #333;
+  border: none;
+  border-radius: 100px;
+  background-color: #e0e0e0;
+  padding: 5px 16px;
+  margin-left: 8px;
+  width: 180px;
+  max-width: 300px;
+  transition: width .7s ease-in-out;
+  line-height: 30px;
+  letter-spacing: 0.4px;
+}
+
+input[type=text]:focus {
+  width: 100%;
+  outline-width: 0;
+}

trombinoscope/src/app/app.component.html

@@ -5,7 +5,10 @@
   </h1>
 </header>
 <div class="w80 center ptm">
+  <div class="mod">
+    <input type="text" class="fr" placeholder="Rechercher..." [(ngModel)]="searchField">
+  </div>
   <div class="grid-4 has-gutter">
-    <app-card *ngFor="let person of persons | orderByFullName" [person]="person"></app-card>
+    <app-card *ngFor="let person of persons | search:searchField | orderByFullName" [person]="person"></app-card>
   </div>
 </div>

trombinoscope/src/app/app.component.ts

@@ -9,6 +9,7 @@ import {DataService} from "./services/data.service";
 })
 export class AppComponent implements OnInit {
   private persons: PersonModel[] = [];
+  private searchField: string;
 
   constructor(private dataService: DataService) {
 

trombinoscope/src/app/app.module.ts

 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {HttpClientModule} from '@angular/common/http';
+import {FormsModule} from '@angular/forms';
 
 import {AppComponent} from './app.component';
 import * as Components from './components';
@@ -12,11 +13,13 @@ import * as Pipes from './pipes';
     AppComponent,
     Components.CardComponent,
     Pipes.CapitalizePipe,
-    Pipes.OrderByFullNamePipe
+    Pipes.OrderByFullNamePipe,
+    Pipes.SearchPipe
   ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule
   ],
   providers: [Services.DataService],
   bootstrap: [AppComponent]

trombinoscope/src/app/pipes/index.ts

 export * from './capitalize.pipe';
 export * from './order-by-full-name.pipe';
+export * from './search.pipe';

trombinoscope/src/app/pipes/search.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+import {PersonModel} from "../../models";
+
+@Pipe({name: 'search'})
+export class SearchPipe implements PipeTransform {
+  transform(value: PersonModel[], search: string): PersonModel[] {
+    if (!search || search.length === 0) {
+      return value;
+    }
+
+    return value.filter((item: PersonModel): boolean => {
+      const fullName = `${item.firstname} ${item.lastname}`;
+      return fullName.toLowerCase().includes(search.toLowerCase());
+    });
+  }
+}