From aaa7ae0f29e1f30405f1182bc5a80a75617cfc9c Mon Sep 17 00:00:00 2001 From: apuente Date: Mon, 21 Oct 2024 15:05:23 +0200 Subject: [PATCH] refs #985 Update pxe-boot-files component add logic --- ogWebconsole/.env | 2 +- .../pxe-boot-files.component.css | 134 ++++----- .../pxe-boot-files.component.html | 129 +++++---- .../pxe-boot-files.component.ts | 264 ++++++------------ 4 files changed, 215 insertions(+), 314 deletions(-) diff --git a/ogWebconsole/.env b/ogWebconsole/.env index 3e0dde5..91f616b 100644 --- a/ogWebconsole/.env +++ b/ogWebconsole/.env @@ -1 +1 @@ -NG_APP_BASE_API_URL=http://127.0.0.1:8001 +NG_APP_BASE_API_URL=http://127.0.0.1:8001 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 34bfd0f..833284d 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 @@ -1,90 +1,70 @@ -.header-container { +.global-selectors { display: flex; justify-content: space-between; align-items: center; - height: 100px; - padding: 10px; - margin-top: 16px; + margin-bottom: 15px; + gap: 10px; } -.title { - font-size: 24px; +.global-selectors mat-form-field { + flex: 1; + margin-right: 10px; } -.templates-button-row { +.global-selectors button { + height: 40px; + padding: 0 20px; +} + +.filters-container { display: flex; - justify-content: flex-start; - margin-top: 16px; + justify-content: space-between; + align-items: flex-end; + gap: 10px; + margin-bottom: 15px; +} + +.filters-container mat-form-field { + flex: 1; +} + +.mat-elevation-z8 { + margin-top: 15px; +} + +.mat-table { + width: 100%; +} + +mat-header-cell, mat-cell { + text-align: center; + font-size: 14px; + padding: 8px; +} + +mat-form-field { + width: 100%; +} + +.mat-paginator { + margin-top: 20px; + display: flex; + justify-content: center; +} + +mat-select, mat-input { + font-size: 14px; +} + +.mat-form-field-appearance-fill .mat-form-field-flex { + padding: 8px 0; +} + +button.mat-flat-button { + padding: 8px 16px; + font-size: 14px; } .divider { margin: 20px 0; } - -.lists-container { - padding: 16px; -} - -.templatesLists-container { - flex: 1; -} - -.card.unidad-card { - height: 100%; - box-sizing: border-box; -} - -.template-container { - display: flex; - align-items: center; - margin-bottom: 16px; - border-bottom: 1px solid rgba(122, 122, 122, 0.555); -} - -.template-container h4 { - margin: 0; - flex: 1; -} - -.mat-icon-button { - margin-left: 16px; - align-self: center; -} - -.template-name{ - cursor: pointer; -} - -table { - width: 100%; - 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); -} - -.paginator-container { - display: flex; - justify-content: end; - margin-bottom: 30px; -} 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 9b84220..ed0dfd0 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 @@ -2,12 +2,7 @@ Sincronización ogBoot - - {{ getIcon().name }} - -

Oglives creados en servidor ogBoot: {{ alertMessage }}

-

Oglives creados en servidor ogCore (base de datos): {{ length }}

@@ -16,67 +11,79 @@
-

Administrar ficheros de arranque PXE

+

Administrar ficheros de arranque PXE

