From 3e64ae03bacff530ca0d61ac211254b97725004c Mon Sep 17 00:00:00 2001
From: Lucas Lara <llara@localhost>
Date: Mon, 10 Feb 2025 13:15:24 +0100
Subject: [PATCH] refs #1477 Refactor CSS styles for improved layout and
 consistency in OgDhcp component

---
 .../og-dhcp-subnets.component.css             | 45 +++++++------------
 .../og-dhcp-subnets.component.html            | 44 +++++++++++-------
 .../og-dhcp-subnets.component.spec.ts         | 13 +++---
 .../status/status.component.css               | 28 +++++++-----
 .../status/status.component.html              | 35 +++++++--------
 5 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
index f01f981..0fff2cf 100644
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css
@@ -1,29 +1,27 @@
 .header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: 100px;
-    padding: 10px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
 }
 
-.title {
-    font-size: 24px;
-}
-
-.divider {
-    margin: 20px 0;
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .lists-container {
-    padding: 16px;
+  padding: 16px;
 }
 
-.search-container  {
+.search-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 0 5px;
+  margin: 1.5rem 0rem 1.5rem 0rem;
   box-sizing: border-box;
 }
 
@@ -34,21 +32,10 @@
 
 table {
   width: 100%;
-  margin-top: 50px;
-}
-
-.header-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.header-container h1 {
-  margin: 0;
 }
 
 .mat-elevation-z8 {
-  box-shadow: 0px 0px 0px rgba(0,0,0,0.2);
+  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
 }
 
 .paginator-container {
@@ -64,7 +51,5 @@ mat-spinner {
 
 .subnets-button-row {
   display: flex;
-  justify-content: flex-end;
-  margin-bottom: 20px;
-  gap: 10px;
-}
+  gap: 15px;
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
index 1338179..0caafe9 100644
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html
@@ -2,35 +2,42 @@
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
-  <h2 class="title" i18n="@@subnetsTitle" joyrideStep="titleStep" text="Desde aquí puedes gestionar las subredes configuradas en el servidor OgDHCP.">Administrar Subredes</h2>
+  <div class="header-container-title">
+    <h2 class="title" i18n="@@subnetsTitle" joyrideStep="titleStep"
+      text="Desde aquí puedes gestionar las subredes configuradas en el servidor OgDHCP.">Administrar Subredes</h2>
+  </div>
   <div class="subnets-button-row">
-    <button mat-flat-button color="accent" (click)="openSubnetInfoDialog()" joyrideStep="viewInfoStep" text="Haz clic para ver información detallada de las subredes en el servidor.">Ver Información</button>
-    <button mat-flat-button color="primary" (click)="addSubnet()" joyrideStep="addSubnetStep" text="Haz clic para añadir una nueva subred.">Añadir Subred</button>
+    <button mat-flat-button color="accent" (click)="openSubnetInfoDialog()" joyrideStep="viewInfoStep"
+      text="Haz clic para ver información detallada de las subredes en el servidor.">Ver Información</button>
+    <button mat-flat-button color="primary" (click)="addSubnet()" joyrideStep="addSubnetStep"
+      text="Haz clic para añadir una nueva subred.">Añadir Subred</button>
   </div>
 </div>
 
-<mat-divider class="divider"></mat-divider>
-
 <div class="search-container">
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep" text="Busca subredes por nombre para localizar una subred específica rápidamente.">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNameStep"
+    text="Busca subredes por nombre para localizar una subred específica rápidamente.">
     <mat-label i18n="@@searchLabel">Buscar nombre de la subred</mat-label>
     <input matInput placeholder="Búsqueda" [(ngModel)]="filters['name']" i18n-placeholder="@@searchPlaceholder">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
   </mat-form-field>
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNetmaskStep" text="Busca subredes usando una netmask específica.">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchNetmaskStep"
+    text="Busca subredes usando una netmask específica.">
     <mat-label i18n="@@searchLabel">Buscar netmask</mat-label>
     <input matInput placeholder="Búsqueda" [(ngModel)]="filters['netmask']" i18n-placeholder="@@searchPlaceholder">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
   </mat-form-field>
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchIpStep" text="Busca subredes por dirección IP.">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchIpStep"
+    text="Busca subredes por dirección IP.">
     <mat-label i18n="@@searchLabel">Buscar IP</mat-label>
     <input matInput placeholder="Búsqueda" [(ngModel)]="filters['ip']" i18n-placeholder="@@searchPlaceholder">
     <mat-icon matSuffix>search</mat-icon>
     <mat-hint i18n="@@searchHint">Pulsar 'enter' para buscar</mat-hint>
   </mat-form-field>
-  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchBootFileStep" text="Busca subredes según el nombre del archivo de arranque.">
+  <mat-form-field appearance="fill" class="search-string" joyrideStep="searchBootFileStep"
+    text="Busca subredes según el nombre del archivo de arranque.">
     <mat-label i18n="@@searchLabel">Buscar Boot file name</mat-label>
     <input matInput placeholder="Búsqueda" [(ngModel)]="filters['bootFileName']" i18n-placeholder="@@searchPlaceholder">
     <mat-icon matSuffix>search</mat-icon>
@@ -38,8 +45,9 @@
   </mat-form-field>
 </div>
 
-<mat-spinner *ngIf="loading"></mat-spinner>
-<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="Visualiza y administra las subredes listadas según los filtros aplicados.">
+<app-loading [isLoading]="loading"></app-loading>
+<table *ngIf="!loading" mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep"
+  text="Visualiza y administra las subredes listadas según los filtros aplicados.">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
     <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
     <td mat-cell *matCellDef="let subnet">
@@ -66,11 +74,13 @@
 
   <ng-container matColumnDef="actions">
     <th mat-header-cell *matHeaderCellDef i18n="@@columnActions" style="text-align: center;">Acciones</th>
-    <td mat-cell *matCellDef="let subnet" style="text-align: center;" joyrideStep="actionsStep" text="Gestiona cada subred con opciones para editar, eliminar y más.">
+    <td mat-cell *matCellDef="let subnet" style="text-align: center;" joyrideStep="actionsStep"
+      text="Gestiona cada subred con opciones para editar, eliminar y más.">
       <button mat-icon-button color="primary" (click)="editSubnet(subnet)" i18n="@@editSubnet">
         <mat-icon>edit</mat-icon>
       </button>
-      <button mat-icon-button color="primary" (click)="addClientsToSubnet(subnet)"><mat-icon>computer</mat-icon></button>
+      <button mat-icon-button color="primary"
+        (click)="addClientsToSubnet(subnet)"><mat-icon>computer</mat-icon></button>
       <button mat-icon-button color="warn" (click)="toggleAction(subnet, 'delete')"><mat-icon>delete</mat-icon></button>
     </td>
   </ng-container>
@@ -79,7 +89,9 @@
   <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
 </table>
 
-<div class="paginator-container" joyrideStep="paginationStep" text="Navega entre las páginas de subredes usando el paginador.">
-  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions" (page)="onPageChange($event)">
+<div class="paginator-container" joyrideStep="paginationStep"
+  text="Navega entre las páginas de subredes usando el paginador.">
+  <mat-paginator [length]="length" [pageSize]="itemsPerPage" [pageIndex]="page" [pageSizeOptions]="pageSizeOptions"
+    (page)="onPageChange($event)">
   </mat-paginator>
-</div>
+</div>
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts
index 199d47c..81460b5 100644
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.spec.ts
@@ -3,19 +3,20 @@ import { OgDhcpSubnetsComponent, Subnet } from './og-dhcp-subnets.component';
 import { MatDialog } from '@angular/material/dialog';
 import { HttpClient } from '@angular/common/http';
 import { ToastrService } from 'ngx-toastr';
-import { of } from 'rxjs'; 
-import {  MatExpansionModule } from '@angular/material/expansion';
+import { of } from 'rxjs';
+import { MatExpansionModule } from '@angular/material/expansion';
 import { MatIconModule } from '@angular/material/icon';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select'; 
+import { MatSelectModule } from '@angular/material/select';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule } from '@angular/forms';
 import { MatInputModule } from '@angular/material/input';
-import { MatTableModule } from '@angular/material/table'; 
+import { MatTableModule } from '@angular/material/table';
 import { TranslateModule } from '@ngx-translate/core';
 import { JoyrideModule } from 'ngx-joyride';
+import { LoadingComponent } from '../../../shared/loading/loading.component';
 
 describe('OgDhcpSubnetsComponent', () => {
   let component: OgDhcpSubnetsComponent;
@@ -29,10 +30,10 @@ describe('OgDhcpSubnetsComponent', () => {
     mockHttpClient = jasmine.createSpyObj('HttpClient', ['get', 'post', 'put', 'delete']);
     mockToastrService = jasmine.createSpyObj('ToastrService', ['success', 'error']);
     mockHttpClient.get.and.returnValue(of({ 'hydra:member': [], 'hydra:totalItems': 0 }));
-    mockHttpClient.post.and.returnValue(of({})); 
+    mockHttpClient.post.and.returnValue(of({}));
 
     await TestBed.configureTestingModule({
-      declarations: [OgDhcpSubnetsComponent],
+      declarations: [OgDhcpSubnetsComponent, LoadingComponent],
       imports: [
         MatExpansionModule,
         MatIconModule,
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.css b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.css
index e0992fd..de87c64 100644
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.css
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.css
@@ -1,5 +1,4 @@
-
-.disk-usage-info{
+.disk-usage-info {
   display: flex;
   justify-content: start;
   margin-top: 10px;
@@ -7,9 +6,11 @@
 
 p {
   margin-left: 15px;
-}.dashboard {
-   padding: 20px;
- }
+}
+
+.dashboard {
+  padding: 0.5rem 0.5rem 0.5rem 1rem;
+}
 
 .disk-usage-container {
   display: flex;
@@ -66,7 +67,8 @@ table {
   border-collapse: collapse;
 }
 
-th, td {
+th,
+td {
   border: 1px solid #ddd;
   padding: 8px;
 }
@@ -78,7 +80,7 @@ th {
 .button-container {
   display: flex;
   flex-direction: column;
-  gap: 10px; 
+  gap: 10px;
   margin-top: 50px;
 }
 
@@ -86,8 +88,14 @@ th {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 100px;
-  padding: 10px;
+  padding: 10px 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.header-container-title {
+  flex-grow: 1;
+  text-align: left;
+  margin-left: 1em;
 }
 
 .btn:first-child {
@@ -96,4 +104,4 @@ th {
 
 .btn:last-child {
   margin-right: 0;
-}
+}
\ No newline at end of file
diff --git a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.html b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.html
index 5efe3a6..73bdbbe 100644
--- a/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.html
+++ b/ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/status/status.component.html
@@ -1,24 +1,21 @@
 <app-loading [isLoading]="loading"></app-loading>
 
-<div class="dashboard">
-  <div class="header-container" >
-
-  <h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgDhcp.">OgDhcp server Status</h2>
+<div class="header-container">
   <button mat-icon-button color="primary" (click)="iniciarTour()">
     <mat-icon>help</mat-icon>
   </button>
+  <div class="header-container-title">
+    <h2 joyrideStep="titleStep" text="Esta sección muestra el estado general del servidor OgDhcp.">
+      OgDhcp server Status
+    </h2>
   </div>
+</div>
+<div class="dashboard">
   <div class="disk-usage-container">
     <div class="disk-usage" joyrideStep="diskUsageStep" text="Visualiza el uso del disco del servidor.">
       <h3>Uso de disco</h3>
-      <ngx-charts-pie-chart
-        [view]="view"
-        [scheme]="colorScheme"
-        [results]="diskUsageChartData"
-        [gradient]="gradient"
-        [doughnut]="isDoughnut"
-        [labels]="showLabels"
-        [legend]="showLegend">
+      <ngx-charts-pie-chart [view]="view" [scheme]="colorScheme" [results]="diskUsageChartData" [gradient]="gradient"
+        [doughnut]="isDoughnut" [labels]="showLabels" [legend]="showLegend">
       </ngx-charts-pie-chart>
       <div class="disk-usage-info">
         <p>Total: {{ diskUsage.total }}</p>
@@ -28,21 +25,21 @@
       </div>
     </div>
 
-    <div class="services-status" joyrideStep="servicesStatusStep" text="Aquí puedes ver el estado de los servicios importantes del servidor.">
+    <div class="services-status" joyrideStep="servicesStatusStep"
+      text="Aquí puedes ver el estado de los servicios importantes del servidor.">
       <h3>Servicios</h3>
       <ul>
         <li *ngFor="let service of getServices()">
-          <span
-            class="status-led"
-            [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"
-          ></span>
+          <span class="status-led"
+            [ngClass]="{ 'active': service.status === 'active', 'inactive': service.status !== 'active' }"></span>
           {{ service.name }}: {{ service.status }}
         </li>
       </ul>
     </div>
   </div>
 
-  <div class="installed-oglives" joyrideStep="subnetsStep" text="Consulta la información de las subredes configuradas en el servidor.">
+  <div class="installed-oglives" joyrideStep="subnetsStep"
+    text="Consulta la información de las subredes configuradas en el servidor.">
     <h3>Subredes</h3>
     <table>
       <thead>
@@ -65,4 +62,4 @@
       </tbody>
     </table>
   </div>
-</div>
+</div>
\ No newline at end of file