Big updates dhcp subnets

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component.css

@@ -1,17 +1,22 @@
 .loading-container {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100px; 
-  }
-  
-  mat-form-field {
-    width: 100%;
-  }
-  
-  mat-dialog-actions {
-    display: flex;
-    justify-content: flex-end;
-  }
-  
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+mat-form-field {
+  width: 100%;
+}
+
+mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.checkbox-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component.html

@@ -2,23 +2,16 @@
 
 <mat-dialog-content>
   <mat-form-field appearance="fill" class="full-width">
-    <mat-label>Unidad Organizativa</mat-label>
-    <mat-select [formControl]="unitControl" (selectionChange)="onUnitChange($event.value)">
+    <mat-label>Seleccione aula</mat-label>
+    <mat-select [formControl]="unitControl" (selectionChange)="loadChildUnits($event.value)">
       <mat-option *ngFor="let unit of units" [value]="unit.uuid">{{ unit.name }}</mat-option>
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field appearance="fill" class="full-width">
-    <mat-label>Subunidad Organizativa</mat-label>
-    <mat-select [formControl]="childUnitControl" (selectionChange)="onChildUnitChange($event.value)">
-      <mat-option *ngFor="let child of childUnits" [value]="child.uuid">{{ child.name }}</mat-option>
-    </mat-select>
-  </mat-form-field>
-
   <div class="checkbox-group">
     <label>Clientes</label>
     <div *ngIf="clients.length > 0">
-      <mat-checkbox *ngFor="let client of clients" 
+      <mat-checkbox *ngFor="let client of clients"
                     (change)="toggleClientSelection(client.uuid)"
                     [checked]="selectedClients.includes(client.uuid)">
         {{ client.name }}

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/add-clients-to-subnet/add-clients-to-subnet.component.ts

