feature: game edit dialog added

web/src/app/app.module.ts

@@ -28,6 +28,7 @@ import {HireVeteranPlayerDialogComponent} from './components/hire-veteran-player
 import {LogInFormComponent} from './components/log-in-form/log-in-form.component';
 import {LogInDialogComponent} from './components/log-in-dialog/log-in-dialog.component';
 import { WelcomeComponent } from './components/welcome/welcome.component';
+import { GameEditDialogComponent } from './components/game-edit-dialog/game-edit-dialog.component';
 
 @NgModule({
   declarations: [
@@ -50,7 +51,8 @@ import { WelcomeComponent } from './components/welcome/welcome.component';
     HireVeteranPlayerDialogComponent,
     LogInFormComponent,
     LogInDialogComponent,
-    WelcomeComponent
+    WelcomeComponent,
+    GameEditDialogComponent
   ],
   imports: [
     BrowserModule,

web/src/app/components/components.module.ts

@@ -19,6 +19,7 @@ import {HireVeteranPlayerDialogComponent} from './hire-veteran-player-dialog/hir
 import {LogInFormComponent} from './log-in-form/log-in-form.component';
 import {LogInDialogComponent} from './log-in-dialog/log-in-dialog.component';
 import { WelcomeComponent } from './welcome/welcome.component';
+import { GameEditDialogComponent } from './game-edit-dialog/game-edit-dialog.component';
 
 
 @NgModule({
@@ -41,7 +42,8 @@ import { WelcomeComponent } from './welcome/welcome.component';
     HireVeteranPlayerDialogComponent,
     LogInFormComponent,
     LogInDialogComponent,
-    WelcomeComponent
+    WelcomeComponent,
+    GameEditDialogComponent
   ],
   imports: [
     CommonModule

web/src/app/components/game-edit-dialog/game-edit-dialog.component.html

+<app-update-game-score-form [model]="game"
+  (formSubmitEvent)="onFormSubmit()"
+></app-update-game-score-form>
\ No newline at end of file

web/src/app/components/game-edit-dialog/game-edit-dialog.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameEditDialogComponent } from './game-edit-dialog.component';
+
+describe('GameEditDialogComponent', () => {
+  let component: GameEditDialogComponent;
+  let fixture: ComponentFixture<GameEditDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ GameEditDialogComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GameEditDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

web/src/app/components/game-edit-dialog/game-edit-dialog.component.ts

+import { Component, Inject, OnInit } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { Game } from 'src/app/models/game';
+import { HireNewPlayerDialogComponent } from '../hire-new-player-dialog/hire-new-player-dialog.component';
+
+@Component({
+  selector: 'app-game-edit-dialog',
+  templateUrl: './game-edit-dialog.component.html',
+  styleUrls: ['./game-edit-dialog.component.css']
+})
+export class GameEditDialogComponent implements OnInit {
+
+    game! : Game;
+
+    constructor(
+        private dialogRef: MatDialogRef<HireNewPlayerDialogComponent>,
+        @Inject(MAT_DIALOG_DATA) data: any
+      ) {
+          this.game = data.game;
+    }
+
+  
+  ngOnInit(): void {
+  }
+
+  onFormSubmit(): void {
+    
+    this.dialogRef.close(true);
+  }
+
+}

web/src/app/components/games/games.component.html

@@ -16,49 +16,15 @@
             <td>{{game.homeTeam.name}}</td>
             <td>{{game.awayTeam.name}}</td>
             <td>{{game.homeTeamScore}}:{{game.awayTeamScore}}</td>
+            <td>
+                <button (click)="handleEditClick(game)" class="btn btn-dark">
+                    Edit
+                </button>
+            </td>
             <td>
               <app-delete-game-button (onDelete)="triggerRefreshEvent()" [id]=game.id></app-delete-game-button>
             </td>
-          </tr>
+        </tr>
     </tbody>
 </table>
-<!-- 
-<h2 class="fw-bold ms-2 mt-1 fs-2">Games</h2>
-<table #table [dataSource]="games" mat-table class="ms-4">
-
-  <ng-container matColumnDef="name">
-    <th *matHeaderCellDef mat-header-cell> Game Date</th>
-    <td *matCellDef="let game" mat-cell> {{game.gameDateTime}} </td>
-  </ng-container>
-  <ng-container matColumnDef="homeTeam">
-    <th *matHeaderCellDef mat-header-cell> Home Team</th>
-    <td *matCellDef="let game" mat-cell> {{game.homeTeam.name}} </td>
-  </ng-container>
-  <ng-container matColumnDef="awayTeam">
-    <th *matHeaderCellDef mat-header-cell> Away Team</th>
-    <td *matCellDef="let game" mat-cell> {{game.awayTeam.name}} </td>
-  </ng-container>
-  <ng-container matColumnDef="score">
-    <th *matHeaderCellDef mat-header-cell> Score</th>
-    <td *matCellDef="let game" mat-cell> {{game.homeTeamScore}}:{{game.awayTeamScore}} </td>
-  </ng-container>
-
-  <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
-</table>
--->
-<!--
-<table #table [dataSource]="games" mat-table class="ms-4">
-    <ng-container matColumnDef="homeTeam">
-      <th *matHeaderCellDef mat-header-cell>Home Team</th>
-      <td *matCellDef="let game" mat-cell> {{game.homeTeam.name}} </td>
-    </ng-container>
-    <ng-container matColumnDef="awayTeam">
-        <th *matHeaderCellDef mat-header-cell>Away Team</th>
-        <td *matCellDef="let game" mat-cell> {{game.awayTeam.name}} </td>
-    </ng-container>
-    <tr *matHeaderRowDef="columnsToDisplay" mat-header-row></tr>
-    <tr (click)="highlight(row)" *matRowDef="let row; columns: columnsToDisplay"
-        [ngClass]="{'highlight': selectedRowIndex == row.id && highlightSelected}"
-        mat-row></tr>
-</table>-->
   

web/src/app/components/games/games.component.ts

 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
 import {Game} from 'src/app/models/game';
+import { GameEditDialogComponent } from '../game-edit-dialog/game-edit-dialog.component';
 
 @Component({
   selector: 'app-games',
@@ -16,7 +18,7 @@ export class GamesComponent implements OnInit {
     "name", "homeTeam", "awayTeam", "score"
   ];
 
-  constructor() {
+  constructor(private dialog: MatDialog) {
   }
 
   ngOnInit(): void {
@@ -25,4 +27,15 @@ export class GamesComponent implements OnInit {
   triggerRefreshEvent(): void {
     this.reloadEvent.emit(null);
   }
+
+  handleEditClick(game: Game) {
+    console.log("aaaaaaa");
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.data = {
+      game: game
+    };
+    const dialogRef = this.dialog.open(GameEditDialogComponent, dialogConfig);
+    dialogRef.afterClosed().subscribe(() => this.triggerRefreshEvent());
+  }
+
 }

web/src/app/components/update-game-score-form/update-game-score-form.component.ts

@@ -43,6 +43,7 @@ export class UpdateGameScoreFormComponent implements OnInit {
 
   confirmSubmission(): void {
     this.confirmed = true;
+    console.log(this.modelCopy);
     this.gameService.updateGameScore(this.modelCopy);
     this.formSubmitEvent.emit(null);
   }

web/src/app/services/game.service.ts

@@ -51,7 +51,7 @@ export class GameService {
     let updateGame: GameShort = {
       id: game.id, gameDateTime: game.gameDateTime,
       homeTeamId: game.homeTeam.id, awayTeamId: game.awayTeam.id,
-      winnerId: game.winner.id, awayTeamScore: game.awayTeamScore, homeTeamScore: game.homeTeamScore
+      winnerId: game.winner?.id, awayTeamScore: game.awayTeamScore, homeTeamScore: game.homeTeamScore
     };
     this.http.put<GameShort>(this.updateUrl, updateGame, {
         headers: {Authorization : headerVal}