From bada1762aa13f3816238e7279d7d8381d707525e Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Tue, 11 Feb 2025 13:07:01 +0100
Subject: [PATCH] refs #1485 Refactor components to replace mat-spinner with
 loading component for improved loading indication

---
 .../admin/roles/roles/roles.component.spec.ts |  3 +-
 .../create-command-group.component.html       |  6 +--
 .../detail-command-group.component.html       |  5 +--
 .../client-main-view.component.html           | 19 +++-----
 .../components/groups/groups.component.html   |  4 +-
 .../create-image/create-image.component.html  |  2 +-
 .../main-repository-view.component.html       | 44 +++++++------------
 .../main-repository-view.component.spec.ts    |  3 +-
 8 files changed, 33 insertions(+), 53 deletions(-)

diff --git a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts
index b78ca46..651ae73 100644
--- a/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts
+++ b/ogWebconsole/src/app/components/admin/roles/roles/roles.component.spec.ts
@@ -12,6 +12,7 @@ import { MatIcon } from '@angular/material/icon';
 import { MatHint } from '@angular/material/form-field';
 import { MatPaginator } from '@angular/material/paginator';
 import { TranslateModule } from '@ngx-translate/core';
+import { LoadingComponent } from '../../../../shared/loading/loading.component';
 describe('RolesComponent', () => {
   let component: RolesComponent;
   let fixture: ComponentFixture<RolesComponent>;
@@ -27,7 +28,7 @@ describe('RolesComponent', () => {
     const dataServiceSpy = jasmine.createSpyObj('DataService', ['getRoles']);
 
     await TestBed.configureTestingModule({
-      declarations: [RolesComponent],
+      declarations: [RolesComponent, LoadingComponent],
       imports: [MatDivider, MatFormField, MatLabel, MatIcon, MatHint, MatPaginator,
         TranslateModule.forRoot()],
       providers: [
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
index a018aa7..f315ec9 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/create-command-group/create-command-group.component.html
@@ -1,8 +1,6 @@
 <h2 mat-dialog-title>{{ editing ? ('editCommandGroup' | translate) : ('createCommandGroup' | translate) }}</h2>
 <mat-dialog-content class="form-container">
-  <div *ngIf="loading" class="loading-container">
-    <mat-spinner></mat-spinner>
-  </div>
+  <app-loading [isLoading]="loading"></app-loading>
 
   <form *ngIf="!loading" class="command-group-form" (ngSubmit)="onSubmit()">
     <mat-form-field>
@@ -58,4 +56,4 @@
 <mat-dialog-actions align="end">
   <button mat-button (click)="close()">{{ 'buttonCancel' | translate }}</button>
   <button mat-button (click)="onSubmit()" cdkFocusInitial>{{ 'buttonSave' | translate }}</button>
-</mat-dialog-actions>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
index b8fa94e..c8edddb 100644
--- a/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
+++ b/ogWebconsole/src/app/components/commands/commands-groups/detail-command-group/detail-command-group.component.html
@@ -1,10 +1,7 @@
 <div class="detail-command-group-container">
   <h2>{{ 'commandGroupDetailsTitle' | translate }}</h2>
 
-  <!-- Indicador de carga -->
-  <div *ngIf="loading" class="loading-container">
-    <mat-spinner></mat-spinner>
-  </div>
+  <app-loading [isLoading]="loading"></app-loading>
 
   <mat-card *ngIf="!loading">
     <mat-card-header>
diff --git a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
index 219a02f..4a6adf2 100644
--- a/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
+++ b/ogWebconsole/src/app/components/groups/components/client-main-view/client-main-view.component.html
@@ -2,8 +2,10 @@
 
   <h2 class="title">{{ 'clientDetailsTitle' | translate }}</h2>
   <div class="client-button-row">
-    <button mat-flat-button color="primary" (click)="onEditClick($event, clientData.uuid)" i18n="@@editImage">Editar</button>
-    <button mat-flat-button color="primary" [matMenuTriggerFor]="commandMenu">{{ 'commandsButton' | translate }}</button>
+    <button mat-flat-button color="primary" (click)="onEditClick($event, clientData.uuid)"
+      i18n="@@editImage">Editar</button>
+    <button mat-flat-button color="primary" [matMenuTriggerFor]="commandMenu">{{ 'commandsButton' | translate
+      }}</button>
   </div>
   <mat-menu #commandMenu="matMenu">
     <button mat-menu-item *ngFor="let command of arrayCommands" (click)="onCommandSelect(command.slug)">
@@ -17,9 +19,7 @@
   {{ 'Back' | translate }}
 </button>
 
-<div *ngIf="loading" class="loading-container">
-  <mat-spinner></mat-spinner>
-</div>
+<app-loading [isLoading]="loading"></app-loading>
 
 <div *ngIf="!loading" class="client-info">
   <div class="info-section">
@@ -67,11 +67,7 @@
   <div class="charts-container">
     <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
       <div *ngFor="let disk of chartDisk" class="disk-usage">
-        <ngx-charts-pie-chart
-          [view]="view"
-          [results]="disk.chartData"
-          [doughnut]="true"
-        >
+        <ngx-charts-pie-chart [view]="view" [results]="disk.chartData" [doughnut]="true">
         </ngx-charts-pie-chart>
 
         <h3>Disco {{ disk.diskNumber }}</h3>
@@ -80,5 +76,4 @@
       </div>
     </ng-container>
   </div>
-</div>
-
+</div>
\ 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 0233678..25e780d 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.html
+++ b/ogWebconsole/src/app/components/groups/groups.component.html
@@ -181,9 +181,7 @@
         </div>
       </div>
 
-      <div *ngIf="isLoadingClients">
-        <app-loading [isLoading]="isLoadingClients"></app-loading>
-      </div>
+      <app-loading [isLoading]="isLoadingClients"></app-loading>    
 
       <div *ngIf="!isLoadingClients">
         <div *ngIf="hasClients; else noClientsTemplate">
diff --git a/ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.html b/ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.html
index e2693ae..44c8fd3 100644
--- a/ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.html
+++ b/ogWebconsole/src/app/components/ogboot/pxe-images/create-image/create-image/create-image.component.html
@@ -1,6 +1,6 @@
 <h2 mat-dialog-title>{{ isEditMode ? 'Editar' : 'Añadir' }} imagen ogLive</h2>
 <mat-dialog-content>
-  <mat-spinner class="spinner" *ngIf="loading"></mat-spinner>
+  <app-loading [isLoading]="loading"></app-loading>
 
   <mat-form-field *ngIf="!loading" appearance="fill" class="full-width">
     <mat-label>Seleccionar ISO</mat-label>
diff --git a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html
index ae23d9d..e27dbc9 100644
--- a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html
+++ b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.html
@@ -6,13 +6,8 @@
       <div class="row top-row">
         <div class="card">
           <h3>Uso de Disco</h3>
-          <ngx-charts-pie-chart
-            [view]="view"
-            [scheme]="colorScheme"
-            [results]="diskUsageChartData"
-            [gradient]="gradient"
-            [doughnut]="isDoughnut"
-            [labels]="showLabels" >
+          <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData"
+            [gradient]="gradient" [doughnut]="isDoughnut" [labels]="showLabels">
           </ngx-charts-pie-chart>
           <div class="info">
             <p>Total: {{ diskUsage.total }}</p>
@@ -24,13 +19,8 @@
 
         <div class="card">
           <h3>Uso de RAM</h3>
-          <ngx-charts-pie-chart
-            [view]="view"
-            [scheme]="colorScheme"
-            [results]="ramUsageChartData"
-            [gradient]="gradient"
-            [doughnut]="isDoughnut"
-            [labels]="showLabels">
+          <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="ramUsageChartData" [gradient]="gradient"
+            [doughnut]="isDoughnut" [labels]="showLabels">
           </ngx-charts-pie-chart>
           <div class="info">
             <p>Total: {{ ramUsage.total }}</p>
@@ -45,7 +35,8 @@
         <div class="card">
           <h3>Uso de CPU</h3>
           <div class="cpu-usage-bar">
-            <div class="cpu-bar" [style.width]="cpuUsage.percentage" [ngClass]="{'high': cpuUsage.percentage > '80%'}"></div>
+            <div class="cpu-bar" [style.width]="cpuUsage.percentage" [ngClass]="{'high': cpuUsage.percentage > '80%'}">
+            </div>
           </div>
           <p>Usado: {{ cpuUsage.percentage }}</p>
         </div>
@@ -54,17 +45,17 @@
           <h3>Servicios</h3>
           <ul>
             <li *ngFor="let service of getServices()">
-            <span class="status-led" [ngClass]="{
+              <span class="status-led" [ngClass]="{
               'active': service.status === 'active',
               'inactive': service.status === 'stopped' || service.status === 'status not accesible'
             }"></span>
               {{ service.name }}:
               <span [ngSwitch]="service.status">
-              <span *ngSwitchCase="'active'">Activo</span>
-              <span *ngSwitchCase="'stopped'">Detenido</span>
-              <span *ngSwitchCase="'status not accesible'">No accesible</span>
-              <span *ngSwitchDefault>{{ service.status }}</span>
-            </span>
+                <span *ngSwitchCase="'active'">Activo</span>
+                <span *ngSwitchCase="'stopped'">Detenido</span>
+                <span *ngSwitchCase="'status not accesible'">No accesible</span>
+                <span *ngSwitchDefault>{{ service.status }}</span>
+              </span>
             </li>
           </ul>
         </div>
@@ -73,7 +64,7 @@
           <h3>Procesos</h3>
           <ul>
             <li *ngFor="let process of getProcesses()">
-            <span class="status-led" [ngClass]="{
+              <span class="status-led" [ngClass]="{
               'active': process.status === 'running',
               'inactive': process.status === 'stopped'
             }"></span>
@@ -94,9 +85,8 @@
       </div>
 
       <h2>Editar datos repositorio</h2>
-      <div *ngIf="loading" class="loading-container">
-        <mat-spinner></mat-spinner>
-      </div>
+
+      <app-loading [isLoading]="loading"></app-loading>
 
       <div *ngIf="!loading" class="client-info form-container">
         <form [formGroup]="repositoryForm" (ngSubmit)="save()" class="repository-form">
@@ -116,7 +106,7 @@
             <input matInput formControlName="comments" name="comments">
           </mat-form-field>
 
-          <button mat-flat-button color="primary" class="save-button"(click)="save()">Guardar</button>
+          <button mat-flat-button color="primary" class="save-button" (click)="save()">Guardar</button>
         </form>
       </div>
     </div>
@@ -125,4 +115,4 @@
   <mat-tab label="Listado de imágenes">
     <app-images [repositoryUuid]="repositoryId"></app-images>
   </mat-tab>
-</mat-tab-group>
+</mat-tab-group>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.spec.ts b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.spec.ts
index 65358eb..3c518d4 100644
--- a/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.spec.ts
+++ b/ogWebconsole/src/app/components/repositories/main-repository-view/main-repository-view.component.spec.ts
@@ -16,6 +16,7 @@ import { DataService } from '../../calendar/data.service';
 import { CommonModule } from '@angular/common';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { LoadingComponent } from '../../../shared/loading/loading.component';
 
 describe('MainRepositoryViewComponent', () => {
   let component: MainRepositoryViewComponent;
@@ -23,7 +24,7 @@ describe('MainRepositoryViewComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [MainRepositoryViewComponent],
+      declarations: [MainRepositoryViewComponent, LoadingComponent],
       imports: [
         CommonModule,
         ReactiveFormsModule,