Enable dynamic visibility for chess games tab

Add an EventEmitter to track the presence of chess games and control the visibility of the games tab based on this content. This change ensures the games tab is only enabled when there are games to display, enhancing user experience by hiding empty tabs.
MichiBaum · Dec 9, 2024 · 23e2705 · 23e2705
1 parent e217bae
commit 23e2705
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/website/src/app/chess/chess-event/chess-event-games/chess-event-games.component.ts b/website/src/app/chess/chess-event/chess-event-games/chess-event-games.component.ts
@@ -1,4 +1,4 @@
-import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, Output, SimpleChanges} from '@angular/core';
 import {ChessEvent, ChessGame} from "../../../core/models/chess/chess.models";
 import {ChessService} from "../../../core/services/chess.service";
 
@@ -12,6 +12,7 @@ import {ChessService} from "../../../core/services/chess.service";
 export class ChessEventGamesComponent implements OnChanges {
   @Input() event: ChessEvent | undefined;
   games: ChessGame[] | undefined;
+  @Output() haveContent = new EventEmitter<boolean>();
 
   constructor(
     private readonly chessService: ChessService,
@@ -21,6 +22,7 @@ export class ChessEventGamesComponent implements OnChanges {
     if (changes['event'] && changes['event'].currentValue) {
       this.chessService.eventGames(changes['event'].currentValue.id).subscribe(games => {
         this.games = [...games]
+        this.haveContent.emit(this.games.length > 0)
       })
     }
   }

diff --git a/website/src/app/chess/chess-event/chess-event.component.html b/website/src/app/chess/chess-event/chess-event.component.html
@@ -1,5 +1,5 @@
 <p-tabView [title]="event?.title">
-  <p-tabPanel *ngIf="event?.embedUrl" header="{{'chess.event.chess-com' | translate}}">
+  <p-tabPanel *ngIf="event?.embedUrl && event?.embedUrl !== ''" header="{{'chess.event.chess-com' | translate}}">
     <iframe style="border:0;" [src]="embedUrl" scrolling="no"></iframe>
   </p-tabPanel>
   <p-tabPanel header="{{'chess.event.details' | translate}}">
@@ -33,8 +33,8 @@
     </p-card>
 
   </p-tabPanel>
-  <p-tabPanel header="{{'chess.event.games' | translate}}">
-    <app-chess-event-games *ngIf="event" [event]="event"></app-chess-event-games>
+  <p-tabPanel header="{{'chess.event.games' | translate}}" [disabled]="gamesTabDisabled">
+    <app-chess-event-games *ngIf="event" [event]="event" (haveContent)="changeGamesTabVisibility($event)"></app-chess-event-games>
   </p-tabPanel>
 
 </p-tabView>
diff --git a/website/src/app/chess/chess-event/chess-event.component.ts b/website/src/app/chess/chess-event/chess-event.component.ts
@@ -36,6 +36,7 @@ export class ChessEventComponent implements OnInit {
   embedUrl: SafeResourceUrl = "";
   event: ChessEvent | undefined;
 
+  gamesTabDisabled: boolean = true;
 
   constructor(
     private _sanitizer: DomSanitizer,
@@ -72,4 +73,9 @@ export class ChessEventComponent implements OnInit {
     }
     return event.categories.map(value => value.title).join(", ")
   }
+
+  changeGamesTabVisibility(hasContent: boolean){
+    this.gamesTabDisabled = !hasContent;
+  }
+
 }