Add joyride service for help

2024-11-11 18:51:48 +01:00 · 2024-11-11 18:51:48 +01:00 · 4109188913
parent 39cf1c96c9
commit 4109188913
11 changed files with 179 additions and 85 deletions
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "og-webconsole",
-  "version": "0.0.0",
+  "version": "0.5.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "og-webconsole",
-      "version": "0.0.0",
+      "version": "0.5.0",
      "dependencies": {
        "@angular/animations": "^18.0.0",
        "@angular/cdk": "~18.0.0",
@ -20,6 +20,7 @@
        "@angular/router": "^18.0.0",
        "@swimlane/ngx-charts": "^20.5.0",
        "jwt-decode": "^4.0.0",
+        "ngx-joyride": "^2.5.0",
        "ngx-toastr": "^19.0.0",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0",
@ -11228,6 +11229,18 @@
      "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
      "dev": true
    },
+    "node_modules/ngx-joyride": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/ngx-joyride/-/ngx-joyride-2.5.0.tgz",
+      "integrity": "sha512-C/J8C4uWZjKl9aMmRBt9egVjuIpwWFplJgBZDl1EfqNVTJkdEC51nt9DpAOuDwOgkbArhJ9sZIk3bZT4vkud/w==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=8.2.14",
+        "@angular/core": ">=8.2.14"
+      }
+    },
    "node_modules/ngx-toastr": {
      "version": "19.0.0",
      "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-19.0.0.tgz",
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@ -22,6 +22,7 @@
    "@angular/router": "^18.0.0",
    "@swimlane/ngx-charts": "^20.5.0",
    "jwt-decode": "^4.0.0",
+    "ngx-joyride": "^2.5.0",
    "ngx-toastr": "^19.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
--- a/ogWebconsole/src/app/app.module.ts
+++ b/ogWebconsole/src/app/app.module.ts
@ -120,6 +120,7 @@ import { RepositoriesComponent } from './components/repositories/repositories.co
 import { CreateRepositoryComponent } from './components/repositories/create-repository/create-repository.component';
 import { ExecuteCommandComponent } from './components/commands/main-commands/execute-command/execute-command.component';
 import { ExecuteCommandOuComponent } from './components/groups/shared/execute-command-ou/execute-command-ou.component';
+import { JoyrideModule } from 'ngx-joyride';
@NgModule({
  declarations: [
    AppComponent,
@ -225,6 +226,7 @@ import { ExecuteCommandOuComponent } from './components/groups/shared/execute-co
        MatDatepickerModule,
        MatNativeDateModule,
        MatSliderModule,
+        JoyrideModule.forRoot(),
        ToastrModule.forRoot(
            {
                timeOut: 5000,
--- a/ogWebconsole/src/app/components/calendar/calendar.component.html
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.html
@ -1,12 +1,17 @@
 <div class="header-container">
-  <h2 class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2>
+  <button mat-icon-button color="primary" (click)="iniciarTour()">
+    <mat-icon>help</mat-icon>
+  </button>
+  <h2 joyrideStep="titleStep" text="En esta pantalla, puedes gestionar los calendarios de los equipos remotos conectados con el servicio UDS"  class="title" i18n="@@adminImagesTitle">Administrar calendarios</h2>
  <div class="calendar-button-row">
-    <button mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button>
+    
+    <button joyrideStep="addButtonStep" text="Haz clic aquí para añadir un nuevo calendario." mat-flat-button color="primary" (click)="addImage()">Añadir calendario</button>
  </div>
 </div>
 <mat-divider class="divider"></mat-divider>
+
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-string">
+  <mat-form-field joyrideStep="searchStep" text="Utiliza esta barra de búsqueda para filtrar los calendarios existentes." appearance="fill" class="search-string">
    <mat-label i18n="@@searchLabel">Buscar nombre de calendario</mat-label>
    <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" (keyup.enter)="search()" i18n-placeholder="@@searchPlaceholder">
    <mat-icon matSuffix>search</mat-icon>
@ -19,7 +24,7 @@
 </div>

 <div *ngIf="!loading">
-  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+  <table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="Aquí se muestran los calendarios existentes con sus características y configuraciones.">
    <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
      <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
      <td mat-cell *matCellDef="let image" >
@ -35,7 +40,7 @@
      </td>
    </ng-container>

-    <ng-container matColumnDef="actions">
+    <ng-container matColumnDef="actions" joyrideStep="actionsStep" text="Accede a las acciones disponibles para cada calendario aquí.">
      <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
      <td mat-cell *matCellDef="let calendar" style="text-align: center;">
        <button mat-icon-button color="primary" (click)="editCalendar(calendar)" i18n="@@editImage"> <mat-icon>edit</mat-icon></button>
--- a/ogWebconsole/src/app/components/calendar/calendar.component.ts
+++ b/ogWebconsole/src/app/components/calendar/calendar.component.ts
@ -8,6 +8,7 @@ import { ToastrService } from "ngx-toastr";
 import { PageEvent } from "@angular/material/paginator";
 import { CreateCalendarComponent } from "./create-calendar/create-calendar.component";
 import { DeleteModalComponent } from "../../shared/delete_modal/delete-modal/delete-modal.component";
+import { JoyrideService } from 'ngx-joyride';

@Component({
  selector: 'app-calendar',
@ -51,14 +52,14 @@ export class CalendarComponent implements OnInit {
    }
  ];
  displayedColumns = [...this.columns.map(column => column.columnDef), 'actions'];
-
  private apiUrl = `${this.baseUrl}/remote-calendars`;

  constructor(
    public dialog: MatDialog,
    private http: HttpClient,
    private dataService: DataService,
-    private toastService: ToastrService
+    private toastService: ToastrService,
+    private joyrideService: JoyrideService
  ) {}

  ngOnInit(): void {
@ -71,7 +72,6 @@ export class CalendarComponent implements OnInit {
    });

    dialogRef.afterClosed().subscribe(result => {
-      console.log('The dialog was closed');
      this.search();
    });
  }
@ -84,24 +84,21 @@ export class CalendarComponent implements OnInit {
        this.loading = false;
      },
      error => {
-        console.error('Error fetching og lives', error);
+        console.error('Error fetching calendars', error);
        this.loading = false;
      }
    );
  }

  sync(calendar: any): void {
-    console.log('Syncing calendars');
    this.syncUds = true;
    this.http.post(`${this.apiUrl}/${calendar.uuid}/sync-uds`, {}).subscribe({
      next: () => {
-        console.log('Calendars synced successfully');
        this.toastService.success('Calendarios sincronizados correctamente');
        this.search();
        this.syncUds = false;
      },
      error: (error) => {
-        console.error('Error al sincronizar los calendarios:', error);
        this.toastService.error(error.error['hydra:description']);
        this.syncUds = false;
      }
@ -133,16 +130,13 @@ export class CalendarComponent implements OnInit {

        this.http.delete(apiUrl).subscribe({
          next: () => {
-            console.log('Calendar deleted successfully');
            this.search();
            this.toastService.success('Calendar deleted successfully');
          },
-          error: (error) => {
+          error: () => {
            this.toastService.error('Error deleting calendar');
          }
        });
-      } else {
-        console.log('calendar deletion cancelled');
      }
    });
  }
@ -155,8 +149,7 @@ export class CalendarComponent implements OnInit {
        this.length = response['hydra:totalItems'];
        this.loading = false;
      },
-      error: (error) => {
-        console.error('Error al cargar las imágenes:', error);
+      error: () => {
        this.loading = false;
      }
    });
@ -167,4 +160,12 @@ export class CalendarComponent implements OnInit {
    this.itemsPerPage = event.pageSize;
    this.applyFilter();
  }
+
+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: ['titleStep', 'addButtonStep', 'searchStep', 'tableStep', 'actionsStep'],
+      showPrevButton: true,
+      themeColor: '#3f51b5' 
+    });
+  }
 }
