111 lines
3.4 KiB
TypeScript
111 lines
3.4 KiB
TypeScript
import { Component, Input, OnInit, OnChanges } from '@angular/core';
|
|
import { MatDialog } from '@angular/material/dialog';
|
|
import { ClientViewComponent } from "../client-view/client-view.component";
|
|
import { CdkDragMove } from '@angular/cdk/drag-drop';
|
|
import { HttpClient } from '@angular/common/http';
|
|
import { ToastrService } from 'ngx-toastr';
|
|
import { ConfigService } from '@services/config.service';
|
|
|
|
interface GroupedClients {
|
|
organizationalUnitName: string;
|
|
clientRows: any[][];
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-classroom-view',
|
|
templateUrl: './classroom-view.component.html',
|
|
styleUrls: ['./classroom-view.component.css']
|
|
})
|
|
export class ClassroomViewComponent implements OnInit, OnChanges {
|
|
baseUrl: string;
|
|
@Input() clients: any[] = [];
|
|
@Input() pcInTable: number = 5;
|
|
groupedClients: GroupedClients[] = [];
|
|
|
|
constructor(public dialog: MatDialog, private http: HttpClient, private toastService: ToastrService, private configService: ConfigService) {
|
|
this.baseUrl = this.configService.apiUrl;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.groupClientsByOrganizationalUnit();
|
|
this.initializeClientPositions();
|
|
}
|
|
|
|
ngOnChanges(): void {
|
|
this.groupClientsByOrganizationalUnit();
|
|
this.initializeClientPositions();
|
|
}
|
|
|
|
groupClientsByOrganizationalUnit(): void {
|
|
const grouped = this.clients.reduce((acc, client) => {
|
|
const ouName = 'text';
|
|
if (!acc[ouName]) {
|
|
acc[ouName] = [];
|
|
}
|
|
acc[ouName].push(client);
|
|
return acc;
|
|
}, {});
|
|
|
|
this.groupedClients = Object.keys(grouped).map(ouName => ({
|
|
organizationalUnitName: ouName,
|
|
clientRows: this.chunkArray(grouped[ouName], this.pcInTable)
|
|
}));
|
|
}
|
|
|
|
initializeClientPositions(): void {
|
|
this.groupedClients.forEach(group => {
|
|
group.clientRows.forEach(row => {
|
|
row.forEach(client => {
|
|
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) {
|
|
chunks.push(arr.slice(i, i + chunkSize));
|
|
}
|
|
return chunks;
|
|
}
|
|
|
|
handleClientClick(client: any): void {
|
|
console.log('Client clicked:', client);
|
|
this.dialog.open(ClientViewComponent, { data: { client }, width: '800px', height: '700px' });
|
|
}
|
|
|
|
onDragMoved(event: CdkDragMove<any>, client: any): void {
|
|
const dragPosition = event.source.getFreeDragPosition()
|
|
client.position.x = dragPosition.x;
|
|
client.position.y = dragPosition.y;
|
|
}
|
|
|
|
saveDisposition(): void {
|
|
this.groupedClients.forEach(group => {
|
|
group.clientRows.forEach(row => {
|
|
row.forEach(client => {
|
|
const url = `${this.baseUrl}/clients/${client.uuid}`;
|
|
const payload = {
|
|
name: client.name,
|
|
position: client.position
|
|
};
|
|
this.http.patch(url, payload).subscribe(response => {
|
|
this.openSnackBar(false, 'Plano actualizado!');
|
|
}, error => {
|
|
console.error('Error al actualizar cliente:', error);
|
|
this.openSnackBar(true, error);
|
|
});
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
openSnackBar(isError: boolean, message: string) {
|
|
if (isError) {
|
|
this.toastService.error(' Error al actualizar cliente: ' + message, 'Error');
|
|
} else
|
|
this.toastService.success('Cliente actualizado!', 'Éxito');
|
|
}
|
|
} |