refs #798 Update commands-task component and detail-task component

ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.css

@@ -1,58 +1,101 @@
 .create-command-group-container {
-    padding: 20px;
+  padding: 20px;
-  }
+  max-width: 800px; /* Ancho máximo del contenedor */
-  
+  margin: auto; /* Centra el contenedor en la pantalla */
-  .command-group-form {
-    display: flex;
-    flex-direction: column;
-  }
   
+  background-color: #fff; /* Fondo blanco para el contenedor */
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
+}
+
+.command-group-form {
+  display: flex;
+  flex-direction: column;
+}
+
+.command-selection {
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0;
+}
+
+.available-commands, .selected-commands {
+  width: 48%;
+  display: flex;
+  flex-direction: column;
+  max-height: 200px; /* Limita la altura máxima para evitar desbordamiento */
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow-y: auto; /* Scroll para la tabla si hay demasiados comandos */
+  border: 1px solid #ccc; /* Borde para la tabla */
+  border-radius: 4px; /* Bordes redondeados */
+}
+
+.selected-commands-list {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f9f9f9;
+  flex: 1;
+  overflow-y: auto; /* Scroll para los comandos seleccionados */
+}
+
+.commands-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.command-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.remove-icon {
+  cursor: pointer;
+  color: #f44336; /* Rojo para eliminar */
+}
+
+.chevron-icon {
+  margin: 0 10px;
+  color: #666;
+}
+
+.command-group-actions {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-between;
+}
+
+
+.available-commands, .selected-commands {
+  width: 48%;
+  display: flex;
+  flex-direction: column;
+  max-height: 400px; /* Limita la altura máxima para evitar desbordamiento */
+}
+
+.table-wrapper {
+  flex: 1;
+  overflow-y: auto; /* Scroll para la tabla si hay demasiados comandos */
+  border: 1px solid #ccc; /* Borde para la tabla */
+  border-radius: 4px; /* Bordes redondeados */
+  max-height: 400px; /* Establece la altura máxima */
+}
+
+/* Para asegurar que el componente sea responsivo en pantallas pequeñas */
+@media (max-width: 600px) {
   .command-selection {
-    display: flex;
+    flex-direction: column; /* Cambia a columna en pantallas pequeñas */
-    justify-content: space-between;
-    margin: 20px 0;
   }
-  
   .available-commands, .selected-commands {
-    width: 48%;
+    width: 100%; /* Ocupa el ancho completo */
+    margin-bottom: 20px; /* Espacio entre elementos */
   }
-  
+}
-  .selected-commands-list {
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    padding: 10px;
-    background-color: #f9f9f9;
-  }
-  
-  .commands-container {
-    display: flex;
-    flex-direction: column;
-  }
-  
-  .command-item {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 8px;
-    background-color: #fff;
-    border-radius: 4px;
-    margin-bottom: 8px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  }
-  
-  .remove-icon {
-    cursor: pointer;
-    color: #f44336; /* Rojo para eliminar */
-  }
-  
-  .chevron-icon {
-    margin: 0 10px;
-    color: #666;
-  }
-  
-  .command-group-actions {
-    margin-top: 20px;
-    display: flex;
-    justify-content: space-between;
-  }
-  

ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html

@@ -12,24 +12,26 @@
     <div class="command-selection">
       <div class="available-commands">
         <h3>Comandos Disponibles</h3>
-        <table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
+        <div class="table-wrapper"> <!-- Agregar este contenedor -->
-          <ng-container matColumnDef="name">
+          <table mat-table [dataSource]="availableCommands" class="mat-elevation-z8">
-            <th mat-header-cell *matHeaderCellDef> Nombre </th>
+            <ng-container matColumnDef="name">
-            <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
+              <th mat-header-cell *matHeaderCellDef> Nombre </th>
-          </ng-container>
+              <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
-
+            </ng-container>
-          <ng-container matColumnDef="actions">
+      
-            <th mat-header-cell *matHeaderCellDef> Acciones </th>
+            <ng-container matColumnDef="actions">
-            <td mat-cell *matCellDef="let command">
+              <th mat-header-cell *matHeaderCellDef> Acciones </th>
-              <button mat-icon-button type="button" (click)="addCommand(command)">
+              <td mat-cell *matCellDef="let command">
-                <mat-icon>add</mat-icon>
+                <button mat-icon-button type="button" (click)="addCommand(command)">
-              </button>
+                  <mat-icon>add</mat-icon>
-            </td>
+                </button>
-          </ng-container>
+              </td>
-
+            </ng-container>
-          <tr mat-header-row *matHeaderRowDef="['name', 'actions']"></tr>
+      
-          <tr mat-row *matRowDef="let row; columns: ['name', 'actions'];"></tr>
+            <tr mat-header-row *matHeaderRowDef="['name', 'actions']"></tr>
-        </table>
+            <tr mat-row *matRowDef="let row; columns: ['name', 'actions'];"></tr>
+          </table>
+        </div>
       </div>
 
       <div class="selected-commands">
