From 7a095a0f475027cfe00ce8bf4352a0cd6badd1af Mon Sep 17 00:00:00 2001
From: Manuel Aranda <maranda@qindel.com>
Date: Wed, 20 Nov 2024 15:36:32 +0100
Subject: [PATCH] Improvment groops

---
 .../advanced-search.component.css             | 83 +++++++++++++++++--
 .../advanced-search.component.html            | 36 ++++----
 .../advanced-search.component.ts              |  2 +-
 .../client-main-view.component.css            |  7 ++
 .../client-main-view.component.html           |  3 +-
 .../client-main-view.component.ts             |  6 ++
 .../create-image/create-image.component.html  |  5 +-
 .../create-image/create-image.component.ts    | 11 ++-
 .../client-tab-view.component.css             |  8 +-
 .../acctions-modal.component.html             |  2 +-
 .../acctions-modal.component.ts               | 32 +++----
 .../create-client/create-client.component.ts  |  2 +-
 12 files changed, 140 insertions(+), 57 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
index 1513308..b8c1206 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.css
@@ -190,7 +190,6 @@ mat-spinner {
 .result-card.small-card {
   width: 100%;
   max-width: 180px;
-  height: 100%;
   padding: 10px;
   margin: 10px 10px 10px 10px;
   border-radius: 8px;
@@ -202,23 +201,23 @@ mat-spinner {
 
 .result-card {
   &.card-og-live {
-    background-color: #4caf50; /* Verde */
+    background-color: yellow; /* Verde */
     color: white;
   }
   &.card-busy {
-    background-color: #f44336; /* Naranja */
+    background-color: indianred; /* Naranja */
     color: white;
   }
   &.card-windows {
-    background-color: #2196f3; /* Azul */
+    background-color: cornflowerblue; /* Azul */
     color: white;
   }
   &.card-linux {
-    background-color: #9c27b0; /* Púrpura */
+    background-color: mediumpurple; /* Púrpura */
     color: white;
   }
   &.card-macos {
-    background-color: #ff9800; /* Rojo */
+    background-color: cornflowerblue; /* Rojo */
     color: white;
   }
   &.card-off {
@@ -286,6 +285,10 @@ mat-card {
   color: white;
 }
 
+.view-mode-buttons {
+  padding: 20px;
+}
+
 .view-mode-buttons button.active {
   font-weight: bold;
   color: #3f51b5;
@@ -317,6 +320,20 @@ mat-card {
   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;
 }
@@ -324,3 +341,57 @@ mat-card {
 .result-list {
   height: auto;
 }
+
+/* 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;
+}
+
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
index 4942774..b8a6f0c 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.html
@@ -27,7 +27,8 @@
       <mat-icon>list</mat-icon> Lista
     </button>
     <button mat-button (click)="toggleSelectAll()">
-      <mat-icon>checkbox</mat-icon> Seleccionar/Deseleccionar Todos</button>
+      <mat-icon>checkbox</mat-icon> Seleccionar/Deseleccionar Todos
+    </button>
   </div>
 
   <div class="main-content">
@@ -63,38 +64,38 @@
     <div class="results" joyrideStep="resultsStep" text="Aquí verás los resultados de tu búsqueda filtrada.">
       <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
         <ng-container *ngIf="viewMode === 'grid'">
-          <mat-grid-list cols="8" rowHeight="1:1">
+          <mat-grid-list cols="7" rowHeight="1:1">
             <mat-grid-tile *ngFor="let result of filteredResults">
-              <mat-card
-                class="result-card small-card"
-                [ngClass]="{
+              <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 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>
-
-                  <p *ngIf="result.type !== 'client'" i18n="@@internalUnits" class="result-internal-units">Unidades internas: {{ result.children.length }}</p>
-                  <p *ngIf="result.type !== 'client'" i18n="@@clients" class="result-clients">Clientes: {{ result.clients.length }}</p>
+                <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">
@@ -117,8 +118,11 @@
       </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>
diff --git a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
index 695e0e4..b366c89 100644
--- a/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
+++ b/ogWebconsole/src/app/components/groups/components/advanced-search/advanced-search.component.ts
@@ -492,5 +492,5 @@ export class AdvancedSearchComponent {
       themeColor: '#3f51b5'
     });
   }
-  
+
 }
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css
index 25ecb56..d174de6 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.css
+++ b/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;
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
index 944b729..ca08c9d 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
@@ -1,6 +1,7 @@
 <div class="header-container">
   <h2 class="title" i18n="@@adminImagesTitle">Datos de cliente</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">Comandos</button>
   </div>
   <mat-menu #commandMenu="matMenu">
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
index 335f3cc..83a7d83 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.ts
+++ b/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);
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
index 85216c9..4122dce 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.html
+++ b/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>
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts b/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts
index d306be8..731aeb7 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/create-image/create-image.component.ts
+++ b/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);
diff --git a/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.css b/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.css
index a57a176..4c8b5bc 100644
--- a/ogWebconsole/src/app/components/groups/components/client-tab-view/client-tab-view.component.css
+++ b/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;
 }
diff --git a/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.html b/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.html
index b61e8e7..08799d0 100644
--- a/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.html
+++ b/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"
diff --git a/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.ts b/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.ts
index fdc4435..1a49e71 100644
--- a/ogWebconsole/src/app/components/groups/shared/acctions-modal/acctions-modal.component.ts
+++ b/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(
diff --git a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts b/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
index 5b572aa..5cffebd 100644
--- a/ogWebconsole/src/app/components/groups/shared/clients/create-client/create-client.component.ts
+++ b/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],