Ajout recherche et tri des personnes

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';
 
@@ -16,10 +17,13 @@ import * as Pipes from './pipes';
     Components.PageTrombinoscopeComponent,
     Components.TrombinoscopeCardComponent,
     Pipes.CapitalizePipe,
+    Pipes.OrderByFullNamePipe,
+    Pipes.SearchPersonPipe,
   ],
   imports: [
     BrowserModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule
   ],
   providers: [
     Services.PersonService

src/app/components/page-trombinoscope/page-trombinoscope.component.html

-<main bp="grid 3">
+<main bp="grid">
   <ng-container *ngIf="persons; else loading">
+    <div bp="12">
+      <input [(ngModel)]="searchField" placeholder="Rechercher..." type="text">
+    </div>
+
     <app-trombinoscope-card
-      *ngFor="let person of persons"
+      *ngFor="let person of persons | searchPerson:searchField | orderByFullName"
+      bp="3"
       [person]="person">
     </app-trombinoscope-card>
   </ng-container>

src/app/components/page-trombinoscope/page-trombinoscope.component.scss

@@ -3,4 +3,24 @@ main {
   margin: 0 auto 30px;
   padding-top: 30px;
   grid-gap: 30px;
+
+  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;
+    float: right;
+
+    &:focus {
+      width: 100%;
+      outline-width: 0;
+    }
+  }
 }

src/app/components/page-trombinoscope/page-trombinoscope.component.ts

@@ -9,6 +9,7 @@ import {PersonService} from '../../services';
 })
 export class PageTrombinoscopeComponent implements OnInit {
   persons: PersonModel[];
+  searchField: string;
 
   constructor(private personService: PersonService) {
   }

src/app/pipes/index.ts

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

src/app/pipes/order-by-full-name.pipe.ts

+import {Pipe, PipeTransform} from '@angular/core';
+import {PersonModel} from '../models';
+
+@Pipe({name: 'orderByFullName'})
+export class OrderByFullNamePipe implements PipeTransform {
+  transform(value: PersonModel[]): PersonModel[] {
+    return value.sort((a: PersonModel, b: PersonModel): number => {
+      if (a.fullName < b.fullName) {
+        return -1;
+      }
+      if (a.fullName > b.fullName) {
+        return 1;
+      }
+      return 0;
+    });
+  }
+}

src/app/pipes/search-person.pipe.ts

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