From 8d6649445863050f85c482558f15571225d082b8 Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Thu, 23 Jan 2025 13:49:43 +0100
Subject: [PATCH] refs #1373 Refactor styles and filters in groups component.

---
 .../components/groups/groups.component.css    | 39 ++++---------------
 .../components/groups/groups.component.html   |  9 ++---
 .../app/components/groups/groups.component.ts |  2 -
 3 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index 2f9f50a..a4ff9cd 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -3,8 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px;
-  background-color: #f5f5f5;
+  padding: 0px 10px;
   border-bottom: 1px solid #ddd;
 }
 
@@ -134,7 +133,7 @@ button[mat-raised-button] {
 
 mat-tree {
   background-color: #f9f9f9;
-  padding: 10px;
+  padding: 0px 10px 10px 10px;
 }
 
 mat-tree mat-tree-node {
@@ -246,18 +245,14 @@ mat-tree mat-tree-node.disabled:hover {
 
 .filters-container {
   display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-bottom: 16px;
+  justify-content: start;
+  gap: 1rem;
+  margin: 2rem 0px 0.7rem 10px;
 }
 
 .filters-container mat-form-field {
   flex: 1 1 100%;
-  max-width: 300px;
-}
-
-.filter-container {
-  margin-bottom: 16px;
+  max-width: 250px;
 }
 
 .chip-busy {
@@ -342,24 +337,17 @@ mat-tree mat-tree-node.disabled:hover {
 
 .tree-container {
   width: 25%;
-  padding: 16px;
   overflow-x: hidden;
   overflow-y: auto;
 }
 
 .clients-container {
   width: 75%;
-  padding: 16px;
+  padding: 0px 16px 16px 16px;
   box-sizing: border-box;
   overflow-y: auto;
 }
 
-.clients-container h3 {
-  margin-bottom: 15px;
-  font-size: 1.5em;
-  color: #333;
-}
-
 .client-item {
   display: flex;
   justify-content: center;
@@ -464,23 +452,10 @@ button[mat-raised-button] {
   flex-shrink: 0;
 }
 
-.filters-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin: 16px 0;
-  padding: 0 16px;
-}
-
 .mat-elevation-z8 {
   box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
 }
 
-.filters-container mat-form-field {
-  flex: 1 1 300px;
-  max-width: 300px;
-}
-
 .client-info {
   display: flex;
   flex-direction: column;
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 5d8ae2f..4bcee04 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -27,14 +27,11 @@
 </div>
 
 <!-- Filters Panel -->
-<mat-expansion-panel *ngIf="isTreeViewActive" class="filters-panel" joyrideStep="filtersPanelStep" text="{{ 'filtersPanelStepText' | translate }}">
-  <mat-expansion-panel-header>
-    <mat-panel-title>{{ 'filters' | translate }}</mat-panel-title>
-  </mat-expansion-panel-header>
+<div class="filters-panel" joyrideStep="filtersPanelStep" text="{{ 'filtersPanelStepText' | translate }}">
   <div class="filters-container">
     <mat-form-field appearance="outline">
       <mat-label>{{ 'searchClient' | translate }}</mat-label>
-      <input matInput (input)="onClientFilterInput($event)" placeholder="Buscar nombre, IP, estado o MAC">
+      <input matInput (input)="onClientFilterInput($event)" placeholder="Nombre, IP, estado o MAC">
     </mat-form-field>
     <mat-form-field appearance="outline">
       <mat-select (selectionChange)="loadSelectedFilter($event.value)" placeholder="Cargar filtro" disabled>
@@ -57,7 +54,7 @@
       </mat-select>
     </mat-form-field>
   </div>
-</mat-expansion-panel>
+</div>
 
 <!-- Unit details view-->
 <div class="main-container">
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index e273168..e7d2a76 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -55,7 +55,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
   cols = 4;
   selectedClientsOriginal: Client[] = [];
   currentView: 'card' | 'list' = 'list';
-  isTreeViewActive = false;
   savedFilterNames: [string, string][] = [];
   selectedTreeFilter = '';
   syncStatus = false;
@@ -156,7 +155,6 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.selectedUnidad = null;
     this.selectedDetail = null;
     this.selectedClients.data = [];
-    this.isTreeViewActive = false;
     this.selectedNode = null;
   }