Conexión con los géneros en un select

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>
+    <h3 class="text-lg font-bold">¿Está seguro de que quiere borrar el libro?</h3>
-    <p class="text-base-content">Se borrará permanentemente el género {{libroEditando.titulo}}</p>
+    <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>

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.apiService.createBook(this.libroEditando).subscribe(() => this.recargar());
-    this.recargar();
   }
 
   async updateBook() {
-    //await this.apiService.updateBook(this.libroEditando);
+    this.apiService.updateBook(this.libroEditando).subscribe(() => this.recargar());
-    this.recargar();
   }
 
   async deleteBook() {
-    //await this.apiService.deleteBook(this.libroEditando);
+    this.apiService.deleteBook(this.libroEditando).subscribe(() => this.recargar());
-    this.recargar();
   }
 }

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';

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}`);
   }
 
-
+  createBook(book: Book): Observable<Book> {
-
+    return this.http.post<Book>(`${this.apiUrl}/books/`, book);
-
-  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;
   }
 
+  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}`);
-
+  }
 }