--- 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
@ -21,7 +21,11 @@
 }

 .header-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
  height: 100px;
+  padding: 10px;
 }

 .unidad-card, .elements-card {
--- 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,7 +1,12 @@
-<h2 class="title" i18n="@@searchTitle">Búsqueda avanzada</h2>

+<div class="header-container">
+<h2 class="title" i18n="@@searchTitle" joyrideStep="title2Step" text="Aquí puedes realizar una búsqueda avanzada.">Búsqueda avanzada</h2>
+<button mat-icon-button color="primary" (click)="iniciarTour()">
+  <mat-icon>help</mat-icon>
+</button>
+</div>
 <div class="container">
-  <div class="header">
+  <div class="header" joyrideStep="filterSelectionStep" text="Selecciona entre los filtros guardados para ajustar los resultados de la búsqueda.">
    <mat-form-field>
      <mat-label i18n="@@selectFilterLabel">Seleccione filtro</mat-label>
      <mat-select (selectionChange)="loadSelectedFilter($event.value)">
@ -14,7 +19,7 @@

  <mat-divider class="divider"></mat-divider>

-  <div class="view-mode-buttons">
+  <div class="view-mode-buttons" joyrideStep="viewModeStep" text="Elige cómo quieres ver los resultados: en cuadrícula o en lista.">
    <button mat-button (click)="changeViewMode('grid')" [class.active]="viewMode === 'grid'">
      <mat-icon>grid_view</mat-icon> Cuadrícula
    </button>
@ -24,7 +29,7 @@
  </div>

  <div class="main-content">
-    <div class="filters">
+    <div class="filters" joyrideStep="filtersStep" text="Aplica filtros específicos para encontrar los resultados exactos que necesitas.">
      <mat-form-field>
        <mat-label i18n="@@selectOptionLabel">Selecciona una opción</mat-label>
        <mat-select [(value)]="selectedFilter1" (selectionChange)="applyFilter()">
@ -38,13 +43,13 @@
        <input matInput placeholder="Unidad organizativa" (input)="applyFilter()" [(ngModel)]="filterName" i18n-placeholder="@@namePlaceholder">
      </mat-form-field>

-      <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>
+      <button mat-raised-button color="primary" (click)="toggleSelectAll()" joyrideStep="selectAllStep" text="Selecciona o deselecciona todos los elementos de los resultados.">Seleccionar/Deseleccionar Todos</button>
+      <button mat-raised-button color="primary" (click)="saveFilters()" i18n="@@saveFiltersButton" joyrideStep="saveFiltersStep" text="Guarda tus filtros seleccionados para usarlos en el futuro.">Guardar Filtros</button>
+      <button mat-raised-button color="accent" (click)="sendActions()" i18n="@@sendFiltersButton" [disabled]="selectedElements.length === 0" joyrideStep="sendActionStep" text="Envía una acción a los elementos seleccionados.">Enviar Acción</button>
+      <button mat-flat-button color="primary" [disabled]="selectedElements.length === 0" (click)="onPxeBootFile()" joyrideStep="addPxeStep" text="Añade un archivo PXE a los elementos seleccionados.">Añadir fichero PXE</button>
    </div>

-    <div class="results">
+    <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">
@ -80,7 +85,7 @@
          </div>
        </ng-container>

-        <div class="paginator-container">
+        <div class="paginator-container" joyrideStep="paginationStep" text="Usa el paginador para navegar entre los resultados.">
          <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
          </mat-paginator>
        </div>
--- 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
@ -23,6 +23,7 @@ import { Router } from '@angular/router';
 import {
  CreatePxeBootFileComponent
 } from "../../../ogboot/pxe-boot-files/create-pxeBootFile/create-pxe-boot-file/create-pxe-boot-file.component";
+import { JoyrideService } from 'ngx-joyride';


@Component({
@ -69,7 +70,8 @@ export class AdvancedSearchComponent {
  private toastService: ToastrService,
  private _bottomSheet: MatBottomSheet,
  private http: HttpClient,
-  private router: Router
+  private router: Router,
+  private joyrideService: JoyrideService
  ) {}

  ngOnInit(): void {
@ -436,4 +438,23 @@ export class AdvancedSearchComponent {
    }
  }

+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: [
+      'title2Step',
+      'filterSelectionStep',
+      'viewModeStep',
+      'filtersStep',
+      'selectAllStep',
+      'saveFiltersStep',
+      'sendActionStep',
+      'addPxeStep',
+      'resultsStep',
+      'paginationStep'
+      ],
+      showPrevButton: true,
+      themeColor: '#3f51b5'
+    });
+  }
+  
 }