@@ -51,8 +53,8 @@
     </div>
 
     <div class="command-group-actions">
-      <button mat-flat-button color="primary" type="submit">Crear Grupo</button>
       <button mat-flat-button color="warn" (click)="close()">Cancelar</button>
+      <button mat-flat-button color="primary" type="submit">Crear Grupo</button>
     </div>
   </form>
 </div>

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

@@ -15,6 +15,11 @@
 </div>
 
 <table mat-table [dataSource]="tasks" class="mat-elevation-z8">
+  <ng-container matColumnDef="taskid">
+    <th mat-header-cell *matHeaderCellDef> Id</th>
+    <td mat-cell *matCellDef="let task"> {{ task.id }} </td>
+  </ng-container>
+
   <ng-container matColumnDef="notes">
     <th mat-header-cell *matHeaderCellDef> Info</th>
     <td mat-cell *matCellDef="let task"> {{ task.notes }} </td>

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

@@ -19,7 +19,7 @@ export class CommandsTaskComponent implements OnInit {
   itemsPerPage: number = 10;
   page: number = 1;
   pageSizeOptions: number[] = [5, 10, 20, 40, 100];
-  displayedColumns: string[] = ['notes','name', 'scheduledDate', 'enabled', 'actions']; 
+  displayedColumns: string[] = ['taskid','notes','name', 'scheduledDate', 'enabled', 'actions']; 
   private apiUrl = `${this.baseUrl}/command-tasks`;
 
   constructor(private http: HttpClient, private dialog: MatDialog, private toastService: ToastrService) {}
@@ -38,7 +38,6 @@ export class CommandsTaskComponent implements OnInit {
       (data) => {
         this.tasks = data['hydra:member'];
         this.length = data['hydra:totalItems'];
-        console.log('Tasks:', this.tasks);
       },
       (error) => {
         console.error('Error fetching tasks', error);
@@ -49,7 +48,7 @@ export class CommandsTaskComponent implements OnInit {
   viewTaskDetails(task: any): void {
     this.dialog.open(DetailTaskComponent, {
       width: '800px',
-      data: task,
+      data: {task},
     }).afterClosed().subscribe(() => this.loadTasks());
   }
 

ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.css

@@ -1,86 +1,21 @@
+.dialog-title {
+  font-weight: bold;
+}
+
+.task-form {
+  padding: 20px;
+}
+
 .full-width {
-    width: 100%;
+  width: 100%;
-  }
-  
-  .commands-list {
-    margin-top: 10px;
-    margin-bottom: 10px;
-    padding: 10px;
-    border: 1px solid #ccc;
-    background-color: #f9f9f9;
-    border-radius: 4px;
-  }
-  
-  .command-item {
-    padding: 10px;
-    background-color: #f4f4f4;
-    margin-bottom: 10px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-  }
-  
-  .command-item:hover {
-    background-color: #e9e9e9;
-  }
-  
-  /* Estilos generales para el dialogo */
-.mat-dialog-content {
-  padding: 20px;
-  max-width: 600px; /* Ancho máximo del dialogo */
 }
 
-/* Estilos para el stepper */
+.button-container {
-.mat-horizontal-stepper {
+  display: flex;
-  margin: 20px 0;
+  justify-content: space-between;
+  margin-top: 20px;
 }
 
-/* Estilos para cada paso */
+mat-form-field {
-.mat-step {
+  margin-bottom: 16px; /* Espaciado entre campos */
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-  background-color: #ffffff; /* Fondo blanco para los pasos */
-}
-
-/* Estilos para el encabezado de los pasos */
-.mat-step-header {
-  background-color: #f5f5f5; /* Fondo gris claro para el encabezado */
-  padding: 10px;
-  border-radius: 4px;
-  font-weight: 600; /* Negrita para el texto del encabezado */
-}
-
-/* Estilos para los botones */
-button.mat-button {
-  margin-right: 10px;
-}
-
-/* Estilos para los campos de formulario */
-.mat-form-field {
-  margin-bottom: 20px; /* Espaciado entre campos */
-}
-
-/* Estilos para errores */
-.mat-error {
-  font-size: 0.875em; /* Tamaño de fuente más pequeño para mensajes de error */
-  color: #d32f2f; /* Color rojo para errores */
-}
-
-/* Estilos para listas de comandos */
-.commands-list {
-  margin: 20px 0;
-  border: 1px solid #e0e0e0; /* Borde gris claro */
-  border-radius: 4px;
-  padding: 10px;
-  background-color: #fafafa; /* Fondo gris muy claro */
-}
-
-/* Estilos para elementos de comando */
-.command-item {
-  padding: 5px 0;
-  border-bottom: 1px solid #e0e0e0; /* Separación entre comandos */
-}
-
-.command-item:last-child {
-  border-bottom: none; /* Quitar borde del último elemento */
 }

ogWebconsole/src/app/components/commands/commands-task/create-task/create-task.component.html

@@ -1,17 +1,16 @@
-<h2 mat-dialog-title>{{ editing ? 'Editar Tarea' : 'Crear Tarea' }}</h2>
+<h2 mat-dialog-title class="dialog-title">{{ editing ? 'Editar Tarea' : 'Crear Tarea' }}</h2>
 
-<form [formGroup]="taskForm">
+<form [formGroup]="taskForm" class="task-form">
   <mat-dialog-content>
-    <mat-horizontal-stepper>
+    <mat-horizontal-stepper linear>
       <!-- Paso 1: Información y Selecciona Comandos -->
       <mat-step label="Información y Selecciona Comandos">
         <mat-form-field appearance="fill" class="full-width">
           <mat-label>Información</mat-label>
-          <textarea matInput formControlName="notes" placeholder="notas"></textarea>
+          <textarea matInput formControlName="notes" placeholder="Ingresa tus notas aquí"></textarea>
         </mat-form-field>
 
         <mat-form-field appearance="fill" class="full-width">
-                    
           <mat-label>Selecciona Comandos</mat-label>
           <mat-select formControlName="commandGroup" (selectionChange)="onCommandGroupChange()">
             <mat-option *ngFor="let group of availableCommandGroups" [value]="group.uuid">
@@ -21,8 +20,8 @@
           <mat-error *ngIf="taskForm.get('commandGroup')?.invalid">Este campo es obligatorio</mat-error>
         </mat-form-field>
 
-        <div>
+        <div class="button-container">
-          <button mat-button matStepperNext>Continuar</button>
+          <button mat-raised-button color="primary" matStepperNext [disabled]="taskForm.get('commandGroup')?.invalid">Continuar</button>
         </div>
       </mat-step>
 
@@ -37,9 +36,9 @@
           </mat-select>
         </mat-form-field>
 
-        <div>
+        <div class="button-container">
           <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-button matStepperNext>Continuar</button>
+          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
         </div>
       </mat-step>
 
@@ -59,9 +58,9 @@
           <mat-error *ngIf="taskForm.get('time')?.invalid">Este campo es obligatorio</mat-error>
         </mat-form-field>
 
-        <div>
+        <div class="button-container">
           <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-button matStepperNext>Continuar</button>
+          <button mat-raised-button color="primary" matStepperNext>Continuar</button>
         </div>
       </mat-step>
 
@@ -95,9 +94,9 @@
           </mat-select>
         </mat-form-field>
 
-        <div>
+        <div class="button-container">
           <button mat-button matStepperPrevious>Atrás</button>
-          <button mat-flat-button color="primary" (click)="saveTask()">Guardar</button>
+          <button mat-raised-button color="primary" (click)="saveTask()">Guardar</button>
         </div>
       </mat-step>
     </mat-horizontal-stepper>

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

@@ -0,0 +1,82 @@
+.detail-task-container {
+    padding: 20px;
+  }
+  
+  .mat-card {
+    margin: 20px 0;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+  }
+  
+  .mat-card-header {
+    background-color: #f5f5f5;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  .mat-card-title {
+    font-size: 20px;
+    font-weight: bold;
+  }
+  
+  .mat-card-subtitle {
+    font-size: 14px;
+    color: #666;
+  }
+  
+  .mat-card-content {
+    padding: 20px;
+  }
+  
+  h3 {
+    margin-top: 20px;
+    font-size: 18px;
+  }
+  
+  table {
+    width: 100%;
+    margin-top: 10px;
+  }
+  
+  th.mat-header-cell {
+    background-color: #f5f5f5;
+    font-weight: bold;
+    border-bottom: 2px solid #ccc;
+  }
+  
+  td.mat-cell {
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+  }
+  
+  tr:hover {
+    background-color: rgba(219, 219, 219, 0.5);
+  }
+  
+  .task-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 10px 20px;
+  }
+  
+  button {
+    background-color: #3f51b5;
+    color: white;
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+  
+  button:hover {
+    background-color: #2c387e;
+  }
+  
+  .cancel-button {
+    background-color: #dc3545;
+    color: white;
+  }
+  
+  .cancel-button:hover {
+    opacity: 0.9;
+  }
+  

ogWebconsole/src/app/components/commands/commands-task/detail-task/detail-task.component.html

@@ -1 +1,56 @@
-<p>detail-task works!</p>
+<div class="detail-task-container">
+    <h2>Detalles de la Tarea</h2>
+  
+    <mat-card>
+      <mat-card-header>
+        <mat-card-subtitle>Creado por: {{ task.createdBy }}</mat-card-subtitle>
+      </mat-card-header>
+  
+      <mat-card-content>
+        <p><strong>ID de la Tarea:</strong> {{ task.uuid }}</p>
+        <p><strong>Estado:</strong> {{ task.status }}</p>
+        <p><strong>Fecha de Creación:</strong> {{ task.createdAt | date: 'short' }}</p>
+        <p><strong>Notas:</strong> {{ task.notes }}</p>
+        
+        <h3>Grupos de Comandos Incluidos:</h3>
+        <table mat-table [dataSource]="task.commandGroups" class="mat-elevation-z8">
+          <ng-container matColumnDef="name">
+            <th mat-header-cell *matHeaderCellDef> Grupo de Comandos </th>
+            <td mat-cell *matCellDef="let group"> {{ group.name }} </td>
+          </ng-container>
+  
+          <ng-container matColumnDef="uuid">
+            <th mat-header-cell *matHeaderCellDef> UUID </th>
+            <td mat-cell *matCellDef="let group"> {{ group.uuid }} </td>
+          </ng-container>
+  
+          <tr mat-header-row *matHeaderRowDef="['name', 'uuid']"></tr>
+          <tr mat-row *matRowDef="let row; columns: ['name', 'uuid'];"></tr>
+        </table>
+  
+        <h3>Comandos a ejecutar:</h3>
+        <div *ngFor="let group of task.commandGroups">
+          <p><strong>Grupo: </strong>{{ group.name }}</p>
+          <table mat-table [dataSource]="group.commands" class="mat-elevation-z8">
+            <ng-container matColumnDef="commandName">
+              <th mat-header-cell *matHeaderCellDef> Comando </th>
+              <td mat-cell *matCellDef="let command"> {{ command.name }} </td>
+            </ng-container>
+  
+            <ng-container matColumnDef="commandUuid">
+              <th mat-header-cell *matHeaderCellDef> UUID </th>
+              <td mat-cell *matCellDef="let command"> {{ command.uuid }} </td>
+            </ng-container>
+  
+            <tr mat-header-row *matHeaderRowDef="['commandName', 'commandUuid']"></tr>
+            <tr mat-row *matRowDef="let row; columns: ['commandName', 'commandUuid'];"></tr>
+          </table>
+        </div>
+      </mat-card-content>
+    </mat-card>
+  
+    <div class="task-actions">
+      <button mat-flat-button class="cancel-button" (click)="closeDialog()">Cerrar</button>
+    </div>
+  </div>
+  

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

@@ -1,10 +1,24 @@
-import { Component } from '@angular/core';
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-detail-task',
   templateUrl: './detail-task.component.html',
-  styleUrl: './detail-task.component.css'
+  styleUrls: ['./detail-task.component.css']
 })
 export class DetailTaskComponent {
+  task: any;
 
+  constructor(
+    public dialogRef: MatDialogRef<DetailTaskComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any
+  ) {
+    this.task = data.task;  // Asignamos la tarea que viene en el modal
+    console.log('tasaas',this.task);
+  }
+
+  // Método opcional para cerrar el modal
+  closeDialog(): void {
+    this.dialogRef.close();
+  }
 }