feat(hero top): added hero detail links

Ismaestro · Apr 16, 2018 · b565f1d · b565f1d
1 parent 8ee8e2e
commit b565f1d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/app/heroes/hero-top/hero-top.component.html b/src/app/heroes/hero-top/hero-top.component.html
@@ -11,10 +11,10 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
             <ng-container *ngFor="let hero of heroes">
                 <mat-card class="hero-card">
                     <mat-card-header>
-                        <div mat-card-avatar class="hero-header-image"
+                        <div (click)="seeHeroDetails(hero)" mat-card-avatar class="hero-header-image"
                              [ngStyle]="{'background-image': 'url(assets/images/heroes/' + hero.id + '-thumbnail.jpg)'}"></div>
-                        <mat-card-title>{{hero.name}}</mat-card-title>
-                        <mat-card-subtitle>{{hero.alterEgo}}</mat-card-subtitle>
+                        <mat-card-title (click)="seeHeroDetails(hero)">{{hero.name}}</mat-card-title>
+                        <mat-card-subtitle (click)="seeHeroDetails(hero)">{{hero.alterEgo}}</mat-card-subtitle>
                         <div class="flex-spacer"></div>
                         <div class="hero-actions">
                             {{hero.likes}}
@@ -24,7 +24,7 @@ <h1 class="section-title">{{'topHeroes' | translate}}</h1>
                             </mat-icon>
                         </div>
                     </mat-card-header>
-                    <img mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
+                    <img (click)="seeHeroDetails(hero)" mat-card-image src="assets/images/heroes/{{hero.id}}.jpg">
                 </mat-card>
             </ng-container>
         </div>

diff --git a/src/app/heroes/hero-top/hero-top.component.scss b/src/app/heroes/hero-top/hero-top.component.scss
@@ -2,6 +2,10 @@
   margin: 2em;
 }
 
+.hero-header-image, mat-card-title, mat-card-subtitle, .mat-card-image {
+  cursor: pointer;
+}
+
 .hero-card {
   margin: 2em auto;
 }

diff --git a/src/app/heroes/hero-top/hero-top.component.ts b/src/app/heroes/hero-top/hero-top.component.ts
@@ -1,9 +1,8 @@
 import {Component} from '@angular/core';
-
 import {Hero} from '../shared/hero.model';
-
 import {HeroService} from '../shared/hero.service';
 import {AppConfig} from '../../config/app.config';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-hero-top',
@@ -15,7 +14,8 @@ export class HeroTopComponent {
   heroes: Hero[] = null;
   canVote = false;
 
-  constructor(private heroService: HeroService) {
+  constructor(private heroService: HeroService,
+              private router: Router) {
     this.canVote = this.heroService.checkIfUserCanVote();
 
     this.heroService.getAllHeroes().subscribe((heroes) => {
@@ -35,4 +35,10 @@ export class HeroTopComponent {
       });
     });
   }
+
+  seeHeroDetails(hero): void {
+    if (hero.default) {
+      this.router.navigate([AppConfig.routes.heroes + '/' + hero.id]);
+    }
+  }
 }