Solve conflics

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/groups/components/advanced-search/advanced-search.component.css

@@ -58,6 +58,27 @@
   width: 100%;
 }
 
+.result-card {
+  width: 100%;
+  max-width: 250px;
+  height: auto;
+  background-color: #ffffff;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  padding: 15px;
+  margin: 10px 10px;
+}
+
+.result-card.small-card {
+  width: 100%;
+  max-width: 180px;
+  padding: 10px;
+  margin: 10px 10px 10px 10px;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
 .result-container {
   display: flex;
   flex-direction: column;
@@ -73,6 +94,33 @@
   box-sizing: border-box;
 }
 
+.result-card {
+  &.card-og-live {
+    background-color: yellow; /* Verde */
+    color: white;
+  }
+  &.card-busy {
+    background-color: indianred; /* Naranja */
+    color: white;
+  }
+  &.card-windows {
+    background-color: cornflowerblue; /* Azul */
+    color: white;
+  }
+  &.card-linux {
+    background-color: mediumpurple; /* Púrpura */
+    color: white;
+  }
+  &.card-macos {
+    background-color: cornflowerblue; /* Rojo */
+    color: white;
+  }
+  &.card-off {
+    background-color: #9e9e9e; /* Gris */
+    color: white;
+  }
+}
+
 .result-container:hover {
   transform: translateY(-4px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
@@ -146,8 +194,129 @@ button {
   margin-bottom: 10px;
 }
 
+.red-card {
+  background-color: #f35f53;
+  color: white;
+}
+
+.green-card {
+  background-color: #4caf50;
+  color: white;
+}
+
+.view-mode-buttons {
+  padding: 20px;
+}
+
+.view-mode-buttons button.active {
+  font-weight: bold;
+  color: #3f51b5;
+}
+
+.result-card-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px;
+  margin-bottom: 2px;
+  border: 1px solid #ddd;
+}
+
+.result-card-list mat-checkbox {
+  margin-right: 8px;
+}
+
+.result-card-list .result-title {
+  font-size: 14px;
+  font-weight: bold;
+  margin-right: 8px;
+}
+
+.result-card-list mat-card-content {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  font-size: 12px;
+}
+
+.no-results {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%; /* Ajusta según el contenedor padre */
+  text-align: center;
+}
+
+.no-results p {
+  font-size: 1.5rem; /* Tamaño de fuente más grande */
+  font-weight: bold; /* Negrita para mejor visibilidad */
+  color: #555; /* Cambia el color según tu diseño */
+}
+
+.result-card-list p {
+  margin: 0;
+}
+
+.result-list {
+  height: auto;
+}
+
 @media (max-width: 600px) {
   .result-container {
     max-width: 100%;
   }
 }
+
+/* Estilo general para la tarjeta */
+.result-card {
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.result-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+/* Centrar contenido para clientes */
+.centered-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.client-info p {
+  margin: 0.5rem 0;
+  font-size: 1rem;
+  color: #333;
+}
+
+.client-info .client-name {
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.client-info .client-text {
+  font-size: 0.8rem;
+  color: #555;
+}
+
+.client-info strong {
+  font-weight: bold;
+  color: black;
+}
+
+.result-title {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #333;
+}
+
+.client-image {
+  width: 100%;
+  height: auto;
+}
+

ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html

@@ -11,6 +11,19 @@
     </mat-form-field>
   </div>
   <mat-divider class="divider"></mat-divider>
+
+  <div class="view-mode-buttons" joyrideStep="viewModeStep" text="Elige cómo quieres ver los resultados: en cuadrícula o en lista.">
+    <button mat-button (click)="changeViewMode('grid')" [class.active]="viewMode === 'grid'">
+      <mat-icon>grid_view</mat-icon> Cuadrícula
+    </button>
+    <button mat-button (click)="changeViewMode('list')" [class.active]="viewMode === 'list'">
+      <mat-icon>list</mat-icon> Lista
+    </button>
+    <button mat-button (click)="toggleSelectAll()">
+      <mat-icon>checkbox</mat-icon> Seleccionar/Deseleccionar Todos
+    </button>
+  </div>
+
   <div class="main-content">
     <div class="filters">
       <mat-form-field>
@@ -92,7 +105,7 @@
         </mat-form-field>
 
       </ng-container>
-      
+
       <button mat-raised-button color="primary" (click)="toggleSelectAll()">Seleccionar/Deseleccionar Todos</button>
       <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton">Guardar
         Filtros</button>
@@ -103,20 +116,45 @@
     </div>
     <div class="results">
       <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
-        <mat-grid-list cols="6">
-          <mat-grid-tile *ngFor="let result of filteredResults">
-            <div class="result-container" (dblclick)="onDobleClick($event, result.uuid, result.type)" [ngClass]="{
-            'card-og-live': result.status === 'og-live',
-            'card-busy': result.status === 'busy',
-            'card-windows': result.status === 'windows' || result.status === 'windows-session',
-           'card-linux': result.status === 'linux' || result.status === 'linux-session',
-    'card-macos': result.status === 'macos',
-    'card-off': result.status === 'off'
-  }" matTooltip="{{ result.status }}">
-              <input type="checkbox" [checked]="isSelected(result.name)"
-                (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox" />
-              <h3 class="result-title">{{ result.name }}</h3>
-              <div class="result-content">
+        <ng-container *ngIf="viewMode === 'grid'">
+          <mat-grid-list cols="7" rowHeight="1:1">
+            <mat-grid-tile *ngFor="let result of filteredResults">
+              <mat-card class="result-card small-card" [ngClass]="{
+                  'card-og-live': result.status === 'og-live',
+                  'card-busy': result.status === 'busy',
+                  'card-windows': result.status === 'windows' || result.status === 'windows-session',
+                  'card-linux': result.status === 'linux' || result.status === 'linux-session',
+                  'card-macos': result.status === 'macos',
+                  'card-off': result.status === 'off'
+                  }">
+                <mat-checkbox
+                  [checked]="isSelected(result.name)"
+                  (change)="onCheckboxChange($event, result.name, result['@id'])"
+                  class="result-checkbox">
+                </mat-checkbox>
+                <mat-card-title *ngIf="result.type !== 'client'" class="result-title">{{ result.name }}</mat-card-title>
+                <mat-card-content *ngIf="result.type === 'client'" class="result-content centered-content" >
+                  <div class="client-info">
+                    <p class="client-name">{{ result.name }}</p>
+                    <p class="client-text">{{ result.ip }}</p>
+                    <p class="client-text"> {{ result.mac }}</p>
+                  </div>
+                </mat-card-content>
+                <mat-card-content *ngIf="result.type !== 'client'" class="result-content">
+                  <p i18n="@@internalUnits" class="result-internal-units">Unidades internas: {{ result.children.length }}</p>
+                  <p i18n="@@clients" class="result-clients">Clientes: {{ result.clients.length }}</p>
+                </mat-card-content>
+              </mat-card>
+            </mat-grid-tile>
+          </mat-grid-list>
+        </ng-container>
+
+        <ng-container *ngIf="viewMode === 'list'">
+          <div class="result-list" *ngFor="let result of filteredResults">
+            <mat-card class="result-card-list">
+              <mat-checkbox [checked]="isSelected(result.name)" (change)="onCheckboxChange($event, result.name, result['@id'])" class="result-checkbox"></mat-checkbox>
+              <mat-card-title class="result-title">{{ result.name }}</mat-card-title>
+              <mat-card-content class="result-content">
                 <p class="result-type">{{ result.type !== 'client' ? result.type : '' }}</p>
                 <p class="result-ip" *ngIf="result.type === 'client'">{{ result.ip }}</p>
                 <p class="result-mac" *ngIf="result.type === 'client'">{{ result.mac }}</p>
@@ -127,12 +165,10 @@
                 <p *ngIf="result.type !== 'client'" i18n="@@clients" class="result-clients">
                   Clientes: {{ result.clients.length }}
                 </p>
-              </div>
+              </mat-card-content>
+            </mat-card>
             </div>
-
-
-          </mat-grid-tile>
-        </mat-grid-list>
+        </ng-container>
         <div class="paginator-container">
           <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page"
             [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
@@ -140,8 +176,11 @@
         </div>
       </ng-container>
       <ng-template #noResults>
-        <p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
+        <div class="no-results">
+          <p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
+        </div>
       </ng-template>
+
     </div>
   </div>
-</div>
+</div>

ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts

@@ -491,5 +491,5 @@ export class AdvancedSearchComponent {
       themeColor: '#3f51b5'
     });
   }
-  
+
 }

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css

@@ -144,6 +144,13 @@
   gap: 20px;
 }
 
