refs #1116. CreateImagen UX

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

@@ -33,7 +33,7 @@ export class TaskLogsComponent implements OnInit {
     {
       columnDef: 'command',
       header: 'Comando',
-      cell: (trace: any) => `${trace.command?.name}`
+      cell: (trace: any) => `${trace.command}`
     },
     {
       columnDef: 'client',
@@ -69,7 +69,7 @@ export class TaskLogsComponent implements OnInit {
   filteredCommands!: Observable<any[]>;
   commandControl = new FormControl();
 
-  constructor(private http: HttpClient, 
+  constructor(private http: HttpClient,
     private joyrideService: JoyrideService) {}
 
   ngOnInit(): void {
@@ -205,5 +205,5 @@ export class TaskLogsComponent implements OnInit {
       themeColor: '#3f51b5'
     });
   }
-  
+
 }

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

@@ -32,22 +32,34 @@
           {{ image[column.columnDef] ? 'check_circle' : 'cancel' }}
         </mat-icon>
       </ng-container>
-      <ng-container *ngIf="column.columnDef !== 'remotePc'">
+      <ng-container *ngIf="column.columnDef === 'status'">
+        <mat-chip >
+          {{ getStatusLabel(image[column.columnDef]) }}
+        </mat-chip>
+      </ng-container>
+      <ng-container *ngIf="column.columnDef !== 'remotePc' && column.columnDef !== 'status'">
         {{ column.cell(image) }}
       </ng-container>
     </td>
   </ng-container>
->>>>>>> c168c87fc9ebcc4b5cf9a68effa16bdb2a848e00
 
   <ng-container matColumnDef="actions">
-    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;" joyrideStep="actionsHeader" text="Acciones disponibles para cada imagen.">Acciones</th>
-    <td mat-cell *matCellDef="let client" style="text-align: center;">
-      <button mat-icon-button color="primary" (click)="editImage($event, client)" joyrideStep="editImageButton" text="Editar la imagen seleccionada.">
-        <mat-icon>edit</mat-icon>
+    <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
+    <td mat-cell *matCellDef="let image" style="text-align: center;">
+      <button mat-icon-button color="info" (click)="showImageInfo($event, image)"><mat-icon i18n="@@deleteElementTooltip">visibility</mat-icon></button>
+      <button mat-icon-button color="primary" (click)="editImage($event, image)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
+      <button mat-icon-button color="warn" (click)="deleteImage($event, image)">
+        <mat-icon i18n="@@deleteElementTooltip">delete</mat-icon>
       </button>
-      <button mat-icon-button color="warn" (click)="deleteImage($event, client)" joyrideStep="deleteImageButton" text="Eliminar la imagen seleccionada.">
-        <mat-icon>delete</mat-icon>
+      <button mat-icon-button [matMenuTriggerFor]="menu">
+        <mat-icon>menu</mat-icon>
       </button>
+      <mat-menu #menu="matMenu">
+        <button mat-menu-item [disabled]="!image.imageFullSum" (click)="toggleAction(image, 'get-aux')">Obtener ficheros auxiliares</button>
+        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'success'" (click)="toggleAction(image, 'delete-trash')">Eliminar imagen temporalmente</button>
+        <button mat-menu-item [disabled]="!image.imageFullsum || image.status !== 'trash'" (click)="toggleAction(image, 'recover')">Recuperar imagen de la papelera</button>
+
+      </mat-menu>
     </td>
   </ng-container>
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -79,6 +79,25 @@ export class ImagesComponent implements OnInit {
     this.search();
   }
 
+  getStatusLabel(status: string): string {
+    switch (status) {
+      case 'pending':
+        return 'Pendiente';
+      case 'in-progress':
+        return 'En progreso';
+      case 'aux-file-pending':
+        return 'Archivos auxiliares pendientes';
+      case 'success':
+        return 'Creado con éxito';
+      case 'trash':
+        return 'Papelera temporal';
+      case 'failed':
+        return 'Fallido';
+      default:
+        return 'Estado desconocido';
+    }
+  }
+
   addImage(): void {
     const dialogRef = this.dialog.open(CreateImageComponent, {
       width: '800px'
@@ -175,6 +194,28 @@ export class ImagesComponent implements OnInit {
           }
         });
         break;
+      case 'delete-trash':
+        this.http.post(`${this.baseUrl}/images/server/${image.uuid}/delete-trash`, {}).subscribe({
+          next: () => {
+            this.toastService.success('Petición de eliminación de la papelera temporal enviada');
+            this.search()
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
+      case 'recover':
+        this.http.post(`${this.baseUrl}/images/server/${image.uuid}/recover`, {}).subscribe({
+          next: () => {
+            this.toastService.success('Petición de recuperación de la imagen enviada');
+            this.search()
+          },
+          error: (error) => {
+            this.toastService.error(error.error['hydra:description']);
+          }
+        });
+        break;
       default:
         console.error('Acción no soportada:', action);
         break;