Update command detail component and actions modal component

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

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%;
+  }
+  

ogWebconsole/src/app/components/groups/acctions-modal/acctions-modal.component.html

@@ -1,9 +1,14 @@
 <h1 mat-dialog-title i18n="@@actions-modal-title">Acciones</h1>
-<div class="button-column">
-    <button mat-flat-button color="primary" class="button-action button-encender" i18n="@@power-on-button" (click)="onSend()">Encender</button>
-    <button mat-flat-button color="accent" class="button-action button-apagar" i18n="@@power-off-button" (click)="onSend()">Apagar</button>
-    <button mat-flat-button color="primary" class="button-action button-resetear" i18n="@@reset-button">Resetear</button>
-
-
-    <button mat-flat-button color="primary" (click)="onPxeBootFile()">Añadir fichero PXE</button>
-</div>
+<div class="button-container">
+  <div *ngFor="let row of chunkArray(commands, 4)" class="button-row">
+    <button 
+      *ngFor="let command of row" 
+      mat-flat-button 
+      color="primary" 
+      class="button-action"
+      (click)="onCommandClick(command)">
+      {{ command.name }}
+    </button>
+  </div>
+  <button mat-flat-button color="primary" (click)="onPxeBootFile()">Añadir fichero PXE</button>
+</div>

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<any>(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;
+  }
 }

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);
+    
   }