OriginDex/origin-dex/src/app/features/plan/plan.component.ts

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatCardModule } from '@angular/material/card';
import { FormsModule } from '@angular/forms';
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";

@Component({
  selector: 'app-plan',
  standalone: true,
  imports: [
    CommonModule,
    MatCardModule,
    FormsModule,
    PlanGameComponent,
    PlanPokemonComponent
],
  template: `
    <div class="plan-container">
      <div class="games-section">
        <div class="games-scroll">
          <div class="games-list">
            <app-plan-game
              *ngFor="let game of gamePlans"
              [game]="game"
              [isSelected]="selectedGame?.game_name === game.game_name"
              (gameSelect)="selectGame($event)"
            ></app-plan-game>
          </div>
        </div>
      </div>

      <div class="pokemon-section" *ngIf="selectedGame">
        <h2>{{ selectedGame.game_name }} - Pokémon to Catch</h2>
        <div class="pokemon-list">
          <app-plan-pokemon
            *ngFor="let pokemon of selectedGame.pokemon"
            [pokemon]="pokemon"
            (statusUpdate)="onPokemonStatusUpdate($event)"
          ></app-plan-pokemon>
        </div>
      </div>
    </div>
  `,
  styles: [`
    .plan-container {
      display: flex;
      flex-direction: column;
      height: calc(100vh - 64px); /* Adjust based on your header height */
      overflow: hidden;
    }

    .games-section {
      padding: 20px 20px 0 20px;
    }

    .games-scroll {
      width: 100%;
      overflow-x: auto;
      padding: 8px 0;
    }

    .games-list {
      display: flex;
      gap: 16px;
      padding: 0 8px;
      min-width: min-content;
    }

    .pokemon-section {
      padding: 0 20px;
      flex: 1;
      min-height: 0; /* Important for Firefox */
      display: flex;
      flex-direction: column;
    }

    .pokemon-section h2 {
      margin: 16px 0;
      color: #333;
    }

    .pokemon-list {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
      background: #f5f5f5;
      border-radius: 8px;
      margin-bottom: 20px;
    }
  `]
})
export class PlanComponent implements OnInit {
  gamePlans: GamePlan[] = [];
  selectedGame: GamePlan | null = null;

  constructor(private planService: PlanService) {}

  ngOnInit() {
    this.loadPlan();
  }

  private loadPlan() {
    this.planService.getPlan().subscribe(
      plan => {
        this.gamePlans = plan;
        if (!this.selectedGame && plan.length > 0) {
          this.selectedGame = plan[0];
        }
      }
    );
  }

  selectGame(game: GamePlan) {
    this.selectedGame = game;
  }

  onPokemonStatusUpdate(event: { pfic: string, caught: boolean }) {
    this.loadPlan();
  }
}