From 99489d54a44f76025704eb766ffef5db1c4f0486 Mon Sep 17 00:00:00 2001 From: apuente Date: Mon, 23 Sep 2024 16:11:07 +0200 Subject: [PATCH] Update command detail component and actions modal component --- .../command-detail.component.ts | 6 +-- .../acctions-modal.component.css | 34 +++++-------- .../acctions-modal.component.html | 21 +++++--- .../acctions-modal.component.ts | 51 +++++++++++++++++-- .../app/components/groups/groups.component.ts | 2 +- 5 files changed, 79 insertions(+), 35 deletions(-) diff --git a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts index 8c3c3c3..93de974 100644 --- a/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts +++ b/ogWebconsole/src/app/components/commands/command-detail/command-detail/command-detail.component.ts @@ -26,7 +26,7 @@ export class CommandDetailComponent implements OnInit { ngOnInit(): void { this.form = this.fb.group({ - selectedClients: [[], Validators.required], + selectedClients: [[this.data.importedClients], Validators.required], scheduleExecution: [false], scheduleDate: [''], scheduleTime: [''] @@ -70,13 +70,13 @@ export class CommandDetailComponent implements OnInit { edit(): void { const dialogRef = this.dialog.open(CreateCommandComponent, { width: '600px', - data: { command: this.data } + data: { command: this.data.command } }); dialogRef.afterClosed().subscribe(result => { if (result) { console.log('Comando editado:', result); - this.data = result; + this.data.command = result; } }); } diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.css b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.css index a63ee5d..80b1d70 100644 --- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.css +++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.css @@ -1,20 +1,14 @@ - -.button-column { - display: flex; - flex-direction: column; - align-items: center; - background-color: #fff; - padding: 20px; - border-radius: 10px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra ligera */ -} - -.button-column button { - margin: 10px 0; /* Espaciado entre los botones */ - width: 200px; /* Ancho uniforme para todos los botones */ - font-size: 16px; /* Tamaño de fuente consistente */ -} - -.button-column button.mat-flat-button { - border-radius: 5px; /* Bordes ligeramente redondeados */ -} +.button-container { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + margin: 20px; } + + .button-row { + display: contents; + } + + .button-action { + width: 100%; + } + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html index 928f06d..deaae91 100644 --- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html +++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html @@ -1,9 +1,14 @@

Acciones

-
- - - - - - -
\ No newline at end of file +
+
+ +
+ +
diff --git a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts index bd6714e..5b5e30f 100644 --- a/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts +++ b/ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.ts @@ -3,6 +3,8 @@ import { Component, Inject } from '@angular/core'; import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog'; import { ToastrService } from 'ngx-toastr'; import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component'; +import { HttpClient } from '@angular/common/http'; +import { CommandDetailComponent } from '../../commands/command-detail/command-detail/command-detail.component'; @Component({ selector: 'app-acctions-modal', templateUrl: './acctions-modal.component.html', @@ -10,23 +12,66 @@ import { CreatePxeBootFileComponent } from '../../ogboot/pxe-boot-files/create-p }) export class AcctionsModalComponent { selectedElements: any; + commands: any[] = []; + displayedColumns: string[] = ['name', 'createdBy', 'createdAt']; + private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30'; + + ngOnInit(): void { + this.loadCommands(); + } + + loadCommands(): void { + this.http.get(this.apiUrl).subscribe( + (data) => { + this.commands = data['hydra:member']; + }, + (error) => { + console.error('Error fetching commands', error); + } + ); + } constructor( private toastService: ToastrService, public dialog: MatDialog, + private http: HttpClient, @Inject(MAT_DIALOG_DATA) public data: any ) { - this.selectedElements = data.selectedElements; + this.selectedElements = data?.selectedElements || []; } onSend(): void { - this.toastService.success(' Acción enviada a: ' + this.selectedElements); + this.toastService.success('Acción enviada a: ' + this.selectedElements); } onPxeBootFile(): void { - const dialog = this.dialog.open(CreatePxeBootFileComponent, { data: this.selectedElements, width: '400px'}); + const dialog = this.dialog.open(CreatePxeBootFileComponent, { data: this.selectedElements, width: '400px' }); dialog.afterClosed().subscribe(() => { this.dialog.closeAll(); }); } + +onCommandClick(command: any): void { + const dialogRef = this.dialog.open(CommandDetailComponent, { + width: '600px', + data: { + command: command, + importedClients: this.selectedElements + } + }); + + dialogRef.afterClosed().subscribe(result => { + if (result) { + console.log('Modal cerrado. Resultado:', result); + } + }); +} + + chunkArray(arr: any[], chunkSize: number): any[] { + const chunks = []; + for (let i = 0; i < arr.length; i += chunkSize) { + chunks.push(arr.slice(i, i + chunkSize)); + } + return chunks; + } } diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index bc69ce3..d5c01c3 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -398,11 +398,11 @@ export class GroupsComponent implements OnInit { } else { this.selectedElements = []; } - console.log(this.selectedElements); } isSelected(name: string): boolean { return this.selectedElements.includes(name); + }