+.client-button-row {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between; /* Distribuye el espacio entre los gráficos */
+  gap: 20px; /* Añade espacio entre los gráficos */
+}
+
 .buttons-row {
   display: flex;
   flex-direction: column;

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html

@@ -1,6 +1,8 @@
 <div class="header-container">
+
   <h2 class="title">{{ 'clientDetailsTitle' | translate }}</h2>
-  <div class="calendar-button-row">
+  <div class="client-button-row">
+    <button mat-flat-button color="primary" (click)="onEditClick($event, clientData.uuid)" i18n="@@editImage">Editar</button>
     <button mat-flat-button color="primary" [matMenuTriggerFor]="commandMenu">{{ 'commandsButton' | translate }}</button>
   </div>
   <mat-menu #commandMenu="matMenu">

ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts

@@ -5,6 +5,7 @@ import {MatTableDataSource} from "@angular/material/table";
 import {PartitionAssistantComponent} from "./partition-assistant/partition-assistant.component";
 import {MatDialog} from "@angular/material/dialog";
 import {Router} from "@angular/router";
+import {EditClientComponent} from "../../shared/clients/edit-client/edit-client.component";
 
 interface ClientInfo {
   property: string;
@@ -179,6 +180,11 @@ export class ClientMainViewComponent implements OnInit {
     this.isDiskUsageEmpty = this.diskUsageData.length === 0;
   }
 
+  onEditClick(event: MouseEvent, uuid: string): void {
+    event.stopPropagation();
+    const dialogRef = this.dialog.open(EditClientComponent, { data: { uuid }, width: '900px' } );
+    dialogRef.afterClosed().subscribe();
+  }
 
   getStrokeOffset(partitions: any[], index: number): number {
     const totalSize = partitions.reduce((acc, part) => acc + (part.size / 1024), 0);

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html

@@ -9,11 +9,11 @@
 <div class="select-container">
   <mat-form-field appearance="fill" class="full-width">
     <mat-label>Nombre canónico</mat-label>
-    <input matInput [(ngModel)]="name" placeholder="Nombre canónico" required>
+    <input matInput [(ngModel)]="name" placeholder="Nombre canónico. En minúscula y sin espacios" required>
   </mat-form-field>
 
   <mat-form-field appearance="fill" class="full-width">
-    <mat-label>Seleccione imagen</mat-label>
+    <mat-label>Seleccione imagen creada previamente</mat-label>
     <mat-select [(ngModel)]="selectedImage">
       <mat-option>--</mat-option>
       <mat-option *ngFor="let image of images" [value]="image['@id']">{{ image.name }}</mat-option>
@@ -27,6 +27,7 @@
     <td mat-cell *matCellDef="let row">
       <mat-radio-group
         [(ngModel)]="selectedPartition"
+        [disabled]="!row.operativeSystem"
       >
         <mat-radio-button [value]="row">
         </mat-radio-button>

ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts

@@ -1,7 +1,7 @@
 import {Component, EventEmitter, Output} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
 import {ToastrService} from "ngx-toastr";
-import {ActivatedRoute} from "@angular/router";
+import {ActivatedRoute, Router} from "@angular/router";
 import {MatButton} from "@angular/material/button";
 import {MatDivider} from "@angular/material/divider";
 import {NgForOf, NgIf} from "@angular/common";
@@ -103,7 +103,9 @@ export class CreateImageComponent {
   constructor(
     private http: HttpClient,
     private toastService: ToastrService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private router: Router,
+
   ) {}
 
   ngOnInit() {
@@ -132,7 +134,7 @@ export class CreateImageComponent {
   }
 
   loadImages() {
-    const url = `${this.baseUrl}/images?created=true&page=1&itemsPerPage=1000`;
+    const url = `${this.baseUrl}/images?created=false&page=1&itemsPerPage=1000`;
     this.http.get(url).subscribe(
       (response: any) => {
           this.images = response['hydra:member'];
@@ -156,7 +158,8 @@ export class CreateImageComponent {
     this.http.post(`${this.baseUrl}/images`, payload)
       .subscribe({
           next: (response) => {
-            this.toastService.success('Imagen creada exitosamente');
+            this.toastService.success('Petición de creación de imagen enviada');
+            this.router.navigate(['/images']);
           },
           error: (error) => {
             console.error('Error:', error);

ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.css

@@ -64,7 +64,7 @@ button{
 }
 
 .chip-busy {
-  background-color: red !important;
+  background-color: indianred !important;
   color: black;
 }
 
@@ -76,17 +76,17 @@ button{
 .chip-windows,
 .chip-windows-session,
 .chip-macos {
-  background-color: blue !important;
+  background-color: cornflowerblue !important;
   color: white;
 }
 
 .chip-linux,
 .chip-linux-session {
-  background-color: purple !important;
+  background-color: mediumpurple !important;
   color: white;
 }
 
 .chip-off {
-  background-color: grey !important;
+  background-color: darkgrey !important;
   color: white;
 }

ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.html

@@ -3,7 +3,7 @@
 <mat-dialog-content>
   <div class="button-container">
     <button
-      *ngFor="let command of commands"
+      *ngFor="let command of arrayCommands"
       mat-raised-button
       color="primary"
       class="button-action"

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

@@ -14,31 +14,21 @@ import { RouterLink } from '@angular/router';
 export class AcctionsModalComponent {
   baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   selectedElements: any;
-  commands: any[] = [];
   displayedColumns: string[] = ['name', 'createdBy', 'createdAt'];
-  filteredCommands = [...this.commands];
+
+  arrayCommands: any[] = [
+    {name: 'Enceder', slug: 'power-on'},
+    {name: 'Apagar', slug: 'power-off'},
+    {name: 'Reiniciar', slug: 'reboot'},
+    {name: 'Iniciar Sesión', slug: 'login'},
+    {name: 'Inventario Software', slug: 'software-inventory'},
+    {name: 'Inventario Hardware', slug: 'hardware-inventory'},
+    {name: 'Ejecutar script', slug: 'run-script'},
+  ];
+
   private apiUrl = `${this.baseUrl}/commands?page=1&itemsPerPage=40`;
 
   ngOnInit(): void {
-    this.loadCommands();
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value.toLowerCase();
-    this.filteredCommands = this.commands.filter(command =>
-      command.name.toLowerCase().includes(filterValue)
-    );
-  }
-
-  loadCommands(): void {
-    this.http.get<any>(this.apiUrl).subscribe(
-      (data) => {
-        this.commands = data['hydra:member'];
-      },
-      (error) => {
-        console.error('Error fetching commands', error);
-      }
-    );
   }
 
   constructor(

ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts

@@ -48,7 +48,7 @@ export class CreateClientComponent implements OnInit {
     this.clientForm = this.fb.group({
       organizationalUnit: [this.data.organizationalUnit ? this.data.organizationalUnit['@id'] : null, Validators.required],
       name: ['', Validators.required],
-      serialNumber: ['', Validators.required],
+      serialNumber: [''],
       netiface: null,
       netDriver: null,
       mac: ['', Validators.required],

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

@@ -44,21 +44,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>
 
   <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;

ogWebconsole/src/locale/en.json

@@ -149,6 +149,7 @@
   "readOnlyLabel": "Read only",
   "enabledLabel": "Enabled",
   "cancelButton": "Cancel",
+  "saveButton": "Save",
   "generalTabLabel": "General",
   "tabsStepText": "Use the tabs to access different viewing and search options for organizational units and clients.",
   "adminGroupsTitle": "Manage groups",

ogWebconsole/src/locale/es.json

@@ -149,7 +149,8 @@
   "commandScriptPlaceholder": "Script del comando",
   "readOnlyLabel": "Solo lectura",
   "enabledLabel": "Habilitado",
-  "cancelButton": "cancelar",
+  "cancelButton": "Cancelar",
+  "saveButton": "Guardar",
   "generalTabLabel": "General",
   "tabsStepText": "Utiliza las pestañás para acceder a las diferentes opciones de visualización y busqueda de unidades organizativas y clientes.",
   "adminGroupsTitle": "Administrar grupos",