Clasroom view in dialog component

ogWebconsole/src/app/app.module.ts

@@ -67,6 +67,7 @@ import {
   MatTreeNodeToggle
 } from "@angular/material/tree";
 import { LegendComponent } from './components/groups/legend/legend.component';
+import { ClassroomViewDialogComponent } from './components/groups/classroom-view/classroom-view-modal';
 
 @NgModule({
   declarations: [
@@ -97,7 +98,8 @@ import { LegendComponent } from './components/groups/legend/legend.component';
     DeleteGroupsModalComponent,
     ShowOrganizationalUnitComponent,
     TreeViewComponent,
-    LegendComponent
+    LegendComponent,
+    ClassroomViewDialogComponent
   ],
   bootstrap: [AppComponent],
   imports: [BrowserModule,

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.css

@@ -2,8 +2,7 @@
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
-  min-height: 43vh;
-  height: 1000px;
+  height: 90%;
   border: 3px solid black;
 }
 
@@ -132,3 +131,7 @@ mat-chip {
   justify-content: center;
   margin-bottom: 25px;
 }
+
+button{
+  margin-bottom: 10px;
+}

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.html

@@ -1,7 +1,7 @@
 <button mat-flat-button color="primary" (click)="saveDisposition()">Guardar disposición</button>
 <div class="classroom">
   <mat-card *ngFor="let group of groupedClients" class="classroom-group">
-    <mat-card-title>Clientes dentro de: {{ group.organizationalUnitName }}</mat-card-title>
+    <mat-card-title>{{ group.organizationalUnitName }}</mat-card-title>
     <div class="misc-clients">
       <div class="classroom-board" cdkDrag cdkDragBoundary=".classroom">Pizarra digital</div>
       <img mat-card-image src="assets/images/proyector.png" alt="Proyector" class="proyector-image" cdkDrag cdkDragBoundary=".classroom"/>

ogWebconsole/src/app/components/groups/classroom-view/classroom-view.component.ts

@@ -21,6 +21,7 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
 
   constructor(public dialog: MatDialog, private http: HttpClient) {}
   
+
   ngOnInit(): void {
     this.groupClientsByOrganizationalUnit();
     this.initializeClientPositions();
@@ -52,13 +53,14 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
     this.groupedClients.forEach(group => {
       group.clientRows.forEach(row => {
         row.forEach(client => {
-          const position = client.position; // Ya es un objeto, no necesita JSON.parse
+          const position = client.position || { x: 0, y: 0 };
           client.dragPosition = { x: position.x, y: position.y };
         });
       });
     });
   }
   
+
   chunkArray(arr: any[], chunkSize: number): any[][] {
     const chunks = [];
     for (let i = 0; i < arr.length; i += chunkSize) {
@@ -75,10 +77,6 @@ export class ClassroomViewComponent implements OnInit, OnChanges {
     const dragPosition = event.source.getFreeDragPosition()
     client.position.x = dragPosition.x;
     client.position.y = dragPosition.y;
-    console.log("el drag", event.source.getFreeDragPosition().x)
-    /* console.log('Elemento movido:', event.source.element.nativeElement);
-    console.log('Posición actual:', event.pointerPosition);
-    console.log('Posición relativa:', dragPosition); */
   }
 
   saveDisposition(): void {

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

@@ -3,6 +3,7 @@
   <div class="groups-button-row">
     <button mat-flat-button color="primary" (click)="addOU($event)">Nueva Unidad Organizativa</button>
     <button mat-flat-button color="primary" (click)="addClient($event)">Nuevo Cliente</button>
+    <button mat-flat-button color="primary" (click)="roomMap()" *ngIf="selectedDetail && selectedDetail.type === 'classroom'">Plano de aula</button>
     <button mat-raised-button (click)="openBottomSheet()">Leyenda</button>
   </div>
 </div>
@@ -142,5 +143,5 @@
     </mat-card-content>
   </mat-card>
 
-  <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view>
+  <!-- <app-classroom-view class="card classroom-view" [clients]="clientsData" [pcInTable]="5"></app-classroom-view> -->
 </div>

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

@@ -13,6 +13,8 @@ import {ToastrService} from "ngx-toastr";
 import {TreeViewComponent} from "./tree-view/tree-view.component";
 import {MatBottomSheet} from "@angular/material/bottom-sheet";
 import {LegendComponent} from "./legend/legend.component";
+import { ClassroomViewComponent } from './classroom-view/classroom-view.component';
+import { ClassroomViewDialogComponent } from './classroom-view/classroom-view-modal';
 
 @Component({
   selector: 'app-groups',
@@ -251,4 +253,18 @@ constructor(
   openBottomSheet(): void {
     this._bottomSheet.open(LegendComponent);
   }
+
+  roomMap(): void {
+    if (this.selectedDetail && this.selectedDetail.type === 'classroom') {
+      const dialogRef = this.dialog.open(ClassroomViewDialogComponent, {
+        width: '90vw',
+        height: '90vh',
+        data: { clients: this.clientsData }
+      });
+
+      dialogRef.afterClosed().subscribe(result => {
+        console.log('The dialog was closed');
+      });
+    }
+  }
 }