Ajout pipes orderBy et capitalize

trombinoscope/src/app/app.component.html

@@ -6,6 +6,6 @@
 </header>
 <div class="w80 center ptm">
   <div class="grid-4 has-gutter">
-    <app-card *ngFor="let person of persons" [person]="person"></app-card>
+    <app-card *ngFor="let person of persons | orderByFullName" [person]="person"></app-card>
   </div>
 </div>

trombinoscope/src/app/app.component.ts

@@ -8,8 +8,6 @@ import {DataService} from "./services/data.service";
   styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit {
-  private readonly nbPerson: number = 10;
-
   private persons: PersonModel[] = [];
 
   constructor(private dataService: DataService) {

trombinoscope/src/app/app.module.ts

@@ -5,11 +5,14 @@ import {HttpClientModule} from '@angular/common/http';
 import {AppComponent} from './app.component';
 import * as Components from './components';
 import * as Services from './services';
+import * as Pipes from './pipes';
 
 @NgModule({
   declarations: [
     AppComponent,
-    Components.CardComponent
+    Components.CardComponent,
+    Pipes.CapitalizePipe,
+    Pipes.OrderByFullNamePipe
   ],
   imports: [
     BrowserModule,

trombinoscope/src/app/components/card/card.component.html

 <div class="card pam mtm tbm">
-  <h2 class="txtcenter">{{person.firstname }} {{person.lastname | uppercase}}</h2>
+  <h2 class="txtcenter">{{person.firstname | capitalize }} {{person.lastname | uppercase}}</h2>
   <img *ngIf="person.image; else elseBlock" class="center w100" [src]="person.image">
   <ng-template #elseBlock>
     <img class="center w100" [src]="defaultImages.get(person.gender)">

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

+import {Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({name: 'capitalize'})
+export class CapitalizePipe implements PipeTransform {
+  transform(value: string): string {
+    return value.charAt(0).toUpperCase() + value.slice(1);
+  }
+}

trombinoscope/src/app/pipes/index.ts

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

trombinoscope/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 => {
+      const fullNameA = `${a.firstname} ${a.lastname}`;
+      const fullNameB = `${b.firstname} ${b.lastname}`;
+
+      if (fullNameA < fullNameB) return -1;
+      if (fullNameA > fullNameB) return 1;
+      return 0;
+    });
+  }
+}