From 68acb630a2fa2bbc1abfe20c804a820071570b77 Mon Sep 17 00:00:00 2001
From: ValentinFutterer <e11904654@student.tuwien.ac.at>
Date: Sun, 26 May 2024 16:10:55 +0200
Subject: [PATCH] Refactor games overview into own component

---
 .../indiestream/src/app/app.component.html    | 21 +-----
 frontend/indiestream/src/app/app.component.ts | 36 +--------
 .../games-overview.component.html             | 33 +++++++++
 .../games-overview.component.scss             |  4 +
 .../games-overview.component.spec.ts          | 24 ++++++
 .../games-overview.component.ts               | 74 +++++++++++++++++++
 6 files changed, 140 insertions(+), 52 deletions(-)
 create mode 100644 frontend/indiestream/src/app/components/games-overview/games-overview.component.html
 create mode 100644 frontend/indiestream/src/app/components/games-overview/games-overview.component.scss
 create mode 100644 frontend/indiestream/src/app/components/games-overview/games-overview.component.spec.ts
 create mode 100644 frontend/indiestream/src/app/components/games-overview/games-overview.component.ts

diff --git a/frontend/indiestream/src/app/app.component.html b/frontend/indiestream/src/app/app.component.html
index 91e85a7..c853fe2 100644
--- a/frontend/indiestream/src/app/app.component.html
+++ b/frontend/indiestream/src/app/app.component.html
@@ -183,26 +183,7 @@ <h1>Hello, {{ title }}</h1>
   </div>
 </main>
 
-<div class="container-fluid" style="white-space: pre">
-  <table>
-    <tr>
-      <th>ID</th>
-      <th>Title</th>
-      <th>Status</th>
-      <th>URL</th>
-      <th>Refresh</th>
-      <th>Delete</th>
-    </tr>
-    <tr *ngFor="let game of games">
-      <td>{{ game.id }}</td>
-      <td>{{ game.title }}</td>
-      <td>{{ game.status }}</td>
-      <td>{{ game.url }}</td>
-      <td><button mat-flat-button color="primary" (click)="refreshGame(game.id)">Refresh</button></td>
-      <td><button mat-flat-button color="warn" (click)="deleteGame(game.id)">Delete</button></td>
-    </tr>
-  </table>
-</div>
+<app-games-overview></app-games-overview>
 
 <app-game-upload></app-game-upload>
 
diff --git a/frontend/indiestream/src/app/app.component.ts b/frontend/indiestream/src/app/app.component.ts
index 56078cf..9e810ce 100644
--- a/frontend/indiestream/src/app/app.component.ts
+++ b/frontend/indiestream/src/app/app.component.ts
@@ -6,46 +6,18 @@ import { CommonModule } from "@angular/common";
 import { MatButtonModule } from '@angular/material/button';
 import { HttpClientModule } from "@angular/common/http";
 import { GameUploadComponent} from "./components/game-upload/game-upload.component";
+import {GamesOverviewComponent} from "./components/games-overview/games-overview.component";
 
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet, CommonModule, MatButtonModule, HttpClientModule, GameUploadComponent],
+  imports: [RouterOutlet, CommonModule, MatButtonModule, HttpClientModule, GameUploadComponent, GamesOverviewComponent],
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss'
 })
