Groups base structure new container

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

@@ -10,6 +10,7 @@ import { UnidadOrganizativa } from './model';
 export class DataService {
 
   private apiUrl = 'http://127.0.0.1:8080/organizational-units?page=1&itemsPerPage=30';
+  private clientsUrl = 'http://127.0.0.1:8080/clients?page=1&itemsPerPage=30';
 
   constructor(private http: HttpClient) {}
 
@@ -38,7 +39,8 @@ export class DataService {
   }
 
   getChildren(uuid: string): Observable<any[]> {
-    return this.http.get<any>(this.apiUrl).pipe(
+    console.log('uuid', uuid);
+    return this.http.get<any>(`${this.apiUrl}&parent=${uuid}`).pipe(
       map(response => {
         if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
           return response['hydra:member'].filter((element: any) => element.parent === `/organizational-units/${uuid}`);
@@ -52,4 +54,21 @@ export class DataService {
       })
     );
   }
+
+  getClients(unidadId: string): Observable<any[]> {
+    console.log('unidadId', unidadId);
+    return this.http.get<any>(this.clientsUrl).pipe(
+      map(response => {
+        if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
+          return response['hydra:member'].filter((client: any) => client.organizationalUnit === `/organizational-units/${unidadId}`);
+        } else {
+          throw new Error('Unexpected response format');
+        }
+      }),
+      catchError(error => {
+        console.error('Error fetching clients', error);
+        return throwError(error);
+      })
+    );
+  }
 }

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

@@ -1,25 +1,26 @@
-.groupLists-container{
-    display: flex;
+.groupLists-container {
+  display: flex;
+  flex-wrap: wrap;
 }
 
 mat-card {
-    margin: 10px;
+  margin: 10px;
 }
 
 .groups-button-row {
-    display: flex;
-    flex-grow: 1;
+  display: flex;
+  flex-grow: 1;
 }
-button {
-    margin-left: 10px;
-    
-    margin-bottom: 20px;
-}
-  .clickable-item:hover {
-    cursor: pointer;
-  }
 
-  .selected-item {
-    background-color: #e0e0e0;
-  }
-  
+button {
+  margin-left: 10px;
+  margin-bottom: 20px;
+}
+
+.clickable-item:hover {
+  cursor: pointer;
+}
+
+.selected-item {
+  background-color: #e0e0e0;
+}

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

@@ -12,7 +12,23 @@
         <mat-list-item *ngFor="let unidad of unidadesOrganizativas" 
           (click)="onSelectUnidad(unidad)" 
           [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
-          {{ unidad.nombre }}
+          <div>
+            <mat-icon>apartment</mat-icon>
+            {{ unidad.nombre }}
+        </div>
+        </mat-list-item>
+      </mat-list>
+    </mat-card-content>
+  </mat-card>
+
+  <mat-card *ngIf="children.length > 0">
+    <mat-card-title>{{ breadcrumb.join(' > ') }}</mat-card-title>
+    <mat-card-content>
+      <mat-list role="list">
+        <mat-list-item *ngFor="let child of children" 
+          (click)="onSelectChild(child)"
+          [ngClass]="{'clickable-item': true}">
+          {{ child.name || child.nombre }}
         </mat-list-item>
       </mat-list>
     </mat-card-content>

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

@@ -12,6 +12,8 @@ import { CreateOrganizationalUnitComponent } from './organizational-units/create
 export class GroupsComponent implements OnInit {
   unidadesOrganizativas: UnidadOrganizativa[] = [];
   selectedUnidad: UnidadOrganizativa | null = null;
+  children: any[] = [];
+  breadcrumb: string[] = [];
 
   constructor(private dataService: DataService, public dialog: MatDialog) {}
 
@@ -24,6 +26,35 @@ export class GroupsComponent implements OnInit {
 
   onSelectUnidad(unidad: UnidadOrganizativa): void {
     this.selectedUnidad = unidad;
+    this.breadcrumb = [unidad.nombre];
+    this.loadChildrenAndClients(unidad.uuid);
+  }
+
+  onSelectChild(child: any): void {
+    if (child.uuid && child.id) {
+      this.breadcrumb.push(child.name || child.nombre);
+      this.loadChildrenAndClients(child.uuid);
+    }
+  }
+
+  loadChildrenAndClients(uuid: string): void {
+    this.dataService.getChildren(uuid).subscribe(
+      childrenData => {
+        this.dataService.getClients(uuid).subscribe(
+          clientsData => {
+            const newChildren = [...childrenData, ...clientsData];
+            if (newChildren.length > 0) {
+              this.children = newChildren;
+            } else {
+              // No se encontraron elementos hijos o clientes, revertimos el breadcrumb
+              this.breadcrumb.pop();
+            }
+          },
+          error => console.error('Error fetching clients', error)
+        );
+      },
+      error => console.error('Error fetching children', error)
+    );
   }
 
   addOU(): void {