Documentation Index
Fetch the complete documentation index at: https://mintlify.com/AngheloMP10/biblioteca-virtual-frontend/llms.txt
Use this file to discover all available pages before exploring further.
Overview
The CatalogoComponent displays the complete catalog of available books to regular users. It allows users to browse books and request loans for available titles.
@Component({
selector: 'app-catalogo',
standalone: true,
imports: [CommonModule],
templateUrl: './catalogo.html',
styleUrls: ['./catalogo.css'],
})
app-catalogo
Imports:
CommonModule - Angular common directives
Template: ./catalogo.html
Properties
libros
Array containing all books fetched from the backend. Each book includes:
id: Book identifiertitulo: Book titleportada: Cover image URLanioPublicacion: Publication yeardisponible: Availability statusgenero: Genre informationautores: Array of author information
loading
Indicates whether the book data is currently being loaded. Used to show loading spinner.
Injected Services
private libroService = inject(LibroService)
private prestamoService = inject(PrestamoService)
- LibroService - Fetches book data from the API
- PrestamoService - Handles loan requests
Lifecycle Hooks
ngOnInit
ngOnInit(): void {
this.cargarLibros();
}
Methods
cargarLibros
Fetches all books from the LibroService:
- On success: Populates
libros array and sets loading to false
- On error: Logs error to console and sets
loading to false
solicitarPrestamo
solicitarPrestamo(libro: Libro): void
- Displays confirmation dialog with book title
- If confirmed, calls
PrestamoService.solicitar() with the book ID
- On success: Shows success alert informing user that admin will review the request
- On error: Shows error alert with the error message from the backend
Parameters:
libro - The Libro object for which to request a loan
Template Features
The component template displays books in a responsive card grid:
<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>
Full Source Code
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');
},
});
}
}
- Libro - Book data structure