- -
- - Plantilla - - Todos - {{ template.name }} +
+ + + Selecciona Unidad Organizacional + + Cargando unidades... + + {{ unit.name }} + + + Este campo es obligatorio + + + + + Selecciona aula + + No hay aulas disponibles + + {{ child.name }} +
- - - - - - - - - + - - -
{{column.header}} - - - - - - - - - - {{column.cell(element)}} - - Acciones - - - - -
-
- - + +
+ + Global ogLive + + {{ option }} + + + +
+ + + + + + Id + {{element.id}} + + + + Nombre + {{element.name}} + + + + + Plantilla + + + + {{ option }} + + + + + + + + + + + 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 937bb24..281d8a7 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 @@ -1,198 +1,112 @@ -import { Component } from '@angular/core'; -import {MatTableDataSource} from "@angular/material/table"; -import {MatDialog} from "@angular/material/dialog"; -import {HttpClient} from "@angular/common/http"; -import { CreatePxeTemplateComponent } from '../pxe/create-pxeTemplate/create-pxe-template.component'; -import {PageEvent} from "@angular/material/paginator"; -import {ToastrService} from "ngx-toastr"; -import {DatePipe} from "@angular/common"; -import {DataService} from "./data.service"; +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { HttpClient } from '@angular/common/http'; +import { ToastrService } from 'ngx-toastr'; +import { PageEvent } from '@angular/material/paginator'; @Component({ selector: 'app-pxe-boot-files', templateUrl: './pxe-boot-files.component.html', - styleUrl: './pxe-boot-files.component.css' + styleUrls: ['./pxe-boot-files.component.css'] }) -export class PxeBootFilesComponent { +export class PxeBootFilesComponent implements OnInit { baseUrl: string = import.meta.env.NG_APP_BASE_API_URL; - pxeTemplates: any[] = []; - currentPage: number = 1; - dataSource = new MatTableDataSource(); - 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', - header: 'ID', - cell: (user: any) => `${user.id}` - }, - { - columnDef: 'templateName', - header: 'Nombre de la plantilla', - cell: (user: any) => `${user.template.name}` - }, - { - columnDef: 'clients', - header: 'Clientes', - cell: (user: any) => user.clients - }, - { - columnDef: 'createdAt', - header: 'Fecha de creación', - cell: (user: any) => `${this.datePipe.transform(user.createdAt, 'dd/MM/yyyy hh:mm:ss')}` - } - ]; - displayedColumns = [...this.columns.map(column => column.columnDef), 'actions']; - private apiUrl = `${this.baseUrl}/pxe-boot-files`; + availableOrganizationalUnits: any[] = []; + selectedUnitChildren: any[] = []; + dataSource: any[] = []; + + taskForm: FormGroup; + + loadingUnits: boolean = false; + + ogLiveOptions: string[] = ['Live Option 1', 'Live Option 2', 'Live Option 3']; + + globalOgLive: string | null = null; + + length: number = 100; + itemsPerPage: number = 10; + pageSizeOptions: number[] = [5, 10, 20, 40, 100]; + currentPage: number = 0; + + // Actualizar las columnas a mostrar + displayedColumns: string[] = ['id', 'name', 'ogLive']; constructor( - public dialog: MatDialog, + private fb: FormBuilder, private http: HttpClient, - private toastService: ToastrService, - private dataService: DataService - ) - { } + private toastService: ToastrService + ) { + this.taskForm = this.fb.group({ + organizationalUnit: ['', Validators.required], + selectedChild: ['', Validators.required] + }); + } ngOnInit(): void { + this.fetchOrganizationalUnits(); + } + + fetchOrganizationalUnits(): void { + this.loadingUnits = true; + this.http.get(`${this.baseUrl}/organizational-units?page=1&itemsPerPage=30`) + .subscribe( + response => { + this.availableOrganizationalUnits = response['hydra:member'].filter((item: any) => item.type === 'organizational-unit'); + this.loadingUnits = false; + }, + error => { + this.toastService.error('Error al cargar las unidades organizativas'); + this.loadingUnits = false; + } + ); + } + + onOrganizationalUnitChange(): void { + const selectedUnitId = this.taskForm.get('organizationalUnit')?.value; + const selectedUnit = this.availableOrganizationalUnits.find(unit => unit['@id'] === selectedUnitId); + if (selectedUnit && selectedUnit.children) { + this.selectedUnitChildren = selectedUnit.children.filter((child: any) => child.type === 'classroom'); + } else { + this.selectedUnitChildren = []; + } + } + + onChildChange(): void { + const selectedChildId = this.taskForm.get('selectedChild')?.value; + const selectedChild = this.selectedUnitChildren.find(child => child['@id'] === selectedChildId); + if (selectedChild && selectedChild.clients) { + this.dataSource = selectedChild.clients; + } else { + this.dataSource = []; + } + } + + applyToAll(): void { + this.dataSource = this.dataSource.map(client => ({ + ...client, + ogLive: this.globalOgLive || client.ogLive + })); + } + + onPageChange(event: PageEvent): void { + this.currentPage = event.pageIndex; + this.itemsPerPage = event.pageSize; this.search(); - this.loadAlert(); - this.dataService.getPxeTemplateOptions().subscribe( - data => { - this.templateOptions = data; - }, - error => { - console.error('Error fetching template options', error); - } - ); } 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 { - switch (action) { - case 'create': - this.http.post(`${this.apiUrl}/server/${image.uuid}/post`, {}).subscribe({ - next: () => { - console.log('Plantilla cambiada'); - this.search(); - }, - error: (error) => { - console.error('Error al cambiar la imagen:', error); - } - }); - break; - case 'delete': - this.http.post(`${this.apiUrl}/server/${image.uuid}/delete`, {}).subscribe({ - next: () => { - console.log('Plantilla cambiada'); - this.search(); - }, - error: (error) => { - console.error('Error al cambiar la imagen:', error); - } - }); - break; - default: - console.error('Acción no soportada:', action); - break; - } - } - - deletePxeTemplate(uuid: string) { - // Lógica para eliminar una plantilla - } - - editPxeTemplate(template: any) { - const dialogRef = this.dialog.open(CreatePxeTemplateComponent, { - data: template - }); - - dialogRef.afterClosed().subscribe(() => { - this.search(); - }); - } - - /* editPxeBootFile(bootFile: any) { - const dialogRef = this.dialog.open(CreatePxeBootFileComponent, { - data: { - clients: bootFile.clients, - bootFile: bootFile - } - }); - - dialogRef.afterClosed().subscribe(result => { - if (result) { - this.loadPxeBootFiles(); // Refrescar la lista después de la edición - } - }); - } */ - - applyFilter() { - this.http.get(`${this.apiUrl}?page=${this.page}&itemsPerPage=${this.itemsPerPage}`).subscribe({ - next: (response) => { - this.dataSource.data = response['hydra:member']; - this.length = response['hydra:totalItems']; - }, - error: (error) => { - console.error('Error al cargar las imágenes:', error); - } - }); - } - - onPageChange(event: PageEvent) { - this.page = event.pageIndex; - this.itemsPerPage = event.pageSize; - this.applyFilter(); - } - - loadAlert() { - this.http.get(`${this.apiUrl}/server/get-collection`) - .subscribe(response => { - // @ts-ignore - this.alertMessage = response.templates.length - }, error => { - console.error('Error al cargar la información del alert', error); - }); - } - - getIcon(): { name: string, color: string } { - if (Number(this.alertMessage) === this.length) { - return { name: 'check_circle', color: 'green' }; // Icono de check verde - } else { - return { name: 'cancel', color: 'red' }; // Icono de cruz roja - } + // Logic for searching data if it comes from a paginated API would go here } syncOgCore(): void { - this.http.post(`${this.apiUrl}/sync`, {}) - .subscribe(response => { + this.http.post(`${this.baseUrl}/sync`, {}).subscribe( + () => { this.toastService.success('Sincronización completada'); - this.search() - }, error => { - console.error('Error al sincronizar', error); + }, + error => { this.toastService.error('Error al sincronizar'); - }); + } + ); } - }