From c1b9a08f6caeaaa6d17b2ac7f1f83b99672dc1be Mon Sep 17 00:00:00 2001
From: apuente <apuente@qindel.com>
Date: Tue, 29 Oct 2024 10:45:35 +0100
Subject: [PATCH] refs #1042 Advanced search size buttons

---
 .../advanced-search.component.css             |  43 ++++
 .../advanced-search.component.html            | 223 +++++++-----------
 .../advanced-search.component.ts              |   6 +
 3 files changed, 135 insertions(+), 137 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 c64d300..eec44f6 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
@@ -259,3 +259,46 @@ mat-card {
   background-color: #4caf50; 
   color: white; 
 }
+
+.view-mode-buttons button.active {
+  font-weight: bold;
+  color: #3f51b5;
+}
+
+.result-card {
+  width: 100%; 
+}
+
+.result-card-list {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px;
+  margin-bottom: 4px;
+  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; 
+}
+
+.result-card-list p {
+  margin: 0; 
+}
+
+.result-list {
+  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 cc3e7b3..89545cb 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
@@ -1,147 +1,96 @@
 <h2 class="title" i18n="@@searchTitle">Búsqueda avanzada</h2>
-    <div class="container">
-      <div class="header">
-        <mat-form-field>
-          <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
-          <mat-select (selectionChange)="loadSelectedFilter($event.value)">
-            <mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
-              {{ savedFilter[0] }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-      </div>
-      <mat-divider class="divider"></mat-divider>
-      <div class="main-content">
-        <div class="filters">
-          <mat-form-field>
-            <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
-            <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
-              <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
-              <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
-            </mat-select>
-          </mat-form-field>
-          <mat-form-field class="example-full-width">
-            <mat-label i18n="@@nameLabel">Nombre</mat-label>
-            <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
-          </mat-form-field>
 
-          <ng-container *ngIf="selectedFilter1 === 'ou'">
+<div class="container">
+  <div class="header">
+    <mat-form-field>
+      <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
+      <mat-select (selectionChange)="loadSelectedFilter($event.value)">
+        <mat-option *ngFor="let savedFilter of savedFilterNames" [value]="savedFilter">
+          {{ savedFilter[0] }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
 
-          <mat-form-field [disabled]="selectedFilter1 === 'ou'">
-            <mat-label i18n="@@unitTypeLabel">Tipo de unidad</mat-label>
-            <mat-select [(value)]="selectedFilter2" (selectionChange)="applyFilter()">
-              <mat-option value="organizational-unit" i18n="@@organizationalUnitOption">Unidad organizativa</mat-option>
-              <mat-option value="classroom-group" i18n="@@classroomsGroupOption">Grupos de aulas</mat-option>
-              <mat-option value="classroom" i18n="@@classroomOption">Aulas</mat-option>
-              <mat-option value="client-group" i18n="@@clientGroupOption">Grupos de clientes</mat-option>
-            </mat-select>
-          </mat-form-field>
+  <mat-divider class="divider"></mat-divider>
 
-          <mat-form-field>
-            <mat-label i18n="@@floorLabel" class="temp_filter">Planta</mat-label>
-            <mat-select [(value)]="selectedFilter1">
-              <mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
-              <mat-option value="option1" i18n="@@option1">Planta 1</mat-option>
-              <mat-option value="option2" i18n="@@option2">Planta 2</mat-option>
-              <mat-option value="option3" i18n="@@option3">Planta 3</mat-option>
-            </mat-select>
-          </mat-form-field>
+  <div class="view-mode-buttons">
+    <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>
+  </div>
 
-        </ng-container>
+  <div class="main-content">
+    <div class="filters">
+      <mat-form-field>
+        <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
+        <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
+          <mat-option value="ou" i18n="@@organizationalUnitsOption">Unidades organizativas</mat-option>
+          <mat-option value="client" i18n="@@clientsOption">Clientes</mat-option>
+        </mat-select>
+      </mat-form-field>
 
-          <!-- FILTROS CLIENTES -->
-
-          <ng-container *ngIf="selectedFilter1 === 'client'">
-
-          <mat-form-field>
-            <mat-label i18n="@@selectAnotherOptionLabel" class="temp_filter">Sistema Operativo</mat-label>
-            <mat-select multiple [(value)]="selectedFilterOS" >
-              <mat-option value="none" i18n="@@noneOption">Ninguno</mat-option>
-              <mat-option value="Windows 10 Education 1803 64 bits">Windows 10 Education 1803 64 bits</mat-option>
-              <mat-option value="Ubuntu 18.04.1 LTS 64 bits">Ubuntu 18.04.1 LTS 64 bits</mat-option>
-              <mat-option value="Ubuntu 16.04.4 LTS 64 bits">Ubuntu 16.04.4 LTS 64 bits</mat-option>
-              <mat-option value="DATA">RESTO DE OPCIONES TBI</mat-option>
-            </mat-select>
-          </mat-form-field>
+      <mat-form-field class="example-full-width">
+        <mat-label i18n="@@nameLabel">Nombre</mat-label>
+        <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
+      </mat-form-field>
 
 
-          <mat-form-field>
-            <mat-label i18n="@@selectStateLabel" class="temp_filter">Estado</mat-label>
-            <mat-select  multiple [(value)]="selectedFilterStatus">
-              <mat-option value="off" i18n="@@offOption">off</mat-option>
-              <mat-option value="initializing" i18n="@@initializingOption">initializing</mat-option>
-              <mat-option value="oglive" i18n="@@ogliveOption">oglive</mat-option>
-              <mat-option value="busy" i18n="@@busyOption">busy</mat-option>
-              <mat-option value="linux" i18n="@@linuxOption">linux</mat-option>
-              <mat-option value="linux_session" i18n="@@linuxSessionOption">linux_session</mat-option>
-              <mat-option value="macos" i18n="@@macosOption">macos</mat-option>
-              <mat-option value="windows" i18n="@@windowsOption">windows</mat-option>
-              <mat-option value="windows_session" i18n="@@windowsSessionOption">windows_session</mat-option>
-            </mat-select>
-          </mat-form-field>
 
-          <mat-form-field class="example-full-width">
-            <mat-label class="temp_filter">IP</mat-label>
-            <input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterIP">
-          </mat-form-field>
-
-          <mat-form-field class="example-full-width" >
-            <mat-label class="temp_filter">MAC</mat-label>
-            <input matInput placeholder="Dírección IP" (input)="applyFilter()" i18n [(ngModel)]="filterMAC">
-          </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>
-          <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
-          <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()">Añadir fichero PXE</button>
-        </div>
-        <div class="results">
-          <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
-            <mat-grid-list cols="4" rowHeight="1:1">
-              <mat-grid-tile *ngFor="let result of filteredResults">
-                <mat-card
-                  class="result-card"
-                  (dblclick)="onDobleClick($event, result.uuid, result.type)"
-                  [ngClass]="{
-                    'red-card': result.type === 'client' && result.status === 'off',
-                    'green-card': result.type === 'client' && result.status === 'active'
-                  }"
-                >
-                  <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 class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</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-content>
-                </mat-card>
-
-              </mat-grid-tile>
-            </mat-grid-list>
-            <div class="paginator-container">
-              <mat-paginator [length]="length"
-                             [pageSize]="itemsPerPage"
-                             [pageIndex]="page"
-                             [pageSizeOptions]="pageSizeOptions"
-                             (page)="onPageChange($event)">
-              </mat-paginator>
-            </div>
-          </ng-container>
-          <ng-template #noResults>
-            <p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
-          </ng-template>
-        </div>
-      </div>
+      <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>
+      <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0">Enviar Acción</button>
+      <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()">Añadir fichero PXE</button>
     </div>
+
+    <div class="results">
+      <ng-container *ngIf="filteredResults && filteredResults.length > 0; else noResults">
+        <ng-container *ngIf="viewMode === 'grid'">
+          <mat-grid-list cols="4" rowHeight="1:1">
+            <mat-grid-tile *ngFor="let result of filteredResults">
+              <mat-card class="result-card">
+                <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 class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</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-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>
+                <p class="result-status" *ngIf="result.type === 'client'">{{ result.status }}</p>
+              </mat-card-content>
+            </mat-card>
+          </div>
+        </ng-container>
+
+        <div class="paginator-container">
+          <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
+          </mat-paginator>
+        </div>
+      </ng-container>
+
+      <ng-template #noResults>
+        <p i18n="@@noResultsMessage">No hay resultados para mostrar.</p>
+      </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 13f4e67..fcf0bfe 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
@@ -61,6 +61,8 @@ export class AdvancedSearchComponent {
   filters: { [key: string]: string } = {};
   datePipe: DatePipe = new DatePipe('es-ES');
 
+  viewMode: 'grid' | 'list' = 'grid';
+
   constructor(
   private dataService: DataService,
   public dialog: MatDialog,
@@ -75,6 +77,10 @@ export class AdvancedSearchComponent {
     this.getFilters();
   }
 
+  changeViewMode(mode: 'grid' | 'list'): void {
+    this.viewMode = mode;
+  }
+
   getFilters(): void {
     this.dataService.getFilters().subscribe(
       data => {