From 1612bbc9f522d0e55a8da77cc902f528cb668714 Mon Sep 17 00:00:00 2001 From: Manuel Aranda Date: Mon, 2 Sep 2024 12:15:44 +0200 Subject: [PATCH] Some improvements. Added new filters --- .../components/ogboot/images/data.service.ts | 9 +-- .../ogboot/images/images.component.css | 17 +++++- .../ogboot/images/images.component.html | 20 ++++++- .../ogboot/images/images.component.ts | 4 +- .../ogboot/pxe-boot-files/data.service.ts | 39 +++++++++++++ .../pxe-boot-files.component.css | 19 +++++++ .../pxe-boot-files.component.html | 9 +++ .../pxe-boot-files.component.ts | 57 ++++++++++--------- .../app/components/ogboot/pxe/data.service.ts | 9 +-- .../components/ogboot/pxe/pxe.component.css | 17 +++++- .../components/ogboot/pxe/pxe.component.html | 14 ++++- .../components/ogboot/pxe/pxe.component.ts | 4 +- 12 files changed, 167 insertions(+), 51 deletions(-) create mode 100644 ogWebconsole/src/app/components/ogboot/pxe-boot-files/data.service.ts diff --git a/ogWebconsole/src/app/components/ogboot/images/data.service.ts b/ogWebconsole/src/app/components/ogboot/images/data.service.ts index 871d266..44ded6f 100644 --- a/ogWebconsole/src/app/components/ogboot/images/data.service.ts +++ b/ogWebconsole/src/app/components/ogboot/images/data.service.ts @@ -11,13 +11,10 @@ export class DataService { constructor(private http: HttpClient) {} - getImages(search: string = ''): Observable { - let url = `${this.apiUrl}`; - if (search) { - url += `&name=${encodeURIComponent(search)}`; - } + getImages(filters: { [key: string]: string }): Observable { + const params = new HttpParams({ fromObject: filters }); - return this.http.get(url).pipe( + return this.http.get(this.apiUrl, { params }).pipe( map(response => { if (response['hydra:member'] && Array.isArray(response['hydra:member'])) { return response['hydra:member']; diff --git a/ogWebconsole/src/app/components/ogboot/images/images.component.css b/ogWebconsole/src/app/components/ogboot/images/images.component.css index b1c07c2..07e92bc 100644 --- a/ogWebconsole/src/app/components/ogboot/images/images.component.css +++ b/ogWebconsole/src/app/components/ogboot/images/images.component.css @@ -46,8 +46,23 @@ table { margin-top: 50px; } -.search-container mat-form-field { +.search-container { + display: flex; + justify-content: space-between; + align-items: center; width: 100%; + padding: 0 5px; + box-sizing: border-box; +} + +.search-string { + flex: 2; + padding: 5px; +} + +.search-boolean { + flex: 1; + padding: 5px; } .header-container { diff --git a/ogWebconsole/src/app/components/ogboot/images/images.component.html b/ogWebconsole/src/app/components/ogboot/images/images.component.html index ae2d6d8..675387d 100644 --- a/ogWebconsole/src/app/components/ogboot/images/images.component.html +++ b/ogWebconsole/src/app/components/ogboot/images/images.component.html @@ -23,12 +23,28 @@
- + Buscar nombre de imagen - + search Pulsar 'enter' para buscar + + Imagen por defecto + + Todos + Sí + No + + + + Instalado servidor ogBoot + + Todos + Sí + No + +
diff --git a/ogWebconsole/src/app/components/ogboot/images/images.component.ts b/ogWebconsole/src/app/components/ogboot/images/images.component.ts index 1ce2ab0..401560b 100644 --- a/ogWebconsole/src/app/components/ogboot/images/images.component.ts +++ b/ogWebconsole/src/app/components/ogboot/images/images.component.ts @@ -25,7 +25,7 @@ export class ImagesComponent implements OnInit { pageSizeOptions: number[] = [5, 10, 20, 40, 100]; selectedElements: string[] = []; loading:boolean = false; - searchTerm: string = ''; + filters: { [key: string]: string } = {}; alertMessage: string | null = null; readonly panelOpenState = signal(false); datePipe: DatePipe = new DatePipe('es-ES'); @@ -90,7 +90,7 @@ export class ImagesComponent implements OnInit { search(): void { this.loading = true; - this.dataService.getImages(this.searchTerm).subscribe( + this.dataService.getImages(this.filters).subscribe( data => { this.dataSource.data = data; this.loading = false; diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/data.service.ts b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/data.service.ts new file mode 100644 index 0000000..545f8aa --- /dev/null +++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/data.service.ts @@ -0,0 +1,39 @@ +import { Injectable } from '@angular/core'; +import {HttpClient, HttpParams} from '@angular/common/http'; +import { Observable, throwError } from 'rxjs'; +import { catchError, map } from 'rxjs/operators'; +import { DataService as TemplateDataService } from './../pxe/data.service'; + +@Injectable({ + providedIn: 'root' +}) +export class DataService { + private apiUrl = 'http://127.0.0.1:8080/pxe-boot-files?page=1&itemsPerPage=1000'; + + constructor( + private http: HttpClient, + private templateDataService: TemplateDataService + ) {} + + getPxeBootFiles(filters: { [key: string]: string }): Observable { + const params = new HttpParams({ fromObject: filters }); + + return this.http.get(this.apiUrl, { params }).pipe( + map(response => { + if (response['hydra:member'] && Array.isArray(response['hydra:member'])) { + return response['hydra:member']; + } else { + throw new Error('Unexpected response format'); + } + }), + catchError(error => { + console.error('Error fetching images', error); + return throwError(error); + }) + ); + } + + getPxeTemplateOptions(): Observable { + return this.templateDataService.getPxeTemplates({}); + } +} diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css index 2bdc07b..34bfd0f 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css +++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.css @@ -60,6 +60,25 @@ table { margin-top: 50px; } +.search-container { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; + padding: 0 5px; + box-sizing: border-box; +} + +.search-string { + flex: 2; + padding: 5px; +} + +.search-entity { + flex: 1; + padding: 5px; +} + .mat-elevation-z8 { box-shadow: 0px 0px 0px rgba(0,0,0,0.2); } diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html index c2c4c84..9b84220 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html +++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.html @@ -20,6 +20,15 @@ +
+ + Plantilla + + Todos + {{ template.name }} + + +
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.ts b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.ts index b4350b1..c49a8f3 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.ts +++ b/ogWebconsole/src/app/components/ogboot/pxe-boot-files/pxe-boot-files.component.ts @@ -7,6 +7,7 @@ import { EditPxeTemplateComponent } from '../pxe/edit-pxe-template/edit-pxe-temp import {PageEvent} from "@angular/material/paginator"; import {ToastrService} from "ngx-toastr"; import {DatePipe} from "@angular/common"; +import {DataService} from "./data.service"; @Component({ selector: 'app-pxe-boot-files', @@ -20,10 +21,13 @@ export class PxeBootFilesComponent { length: number = 0; alertMessage: string | null = null; itemsPerPage: number = 10; + loading:boolean = false; + filters: { [key: string]: string } = {}; page: number = 1; pageSizeOptions: number[] = [5, 10, 20, 40, 100]; datePipe: DatePipe = new DatePipe('es-ES'); selectedElements: string[] = []; + templateOptions: any[] = []; columns = [ { columnDef: 'id', @@ -53,39 +57,36 @@ export class PxeBootFilesComponent { constructor( public dialog: MatDialog, private http: HttpClient, - private toastService: ToastrService + private toastService: ToastrService, + private dataService: DataService ) { } ngOnInit(): void { - this.loadPxeBootFiles(); + this.search(); this.loadAlert(); - } - - loadPxeBootFiles(): void { - this.http.get(`${this.apiUrl}?page=1&itemsPerPage=${this.itemsPerPage}`).subscribe({ - next: (response) => { - this.dataSource.data = response['hydra:member']; - this.length = response['hydra:totalItems']; - console.log('Plantillas PXE cargadas:', this.pxeTemplates); + this.dataService.getPxeTemplateOptions().subscribe( + data => { + this.templateOptions = data; }, - error: error => { - console.error('Error al cargar plantillas PXE:', error); + error => { + console.error('Error fetching template options', error); } - }); + ); } - addPxeTemplate() { - const dialogRef = this.dialog.open(CreatePxeTemplateComponent, { - }); - - dialogRef.afterClosed().subscribe(() => { - this.loadPxeBootFiles(); - }); - } - - showPxeInfo(template: any) { - + search(): void { + this.loading = true; + this.dataService.getPxeBootFiles(this.filters).subscribe( + data => { + this.dataSource.data = data; + this.loading = false; + }, + error => { + console.error('Error fetching pxe boot files', error); + this.loading = false; + } + ); } toggleAction(image: any, action:string): void { @@ -94,7 +95,7 @@ export class PxeBootFilesComponent { this.http.post(`${this.apiUrl}/server/${image.uuid}/post`, {}).subscribe({ next: () => { console.log('Plantilla cambiada'); - this.loadPxeBootFiles(); + this.search(); }, error: (error) => { console.error('Error al cambiar la imagen:', error); @@ -105,7 +106,7 @@ export class PxeBootFilesComponent { this.http.post(`${this.apiUrl}/server/${image.uuid}/delete`, {}).subscribe({ next: () => { console.log('Plantilla cambiada'); - this.loadPxeBootFiles(); + this.search(); }, error: (error) => { console.error('Error al cambiar la imagen:', error); @@ -128,7 +129,7 @@ export class PxeBootFilesComponent { }); dialogRef.afterClosed().subscribe(() => { - this.loadPxeBootFiles(); + this.search(); }); } @@ -172,7 +173,7 @@ export class PxeBootFilesComponent { this.http.post(`${this.apiUrl}/sync`, {}) .subscribe(response => { this.toastService.success('Sincronización completada'); - this.loadPxeBootFiles() + this.search() }, error => { console.error('Error al sincronizar', error); this.toastService.error('Error al sincronizar'); diff --git a/ogWebconsole/src/app/components/ogboot/pxe/data.service.ts b/ogWebconsole/src/app/components/ogboot/pxe/data.service.ts index 10b7621..b5d4a1a 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe/data.service.ts +++ b/ogWebconsole/src/app/components/ogboot/pxe/data.service.ts @@ -12,13 +12,10 @@ export class DataService { constructor(private http: HttpClient) {} - getPxeTemplates(search: string = ''): Observable { - let url = `${this.apiUrl}`; - if (search) { - url += `&name=${encodeURIComponent(search)}`; - } + getPxeTemplates(filters: { [key: string]: string }): Observable { + const params = new HttpParams({ fromObject: filters }); - return this.http.get(url).pipe( + return this.http.get(this.apiUrl, { params }).pipe( map(response => { if (response['hydra:member'] && Array.isArray(response['hydra:member'])) { return response['hydra:member']; diff --git a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css index 26df947..82a24ac 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css +++ b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.css @@ -54,8 +54,23 @@ table { margin-top: 50px; } -.search-container mat-form-field { +.search-container { + display: flex; + justify-content: space-between; + align-items: center; width: 100%; + padding: 0 5px; + box-sizing: border-box; +} + +.search-string { + flex: 2; + padding: 5px; +} + +.search-boolean { + flex: 1; + padding: 5px; } .header-container { diff --git a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html index f2be751..4493cfc 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html +++ b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.html @@ -22,11 +22,19 @@
- + Buscar nombre de plantilla - + search - Pulsar 'enter' para buscar + Pulsar 'enter' para buscar + + + Creada en ogBoot + + Todos + Sí + No +
{{column.header}}
diff --git a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.ts b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.ts index ee6e2ec..b54a59a 100644 --- a/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.ts +++ b/ogWebconsole/src/app/components/ogboot/pxe/pxe.component.ts @@ -25,7 +25,7 @@ export class PxeComponent { pageSizeOptions: number[] = [5, 10, 20, 40, 100]; selectedElements: string[] = []; loading:boolean = false; - searchTerm: string = '' + filters: { [key: string]: string } = {}; alertMessage: string | null = null; datePipe: DatePipe = new DatePipe('es-ES'); selectedItem: any = null; @@ -70,7 +70,7 @@ export class PxeComponent { search(): void { this.loading = true; - this.dataService.getPxeTemplates(this.searchTerm).subscribe( + this.dataService.getPxeTemplates(this.filters).subscribe( data => { this.dataSource.data = data; this.loading = false;