Refactor groups component to update filter option

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

@@ -293,6 +293,9 @@
               </button>
             </td>
           </ng-container>
+
+          
+        
           <ng-container matColumnDef="maintenace">
             <th mat-header-cell *matHeaderCellDef mat-sort-header> {{ 'maintenance' | translate }} </th>
             <td mat-cell *matCellDef="let client"> {{ client.maintenance }} </td>
@@ -317,8 +320,22 @@
               <button mat-icon-button [matMenuTriggerFor]="clientMenu">
                 <mat-icon>more_vert</mat-icon>
               </button>
+              
+              
+
               <mat-menu #clientMenu="matMenu">
 
+                <mat-menu restoreFocus=false #commandMenu="matMenu" xPosition="before">
+                  <button mat-menu-item *ngFor="let command of commands" (click)="executeClientCommand(command, client)">
+                  <span>{{ command.name }}</span>
+                  </button>
+                </mat-menu>
+      
+                <button mat-menu-item [matMenuTriggerFor]="commandMenu" (click)="fetchCommands()">
+                  <mat-icon>play_arrow</mat-icon>
+                  <span>{{ 'executeCommand' | translate }}</span>
+                </button>
+
                 <button mat-menu-item (click)="onEditClick($event, client.type, client.uuid)">
                   <mat-icon>edit</mat-icon>
                     <span>{{ 'edit' | translate }}</span>

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

@@ -478,6 +478,10 @@ export class GroupsComponent implements OnInit, OnDestroy {
     }
   }
 
+  executeClientCommand(command: Command, client: Client): void {
+    this.toastr.success(`Ejecutando comando: ${command.name} en ${client.name}`);
+  }
+
   onShowClientDetail(event: MouseEvent, client: Client): void {
     event.stopPropagation();
     this.router.navigate(['clients', client.uuid], { state: { clientData: client } });