Skip to main content

​
Overview

The PrestamoListComponent provides administrators with a view of all loan requests in the system. Admins can approve or reject pending loan requests, and view the history of all loans.

​
Component Metadata

@Component({
  selector: 'app-prestamo-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './prestamo-list.html',
  styleUrls: ['./prestamo-list.css'],
})
Selector: app-prestamo-list Imports:
  • CommonModule - Angular common directives
Template: ./prestamo-list.html

​
Properties

​
prestamos

prestamos: Prestamo[] = []
Array containing all loan requests in the system. Each Prestamo object includes:
  • id: Loan request identifier
  • libro: Book object with title and details
  • usuario: User who requested the loan
  • fechaSolicitud: Date when the loan was requested
  • estado: Loan status (PENDIENTE, APROBADO, RECHAZADO)
The array is sorted by ID in descending order (newest first) with pending requests prioritized.

​
Injected Services

private prestamoService = inject(PrestamoService)
  • PrestamoService - Handles all loan-related API operations

​
Lifecycle Hooks

​
ngOnInit

ngOnInit(): void {
  this.cargarPrestamos();
}
Called when the component initializes. Immediately loads all loan requests from the backend.

​
Methods

​
cargarPrestamos

cargarPrestamos(): void
Fetches all loan requests from the PrestamoService:
  • Calls PrestamoService.getAll()
  • Sorts the results by ID in descending order (newest first)
  • Populates the prestamos array
This method is called on initialization and after approving or rejecting a loan to refresh the list.

​
aprobar

aprobar(id: number): void
Approves a pending loan request:
  1. Displays confirmation dialog “¿Aprobar este préstamo? El libro dejará de estar disponible.”
  2. If confirmed, calls PrestamoService.aprobar() with the loan ID
  3. On success:
    • Shows alert “Préstamo Aprobado”
    • Reloads the loan list by calling cargarPrestamos()
When a loan is approved, the associated book’s disponible status is set to false by the backend. Parameters:
  • id - The numeric ID of the loan request to approve

​
rechazar

rechazar(id: number): void
Rejects a pending loan request:
  1. Displays confirmation dialog “¿Rechazar solicitud?”
  2. If confirmed, calls PrestamoService.rechazar() with the loan ID
  3. On success:
    • Shows alert “Solicitud Rechazada”
    • Reloads the loan list by calling cargarPrestamos()
Rejecting a loan does not affect the book’s availability status. Parameters:
  • id - The numeric ID of the loan request to reject

​
Full Source Code

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

@Component({
  selector: 'app-prestamo-list',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './prestamo-list.html',
  styleUrls: ['./prestamo-list.css'],
})
export class PrestamoListComponent implements OnInit {
  private prestamoService = inject(PrestamoService);
  prestamos: Prestamo[] = [];

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

  cargarPrestamos(): void {
    this.prestamoService.getAll().subscribe({
      next: (data) => {
        // Los PENDIENTES primero
        this.prestamos = data.sort((a, b) => b.id - a.id);
      },
    });
  }

  aprobar(id: number): void {
    if (
      confirm('¿Aprobar este préstamo? El libro dejará de estar disponible.')
    ) {
      this.prestamoService.aprobar(id).subscribe(() => {
        alert('Préstamo Aprobado');
        this.cargarPrestamos();
      });
    }
  }

  rechazar(id: number): void {
    if (confirm('¿Rechazar solicitud?')) {
      this.prestamoService.rechazar(id).subscribe(() => {
        alert('Solicitud Rechazada');
        this.cargarPrestamos();
      });
    }
  }
}
  • Prestamo - Loan request data structure
  • Libro - Book data structure

Build docs developers (and LLMs) love

Get started for freeTalk to us