-export class AppComponent implements OnInit{
+export class AppComponent {
   title = 'indiestream';
   status: string = '';
 
-  public games: any;
-
-  constructor(private gamesService: GamesService) {  }
-
-  ngOnInit() {
-    this.getGames();
-  }
-
-  getGames() {
-    this.gamesService.getGames().subscribe(
-      response => {
-        this.games = response;
-        //console.log(this.games);
-      }
-    );
-  }
-
-  refreshGame(id: string) {
-    this.gamesService.getGame(id).subscribe(
-      response => {
-        this.games.map((game: Game) => this.games.find((resp: Game) => resp.id === game.id) || game);
-      }
-    )
-  }
-
-  deleteGame(id: string)  {
-    this.gamesService.deleteGame(id);
-    //TODO refresh?
-    //getGames():
-  }
+  constructor() {  }
 }
diff --git a/frontend/indiestream/src/app/components/games-overview/games-overview.component.html b/frontend/indiestream/src/app/components/games-overview/games-overview.component.html
new file mode 100644
index 0000000..327e207
--- /dev/null
+++ b/frontend/indiestream/src/app/components/games-overview/games-overview.component.html
@@ -0,0 +1,33 @@
+<div class="games-table">
+  <table mat-table [dataSource]="games">
+    <ng-container matColumnDef="ID">
+      <th mat-header-cell *matHeaderCellDef> ID </th>
+      <td mat-cell *matCellDef="let game"> {{game.id}} </td>
+    </ng-container>
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef> Title </th>
+      <td mat-cell *matCellDef="let game"> {{game.title}} </td>
+    </ng-container>
+    <ng-container matColumnDef="status">
+      <th mat-header-cell *matHeaderCellDef> Status </th>
+      <td mat-cell *matCellDef="let game"> {{game.status}} </td>
+    </ng-container>
+    <ng-container matColumnDef="url">
+      <th mat-header-cell *matHeaderCellDef> URL </th>
+      <td mat-cell *matCellDef="let game"> {{game.url}} </td>
+    </ng-container>
+    <ng-container matColumnDef="refresh">
+      <th mat-header-cell *matHeaderCellDef> Refresh </th>
+      <td mat-cell *matCellDef="let game"><button mat-flat-button color="primary"
+                                                  (click)="refreshGame(game.id)">Refresh</button></td>
+    </ng-container>
+    <ng-container matColumnDef="delete">
+      <th mat-header-cell *matHeaderCellDef> Delete </th>
+      <td mat-cell *matCellDef="let game"><button mat-flat-button color="warn"
+                                                  (click)="deleteGame(game.id)">Refresh</button></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let row; columns: columnsToDisplay;"></tr>
+  </table>
+</div>
diff --git a/frontend/indiestream/src/app/components/games-overview/games-overview.component.scss b/frontend/indiestream/src/app/components/games-overview/games-overview.component.scss
new file mode 100644
index 0000000..68a3ccf
--- /dev/null
+++ b/frontend/indiestream/src/app/components/games-overview/games-overview.component.scss
@@ -0,0 +1,4 @@
+.games-table {
+  white-space: pre;
+  width: 80%;
+}
diff --git a/frontend/indiestream/src/app/components/games-overview/games-overview.component.spec.ts b/frontend/indiestream/src/app/components/games-overview/games-overview.component.spec.ts
new file mode 100644
index 0000000..816ae75
--- /dev/null
+++ b/frontend/indiestream/src/app/components/games-overview/games-overview.component.spec.ts
@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GamesOverviewComponent } from './games-overview.component';
+import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
+
+describe('GamesOverviewComponent', () => {
+  let component: GamesOverviewComponent;
+  let fixture: ComponentFixture<GamesOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GamesOverviewComponent, BrowserAnimationsModule]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GamesOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/indiestream/src/app/components/games-overview/games-overview.component.ts b/frontend/indiestream/src/app/components/games-overview/games-overview.component.ts
new file mode 100644
index 0000000..522d248
--- /dev/null
+++ b/frontend/indiestream/src/app/components/games-overview/games-overview.component.ts
@@ -0,0 +1,74 @@
+import {Component, OnInit} from '@angular/core';
+import {MatButton} from "@angular/material/button";
+import {NgForOf} from "@angular/common";
+import {GamesService} from "../../services/games.service";
+import {Game} from "../../modules/games";
+import {
+    MatCell, MatCellDef,
+    MatColumnDef,
+    MatHeaderCell, MatHeaderCellDef,
+    MatHeaderRow,
+    MatHeaderRowDef,
+    MatRow,
+    MatRowDef,
+    MatTable
+} from "@angular/material/table";
+import {HttpClientModule} from "@angular/common/http";
+
+@Component({
+    selector: 'app-games-overview',
+    standalone: true,
+    imports: [
+        MatButton,
+        NgForOf,
+        MatTable,
+        MatColumnDef,
+        MatHeaderCell,
+        MatCell,
+        MatHeaderRow,
+        MatRow,
+        MatRowDef,
+        MatHeaderRowDef,
+        MatCellDef,
+        MatHeaderCellDef,
+        HttpClientModule,
+    ],
+    templateUrl: './games-overview.component.html',
+    styleUrl: './games-overview.component.scss'
+})
+export class GamesOverviewComponent implements OnInit
+{
+    columnsToDisplay = ['ID', 'title', 'status', 'url', 'refresh', 'delete'];
+    public games: any;
+
+    constructor(private gamesService: GamesService) {
+
+    }
+
+    ngOnInit() {
+        this.getGames();
+    }
+
+    getGames() {
+        this.gamesService.getGames().subscribe(
+            response => {
+                this.games = response;
+            }
+        );
+    }
+
+    refreshGame(id: string) {
+        this.gamesService.getGame(id).subscribe(
+            response => {
+                this.games.map((game: Game) => this.games.find((resp: Game) => resp.id === game.id) || game);
+            }
+        )
+    }
+
+    deleteGame(id: string) {
+        this.gamesService.deleteGame(id);
+        //TODO refresh?
+        //getGames():
+    }
+
+}