refs #1314 Selected node title updates correctly. Groups title styles improved.

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;
+}

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">

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 {