--- a/ogWebconsole/src/app/components/groups/groups.component.css
+++ b/ogWebconsole/src/app/components/groups/groups.component.css
@ -194,8 +194,7 @@ mat-spinner {
 .result-card {
  width: 100%;
  max-width: 250px;
-  height: 250px; /* Fijo para mantener la forma cuadrada */
-}
+  height: 250px; 

 .paginator-container {
  display: flex;
@ -210,3 +209,7 @@ mat-spinner {
 mat-card {
  margin-bottom: 20px;
 }
+
+.mat-tooltip {
+  white-space: pre-line;
+}
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@ -1,21 +1,39 @@
 <mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="General">
-    <div class="header-container">
-      <h2 class="title" i18n="@@adminGroupsTitle">Administrar grupos</h2>
-      <div class="groups-button-row">
-        <button mat-flat-button color="primary" (click)="addOU($event)" i18n="@@newOrganizationalUnitButton">Nueva Unidad Organizativa</button>
-        <button mat-flat-button color="primary" (click)="addClient($event)" i18n="@@newClientButton">Nuevo Cliente</button>
-        <button mat-raised-button (click)="openBottomSheet()" i18n="@@legendButton">Leyenda</button>
+    <div class="header-container" joyrideStep="tabsStep" text="Utiliza las pestañás para acceder a las diferentes opciones de visualización y busqueda de unidades organizativas y clientes.">
+      <button mat-icon-button color="primary" (click)="iniciarTour()">
+        <mat-icon>help</mat-icon>
+      </button>
+      <h2 class="title" i18n="@@adminGroupsTitle" joyrideStep="titleStep" text="En esta pantalla, puedes gestionar las unidades organizativas y sus clientes.">Administrar grupos</h2>
+      <div class="groups-button-row" joyrideStep="addStep" text="Utiliza estos botones para crear nuevas unidades organizativas o clientes.">
+        <button mat-flat-button color="primary" (click)="addOU($event)" 
+                i18n="@@newOrganizationalUnitButton" 
+                matTooltip="Abrir modal para crear unidades organizativas de cualquier tipo (Centro, Aula, Grupo de aulas o Grupo de clientes)" 
+                matTooltipShowDelay="1000">Nueva Unidad Organizativa</button>
+                
+        <button mat-flat-button color="primary" (click)="addClient($event)" 
+                i18n="@@newClientButton" 
+                matTooltipShowDelay="1000">Nuevo Cliente</button>
+                
+        <button mat-raised-button (click)="openBottomSheet()" 
+                i18n="@@legendButton" 
+                joyrideStep="keyStep" text="La leyenda te mostrará los tipos de unidades organizativas y sus iconos correspondientes"
+                matTooltipShowDelay="1000">Leyenda</button>
      </div>
    </div>
+
    <div class="groupLists-container">
-      <mat-card class="card unidad-card">
+      <mat-card class="card unidad-card" 
+                joyrideStep="unitStep" text="Esta es la sección donde se mostrarán las unidades organizativas de tipo 'Centro'"
+                matTooltipShowDelay="1000" 
+                matTooltipPosition="above">
        <mat-card-title i18n="@@organizationalUnitTitle">Centros</mat-card-title>
        <mat-card-content>
          <mat-spinner *ngIf="loading"></mat-spinner>
          <mat-list *ngIf="!loading">
            <mat-list-item *ngFor="let unidad of organizationalUnits"
-                           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" (click)="onSelectUnidad(unidad)">
+                           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" 
+                           (click)="onSelectUnidad(unidad)">
              <div class="item-content">
                <mat-icon>apartment</mat-icon>
                {{ unidad.name  }}
@ -23,48 +41,37 @@
                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                  <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="onTreeClick($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Visualizar en forma de arbol"
-                        matTooltipHideDelay="0"
-                        i18n="@@viewTreeTooltip">account_tree
-                      </mat-icon>
+                      <mat-icon matTooltip="Visualizar unidad en forma de árbol" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewTreeTooltip">account_tree</mat-icon>
                      <span i18n="@@viewTreeMenu">Ver organigrama</span>
                    </button>
+
                    <button mat-menu-item (click)="onEditClick($event, unidad.type, unidad.uuid)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Editar unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@editUnitTooltip">edit
-                      </mat-icon>
+                      <mat-icon matTooltip="Editar esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@editUnitTooltip">edit</mat-icon>
                      <span i18n="@@editUnitMenu">Editar</span>
                    </button>
+
                    <button mat-menu-item (click)="onShowClick($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Visualizar unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@viewUnitTool">visibility
-                      </mat-icon>
-                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
+                      <mat-icon matTooltip="Ver detalles de la unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewUnitTooltip">visibility</mat-icon>
+                      <span i18n="@@viewUnitMenu">Ver datos</span>
                    </button>
+
                    <button mat-menu-item (click)="addOU($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Crear unidad organizativa interna"
-                        matTooltipHideDelay="0"
-                        i18n="@@addInternalUnitTool">add_home_work
-                      </mat-icon>
+                      <mat-icon matTooltip="Crear una nueva unidad organizativa interna" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
                      <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                    </button>
+
                    <button mat-menu-item (click)="addClient($event, unidad)">
-                      <mat-icon
-                        #tooltip="matTooltip"
-                        matTooltip="Crear cliente en esta unidad organizativa"
-                        matTooltipHideDelay="0"
-                        i18n="@@addClientDevice">devices
-                      </mat-icon>
+                      <mat-icon matTooltip="Registrar un cliente en esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addClientTooltip">devices</mat-icon>
                      <span i18n="@@addClientMenu">Crear cliente</span>
                    </button>
                  </mat-menu>
@ -74,7 +81,11 @@
          </mat-list>
        </mat-card-content>
      </mat-card>
-      <mat-card class="card elements-card">
+
+      <mat-card class="card elements-card" 
+                joyrideStep="elementsStep" text="Esta es la sección para visualizar unidades internas del centro seleccionado y navegar por ellas."
+                matTooltipShowDelay="1000" 
+                matTooltipPosition="above">
        <mat-card-title>
          <div class="title-with-breadcrumb">
            <span i18n="@@internalElementsTitle"></span>
@ -93,7 +104,9 @@
              <mat-icon>info</mat-icon>
              <span i18n="@@noInternalElementsMessage">No hay elementos internos</span>
            </div>
-            <mat-list-item *ngFor="let child of children" [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" (click)="onSelectChild(child)">
+            <mat-list-item *ngFor="let child of children" 
+                           [ngClass]="{'selected-item': child === selectedUnidad, 'clickable-item': true}" 
+                           (click)="onSelectChild(child)">
              <div class="item-content">
                <mat-icon [ngSwitch]="child.type">
                  <ng-container *ngSwitchCase="'organizational-unit'">apartment</ng-container>
@ -108,31 +121,45 @@
                  <mat-icon mat-button [matMenuTriggerFor]="menu" (click)="$event.stopPropagation()">more_vert</mat-icon>
                  <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="onEditClick($event, child.type, child.uuid)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Editar elemento" matTooltipHideDelay="0" i18n="@@editElementTooltip">edit</mat-icon>
+                      <mat-icon matTooltip="Editar elemento" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@editElementTooltip">edit</mat-icon>
                      <span i18n="@@editElementMenu">Editar</span>
                    </button>
+
                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="onShowClick($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Visualizar unidad organizativa" matTooltipHideDelay="0" i18n="@@viewUnitTooltip">visibility</mat-icon>
-                      <span i18n="@@viewUnitMenu">Visualizar datos</span>
+                      <mat-icon matTooltip="Ver detalles de la unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@viewUnitTooltip">visibility</mat-icon>
+                      <span i18n="@@viewUnitMenu">Ver datos</span>
                    </button>
+
                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addOU($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear unidad organizativa interna" matTooltipHideDelay="0" i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
+                      <mat-icon matTooltip="Crear una nueva unidad organizativa interna" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addInternalUnitTooltip">add_home_work</mat-icon>
                      <span i18n="@@addInternalUnitMenu">Añadir unidad organizativa</span>
                    </button>
+
                    <button *ngIf="child.type !== 'client'" mat-menu-item (click)="addClient($event, child)">
-                      <mat-icon class="edit-icon" #tooltip="matTooltip" matTooltip="Crear cliente en esta unidad organizativa" matTooltipHideDelay="0" i18n="@@addClientTooltip">devices</mat-icon>
+                      <mat-icon matTooltip="Registrar un cliente en esta unidad organizativa" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@addClientTooltip">devices</mat-icon>
                      <span i18n="@@addClientMenu">Crear cliente</span>
                    </button>
+
                    <button mat-menu-item (click)="onDeleteClick($event, child.uuid, child.name, child.type)">
-                      <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Borrar elemento" matTooltipHideDelay="0" i18n="@@deleteElementTooltip">delete</mat-icon>
-                      <span i18n="@@deleteElementMenu">Borrar elemento</span>
+                      <mat-icon matTooltip="Eliminar este elemento" 
+                                matTooltipHideDelay="0" 
+                                i18n="@@deleteElementTooltip">delete</mat-icon>
+                      <span i18n="@@deleteElementMenu">Eliminar elemento</span>
                    </button>

                    <button mat-menu-item (click)="onExecuteCommand($event, child.uuid, child.name, child.type)">
-                      <mat-icon class="delete-icon" #tooltip="matTooltip" matTooltip="Ejecutar comando" matTooltipHideDelay="0">play_arrow</mat-icon>
-                      <span >Ejecutar comando</span>
+                      <mat-icon matTooltip="Ejecutar comando en este elemento" 
+                                matTooltipHideDelay="0">play_arrow</mat-icon>
+                      <span>Ejecutar comando</span>
                    </button>
-
                  </mat-menu>
                </div>
              </div>
@ -142,12 +169,15 @@
      </mat-card>
    </div>
  </mat-tab>
+
  <mat-tab i18n-label label="Búsqueda avanzada">
    <app-advanced-search></app-advanced-search>
  </mat-tab>
+
  <mat-tab i18n-label label="Clientes">
    <app-client-tab-view #clientTab></app-client-tab-view>
  </mat-tab>
+
  <mat-tab i18n-label label="Unidades organizativas">
    <app-organizational-unit-tab-view #organizationalUnitTab></app-organizational-unit-tab-view>
  </mat-tab>
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@ -27,6 +27,7 @@ import {
 } from "./components/organizational-unit-tab-view/organizational-unit-tab-view.component";
 import { ExecuteCommandComponent } from '../commands/main-commands/execute-command/execute-command.component';
 import { ExecuteCommandOuComponent } from './shared/execute-command-ou/execute-command-ou.component';
+import { JoyrideService } from 'ngx-joyride';

@Component({
  selector: 'app-groups',
@ -69,7 +70,8 @@ export class GroupsComponent implements OnInit {
  public dialog: MatDialog,
  private toastService: ToastrService,
  private _bottomSheet: MatBottomSheet,
-  private http: HttpClient
+  private http: HttpClient,
+  private joyrideService: JoyrideService
  ) {}

  ngOnInit(): void {
@ -449,4 +451,11 @@ export class GroupsComponent implements OnInit {
    const dialogRef = this.dialog.open(AcctionsModalComponent, { data: { selectedElements: this.selectedElements }, width: '700px'});
  }

+  iniciarTour(): void {
+    this.joyrideService.startTour({
+      steps: ['titleStep', 'addStep', 'keyStep', 'unitStep', 'elementsStep', 'tabsStep'],
+      showPrevButton: true,
+      themeColor: '#3f51b5' 
+    });
+  }
 }