Groups add delete functionallity

ogWebconsole/src/app/app.module.ts

@@ -39,6 +39,7 @@ import { CreateOrganizationalUnitComponent } from './components/groups/organizat
 import {MatStepperModule} from '@angular/material/stepper';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { CreateClientComponent } from './components/groups/clients/create-client/create-client.component';
+import { DeleteModalComponent } from './components/groups/delete-modal/delete-modal.component';
 
 
 @NgModule({ declarations: [
@@ -60,7 +61,8 @@ import { CreateClientComponent } from './components/groups/clients/create-client
         ChangePasswordModalComponent,
         GroupsComponent,
         CreateOrganizationalUnitComponent,
-        CreateClientComponent
+        CreateClientComponent,
+        DeleteModalComponent
     ],
     bootstrap: [AppComponent], 
     imports: [BrowserModule,

ogWebconsole/src/app/components/groups/data.service.ts

@@ -71,5 +71,18 @@ export class DataService {
     );
   }
 
+  deleteElement(uuid: string, type: string): Observable<void> {
+    const url = type === 'client' 
+      ? `http://127.0.0.1:8080/clients/${uuid}` 
+      : `http://127.0.0.1:8080/organizational-units/${uuid}`;
+    return this.http.delete<void>(url).pipe(
+      catchError(error => {
+        console.error('Error deleting element', error);
+        return throwError(error);
+      })
+    );
+  }
+  
+
 
 }

ogWebconsole/src/app/components/groups/groups.component.html

@@ -17,7 +17,7 @@
           </span>
           <span class="actions">
             <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon>
-            <mat-icon class="delete-icon" (click)="onDeleteClick(unidad.uuid)">delete</mat-icon>
+            <mat-icon class="delete-icon" (click)="onDeleteClick(unidad.uuid, unidad.nombre || unidad.nombre, unidad.type)">delete</mat-icon>
           </span>
         </mat-list-item>
       </mat-list>
@@ -58,7 +58,7 @@
             </span>
             <span class="actions">
               <mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid)">edit</mat-icon>
-              <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid)">delete</mat-icon>
+              <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid, child.name || child.nombre, child.type)">delete</mat-icon>
             </span>
           </div>
         </mat-list-item>

ogWebconsole/src/app/components/groups/groups.component.ts

@@ -3,6 +3,7 @@ import { DataService } from './data.service';
 import { UnidadOrganizativa } from './model';
 import { MatDialog } from '@angular/material/dialog';
 import { CreateOrganizationalUnitComponent } from './organizational-units/create-organizational-unit/create-organizational-unit.component';
+import { DeleteModalComponent } from './delete-modal/delete-modal.component';
 
 @Component({
   selector: 'app-groups',
@@ -40,8 +41,10 @@ export class GroupsComponent implements OnInit {
   loadChildrenAndClients(uuid: string): void {
     this.dataService.getChildren(uuid).subscribe(
       childrenData => {
+        console.log('Children data:', childrenData); // Depuración
         this.dataService.getClients(uuid).subscribe(
           clientsData => {
+            console.log('Clients data:', clientsData); // Depuración
             const newChildren = [...childrenData, ...clientsData];
             if (newChildren.length > 0) {
               this.children = newChildren;
@@ -57,7 +60,6 @@ export class GroupsComponent implements OnInit {
     );
   }
 
-
   addOU(): void {
     this.dialog.open(CreateOrganizationalUnitComponent);
   }
@@ -79,9 +81,22 @@ export class GroupsComponent implements OnInit {
     }
   }
 
-  onDeleteClick(uuid: string): void {
+  onDeleteClick(uuid: string, name: string, type: string): void {
-    console.log('UUID del elemento a eliminar:', uuid);
+    const dialogRef = this.dialog.open(DeleteModalComponent, {
-    // Aquí puedes agregar lógica adicional para eliminar el elemento si es necesario
+      width: '250px',
+      data: { name }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.dataService.deleteElement(uuid, type).subscribe(
+          () => {
+            this.loadChildrenAndClients(this.selectedUnidad?.uuid || '');
+          },
+          error => console.error('Error deleting element', error)
+        );
+      }
+    });
   }
 
   onEditClick(type: any, uuid: string): void {