Ajout page détail et guard vérification

src/app/app.module.ts

@@ -9,12 +9,14 @@ import {AppComponent} from './app.component';
 import * as Components from './components';
 import * as Services from './services';
 import * as Pipes from './pipes';
+import * as Guards from './guards';
 
 @NgModule({
   declarations: [
     AppComponent,
     Components.HeaderComponent,
     Components.LoaderComponent,
+    Components.PageProfilComponent,
     Components.PageTrombinoscopeComponent,
     Components.TrombinoscopeCardComponent,
     Pipes.CapitalizePipe,
@@ -27,11 +29,13 @@ import * as Pipes from './pipes';
     FormsModule,
     RouterModule.forRoot([
       {path: '', component: Components.PageTrombinoscopeComponent, pathMatch: 'full'},
+      {path: 'profil/:id', component: Components.PageProfilComponent, resolve: {person: Guards.ResolvePersonGuard}},
       {path: '**', redirectTo: ''}
     ])
   ],
   providers: [
-    Services.PersonService
+    Services.PersonService,
+    Guards.ResolvePersonGuard
   ],
   bootstrap: [AppComponent]
 })

src/app/components/index.ts

 export * from './header/header.component';
 export * from './loader/loader.component';
+export * from './page-profil/page-profil.component';
 export * from './page-trombinoscope/page-trombinoscope.component';
 export * from './trombinoscope-card/trombinoscope-card.component';

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

+<main>
+  <button [routerLink]="['']">Retour</button>
+
+  <div class="card">
+    <div class="header">
+      <img [src]="person.image">
+    </div>
+    <div class="content">
+      <h2 bp="text-center">{{ person.fullName | capitalize }}</h2>
+      <p bp="text-center">
+        <a [href]="'mailto:' + person.email">{{ person.email }}</a>
+      </p>
+    </div>
+  </div>
+</main>

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

+main {
+  width: 60%;
+  margin: 50px auto;
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 184px;
+    height: 40px;
+    padding: 0 24px;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 40px;
+    background-color: #1976d2;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);
+    box-sizing: border-box;
+    cursor: pointer;
+    color: #fff;
+    text-decoration: none;
+    text-transform: uppercase;
+    overflow: hidden;
+    border: none;
+    margin-bottom: 20px;
+
+    &:hover {
+      opacity: .9;
+      background-color: #198aef;
+    }
+  }
+
+  .card {
+    background-color: #eeeeee;
+    box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+    border-radius: 3px;
+
+    .header {
+      background-color: #dfdfdf;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+      height: 200px;
+      position: relative;
+
+      img {
+        width: auto;
+        height: 100%;
+        border-radius: 50%;
+        position: absolute;
+        top: 100px;
+        left: 50%;
+        transform: translateX(-50%);
+        border: 4px solid rgba(0, 0, 0, 0.18);
+      }
+    }
+
+    .content {
+      padding: 100px 0 50px;
+
+      h2 {
+        text-transform: capitalize;
+        color: #2c2e31;
+        font-size: 38px;
+        margin: 5px;
+      }
+
+      p {
+        color: #999;
+        font-size: 18px;
+        margin: 0;
+      }
+    }
+  }
+}

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

+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+
+import {PersonModel} from '../../models';
+
+@Component({
+  selector: 'app-page-profil',
+  templateUrl: './page-profil.component.html',
+  styleUrls: ['./page-profil.component.scss']
+})
+export class PageProfilComponent implements OnInit {
+  person: PersonModel;
+
+  constructor(private route: ActivatedRoute) {
+
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { person: PersonModel }) => {
+      this.person = data.person;
+    });
+  }
+}

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

@@ -6,8 +6,9 @@
 
     <app-trombinoscope-card
       *ngFor="let person of persons | searchPerson:searchField | orderByFullName"
-      bp="3"
-      [person]="person">
+      [person]="person"
+      [routerLink]="['/profil', person.id]"
+      bp="3">
     </app-trombinoscope-card>
   </ng-container>
   <ng-template #loading>

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

@@ -2,6 +2,11 @@
   background-color: #ffffff;
   box-shadow: 0 6px 6px rgba(10, 16, 20, .15), 0 0 52px rgba(10, 16, 20, .12);
   padding: 30px;
+  cursor: pointer;
+
+  &:hover {
+    box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
+  }
 
   h2 {
     font-weight: 500;

src/app/guards/index.ts

+export * from './resolve-person.guard';

src/app/guards/resolve-person.guard.ts

+import {Injectable} from '@angular/core';
+import {ActivatedRouteSnapshot, Resolve, Router, RouterStateSnapshot} from '@angular/router';
+import {PersonModel} from '../models';
+import {PersonService} from '../services';
+
+@Injectable()
+export class ResolvePersonGuard implements Resolve<PersonModel> {
+  constructor(private personService: PersonService, private router: Router) {
+  }
+
+  async resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<PersonModel> {
+    const id = +route.params.id;
+
+    try {
+      const person = await this.personService.getPerson(id);
+      if (person) {
+        return person;
+      }
+    } catch (e) {
+
+    }
+
+    this.router.navigateByUrl('');
+    return null;
+  }
+}

src/app/services/person.service.ts

@@ -5,13 +5,15 @@ import {PersonModel} from '../models';
 
 @Injectable()
 export class PersonService {
+  private static internalId = 0;
+
   constructor(private httpClient: HttpClient) {
 
   }
 
   private static responseToPerson(data: any): PersonModel {
     const person = new PersonModel();
-    person.id = data.id.value;
+    person.id = this.internalId++;
     person.firstname = data.name.first;
     person.lastname = data.name.last;
     person.email = data.email;
@@ -21,6 +23,8 @@ export class PersonService {
   }
 
   public async getPersons(length: number = 20, seed: string = 'seed'): Promise<PersonModel[]> {
+    PersonService.internalId = 0;
+
     const options = {
       params: {
         results: length.toString(),
@@ -31,4 +35,10 @@ export class PersonService {
     const result = await this.httpClient.get<{ results: [] }>(environment.api.persons, options).toPromise();
     return result.results.map(element => PersonService.responseToPerson(element));
   }
+
+  public async getPerson(id: number): Promise<PersonModel> {
+    const persons = await this.getPersons();
+
+    return persons.find(person => person.id === id);
+  }
 }