refs #1067 Refactor add clients to subnet

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

@@ -1,25 +1,32 @@
 <h2 mat-dialog-title>Añade clientes a {{data.subnetName}}</h2>
 
 <mat-dialog-content>
-  <mat-form-field appearance="fill" class="search-select">
+  <mat-form-field appearance="fill" class="full-width">
-    <input type="text" matInput [formControl]="clientControl" [matAutocomplete]="clientAuto" placeholder="Seleccione un cliente">
+    <mat-label>Unidad Organizativa</mat-label>
-    <mat-autocomplete #clientAuto="matAutocomplete" [displayWith]="displayFnClient" (optionSelected)="onOptionClientSelected($event.option.value)">
+    <mat-select [formControl]="unitControl" (selectionChange)="onUnitChange($event.value)">
-      <mat-option *ngFor="let client of filteredClients | async" [value]="client">
+      <mat-option *ngFor="let unit of units" [value]="unit.uuid">{{ unit.name }}</mat-option>
-        {{ client.name }}
+    </mat-select>
-      </mat-option>
-    </mat-autocomplete>
   </mat-form-field>
 
-  <div *ngIf="selectedClients.length > 0">
+  <mat-form-field appearance="fill" class="full-width">
-    <h3>Clientes seleccionados:</h3>
+    <mat-label>Subunidad Organizativa</mat-label>
-    <ul>
+    <mat-select [formControl]="childUnitControl" (selectionChange)="onChildUnitChange($event.value)">
-      <li *ngFor="let client of selectedClients">
+      <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" 
+                    (change)="toggleClientSelection(client.uuid)"
+                    [checked]="selectedClients.includes(client.uuid)">
         {{ client.name }}
-        <button mat-icon-button color="warn" (click)="removeClient(client)">
+      </mat-checkbox>
-          <mat-icon>delete</mat-icon>
+    </div>
-        </button>
+    <div *ngIf="clients.length === 0">
-      </li>
+      <p>No hay clientes disponibles</p>
-    </ul>
+    </div>
   </div>
 </mat-dialog-content>
 

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

@@ -1,10 +1,8 @@
 import { Component, OnInit, Inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import {Observable, startWith} from "rxjs";
+import { FormControl } from '@angular/forms';
-import {map} from "rxjs/operators";
+import { ToastrService } from 'ngx-toastr';
-import {FormControl} from "@angular/forms";
-import {ToastrService} from "ngx-toastr";
 
 @Component({
   selector: 'app-add-clients-to-subnet',
@@ -13,59 +11,93 @@ 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: any[] = [];
+  selectedClients: string[] = [];
   loading: boolean = true;
-  filters: { [key: string]: string } = {};
+  unitControl = new FormControl();
-  filteredClients!: Observable<any[]>;
+  childUnitControl = new FormControl();
-  clientControl = new FormControl();
 
   constructor(
     private http: HttpClient,
     public dialogRef: MatDialogRef<AddClientsToSubnetComponent>,
     private toastService: ToastrService,
     @Inject(MAT_DIALOG_DATA) public data: { subnetUuid: string, subnetName: string }
-     ) {}
+  ) {}
 
   ngOnInit(): void {
-    console.log('Selected subnet UUID:', this.data);
     this.loading = true;
+    this.loadUnits();
+  }
 
-    this.loadClients();
+  loadUnits() {
-
+    this.http.get<any>(`${this.baseUrl}/organizational-units?page=1&itemsPerPage=50`).subscribe(
-    this.filteredClients = this.clientControl.valueChanges.pipe(
+      response => {
-      startWith(''),
+        this.units = response['hydra:member'].filter((unit: { type: string; }) => unit.type === 'organizational-unit');
-      map(value => (typeof value === 'string' ? value : value?.name)),
+        this.loading = false;
-      map(name => (name ? this._filterClients(name) : this.clients.slice()))
+      },
+      error => console.error('Error fetching organizational units:', error)
     );
   }
 
-  loadClients() {
+  onUnitChange(unitId: string): void {
-    this.http.get<any>( `${this.baseUrl}/clients?&page=1&itemsPerPage=10000&exists[subnet]=false`).subscribe(
+    const unit = this.units.find(unit => unit.uuid === unitId);
-      response => {
+    this.childUnits = unit ? this.getAllChildren(unit) : [];
-        this.clients = response['hydra:member'];
+    this.clients = [];
-        this.loading = false;
+    this.childUnitControl.setValue(null);
-      },
+    this.selectedClients = [];
-      error => {
+  }
-        console.error('Error fetching parent units:', error);
+
-        this.loading = false;
+  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 = [];
+  }
+
+  toggleClientSelection(clientId: string): void {
+    const index = this.selectedClients.indexOf(clientId);
+    if (index >= 0) {
+      this.selectedClients.splice(index, 1);
+    } else {
+      this.selectedClients.push(clientId);
+    }
+  }
+
+  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(client => {
+    this.selectedClients.forEach(clientId => {
-      const postData = {
+      const postData = { client: `/clients/${clientId}` };
-        client: client['@id']
-      };
 
       this.http.post(`${this.baseUrl}/og-dhcp/server/${this.data.subnetUuid}/post-host`, postData).subscribe(
         response => {
-          this.toastService.success(`Cliente ${client.name} asignado correctamente`);
+          this.toastService.success(`Cliente asignado correctamente`);
         },
         error => {
-          console.error(`Error al asignar el cliente ${client.name}:`, error);
+          console.error(`Error al asignar el cliente:`, error);
-          this.toastService.error(`Error al asignar el cliente ${client.name}: ${error.error['hydra:description']}`);
+          this.toastService.error(`Error al asignar el cliente: ${error.error['hydra:description']}`);
         }
       );
     });
@@ -76,27 +108,4 @@ export class AddClientsToSubnetComponent implements OnInit {
   close() {
     this.dialogRef.close();
   }
-
-  removeClient(client: any) {
-    const index = this.selectedClients.indexOf(client);
-    if (index >= 0) {
-      this.selectedClients.splice(index, 1);
-    }
-  }
-
-  private _filterClients(name: string): any[] {
-    const filterValue = name.toLowerCase();
-    return this.clients.filter(client => client.name.toLowerCase().includes(filterValue));
-  }
-
-  displayFnClient(client: any): string {
-    return client && client.name ? client.name : '';
-  }
-
-  onOptionClientSelected(client: any) {
-    if (!this.selectedClients.includes(client)) {
-      this.selectedClients.push(client);
-    }
-    this.clientControl.setValue('');
-  }
 }