Book Catalog

import { LibroService } from '../../core/services/libro';
import { PrestamoService } from '../../core/services/prestamo';
import { Libro } from '../../core/models/libro';

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');
    },
  });
}

<div class="row row-cols-1 row-cols-md-3 g-4" *ngIf="!loading">
  <div class="col" *ngFor="let libro of libros">
    <!-- Book card content -->
  </div>
</div>

<div *ngIf="loading" class="text-center py-5">
  <div class="spinner-border text-primary" role="status">
    <span class="visually-hidden">Cargando...</span>
  </div>
</div>

interface Libro {
  id: number;
  titulo: string;
  portada: string;          // Cover image URL
  anioPublicacion: number;
  disponible: boolean;
  genero: {
    id: number;
    nombre: string;
  };
  autores: Array<{
    id: number;
    nombre: string;
  }>;
}