Visualización de aulas y clientes

ogWebconsole/src/app/components/groups/clients/create-client/create-client.component.ts

@@ -48,12 +48,10 @@ export class CreateClientComponent implements OnInit {
   }
 
   onSubmit() {
-    console.log('Form data:', this.clientForm.value);
     if (this.clientForm.valid) {
       const formData = this.clientForm.value;
       this.http.post('http://127.0.0.1:8080/clients', formData).subscribe(
         response => {
-          console.log('Response from POST:', response);
           this.dialogRef.close(response);
         },
         error => {

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

@@ -58,7 +58,6 @@ export class DataService {
     return this.http.get<any>(this.clientsUrl).pipe(
       map(response => {
         if (response['hydra:member'] && Array.isArray(response['hydra:member'])) {
-          console.log(response);
           return response['hydra:member'].filter((client: any) => client.organizationalUnit && client.organizationalUnit['@id'] === `/organizational-units/${uuid}`);
         } else {
           throw new Error('Unexpected response format');

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

@@ -8,6 +8,7 @@ mat-card {
 }
 
 .elements-card{
+  margin: 10px;
   width: 800px;
   background-color: #fafafa;
 }
@@ -44,8 +45,3 @@ button {
   color: #212121;
 }
 
-.element-name{
-  position: relative;
-  top: -5px;
-  margin-left: 3px;
-}

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

@@ -11,12 +11,13 @@
     <mat-card-content>
       <mat-list role="list">
         <mat-list-item *ngFor="let unidad of unidadesOrganizativas" 
-          [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}"
+          [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
-          (click)="onSelectUnidad(unidad)">
+          <span (click)="onSelectUnidad(unidad)">
             <mat-icon>apartment</mat-icon>
-          <span class="element-name">{{ unidad.nombre }}</span>
+            {{ unidad.nombre }}
+          </span>
           <span class="actions">
-            <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid, $event)">edit</mat-icon>
+            <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon>
           </span>
         </mat-list-item>
       </mat-list>
@@ -28,28 +29,39 @@
     <mat-card-subtitle>{{ breadcrumb.join(' > ') }}</mat-card-subtitle>
     <mat-card-content>
       <mat-list role="list">
-        <mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}"
+        <mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
-          (click)="onSelectChild(child)">
+          <div>
+            <span (click)="onSelectChild(child)">
               <ng-container [ngSwitch]="getIcon(child.type)">
                 <mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
-            <svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                <svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-              <path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
+                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                  <path
+                    d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
                 </svg>
-            <svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                <svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-              <path d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
+                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                  <path
+                    d="M120-120v-80h80v-640h400v40h160v600h80v80H680v-600h-80v600H120Zm160-640v560-560Zm160 320q17 0 28.5-11.5T480-480q0-17-11.5-28.5T440-520q-17 0-28.5 11.5T400-480q0 17 11.5 28.5T440-440ZM280-200h240v-560H280v560Z" />
                 </svg>
-            <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-              <path d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z" />
+                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                  <path
+                    d="M40-120v-80h880v80H40Zm120-120q-33 0-56.5-23.5T80-320v-440q0-33 23.5-56.5T160-840h640q33 0 56.5 23.5T880-760v440q0 33-23.5 56.5T800-240H160Zm0-80h640v-440H160v440Zm0 0v-440 440Z" />
                 </svg>
-            <svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                <svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
-              <path d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
+                  viewBox="0 -960 960 960" width="24px" fill="#5f6368">
+                  <path
+                    d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
                 </svg>
               </ng-container>
-          <span class="element-name">{{ child.name || child.nombre }}</span>
+              {{ child.name || child.nombre }}
-          <span class="actions">
-            <mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid, $event)">edit</mat-icon>
-            <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid, child.name || child.nombre, child.type, $event)">delete</mat-icon>
             </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, child.name || child.nombre, child.type)">delete</mat-icon>
+            </span>
+          </div>
         </mat-list-item>
       </mat-list>
     </mat-card-content>
@@ -62,6 +74,7 @@
       <p><strong>Tipo:</strong> {{ selectedDetail.type }}</p>
       <p><strong>ID:</strong> {{ selectedDetail.id }}</p>
       <p *ngIf="selectedDetail.uuid"><strong>UUID:</strong> {{ selectedDetail.uuid }}</p>
+      <!-- Aquí puedes agregar más detalles específicos del elemento -->
     </mat-card-content>
     <mat-card-content *ngIf="!selectedDetail">
       <p>Selecciona un elemento para ver sus detalles.</p>
@@ -69,6 +82,4 @@
   </mat-card>
 </div>
 
-
+<app-classroom-view [clients]="clientsData" [pcInTable] = "2"></app-classroom-view>
-<app-classroom-view
-></app-classroom-view>

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

@@ -16,17 +16,14 @@ import { EditClientComponent } from './clients/edit-client/edit-client.component
 export class GroupsComponent implements OnInit {
   unidadesOrganizativas: UnidadOrganizativa[] = [];
   selectedUnidad: UnidadOrganizativa | null = null;
-  selectedDetail: any | null = null;
+  selectedDetail: any | null = null;  // Nueva variable para el detalle del elemento seleccionado
   children: any[] = [];
   breadcrumb: string[] = [];
+  clientsData: any[] = [];  // Nueva variable para almacenar los datos de clients
 
   constructor(private dataService: DataService, public dialog: MatDialog) {}
 
   ngOnInit(): void {
-    this.fetchUnidadesOrganizativas();
-  }
-
-  fetchUnidadesOrganizativas(): void {
     this.dataService.getUnidadesOrganizativas().subscribe(
       data => this.unidadesOrganizativas = data,
       error => console.error('Error fetching unidades organizativas', error)
@@ -35,14 +32,14 @@ export class GroupsComponent implements OnInit {
 
   onSelectUnidad(unidad: UnidadOrganizativa): void {
     this.selectedUnidad = unidad;
-    this.selectedDetail = unidad;
+    this.selectedDetail = unidad;  // Mostrar detalles de la unidad seleccionada
     this.breadcrumb = [unidad.nombre];
     this.loadChildrenAndClients(unidad.uuid);
   }
 
   onSelectChild(child: any): void {
-    this.selectedDetail = child;
+    this.selectedDetail = child;  // Mostrar detalles del niño seleccionado
-    if (child.type !== 'client' && child.uuid) {
+    if (child.type !== 'client' && child.uuid && child.id) {
       this.breadcrumb.push(child.name || child.nombre);
       this.loadChildrenAndClients(child.uuid);
     }
@@ -53,55 +50,93 @@ export class GroupsComponent implements OnInit {
       childrenData => {
         this.dataService.getClients(uuid).subscribe(
           clientsData => {
-            this.children = [...childrenData, ...clientsData];
+            this.clientsData = clientsData;  // Almacenar clientsData para pasarlo al componente hijo
-            if (this.children.length === 0) {
+            const newChildren = [...childrenData, ...clientsData];
-              this.breadcrumb.pop();
+  
+            if (newChildren.length > 0) {
+              this.children = newChildren;
+            } else {
+              this.children = []; // Limpiar card2 cuando no hay elementos
+              this.breadcrumb.pop(); // Revertir breadcrumb solo si no hay elementos
+  
+              // Si deseas que la unidad organizativa se limpie completamente, descomenta la línea siguiente:
+              // this.selectedUnidad = null;
             }
           },
           error => {
             console.error('Error fetching clients', error);
-            this.children = [];
+            this.clientsData = [];  // Limpiar clientsData en caso de error
+            this.children = []; // Limpiar card2 en caso de error
           }
         );
       },
       error => {
         console.error('Error fetching children', error);
-        this.children = [];
+        this.children = []; // Limpiar card2 en caso de error
       }
     );
   }
   
   addOU(): void {
-    this.dialog.open(CreateOrganizationalUnitComponent).afterClosed().subscribe(() => {
+    const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
-      this.fetchUnidadesOrganizativas();
+
+    // Subscribirse al evento unitAdded del componente de creación después de cerrar el diálogo
+    dialogRef.afterClosed().subscribe(() => {
+      // Aquí puedes actualizar las cards o hacer cualquier otra acción necesaria después de añadir una unidad organizativa
+      this.dataService.getUnidadesOrganizativas().subscribe(
+        data => this.unidadesOrganizativas = data,
+        error => console.error('Error fetching unidades organizativas', error)
+      );
     });
   }
 
   addClient(): void {
-    this.dialog.open(CreateClientComponent).afterClosed().subscribe(() => {
+    const dialogRef = this.dialog.open(CreateClientComponent);
-      this.fetchUnidadesOrganizativas();
+
+    // Subscribirse al evento unitAdded del componente de creación después de cerrar el diálogo
+    dialogRef.afterClosed().subscribe(() => {
+      // Aquí puedes actualizar las cards o hacer cualquier otra acción necesaria después de añadir una unidad organizativa
+      this.dataService.getUnidadesOrganizativas().subscribe(
+        data => this.unidadesOrganizativas = data,
+        error => console.error('Error fetching unidades organizativas', error)
+      );
     });
   }
 
   getIcon(type: string): string {
-    const iconMap: { [key: string]: string } = {
+    switch(type) {
-      'organizational-unit': 'apartment',
+      case 'organizational-unit':
-      'classroom-group': 'classrooms-group-icon',
+        return 'apartment';
-      'classroom': 'classroom-icon',
+      case 'classroom-group':
-      'client': 'client-icon',
+        return 'classrooms-group-icon';
-      'clients-group': 'clients-group-icon'
+      case 'classroom':
-    };
+        return 'classroom-icon';
-    return iconMap[type] || '';
+      case 'client':
+        return 'client-icon';
+      case 'clients-group':
+        return 'clients-group-icon';
+      default:
+        return '';
+    }
   }
 
-  onDeleteClick(uuid: string, name: string, type: string, event: MouseEvent): void {
+  onDeleteClick(uuid: string, name: string, type: string): void {
-    event.stopPropagation();
+    const dialogRef = this.dialog.open(DeleteModalComponent, {
-    this.dialog.open(DeleteModalComponent, { width: '250px', data: { name } }).afterClosed().subscribe(result => {
+      width: '250px',
+      data: { name }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
       if (result) {
         this.dataService.deleteElement(uuid, type).subscribe(
           () => {
             this.loadChildrenAndClients(this.selectedUnidad?.uuid || '');
-            this.fetchUnidadesOrganizativas();
+            
+            this.dataService.getUnidadesOrganizativas().subscribe(
+              data => this.unidadesOrganizativas = data,
+              error => console.error('Error fetching unidades organizativas', error)
+            );
+            
           },
           error => console.error('Error deleting element', error)
         );
@@ -109,11 +144,11 @@ export class GroupsComponent implements OnInit {
     });
   }
 
-  onEditClick(type: string, uuid: string, event: MouseEvent): void {
+  onEditClick(type: any, uuid: string): void {
-    event.stopPropagation();
+    if (type != "client") {
-    const dialogComponent = type === 'client' ? EditClientComponent : EditOrganizationalUnitComponent;
+      const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
-    this.dialog.open(dialogComponent as any);  // Usando type assertion aquí
+    } else {
+      const dialogRef = this.dialog.open(EditClientComponent);
+    }
   }
-
-  
 }