From f36f1e2d5d439b623d9b65bae2d70a63e34d621d Mon Sep 17 00:00:00 2001
From: h4ckx0r <natanagoor@gmail.com>
Date: Mon, 7 Apr 2025 23:38:00 +0200
Subject: [PATCH] =?UTF-8?q?Conexi=C3=B3n=20con=20los=20g=C3=A9neros=20en?=
 =?UTF-8?q?=20un=20select?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../table-books/table-books.component.html    | 32 +++++++++++++---
 .../table-books/table-books.component.ts      | 17 ++++++---
 .../table-genders/table-genders.component.ts  |  2 +-
 src/app/services/api.service.ts               | 37 ++++---------------
 4 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/app/components/table-books/table-books.component.html b/src/app/components/table-books/table-books.component.html
index 66d9f43..8e82145 100644
--- a/src/app/components/table-books/table-books.component.html
+++ b/src/app/components/table-books/table-books.component.html
@@ -74,11 +74,21 @@
 
 <dialog id="modalEditarLibro" class="modal overflow-x-hidden">
   <div class="modal-box">
-    <h3 class="text-lg font-bold">Edición de un género</h3>
+    <h3 class="text-lg font-bold">Edición de un libro</h3>
     <fieldset class="fieldset">
-      <legend class="fieldset-legend">Nombre del género</legend>
+      <legend class="fieldset-legend">Título del libro</legend>
       <input type="text" class="input w-full" [(ngModel)]="libroEditando.titulo" />
     </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Autor del libro</legend>
+      <input type="text" class="input w-full" [(ngModel)]="libroEditando.autor" />
+    </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Género del libro</legend>
+      <select class="select w-full" [(ngModel)]="libroEditando.genero.id">
+        <option *ngFor="let gender of genders" [value]="gender.id">{{gender.nombre}}</option>
+      </select>
+    </fieldset>
     <div class="modal-action">
       <form method="dialog">
         <button class="btn btn-primary" (click)="updateBook()">Guardar</button>
@@ -91,8 +101,8 @@
 
 <dialog id="modalBorrarLibro" class="modal overflow-x-hidden">
   <div class="modal-box">
-    <h3 class="text-lg font-bold">¿Está seguro de que quiere borrar el género?</h3>
-    <p class="text-base-content">Se borrará permanentemente el género {{libroEditando.titulo}}</p>
+    <h3 class="text-lg font-bold">¿Está seguro de que quiere borrar el libro?</h3>
+    <p class="text-base-content">Se borrará permanentemente el libro titulado: {{libroEditando.titulo}}</p>
     <div class="modal-action">
       <form method="dialog" class="flex justify-between w-full">
         <button class="btn btn-error" (click)="deleteBook()">Borrar</button>
@@ -106,11 +116,21 @@
 
 <dialog id="modalNuevoLibro" class="modal overflow-x-hidden">
   <div class="modal-box">
-    <h3 class="text-lg font-bold">Nuevo género</h3>
+    <h3 class="text-lg font-bold">Nuevo libro</h3>
     <fieldset class="fieldset">
-      <legend class="fieldset-legend">Nombre del género</legend>
+      <legend class="fieldset-legend">Título del libro</legend>
       <input type="text" class="input w-full" [(ngModel)]="libroEditando.titulo" />
     </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Autor del libro</legend>
+      <input type="text" class="input w-full" [(ngModel)]="libroEditando.autor" />
+    </fieldset>
+    <fieldset class="fieldset">
+      <legend class="fieldset-legend">Género del libro</legend>
+      <select class="select w-full" [(ngModel)]="libroEditando.genero.id">
+        <option *ngFor="let gender of genders" [value]="gender.id">{{gender.nombre}}</option>
+      </select>
+    </fieldset>
     <div class="modal-action">
       <form method="dialog">
         <button class="btn btn-primary" (click)="createBook()">Guardar</button>
