Actions added

src/app/components/league/League.stories.ts

@@ -17,12 +17,18 @@ export default {
     }),
   ],
   title: 'League',
+  excludeStories: /.*Data$/
 } as Meta;
 
+export const actionsData = {
+  onClickLeague: action('onClickLeague')
+}
+
 
 const Template: Story<LeagueComponent> = args => ({
   props: {
-    ...args
+    ...args,
+    onClickLeague: actionsData.onClickLeague,
   },
 });
 
@@ -36,3 +42,13 @@ EPL.args = {
   },
 };
 
+export const Laliga = Template.bind({});
+Laliga.args = {
+  league: {
+    id: leagueslist[1].id,
+    name: leagueslist[1].name,
+    country: leagueslist[1].country,
+    logo: leagueslist[1].logo
+  },
+};
+

src/app/components/league/league.component.html

 <div *ngIf="!league">
     Undefined
 </div>
-<div *ngIf="league" class="league-div" [title]="league.name">
+<div *ngIf="league" class="league-div" [title]="league.name" (click)="onNavigate(league.id, league.name)" >
     <img class="image" src={{league.logo}} />
     <div class="league-info">
         <span class="league-name">{{league.name}}</span><br />

src/app/components/league/league.component.ts

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 
 import { LeaguesInterface } from '../../models/leagues.model';
 
@@ -13,6 +13,15 @@ export class LeagueComponent implements OnInit {
 
   @Input() league: LeaguesInterface | undefined;
 
+  @Output()
+  onClickLeague = new EventEmitter();
+
+  onNavigate(id: any, name: any) {
+    this.onClickLeague.emit([id, name]);
+    window.location.href = `/leagues/${id}`;
+    // alert(`Ideally would navigate to the ${name}'s table`);
+  }
+
   ngOnInit(): void {
   }
 

src/app/components/leagues/leagues.component.ts

@@ -10,9 +10,9 @@ import { leagueslist } from '../../models/leagues'
   <div class="container" >
 
     <h2>Leagues</h2>
-    <a *ngFor="let league of leagues" [routerLink]="['/leagues', league.id]">
+    <div *ngFor="let league of leagues">
       <app-league [league]="league"></app-league>
-    </a>
+    </div>
 </div>
 `,
   styleUrls: ['./leagues.component.css']

src/app/components/leaguetable-container/leaguetable-container.component.ts

@@ -35,6 +35,6 @@ export class LeaguetableContainerComponent implements OnInit {
   ngOnInit(): void {
     const routeParams = this.route.snapshot.paramMap;
     const leagueIdFromRoute = Number(routeParams.get('leagueId'));
-    // this.getLeagueTable(leagueIdFromRoute);
+    this.getLeagueTable(leagueIdFromRoute);
   }
 }

src/app/components/leaguetable/Leaguetable.stories.ts

@@ -16,12 +16,18 @@ export default {
     }),
   ],
   title: 'LeagueTable',
+  excludeStories: /.*Data$/
 } as Meta;
 
+export const actionsData = {
+  onClickTeam: action('onClickTeam')
+}
+
 
 const Template: Story<LeaguetableComponent> = args => ({
   props: {
-    ...args
+    ...args,
+    onClickTeam: actionsData.onClickTeam
   },
 });
 

src/app/components/leaguetable/leaguetable.component.css

@@ -30,6 +30,9 @@ td{
 }
 .team {
     display: flex;
+    text-decoration: underline;
+    color: #327feb;
+    cursor: pointer;
     flex-direction: row;
     align-items: center;
 }

src/app/components/leaguetable/leaguetable.component.html

 <!-- <span>asdas {{league.name}} {{leaguetable[0].team.name}}</span> -->
 <div *ngIf="!league">
-    sdsad
+    loading
 </div>
 <div class="container table" *ngIf="league">
     <h2>{{league.name}}</h2>
@@ -22,7 +22,7 @@
           </tr>
         </thead>
         <tbody>
-          <tr *ngFor="let team of leaguetable">
+          <tr *ngFor="let team of leaguetable" (click)="onPressTeam(team.team.id, league.id, team.team.name)">
             <td>{{team.rank}}</td>
             <td colspan="2">
               <!-- <a [title]="team.team.name" [routerLink]="['/team', league.id, team.team.id]"> -->

src/app/components/leaguetable/leaguetable.component.ts

-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
 import { Select, Store } from '@ngxs/store';
 // import { LeagueState, FetchTable } from '../../state/leaguetable.sate';
 import { Observable } from 'rxjs';
@@ -16,6 +16,15 @@ export class LeaguetableComponent implements OnInit {
   @Input() leaguetable : any[] = []; 
   @Input() league : any = {};
 
+  @Output()
+  onClickTeam = new EventEmitter();
+
+  onPressTeam(teamid: any, leagueid: any, name: any) {
+    this.onClickTeam.emit([teamid, leagueid, name]);
+    window.location.href = `/team/${teamid}/${leagueid}`;
+    // alert(`Ideally would take to ${name}'s details`);
+  }
+
   constructor(
   ) { }
   

src/app/components/team-card/team-card.component.html

@@ -12,7 +12,7 @@
   
       <div class="profile-card__cnt js-profile-cnt">
         <div class="profile-card__name">{{info.team.name}}</div>
-        <div class="profile-card__txt">League <strong>{{team.league.name}}</strong></div>
+        <div class="profile-card__txt">League: <strong>{{team.league.name}}</strong></div>
         <div class="profile-card__txt">Stadium: <strong>{{info.venue.name}}</strong></div>
         <div class="profile-card-loc">
           <span class="profile-card-loc__icon">
@@ -44,17 +44,17 @@
   
         <div class="profile-card-social">
           <div *ngFor="let match of form">
-            <a *ngIf="match == 'W'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item facebook" target="_blank" >
+            <a *ngIf="match == 'W'"  class="profile-card-social__item facebook" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>
             </a>
-            <a *ngIf="match == 'L'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item instagram" target="_blank" >
+            <a *ngIf="match == 'L'" class="profile-card-social__item instagram" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>
             </a>
-            <a *ngIf="match == 'D'" href="https://www.facebook.com/iaMuhammedErdem" class="profile-card-social__item twitter" target="_blank" >
+            <a *ngIf="match == 'D'" class="profile-card-social__item twitter" target="_blank" >
               <span class="icon-font">
                 {{match}}
               </span>

src/app/components/team-card/team-card.component.ts

@@ -11,6 +11,8 @@ export class TeamCardComponent implements OnInit {
   @Input() team : any = {};
   @Input() form : any[] = [];
 
+  loader = false;
+
   constructor() { }
 
   ngOnInit(): void {