h4ckx0r/CRUDAngular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Conexión con los géneros en un select

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2025-04-07 23:38:00 +02:00
parent 4b63cdced2
commit f36f1e2d5d
4 changed files with 46 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/components/table-books/table-books.component.html
View File

@@ -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>

17
src/app/components/table-books/table-books.component.ts
View File

@@ -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());
}
}

2
src/app/components/table-genders/table-genders.component.ts
View File

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

37
src/app/services/api.service.ts
View File

@@ -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}`);
}
}