@@ -12,7 +12,6 @@ import { ToastrService } from 'ngx-toastr';
 export class AddClientsToSubnetComponent implements OnInit {
   baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
   units: any[] = [];
-  childUnits: any[] = [];
   clients: any[] = [];
   selectedClients: string[] = [];
   loading: boolean = true;
@@ -32,38 +31,22 @@ export class AddClientsToSubnetComponent implements OnInit {
   }
 
   loadUnits() {
-    this.http.get<any>(`${this.baseUrl}/organizational-units?page=1&itemsPerPage=50`).subscribe(
+    this.http.get<any>(`${this.baseUrl}/organizational-units?type=classroom&page=1&itemsPerPage=50`).subscribe(
       response => {
-        this.units = response['hydra:member'].filter((unit: { type: string; }) => unit.type === 'organizational-unit');
+        this.units = response['hydra:member'];
         this.loading = false;
       },
       error => console.error('Error fetching organizational units:', error)
     );
   }
 
-  onUnitChange(unitId: string): void {
-    const unit = this.units.find(unit => unit.uuid === unitId);
-    this.childUnits = unit ? this.getAllChildren(unit) : [];
-    this.clients = [];
-    this.childUnitControl.setValue(null);
-    this.selectedClients = [];
-  }
-
-  getAllChildren(unit: any): any[] {
-    let allChildren = [];
-    if (unit.children && unit.children.length > 0) {
-      for (const child of unit.children) {
-        allChildren.push(child);
-        allChildren = allChildren.concat(this.getAllChildren(child));
-      }
-    }
-    return allChildren;
-  }
-
-  onChildUnitChange(childUnitId: string): void {
-    const childUnit = this.childUnits.find(unit => unit.uuid === childUnitId);
-    this.clients = childUnit && childUnit.clients ? childUnit.clients : [];
-    this.selectedClients = [];
+  loadChildUnits(unitId: string) {
+    this.http.get<any>(`${this.baseUrl}/clients?parent.id${unitId}`).subscribe(
+      response => {
+        this.clients = response['hydra:member'];
+      },
+      error => console.error('Error fetching child units:', error)
+    );
   }
 
   toggleClientSelection(clientId: string): void {
@@ -75,18 +58,6 @@ export class AddClientsToSubnetComponent implements OnInit {
     }
   }
 
-  toggleSelectAll(): void {
-    if (this.areAllClientsSelected()) {
-      this.selectedClients = [];
-    } else {
-      this.selectedClients = this.clients.map(client => client.uuid);
-    }
-  }
-
-  areAllClientsSelected(): boolean {
-    return this.selectedClients.length === this.clients.length;
-  }
-
   save() {
     this.selectedClients.forEach(clientId => {
       const postData = { client: `/clients/${clientId}` };

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.css

@@ -38,7 +38,6 @@ table {
 }
 
 .header-container {
-  margin-top: 16px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -58,20 +57,14 @@ table {
   margin-bottom: 30px;
 }
 
-.example-headers-align .mat-expansion-panel-header-description {
-  justify-content: space-between;
-  align-items: center;
+mat-spinner {
+  margin: 0 auto;
+  align-self: center;
 }
 
-.example-headers-align .mat-mdc-form-field + .mat-mdc-form-field {
-  margin-left: 8px;
-}
-
-.example-button-row {
-  display: table-cell;
-  max-width: 600px;
-}
-
-.example-button-row .mat-mdc-button-base {
-  margin: 8px 8px 8px 0;
+.subnets-button-row {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 20px;
+  gap: 10px;
 }

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.html

@@ -1,23 +1,10 @@
-<mat-accordion class="example-headers-align">
-  <mat-expansion-panel hideToggle>
-    <mat-expansion-panel-header joyrideStep="serverInfoStep" text="Despliega este contenedor para acceder a la información y opciones de sincronización en el servidor OgDHCP.">
-      <mat-panel-title> Información en servidor ogDHCP </mat-panel-title>
-    </mat-expansion-panel-header>
-    <div class="example-button-row">
-      <button mat-flat-button color="primary" (click)="syncSubnets()" joyrideStep="syncDbStep" text="Sincroniza la base de datos del servidor OgDHCP para actualizar la información de las subredes."> Sincronizar base de datos</button>
-    </div>
-    <div class="example-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>
-    </div>
-  </mat-expansion-panel>
-</mat-accordion>
-
 <div class="header-container">
   <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="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>
   </div>
 </div>
@@ -52,8 +39,8 @@
 </div>
 
 <mat-divider class="divider"></mat-divider>
-
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" joyrideStep="tableStep" text="Visualiza y administra las subredes listadas según los filtros aplicados.">
+<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.">
   <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
     <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
     <td mat-cell *matCellDef="let subnet">
@@ -84,15 +71,8 @@
       <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="warn" (click)="toggleAction(subnet, 'delete')"><mat-icon>delete</mat-icon></button>
-      <button mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>menu</mat-icon>
-      </button>
-      <mat-menu #menu="matMenu">
-        <button mat-menu-item [disabled]="subnet.synchronized" (click)="toggleAction(subnet, 'post')">Crear en og-dhcp</button>
-        <button mat-menu-item (click)="addClientsToSubnet(subnet)">Añadir cliente</button>
-        <button mat-menu-item (click)="toggleAction(subnet, 'put')">Actualizar datos en og-dhcp</button>
-      </mat-menu>
     </td>
   </ng-container>
 

ogWebconsole/src/app/components/ogdhcp/og-dhcp-subnets/og-dhcp-subnets.component.ts

@@ -35,7 +35,7 @@ export interface Subnet {
 })
 export class OgDhcpSubnetsComponent {
   baseUrl: string = import.meta.env.NG_APP_BASE_API_URL;
-  displayedColumns: string[] = ['id', 'name', 'netmask', 'ipAddress', 'nextServer', 'bootFileName', 'synchronized', 'serverId', 'clients', 'actions'];
+  displayedColumns: string[] = ['id', 'name', 'netmask', 'ipAddress', 'synchronized', 'serverId', 'clients', 'actions'];
   dataSource = new MatTableDataSource<Subnet>([]);
   length = 0;
   itemsPerPage: number = 10;
@@ -43,6 +43,7 @@ export class OgDhcpSubnetsComponent {
   filters: { [key: string]: string } = {};
   pageSizeOptions: number[] = [5, 10, 20];
   alertMessage: string | null = null;
+  loading:boolean = false;
 
   @ViewChild(MatPaginator) paginator: MatPaginator | undefined;
 
@@ -51,8 +52,6 @@ export class OgDhcpSubnetsComponent {
     { columnDef: 'name', header: 'Name', cell: (subnet: Subnet) => subnet.name },
     { columnDef: 'netmask', header: 'Netmask', cell: (subnet: Subnet) => subnet.netmask },
     { columnDef: 'ipAddress', header: 'IP Address', cell: (subnet: Subnet) => subnet.ipAddress },
-    { columnDef: 'nextServer', header: 'Next Server', cell: (subnet: Subnet) => subnet.nextServer },
-    { columnDef: 'bootFileName', header: 'Boot File Name', cell: (subnet: Subnet) => subnet.bootFileName },
     { columnDef: 'synchronized', header: 'Sincronizado', cell: (subnet: Subnet) => `${subnet.synchronized}` },
     { columnDef: 'serverId', header: 'Id Servidor DHCP', cell: (subnet: Subnet) => subnet.serverId },
     { columnDef: 'clients', header: 'Lista de clientes', cell: (subnet: Subnet) => `${subnet.clients}` },
@@ -64,8 +63,11 @@ export class OgDhcpSubnetsComponent {
     private joyrideService: JoyrideService) { }
 
   ngOnInit() {
+    this.loading = true;
     this.loadSubnets();
     this.loadAlert()
+    this.syncSubnets()
+    this.loading = false;
   }
 
   loadSubnets() {
@@ -87,7 +89,7 @@ export class OgDhcpSubnetsComponent {
   syncSubnets() {
     this.http.post(`${this.apiUrl}/sync`, {})
       .subscribe(response => {
-        this.toastService.success('Sincronización completada');
+        this.toastService.success('Sincronización con componente DHCP exitosa');
         this.loadSubnets()
       }, error => {
         console.error('Error al sincronizar', error);
@@ -224,9 +226,6 @@ export class OgDhcpSubnetsComponent {
   iniciarTour(): void {
     this.joyrideService.startTour({
       steps: [
-        'serverInfoStep',
-        'syncDbStep',
-        'viewInfoStep',
         'titleStep',
         'addSubnetStep',
         'searchNameStep',