Update Add Clients to Subnet component and dialog

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

@@ -1,4 +1,4 @@
-<h2 mat-dialog-title>Select Clients</h2>
+<h2 mat-dialog-title>Añade clientes a a {{data.subnetName}}</h2>
 
 <mat-dialog-content>
   <div *ngIf="loading" class="loading-container">
@@ -6,7 +6,7 @@
     <p>Cargando clientes...</p>
   </div>
   <mat-form-field appearance="fill" *ngIf="!loading" style="width: 100%;">
-    <mat-label>Select Clients</mat-label>
+    <mat-label>Añadir clientes</mat-label>
     <mat-select [(value)]="selectedClients" multiple>
       <mat-option *ngFor="let client of clients" [value]="client">
         {{ client.name }} (IP: {{ client.ip }}, MAC: {{ client.mac }})
@@ -16,6 +16,6 @@
 </mat-dialog-content>
 
 <mat-dialog-actions>
-  <button mat-button (click)="close()">Cancel</button>
+  <button mat-button (click)="close()">Cancelar</button>
-  <button mat-button (click)="save()">Save</button>
+  <button mat-button (click)="save()">Añadir</button>
 </mat-dialog-actions>

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

@@ -1,6 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { MatDialogRef } from '@angular/material/dialog';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 @Component({
   selector: 'app-add-clients-to-subnet',
@@ -10,33 +10,44 @@ import { MatDialogRef } from '@angular/material/dialog';
 export class AddClientsToSubnetComponent implements OnInit {
   clients: any[] = [];
   selectedClients: any[] = [];
-  loading: boolean = true; // Variable para controlar el estado de carga
+  loading: boolean = true;
 
   constructor(
     private http: HttpClient,
-    public dialogRef: MatDialogRef<AddClientsToSubnetComponent>
+    public dialogRef: MatDialogRef<AddClientsToSubnetComponent>,
-  ) {}
+    @Inject(MAT_DIALOG_DATA) public data: { subnetUuid: string, subnetName: string }  
+     ) {}
 
   ngOnInit(): void {
-    // Comienza la carga
+    console.log('Selected subnet UUID:', this.data);
     this.loading = true;
 
-    // Hacer la llamada HTTP directamente en el componente
     this.http.get<any>('http://127.0.0.1:8080/clients?page=1&itemsPerPage=30').subscribe(
       response => {
-        this.clients = response['hydra:member']; // Asignamos los clientes obtenidos a la variable clients
+        this.clients = response['hydra:member'];
-        this.loading = false; // Los datos se han cargado, desactivar el spinner
+        this.loading = false;
       },
       error => {
         console.error('Error fetching clients:', error);
-        this.loading = false; // También detener el spinner en caso de error
+        this.loading = false;
       }
     );
   }
 
   save() {
-    console.log('Selected clients:', this.selectedClients);
+    const postData = {
-    this.dialogRef.close(this.selectedClients); // Cierra el modal y pasa los clientes seleccionados
+      clients: JSON.stringify(this.selectedClients.map(client => client.uuid))  
+    };
+
+    this.http.post(`http://127.0.0.1:8080/og-dhcp/server/${this.data.subnetUuid}/post-host`, postData).subscribe(
+      response => {
+        console.log('Clients assigned successfully:', response);
+        this.dialogRef.close(this.selectedClients);
+      },
+      error => {
+        console.error('Error assigning clients:', error);
+      }
+    );
   }
 
   close() {

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

@@ -27,7 +27,6 @@
     <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
     <td mat-cell *matCellDef="let subnet">
 
-      <!-- Mostrar otros campos normalmente -->
       <ng-container *ngIf="column.columnDef === 'name'">
         {{ subnet.name }}
       </ng-container>
@@ -58,7 +57,6 @@
         <mat-icon>edit</mat-icon></button>
       <button mat-icon-button color="warn" (click)="deleteSubnet(subnet)"><mat-icon>delete</mat-icon></button>
 
-      <!-- Icono de tres puntos y menú desplegable -->
       <button mat-icon-button [matMenuTriggerFor]="menu">
         <mat-icon>more_vert</mat-icon>
       </button>
@@ -71,7 +69,7 @@
     <mat-icon>edit</mat-icon>
     <span>Actualizar</span>
   </button>
-  <button mat-menu-item (click)="addClientsToSubnet()">
+  <button mat-menu-item (click)="addClientsToSubnet(subnet)">
     <mat-icon>computer</mat-icon>
     <span>Add Clients to Subnet</span>
   </button>

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

@@ -89,7 +89,7 @@ export class OgDhcpSubnetsComponent  {
     console.log('Editando subnet:', subnet);
     const dialogRef = this.dialog.open(CreateSubnetComponent, {
       width: '400px',
-      data: { subnet }  // Pasa los datos de la subred al modal
+      data: { subnet } 
     });
   
     dialogRef.afterClosed().subscribe(result => {
@@ -130,14 +130,16 @@ export class OgDhcpSubnetsComponent  {
     console.log('Update Subnet action selected');
   }
 
-  addClientsToSubnet() {
+  addClientsToSubnet(subnet: Subnet) {
-    const dialogRef = this.dialog.open (AddClientsToSubnetComponent, {
+    
-      width: '600px'
+    const dialogRef = this.dialog.open(AddClientsToSubnetComponent, {
+      width: '600px',
+      data: { subnetUuid: subnet.uuid, subnetName: subnet.name }  
     });
-
+  
     dialogRef.afterClosed().subscribe(result => {
       console.log('The dialog was closed');
-      this.loadSubnets()
+      this.loadSubnets();
     });
   }