From 550d21e470b075fafc2f7cb6d5042a5a2f56372c Mon Sep 17 00:00:00 2001
From: Tomas Madeja <t.mm.madeja@gmail.com>
Date: Thu, 27 May 2021 12:06:45 +0200
Subject: [PATCH] feat: delete game button triggers chain of even emmits

---
 web/src/app/components/all-games/all-games.component.html | 2 +-
 web/src/app/components/all-games/all-games.component.ts   | 3 +++
 .../delete-game-button/delete-game-button.component.html  | 2 +-
 .../delete-game-button/delete-game-button.component.ts    | 4 +++-
 web/src/app/components/games/games.component.html         | 1 +
 web/src/app/components/games/games.component.ts           | 8 +++++++-
 web/src/app/services/game.service.ts                      | 3 ++-
 7 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/web/src/app/components/all-games/all-games.component.html b/web/src/app/components/all-games/all-games.component.html
index 1686188..7c46fff 100644
--- a/web/src/app/components/all-games/all-games.component.html
+++ b/web/src/app/components/all-games/all-games.component.html
@@ -1,2 +1,2 @@
 <p>All Games</p>
-<app-games [games]=games></app-games>
+<app-games [games]=games (reloadEvent)="handleRefreshEvent()"></app-games>
diff --git a/web/src/app/components/all-games/all-games.component.ts b/web/src/app/components/all-games/all-games.component.ts
index 337275a..73ec91e 100644
--- a/web/src/app/components/all-games/all-games.component.ts
+++ b/web/src/app/components/all-games/all-games.component.ts
@@ -22,4 +22,7 @@ export class AllGamesComponent implements OnInit {
       .subscribe(games => this.games = games);
   }
 
+  handleRefreshEvent() {
+    this.getGames();
+  }
 }
diff --git a/web/src/app/components/delete-game-button/delete-game-button.component.html b/web/src/app/components/delete-game-button/delete-game-button.component.html
index 33dab10..49b2960 100644
--- a/web/src/app/components/delete-game-button/delete-game-button.component.html
+++ b/web/src/app/components/delete-game-button/delete-game-button.component.html
@@ -1 +1 @@
-<button type="button" class="button delete-button" (click)="onDeleteClick()"></button>
+<button type="button" class="button delete-button" (click)="onDeleteClick()">Delete [{{id}}]</button>
diff --git a/web/src/app/components/delete-game-button/delete-game-button.component.ts b/web/src/app/components/delete-game-button/delete-game-button.component.ts
index df52311..c547156 100644
--- a/web/src/app/components/delete-game-button/delete-game-button.component.ts
+++ b/web/src/app/components/delete-game-button/delete-game-button.component.ts
@@ -1,4 +1,5 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { GameService } from 'src/app/services/game.service';
 
 @Component({
   selector: 'app-delete-game-button',
@@ -11,12 +12,13 @@ export class DeleteGameButtonComponent implements OnInit {
 
   @Output() onDelete: EventEmitter<number> = new EventEmitter();
 
-  constructor() { }
+  constructor(private gameService: GameService) { }
 
   ngOnInit(): void {
   }
 
   onDeleteClick(): void {
+    this.gameService.deleteGame(this.id);
     this.onDelete.emit(this.id);
   }
 }
diff --git a/web/src/app/components/games/games.component.html b/web/src/app/components/games/games.component.html
index 6197d31..2e29ad5 100644
--- a/web/src/app/components/games/games.component.html
+++ b/web/src/app/components/games/games.component.html
@@ -6,6 +6,7 @@
     <th>{{game.homeTeam.name}}</th>
     <th>{{game.awayTeam.name}}</th>
     <th>{{game.homeTeamScore}}:{{game.awayTeamScore}}</th> 
+    <th><app-delete-game-button [id]=game.id (onDelete)="triggerRefreshEvent()"></app-delete-game-button></th>
   </tr>
 </table>
 
diff --git a/web/src/app/components/games/games.component.ts b/web/src/app/components/games/games.component.ts
index 027e2fa..e1c21ab 100644
--- a/web/src/app/components/games/games.component.ts
+++ b/web/src/app/components/games/games.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { Game } from 'src/app/models/game';
 @Component({
   selector: 'app-games',
@@ -9,8 +9,14 @@ export class GamesComponent implements OnInit {
 
   @Input() games!: Array<Game>;
 
+  @Output() reloadEvent: EventEmitter<any>= new EventEmitter();
+
   constructor() { }
 
   ngOnInit(): void {
   }
+
+  triggerRefreshEvent(): void {
+    this.reloadEvent.emit(null);
+  }
 }
diff --git a/web/src/app/services/game.service.ts b/web/src/app/services/game.service.ts
index 7dd5221..2a8c909 100644
--- a/web/src/app/services/game.service.ts
+++ b/web/src/app/services/game.service.ts
@@ -1,3 +1,4 @@
+import { ValueConverter } from '@angular/compiler/src/render3/view/template';
 import { Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { Game } from '../models/game';
@@ -25,6 +26,6 @@ export class GameService {
   }
 
   deleteGame(id: number) {
-    
+    this.games = this.games.filter((val, i, array) => val.id != id);
   }
 }
-- 
GitLab