Ajout router et guard

trombinoscope/src/app/app.component.css

@@ -8,22 +8,3 @@ 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,10 +5,5 @@
   </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 | search:searchField | orderByFullName" [person]="person"></app-card>
-  </div>
+  <router-outlet></router-outlet>
 </div>

trombinoscope/src/app/app.component.ts

-import {Component, OnInit} from '@angular/core';
-import {PersonModel} from "../models";
-import {DataService} from "./services/data.service";
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
 })
-export class AppComponent implements OnInit {
-  private persons: PersonModel[] = [];
-  private searchField: string;
+export class AppComponent {
 
-  constructor(private dataService: DataService) {
-
-  }
-
-  async ngOnInit(): Promise<any> {
-    this.persons = await this.dataService.getPersons();
-  }
 }

trombinoscope/src/app/app.module.ts

@@ -4,14 +4,19 @@ import {HttpClientModule} from '@angular/common/http';
 import {FormsModule} from '@angular/forms';
 
 import {AppComponent} from './app.component';
+import {Routing} from './app.routing';
+
 import * as Components from './components';
 import * as Services from './services';
 import * as Pipes from './pipes';
+import * as Guards from './guards';
 
 @NgModule({
   declarations: [
     AppComponent,
     Components.CardComponent,
+    Components.ListComponent,
+    Components.DetailComponent,
     Pipes.CapitalizePipe,
     Pipes.OrderByFullNamePipe,
     Pipes.SearchPipe
@@ -19,9 +24,10 @@ import * as Pipes from './pipes';
   imports: [
     BrowserModule,
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    Routing
   ],
-  providers: [Services.DataService],
+  providers: [Services.DataService, Guards.ResolvePersonGuard],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

trombinoscope/src/app/app.routing.ts

+import {ModuleWithProviders} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+import * as Components from './components';
+import * as Guards from './guards';
+
+export const Routing: ModuleWithProviders = RouterModule.forRoot([
+  {path: 'person/:id', component: Components.DetailComponent, resolve: {person: Guards.ResolvePersonGuard}},
+  {path: '', component: Components.ListComponent, pathMatch: 'full'}
+]);

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

 .card {
   background-color: #ffffff;
   box-shadow: 0 6px 6px rgba(10, 16, 20, .15), 0 0 52px rgba(10, 16, 20, .12);
+  cursor: pointer;
+}
+
+.card:hover {
+  box-shadow: 0 8px 8px rgba(10, 16, 20, .24), 0 0 8px rgba(10, 16, 20, .12);
 }
 
 .card h2 {

trombinoscope/src/app/components/detail/detail.component.css

+.card {
+  background-color: #eeeeee;
+  box-shadow: 0 0 3px rgba(0, 0, 0, .5);
+  border-radius: 3px;
+}
+
+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;
+}
+
+button:hover {
+  opacity: .9;
+  background-color: #198aef;
+}
+
+.header {
+  background-color: #dfdfdf;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
+  height: 200px;
+  position: relative;
+}
+
+.header 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;
+}
+
+.content h2 {
+  text-transform: capitalize;
+  color: #2c2e31;
+  font-size: 38px;
+  margin: 5px;
+}
+
+.content p {
+  color: #999;
+  font-size: 18px;
+  margin: 0;
+}

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

+<div class="mod">
+  <button [routerLink]="['']">Retour</button>
+</div>
+<div class="w60 center card">
+  <div class="header">
+    <img *ngIf="person.image; else elseBlock" [src]="person.image">
+    <ng-template #elseBlock>
+      <img [src]="defaultImages.get(person.gender)">
+    </ng-template>
+  </div>
+  <div class="content">
+    <h2 class="txtcenter">{{ person.firstname}} {{ person.lastname }}</h2>
+    <p class="txtcenter">
+      <a [href]="'mailto:' + person.email">{{ person.email}}</a>
+    </p>
+  </div>
+</div>

trombinoscope/src/app/components/detail/detail.component.ts

+import {Component, OnInit} from '@angular/core';
+import {GenderEnum, PersonModel} from "../../../models";
+import {ActivatedRoute} from "@angular/router";
+import {DataService} from "../../services";
+
+@Component({
+  selector: 'app-detail',
+  templateUrl: './detail.component.html',
+  styleUrls: ['./detail.component.css']
+})
+export class DetailComponent implements OnInit {
+  private person: PersonModel;
+  private readonly defaultImages: Map<GenderEnum, string> = this.dataService.getDefaultImages();
+
+  constructor(private route: ActivatedRoute, private dataService: DataService) {
+
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { person: PersonModel }) => {
+      this.person = data.person;
+    });
+  }
+
+}

trombinoscope/src/app/components/index.ts

 export * from './card/card.component';
+export * from './list/list.component';
+export * from './detail/detail.component';

trombinoscope/src/app/components/list/list.component.css

+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/components/list/list.component.html

+<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 | search:searchField | orderByFullName"
+    [person]="person"
+    [routerLink]="['/person', person.id]">
+  </app-card>
+</div>

trombinoscope/src/app/components/list/list.component.ts

+import {Component, OnInit} from '@angular/core';
+import {PersonModel} from "../../../models";
+import {DataService} from "../../services";
+
+@Component({
+  selector: 'app-list',
+  templateUrl: './list.component.html',
+  styleUrls: ['./list.component.css']
+})
+export class ListComponent implements OnInit {
+  private persons: PersonModel[] = [];
+  private searchField: string;
+
+  constructor(private dataService: DataService) {
+
+  }
+
+  async ngOnInit(): Promise<any> {
+    this.persons = await this.dataService.getPersons();
+  }
+}

trombinoscope/src/app/guards/index.ts

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

trombinoscope/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 {DataService} from "../services";
+
+@Injectable()
+export class ResolvePersonGuard implements Resolve<PersonModel> {
+  constructor(private dataService: DataService, private router: Router) {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<PersonModel> {
+    const id = route.params['id'];
+
+    return this.dataService.getPersonById(Number(id)).then((person: PersonModel) => {
+      if (person) {
+        return person;
+      } else {
+        this.router.navigateByUrl('');
+        return null;
+      }
+    }).catch(() => {
+      this.router.navigateByUrl('');
+      return null;
+    });
+  }
+}

trombinoscope/src/styles.css

@@ -7,3 +7,7 @@ body {
 * {
   font-family: Roboto, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif !important;
 }
+
+*:focus {
+  outline-width: 0;
+}