From fd5f4b5f419b8b9bbe4b8196532f3c1dddfb8d5a Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Thu, 26 Dec 2024 11:50:30 +0100
Subject: [PATCH] refs #1314 Selected node title updates correctly. Groups
 title styles improved.

---
 .../src/app/components/groups/groups.component.css | 11 +++++++++++
 .../app/components/groups/groups.component.html    | 14 ++++++++------
 .../src/app/components/groups/groups.component.ts  |  1 +
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css
index dae5459..71ff99a 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@@ -8,6 +8,12 @@
   border-bottom: 1px solid #ddd;
 }
 
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
+}
+
 .groups-button-row {
   display: flex;
   gap: 15px;
@@ -589,3 +595,8 @@ button[mat-raised-button] {
   margin-top: 4px;
 }
 
+.clients-title-name {
+  font-size: x-large;
+  display: block;
+  margin-bottom: 1.5rem;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html
index 960dff5..e53b602 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -2,9 +2,11 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
-    {{ 'adminGroupsTitle' | translate }}
-  </h2>
+  <div class="header-container-title">
+    <h2 joyrideStep="groupsTitleStepText" text="{{ 'groupsTitleStepText' | translate }}">
+      {{ 'adminGroupsTitle' | translate }}
+    </h2>
+  </div>
   <div class="groups-button-row" joyrideStep="addStep" text="{{ 'groupsAddStepText' | translate }}">
     <button mat-flat-button color="primary" (click)="addOU($event)"
       matTooltip="{{ 'newOrganizationalUnitTooltip' | translate }}" matTooltipShowDelay="1000">
@@ -132,7 +134,7 @@
             }}
           </mat-icon>
           <span>{{ node.name }}</span>
-          <button mat-icon-button [matMenuTriggerFor]="menu" (click)="setSelectedNode(node); $event.stopPropagation()">
+          <button mat-icon-button [matMenuTriggerFor]="menu" (click)="onNodeClick(node)">
             <mat-icon>more_vert</mat-icon>
           </button>
         </mat-tree-node>
@@ -152,7 +154,7 @@
           <ng-container *ngIf="node.type === 'client'">
             <span> - IP: {{ node.ip }}</span>
           </ng-container>
-          <button mat-icon-button [matMenuTriggerFor]="menu" (click)="setSelectedNode(node)">
+          <button mat-icon-button [matMenuTriggerFor]="menu" (click)="onNodeClick(node)">
             <mat-icon>more_vert</mat-icon>
           </button>
         </mat-tree-node>
@@ -192,7 +194,7 @@
       </button>
     </mat-menu>
     <div class="clients-container" *ngIf="(selectedClients.data?.length || 0) > 0">
-      <h3>{{ 'clients' | translate }} {{ selectedNode?.name ? ('del ' + selectedNode?.name) : '' }}</h3>
+      <span class="clients-title-name">{{ 'clients' | translate }} <strong>{{ selectedNode?.name ? ' ' + selectedNode?.name : ' ' + selectedUnidad?.name }}</strong></span>
       <div class="clients-grid" *ngIf="currentView === 'card'">
         <div *ngFor="let client of selectedClients.data" class="client-item">
           <div class="client-card">
diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 5d2cf05..f8df428 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -155,6 +155,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
     this.selectedDetail = null;
     this.selectedClients.data = [];
     this.isTreeViewActive = false;
+    this.selectedNode = null;
   }
 
   getFilters(): void {