Update commands component and add command detail component

ogWebconsole/src/app/app.module.ts

@@ -84,7 +84,7 @@ import { OgDhcpSubnetsComponent } from './components/ogdhcp/og-dhcp-subnets/og-d
 import { CreateSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/create-subnet/create-subnet.component';
 import { AddClientsToSubnetComponent } from './components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component';
 import { CommandsComponent } from './components/commands/commands.component';
-import { CommandDetailComponent } from './components/commands/command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from './components/commands/detail-command/command-detail.component';
 import { CreateCommandComponent } from './components/commands/create-command/create-command.component';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatNativeDateModule } from '@angular/material/core';

ogWebconsole/src/app/components/commands/commands.component.css

@@ -39,6 +39,9 @@ pre {
   margin-top: 20px;
 }
 tr:hover {
-  background-color: rgba(0, 0, 0, 0.1); 
-  cursor: pointer; 
+  background-color: rgba(219, 219, 219, 0.219); 
+}
+
+.detailBtn{
+  cursor: pointer;
 }

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

@@ -6,20 +6,52 @@
 </div>
 
 <table mat-table [dataSource]="commands" class="mat-elevation-z8">
+  <!-- Nombre columna -->
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef> Nombre </th>
     <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
   </ng-container>
 
+  <!-- Creado por columna -->
   <ng-container matColumnDef="createdBy">
     <th mat-header-cell *matHeaderCellDef> Creado por </th>
     <td mat-cell *matCellDef="let command"> {{ command.createdBy }} </td>
   </ng-container>
 
+  <!-- Fecha de creación columna -->
   <ng-container matColumnDef="createdAt">
     <th mat-header-cell *matHeaderCellDef> Fecha de creación </th>
     <td mat-cell *matCellDef="let command"> {{ command.createdAt | date:'short' }} </td>
   </ng-container>
+
+  <!-- Columna para el menú de acciones -->
+  <ng-container matColumnDef="actions">
+    <th mat-header-cell *matHeaderCellDef> Acciones </th>
+    <td mat-cell *matCellDef="let command">
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>more_vert</mat-icon>
+      </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item (click)="executeCommand(command)">
+          <mat-icon>play_arrow</mat-icon>
+          <span>Ejecutar</span>
+        </button>
+        <button mat-menu-item (click)="viewDetails(command)">
+          <mat-icon>info</mat-icon>
+          <span>Detalles</span>
+        </button>
+        <button mat-menu-item (click)="editCommand(command)">
+          <mat-icon>edit</mat-icon>
+          <span>Editar</span>
+        </button>
+        <button mat-menu-item (click)="deleteCommand(command)">
+          <mat-icon>delete</mat-icon>
+          <span>Eliminar</span>
+        </button>
+      </mat-menu>
+    </td>
+  </ng-container>
+
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="openCommandDetailModal(row)"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>

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

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
-import { CommandDetailComponent } from './command-detail/command-detail/command-detail.component';
+import { CommandDetailComponent } from './detail-command/command-detail.component';
 import { CreateCommandComponent } from './create-command/create-command.component';
+import { DeleteModalComponent } from '../../shared/delete_modal/delete-modal/delete-modal.component';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'app-commands',
@@ -10,11 +12,12 @@ import { CreateCommandComponent } from './create-command/create-command.componen
   styleUrls: ['./commands.component.css']
 })
 export class CommandsComponent implements OnInit {
+  baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   commands: any[] = [];
-  displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
+  displayedColumns: string[] = ['name', 'createdBy', 'createdAt', 'actions']; 
   private apiUrl = 'http://127.0.0.1:8001/commands?page=1&itemsPerPage=30';
 
-  constructor(private http: HttpClient, private dialog: MatDialog) { }
+  constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) { }
 
   ngOnInit(): void {
     this.loadCommands();
@@ -31,17 +34,6 @@ export class CommandsComponent implements OnInit {
     );
   }
 
-  openCommandDetailModal(command: any): void {
-    const dialogRef = this.dialog.open(CommandDetailComponent, {
-      width: '800px',
-      data: command
-    });
-
-    dialogRef.afterClosed().subscribe(result => {
-      this.loadCommands();
-    });
-  }
-
   openCreateCommandModal(): void {
     const dialogRef = this.dialog.open(CreateCommandComponent, {
       width: '600px'
@@ -52,5 +44,61 @@ export class CommandsComponent implements OnInit {
     });
   }
 
+  executeCommand(command: any): void {
+    console.log('Ejecutar comando:', command);
+  }
+
+  editCommand(command: any): void {
+    const dialogRef = this.dialog.open(CreateCommandComponent, {
+      width: '600px',
+      data: { command: command } 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        console.log('Comando editado:', result);
+        this.loadCommands(); 
+      }
+    });
+  }
+
+  viewDetails(command: any): void {
+    const dialogRef = this.dialog.open(CommandDetailComponent, {
+      width: '800px',
+      data: command 
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.loadCommands(); 
+    });
+  }
+
+  deleteCommand(command: any): void { 
+    console.log('Eliminar comando:', command);
+    const dialogRef = this.dialog.open(DeleteModalComponent, 
+      {
+        width: '300px', 
+        data: { name: command.name } 
+      });
   
+      dialogRef.afterClosed().subscribe(result => {
+        if (result) {
+          const apiUrl = `${this.baseUrl}/commands/${command.uuid}`;
+    
+          this.http.delete(apiUrl).subscribe({
+            next: () => {
+              console.log('Role deleted successfully');
+              this.loadCommands();
+              this.toastService.success('Role deleted successfully'); 
+            },
+            error: (error) => {
+              console.error('Error deleting role:', error);
+            }
+          });
+        } else {
+          console.log('Role deletion cancelled');
+        }
+      });
+  }
+
 }

ogWebconsole/src/app/components/commands/detail-command/command-detail.component.css

@@ -4,13 +4,16 @@
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   width: calc(100% - 40px);
+  max-width: 800px; 
   height: calc(100% - 40px);
-  margin: 20px;
+  max-height: 90vh; 
+  margin: 20px auto; 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   font-family: 'Roboto', sans-serif;
   box-sizing: border-box;
+  overflow: hidden; 
 }
 
 .modal-title {
@@ -25,6 +28,7 @@
   flex-grow: 1;
   overflow-y: auto;
   padding: 10px;
+  max-height: calc(100vh - 200px); 
 }
 
 .modal-content p {
@@ -39,8 +43,11 @@
   color: #ffffff;
   padding: 15px;
   border-radius: 8px;
-  font-size: 0.9em;
+  font-size: 1.2em;
   overflow: auto;
+  max-height: 300px; 
+  white-space: pre-wrap; 
+  word-wrap: break-word;
 }
 
 .button-row {

ogWebconsole/src/app/components/commands/detail-command/command-detail.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { CreateCommandComponent } from '../../create-command/create-command.component';
+import { CreateCommandComponent } from '../create-command/create-command.component';
 import { HttpClient } from '@angular/common/http';
 
 @Component({

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

@@ -4,7 +4,7 @@ import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dial
 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';
+import { CommandDetailComponent } from '../../commands/detail-command/command-detail.component';
 @Component({
   selector: 'app-acctions-modal',
   templateUrl: './acctions-modal.component.html',