opengnsys
/
oggui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Visualización de aulas y clientes

pull/4/head
Alvaro Puente Mella 2024-07-03 23:48:51 +02:00
parent ea9ec9087b
commit 59d91b99b6
5 changed files with 119 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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 => {

1
ogWebconsole/src/app/components/groups/data.service.ts
View File

@ -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');

16
ogWebconsole/src/app/components/groups/groups.component.css
View File

@ -7,7 +7,8 @@ mat-card {
margin: 10px;
}
.elements-card {
.elements-card{
margin: 10px;
width: 800px;
background-color: #fafafa;
}
@ -31,21 +32,16 @@ button {
}
.actions {
margin-left: auto;
margin-left: auto;
}
.actions mat-icon {
cursor: pointer;
margin-left: 48px;
color: #757575;
cursor: pointer;
margin-left: 48px;
color: #757575;
}
.actions mat-icon:hover {
color: #212121;
}
.element-name{
position: relative;
top: -5px;
margin-left: 3px;
}

71
ogWebconsole/src/app/components/groups/groups.component.html
View File

@ -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}"
(click)="onSelectUnidad(unidad)">
<mat-icon>apartment</mat-icon>
<span class="element-name">{{ unidad.nombre }}</span>
[ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}">
<span (click)="onSelectUnidad(unidad)">
<mat-icon>apartment</mat-icon>
{{ 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}"
(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">
<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">
<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">
<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">
<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>
<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>
<mat-list-item *ngFor="let child of children" [ngClass]="{'clickable-item': true}">
<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">
<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">
<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">
<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">
<path
d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
</svg>
</ng-container>
{{ child.name || child.nombre }}
</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
></app-classroom-view>
<app-classroom-view [clients]="clientsData" [pcInTable] = "2"></app-classroom-view>

109
ogWebconsole/src/app/components/groups/groups.component.ts
View File

@ -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;
if (child.type !== 'client' && child.uuid) {
this.selectedDetail = child; // Mostrar detalles del niño seleccionado
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];
if (this.children.length === 0) {
this.breadcrumb.pop();
this.clientsData = clientsData; // Almacenar clientsData para pasarlo al componente hijo
const newChildren = [...childrenData, ...clientsData];
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(() => {
this.fetchUnidadesOrganizativas();
const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
// 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(() => {
this.fetchUnidadesOrganizativas();
const dialogRef = this.dialog.open(CreateClientComponent);
// 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 } = {
'organizational-unit': 'apartment',
'classroom-group': 'classrooms-group-icon',
'classroom': 'classroom-icon',
'client': 'client-icon',
'clients-group': 'clients-group-icon'
};
return iconMap[type] || '';
switch(type) {
case 'organizational-unit':
return 'apartment';
case 'classroom-group':
return 'classrooms-group-icon';
case 'classroom':
return 'classroom-icon';
case 'client':
return 'client-icon';
case 'clients-group':
return 'clients-group-icon';
default:
return '';
}
}
onDeleteClick(uuid: string, name: string, type: string, event: MouseEvent): void {
event.stopPropagation();
this.dialog.open(DeleteModalComponent, { width: '250px', data: { name } }).afterClosed().subscribe(result => {
onDeleteClick(uuid: string, name: string, type: string): void {
const dialogRef = this.dialog.open(DeleteModalComponent, {
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 {
event.stopPropagation();
const dialogComponent = type === 'client' ? EditClientComponent : EditOrganizationalUnitComponent;
this.dialog.open(dialogComponent as any); // Usando type assertion aquí
onEditClick(type: any, uuid: string): void {
if (type != "client") {
const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
} else {
const dialogRef = this.dialog.open(EditClientComponent);
}
}
}
}