refs #1060 Add execute command from clasroom menu

ogWebconsole/src/app/app.module.ts

@@ -119,6 +119,7 @@ import { ClientsComponent } from './components/ogboot/pxe/clients/clients.compon
 import { RepositoriesComponent } from './components/repositories/repositories.component';
 import { CreateRepositoryComponent } from './components/repositories/create-repository/create-repository.component';
 import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
+import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
 @NgModule({
   declarations: [
     AppComponent,
@@ -195,6 +196,7 @@ import { ExecuteCommandComponent } from './components/commands/main-commands/exe
     RepositoriesComponent,
     CreateRepositoryComponent,
     ExecuteCommandComponent,
+    ExecuteCommandOuComponent,
   ],
   bootstrap: [AppComponent],
     imports: [BrowserModule,

ogWebconsole/src/app/components/commands/main-commands/execute-command/execute-command.component.html

@@ -3,7 +3,6 @@
 <mat-dialog-content class="form-container">
   <form [formGroup]="form" class="command-form">
     
-    <!-- Selector de Unidad Organizativa -->
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Unidad Organizativa</mat-label>
       <mat-select formControlName="unit">
@@ -11,7 +10,6 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- Selector de Subunidad Organizativa -->
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>Subunidad Organizativa</mat-label>
       <mat-select formControlName="childUnit">
@@ -19,7 +17,6 @@
       </mat-select>
     </mat-form-field>
 
-    <!-- Selector de Cliente (PC) con checkboxes -->
     <div class="checkbox-group">
       <label>Clientes (PC)</label>
       <div *ngIf="clients.length > 0">

ogWebconsole/src/app/components/groups/groups.component.html

@@ -127,6 +127,12 @@
                       <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0" i18n="@@deleteElementTooltip">delete</mat-icon>
                       <span i18n="@@deleteElementMenu">Borrar elemento</span>
                     </button>
+
+                    <button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
+                      <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Ejecutar comando" matTooltipHideDelay="0">play_arrow</mat-icon>
+                      <span >Ejecutar comando</span>
+                    </button>
+
                   </mat-menu>
                 </div>
               </div>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -25,6 +25,8 @@ import {ClientTabViewComponent} from "./components/client-tab-view/client-tab-vi
 import {
   OrganizationalUnitTabViewComponent
 } from "./components/organizational-unit-tab-view/organizational-unit-tab-view.component";
+import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
+import { ExecuteCommandOuComponent } from './shared/execute-command-ou/execute-command-ou.component';
 
 @Component({
   selector: 'app-groups',
@@ -298,6 +300,21 @@ export class GroupsComponent implements OnInit {
     }
   }
 
+  onExecuteCommand(event: MouseEvent, child: any, name: string, type:string): void {
+    console.log('Executing command on:', child); 
+
+    this.dialog.open(ExecuteCommandOuComponent, {
+      width: '50%',
+      data: { childUnitUuid: child }
+    }).afterClosed().subscribe((result) => {
+      if (result) {
+        console.log('Comando ejecutado con éxito');
+      } else {
+        console.log('Ejecución de comando cancelada');
+      }
+    });
+  }
+
   openSnackBar(isError: boolean, message: string) {
     if (isError) {
       this.toastService.error(' Error al eliminar la entidad: ' + message, 'Error');

ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.css

@@ -0,0 +1,57 @@
+.form-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+  }
+  
+  .command-form {
+    width: 100%;
+  }
+  
+  .full-width {
+    width: 100%;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding-top: 8px;
+  }
+  
+  .checkbox-group label {
+    font-weight: bold;
+    margin-bottom: 8px;
+  }
+  
+  .mat-checkbox {
+    margin-left: 8px;
+  }
+  
+  .mat-dialog-title {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 12px;
+  }
+  
+  .mat-dialog-content {
+    max-height: 60vh;
+    overflow-y: auto;
+  }
+  
+  .mat-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+    padding: 16px;
+  }
+  
+  button[mat-button] {
+    font-weight: 500;
+  }
+  
+  button[mat-button]:disabled {
+    color: rgba(0, 0, 0, 0.38);
+  }
+  

ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.html

@@ -0,0 +1,45 @@
+<h2 mat-dialog-title>Ejecutar Comando o Grupo de Comandos</h2>
+
+<mat-dialog-content class="form-container">
+    <form [formGroup]="form" class="command-form">
+
+        <mat-form-field appearance="fill" class="full-width">
+            <mat-label>Seleccione Comando</mat-label>
+            <mat-select formControlName="selectedCommand" (selectionChange)="form.get('selectedCommandGroup')?.reset()">
+                <mat-option *ngFor="let command of commands" [value]="command.uuid">{{ command.name }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <mat-form-field appearance="fill" class="full-width">
+            <mat-label>Seleccione Grupo de Comandos</mat-label>
+            <mat-select formControlName="selectedCommandGroup" (selectionChange)="form.get('selectedCommand')?.reset()">
+                <mat-option *ngFor="let group of commandGroups" [value]="group.uuid">{{ group.name }}</mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <div class="checkbox-group">
+            <label>Clientes</label>
+            <div *ngIf="clients.length > 0">
+                <mat-checkbox *ngFor="let client of clients" 
+                                            (change)="toggleClientSelection(client.uuid)"
+                                            [checked]="form.get('clientSelection')?.value.includes(client.uuid)">
+                    {{ client.name }}
+                </mat-checkbox>
+            </div>
+            <div *ngIf="clients.length === 0">
+                <p>No hay clientes disponibles</p>
+            </div>
+        </div>
+
+    </form>
+</mat-dialog-content>
+
+<mat-dialog-actions align="end">
+    <button mat-button (click)="closeModal()">Cancelar</button>
+    <button mat-button 
+                    (click)="executeCommand()" 
+                    [disabled]="!form.get('clientSelection')?.value.length || 
+                                            (!form.get('selectedCommand')?.value && !form.get('selectedCommandGroup')?.value)">
+        Ejecutar
+    </button>
+</mat-dialog-actions>

ogWebconsole/src/app/components/groups/shared/execute-command-ou/execute-command-ou.component.ts

@@ -0,0 +1,120 @@
+import { Component, Inject, OnInit } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { HttpClient } from '@angular/common/http';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+
+@Component({
+  selector: 'app-execute-command-ou',
+  templateUrl: './execute-command-ou.component.html',
+  styleUrls: ['./execute-command-ou.component.css']
+})
+export class ExecuteCommandOuComponent implements OnInit {
+  form: FormGroup;
+  clients: any[] = [];
+  commands: any[] = [];
+  commandGroups: any[] = [];
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
+
+  constructor(
+    private dialogRef: MatDialogRef<ExecuteCommandOuComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private http: HttpClient,
+    private fb: FormBuilder,
+    private toastService: ToastrService,
+  ) {
+    this.form = this.fb.group({
+      selectedCommand: [null],
+      selectedCommandGroup: [null],
+      clientSelection: [[]]
+    });
+  }
+
+  ngOnInit(): void {
+    this.loadClients();
+    this.loadCommands();
+    this.loadCommandGroups();
+  }
+
+  loadClients(): void {
+    this.http.get<any>(`${this.baseUrl}/organizational-units/${this.data.childUnitUuid}`).subscribe(
+      response => {
+        this.clients = this.getAllClients(response);
+        const clientIds = this.clients.map(client => client.uuid);
+        this.form.get('clientSelection')?.setValue(clientIds);
+      },
+      error => console.error('Error al cargar los clientes:', error)
+    );
+  }
+
+  getAllClients(unit: any): any[] {
+    let allClients = unit.clients || [];
+    if (unit.children && unit.children.length > 0) {
+      unit.children.forEach((child: any) => {
+        allClients = allClients.concat(this.getAllClients(child));
+      });
+    }
+    return allClients;
+  }
+
+  loadCommands(): void {
+    this.http.get<any>(`${this.baseUrl}/commands?page=1&itemsPerPage=30`).subscribe(
+      response => {
+        this.commands = response['hydra:member'] || [];
+      },
+      error => this.toastService.error('Error al cargar comandos:', error)
+    );
+  }
+
+  loadCommandGroups(): void {
+    this.http.get<any>(`${this.baseUrl}/command-groups?page=1&itemsPerPage=30`).subscribe(
+      response => {
+        this.commandGroups = response['hydra:member'] || [];
+      },
+      error => this.toastService.error('Error al cargar grupos de comandos:', error)
+    );
+  }
+
+  toggleClientSelection(clientId: string): void {
+    const selectedClients = this.form.get('clientSelection')?.value || [];
+    if (selectedClients.includes(clientId)) {
+      this.form.get('clientSelection')?.setValue(selectedClients.filter((id: string) => id !== clientId));
+    } else {
+      this.form.get('clientSelection')?.setValue([...selectedClients, clientId]);
+    }
+  }
+
+  executeCommand(): void {
+    const selectedCommandUuid = this.form.get('selectedCommand')?.value || this.form.get('selectedCommandGroup')?.value;
+    const isCommandGroup = !!this.form.get('selectedCommandGroup')?.value;
+
+    if (!selectedCommandUuid) {
+      console.warn('No se ha seleccionado ningún comando o grupo de comandos');
+      return;
+    }
+
+    const payload = {
+      clients: (this.form.get('clientSelection')?.value || []).map((clientId: string) => `/clients/${clientId}`)
+    };
+
+    const url = isCommandGroup
+      ? `${this.baseUrl}/command-groups/${selectedCommandUuid}/execute`
+      : `${this.baseUrl}/commands/${selectedCommandUuid}/execute`;
+
+    this.http.post(url, payload)
+      .subscribe({
+        next: () => {
+          this.toastService.success('Comando ejecutado con éxito');
+          this.dialogRef.close(true);
+        },
+        error: (error) => {
+          this.toastService.error('Error al ejecutar el comando:', error);
+          this.dialogRef.close(false);
+        }
+      });
+  }
+
+  closeModal(): void {
+    this.dialogRef.close(false);
+  }
+}