Adding Virtual Scrolling

src/app/features/plan/plan-pokemon/plan-pokemon.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
@@ -274,6 +274,10 @@ export class PlanPokemonComponent {
   ) {}
 
   ngOnInit() {
+    this.representative_pokemon = null;
+    this.evolve_to = []
+    this.breed_for = []
+    
     this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
       next: (pokemon) => {
         this.representative_pokemon = pokemon
@@ -311,7 +315,67 @@ export class PlanPokemonComponent {
         }
       });
     }
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['pokemon_family']) {
+      const currentFamily = changes['pokemon_family'].currentValue;
+      const previousFamily = changes['pokemon_family'].previousValue;
+
+      // Check if there's a meaningful change
+      if (currentFamily && currentFamily !== previousFamily) {
+        // Your logic here, e.g., re-fetch data or reset states
+        this.handlePokemonFamilyChange(currentFamily);
+      }
+    }
+  }
 
+  private handlePokemonFamilyChange(newFamily: PokemonFamilyEntry) {
+    // This function contains logic to handle the input change.
+    // For example, resetting component states or fetching additional data.
+    console.log('Pokemon family has changed:', newFamily);
+
+    this.representative_pokemon = null;
+    this.evolve_to = []
+    this.breed_for = []
+
+    this.pokemonService.getPokemonFromPFIC(this.pokemon_family.representative).subscribe({
+      next: (pokemon) => {
+        this.representative_pokemon = pokemon
+      },
+      error: (error) => {
+        console.error('Error loading Pokemon:', error);
+        this.cdr.markForCheck();
+      }
+    });
+
+    for(const target of this.pokemon_family.evolve_to) {
+      this.pokemonService.getPokemonFromPFIC(target).subscribe({
+        next: (pokemon) => {
+          if(pokemon) {
+            this.evolve_to.push(pokemon)
+          }
+        },
+        error: (error) => {
+          console.error('Error loading Pokemon:', error);
+          this.cdr.markForCheck();
+        }
+      });
+    }
+
+    for(const target of this.pokemon_family.breed_for) {
+      this.pokemonService.getPokemonFromPFIC(target).subscribe({
+        next: (pokemon) => {
+          if(pokemon) {
+            this.breed_for.push(pokemon)
+          }
+        },
+        error: (error) => {
+          console.error('Error loading Pokemon:', error);
+          this.cdr.markForCheck();
+        }
+      });
+    }
   }
 
   get hasTargets(): boolean {

src/app/features/plan/plan.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit, ViewChild } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { FormsModule } from '@angular/forms';
@@ -6,6 +6,7 @@ import { PlanGameComponent } from './plan-game/plan-game.component';
 import { PlanService } from '../../core/services/plan.service';
 import { GamePlan } from '../../core/models/plan.model';
 import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
+import { ScrollingModule, CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'app-plan',
@@ -15,7 +16,8 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
     MatCardModule,
     FormsModule,
     PlanGameComponent,
-    PlanPokemonComponent
+    PlanPokemonComponent,
+    ScrollingModule
 ],
   template: `
     <div class="plan-container">
@@ -34,13 +36,14 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
 
       <div class="pokemon-section" *ngIf="selectedGame">
         <h2>{{ selectedGame.game_name }} - Pokémon to Catch</h2>
-        <div class="pokemon-list">
+        <cdk-virtual-scroll-viewport [itemSize]="56" class="pokemon-viewport">
-          <app-plan-pokemon
+          <div *cdkVirtualFor="let pokemon of selectedGame.pokemon | keyvalue; trackBy: trackByPfic">
-            *ngFor="let pokemon of selectedGame.pokemon  | keyvalue"
+            <app-plan-pokemon
-            [pokemon_family]="pokemon.value"
+              [pokemon_family]="pokemon.value"
-            (statusUpdate)="onPokemonStatusUpdate($event)"
+              (statusUpdate)="onPokemonStatusUpdate($event)"
-          ></app-plan-pokemon>
+            ></app-plan-pokemon>
-        </div>
+          </div>
+        </cdk-virtual-scroll-viewport>
       </div>
     </div>
   `,
@@ -90,13 +93,23 @@ import { PlanPokemonComponent } from "./plan-pokemon/plan-pokemon.component";
       border-radius: 8px;
       margin-bottom: 20px;
     }
+    .pokemon-viewport {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      background: #f5f5f5;
+      border-radius: 8px;
+      margin-bottom: 20px;
+    }
   `]
 })
 export class PlanComponent implements OnInit {
+  @ViewChild(CdkVirtualScrollViewport) viewport!: CdkVirtualScrollViewport;
+  
   gamePlans: GamePlan[] = [];
   selectedGame: GamePlan | null = null;
 
-  constructor(private planService: PlanService) {}
+  constructor(private planService: PlanService, private cdr: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.loadPlan();
@@ -114,10 +127,20 @@ export class PlanComponent implements OnInit {
   }
 
   selectGame(game: GamePlan) {
+    if (this.viewport) {
+      this.viewport.scrollToIndex(0); // Reset scroll to top when switching games
+    }
+    this.selectedGame = null; // Clear the selected game first to avoid stale data
+    this.cdr.detectChanges();
     this.selectedGame = game;
+    this.cdr.detectChanges();
   }
 
   onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
     this.loadPlan();
   }
+
+  trackByPfic(index: number, item: any): string {
+    return item.key; // Assuming PFIC or another unique identifier is available
+  }
 }