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 GeneroListComponent provides administrators with a view of all literary genres in the system. It allows creating new genres, editing existing ones, and deleting genres that are not associated with any books.
@Component({
selector: 'app-genero-list',
standalone: true,
imports: [CommonModule, RouterLink],
templateUrl: './genero-list.html',
styleUrls: ['./genero-list.css'],
})
app-genero-list
Imports:
CommonModule - Angular common directivesRouterLink - Router navigation for creating and editing
Template: ./genero-list.html
Properties
generos
Array containing all literary genres in the system. Each genre object includes:
id: Genre identifiernombre: Genre name (e.g., “Ficción”, “Ciencia Ficción”, “Romance”)
Injected Services
private generoService = inject(GeneroService)
- GeneroService - Handles all genre-related API operations
Lifecycle Hooks
ngOnInit
ngOnInit(): void {
this.cargarGeneros();
}
Methods
cargarGeneros
Fetches all genres from the GeneroService and populates the generos array:
- On success: Updates
generos array and logs the data to console
- On error: Logs error message to console with prefix “Error al cargar géneros:”
This method is called on initialization and after deleting a genre to refresh the list.
eliminarGenero
eliminarGenero(id: number): void
- Displays confirmation dialog “¿Estás seguro de eliminar este género?”
- If confirmed, calls
GeneroService.delete() with the genre ID
- On success:
- Reloads the genre list by calling
cargarGeneros()
- Shows success alert “Género eliminado correctamente”
- On error:
- Logs error to console
- Shows error alert “No se pudo eliminar el género. Es probable que existan libros asociados a él.”
The error handling specifically mentions associated books because the backend prevents deleting genres that are referenced by existing books.
Parameters:
id - The numeric ID of the genre to delete
Full Source Code
import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterLink } from '@angular/router';
import { GeneroService } from '../../../core/services/genero';
import { Genero } from '../../../core/models/genero';
@Component({
selector: 'app-genero-list',
standalone: true,
imports: [CommonModule, RouterLink],
templateUrl: './genero-list.html',
styleUrls: ['./genero-list.css'],
})
export class GeneroListComponent implements OnInit {
// Inyección de dependencias
private generoService = inject(GeneroService);
generos: Genero[] = [];
ngOnInit(): void {
this.cargarGeneros();
}
cargarGeneros(): void {
this.generoService.getAll().subscribe({
next: (data) => {
this.generos = data;
console.log('Géneros cargados:', data);
},
error: (err) => {
console.error('Error al cargar géneros:', err);
},
});
}
eliminarGenero(id: number): void {
if (confirm('¿Estás seguro de eliminar este género?')) {
this.generoService.delete(id).subscribe({
next: () => {
// Recarga la lista
this.cargarGeneros();
alert('Género eliminado correctamente');
},
error: (err) => {
console.error('Error al eliminar:', err);
// Advertencia
alert(
'No se pudo eliminar el género. Es probable que existan libros asociados a él.'
);
},
});
}
}
}