diff --git a/src/app/components/table-books/table-books.component.ts b/src/app/components/table-books/table-books.component.ts
index 22227a6..75fa363 100644
--- a/src/app/components/table-books/table-books.component.ts
+++ b/src/app/components/table-books/table-books.component.ts
@@ -29,12 +29,17 @@ export class TableBooksComponent {
     this.recargar(value);
   }
   @Output() cambiarTabla = new EventEmitter<string>();
+  genders: Gender[] = [];
 
   username: string = '';
   password: string = '';
 
   constructor(private apiService: ApiService) { }
 
+  ngOnInit() {
+    this.vaciarLibro();
+  }
+
   async recargar(textoParaFiltrar: string = '') {
     console.log(localStorage.getItem('jwt'))
     if (localStorage.getItem('jwt') === null) {
@@ -47,6 +52,9 @@ export class TableBooksComponent {
         this.books = this.consultaActual.content;
         this.cargarPaginacion();
       });
+      this.apiService.getGenders().subscribe(data => {
+        this.genders = data.content;
+      });
     }
   }
 
@@ -73,17 +81,14 @@ export class TableBooksComponent {
   }
 
   async createBook() {
-    //await this.apiService.createBook(this.libroEditando);
-    this.recargar();
+    this.apiService.createBook(this.libroEditando).subscribe(() => this.recargar());
   }
 
   async updateBook() {
-    //await this.apiService.updateBook(this.libroEditando);
-    this.recargar();
+    this.apiService.updateBook(this.libroEditando).subscribe(() => this.recargar());
   }
 
   async deleteBook() {
-    //await this.apiService.deleteBook(this.libroEditando);
-    this.recargar();
+    this.apiService.deleteBook(this.libroEditando).subscribe(() => this.recargar());
   }
 }
diff --git a/src/app/components/table-genders/table-genders.component.ts b/src/app/components/table-genders/table-genders.component.ts
index 576f132..b1f107c 100644
--- a/src/app/components/table-genders/table-genders.component.ts
+++ b/src/app/components/table-genders/table-genders.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { NgFor, NgIf } from '@angular/common';
 import { ApiService } from '../../services/api.service';
 import { Gender } from '../../interfaces/gender';
diff --git a/src/app/services/api.service.ts b/src/app/services/api.service.ts
index 3fd8368..1ad4fb0 100644
--- a/src/app/services/api.service.ts
+++ b/src/app/services/api.service.ts
@@ -44,37 +44,16 @@ export class ApiService {
     return this.http.get<ResponseBooks>(`${this.apiUrl}/books?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&filterField=${filterField}&filterValue=${textoFiltro}`);
   }
 
-
-
-
-  async getBooksOld(page: number = 0, size: number = 10, fieldOrder: 'id' | 'titulo' | 'autor' | null = null, orderType: 'asc' | 'desc' = 'asc', filterField: 'titulo' | 'autor' = 'titulo', textoFiltro: string = '') {
-
-    const listaLibros: Book[] = [];
-    let respuesta: ResponseBooks = {} as ResponseBooks;
-
-    await fetch(`${this.apiUrl}/books?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&filterField=${filterField}&filterValue=${textoFiltro}`, {
-      method: 'GET',
-      headers: {
-        'Accept': 'application/json'
-      }
-    })
-      .then(response => response.json())
-      .then(data => {
-        respuesta = data;
-      });
-
-    respuesta.content.forEach((element: any) => {
-      listaLibros.push(new Book(element.id, element.titulo, element.autor, new Gender(element.genero.id, element.genero.nombre)));
-    });
-
-    respuesta.content = listaLibros;
-
-    return respuesta;
+  createBook(book: Book): Observable<Book> {
+    return this.http.post<Book>(`${this.apiUrl}/books/`, book);
   }
 
+  updateBook(book: Book): Observable<Book> {
+    return this.http.put<Book>(`${this.apiUrl}/books/${book.id}`, book);
+  }
 
-
-
-
+  deleteBook(book: Book): Observable<Book> {
+    return this.http.delete<Book>(`${this.apiUrl}/books/${book.id}`);
+  }
 }