CatalogoComponent

@Component({
  selector: 'app-catalogo',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './catalogo.html',
  styleUrls: ['./catalogo.css'],
})

libros: Libro[] = []

loading: boolean = true

private libroService = inject(LibroService)
private prestamoService = inject(PrestamoService)

ngOnInit(): void {
  this.cargarLibros();
}

cargarLibros(): void

solicitarPrestamo(libro: Libro): void

<div class="row row-cols-1 row-cols-md-3 g-4" *ngIf="!loading">
  <div class="col" *ngFor="let libro of libros">
    <div class="card h-100 shadow-sm border-0">
      <!-- Book cover or default icon -->
      <div class="text-center bg-light p-3">
        <img *ngIf="libro.portada" [src]="libro.portada" class="card-img-top" />
        <div *ngIf="!libro.portada">📘</div>
      </div>
      
      <!-- Book details -->
      <div class="card-body">
        <span class="badge bg-info">{{ libro.genero?.nombre }}</span>
        <span class="badge" [ngClass]="libro.disponible ? 'bg-success' : 'bg-danger'">
          {{ libro.disponible ? 'Disponible' : 'Agotado' }}
        </span>
        
        <h5>{{ libro.titulo }}</h5>
        <p>Por: {{ libro.autores }}</p>
        <p>Año: {{ libro.anioPublicacion }}</p>
      </div>
      
      <!-- Request loan button -->
      <div class="card-footer">
        <button 
          class="btn btn-outline-primary" 
          [disabled]="!libro.disponible"
          (click)="solicitarPrestamo(libro)">
          {{ libro.disponible ? 'Solicitar Préstamo' : 'No Disponible' }}
        </button>
      </div>
    </div>
  </div>
</div>

import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LibroService } from '../../core/services/libro';
import { PrestamoService } from '../../core/services/prestamo';
import { Libro } from '../../core/models/libro';

@Component({
  selector: 'app-catalogo',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './catalogo.html',
  styleUrls: ['./catalogo.css'],
})
export class CatalogoComponent implements OnInit {
  private libroService = inject(LibroService);
  private prestamoService = inject(PrestamoService);

  libros: Libro[] = [];
  loading: boolean = true;

  ngOnInit(): void {
    this.cargarLibros();
  }

  cargarLibros(): void {
    this.libroService.getAll().subscribe({
      next: (data) => {
        this.libros = data;
        this.loading = false;
      },
      error: (err) => {
        console.error(err);
        this.loading = false;
      },
    });
  }

  solicitarPrestamo(libro: Libro): void {
    if (
      !confirm(`¿Deseas solicitar el préstamo del libro "${libro.titulo}"?`)
    ) {
      return;
    }

    this.prestamoService.solicitar(libro.id).subscribe({
      next: () => {
        alert(
          '✅ Solicitud enviada con éxito. El administrador evaluará tu petición.'
        );
      },
      error: (err) => {
        console.error(err);
        alert(err?.error || '❌ Error al solicitar el préstamo');
      },
    });
  }
}