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() { onSubmit() {
console.log('Form data:', this.clientForm.value);
if (this.clientForm.valid) { if (this.clientForm.valid) {
const formData = this.clientForm.value; const formData = this.clientForm.value;
this.http.post('http://127.0.0.1:8080/clients', formData).subscribe( this.http.post('http://127.0.0.1:8080/clients', formData).subscribe(
response => { response => {
console.log('Response from POST:', response);
this.dialogRef.close(response); this.dialogRef.close(response);
}, },
error => { 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( return this.http.get<any>(this.clientsUrl).pipe(
map(response => { map(response => {
if (response['hydra:member'] && Array.isArray(response['hydra:member'])) { 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}`); return response['hydra:member'].filter((client: any) => client.organizationalUnit && client.organizationalUnit['@id'] === `/organizational-units/${uuid}`);
} else { } else {
throw new Error('Unexpected response format'); throw new Error('Unexpected response format');

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

@ -7,7 +7,8 @@ mat-card {
margin: 10px; margin: 10px;
} }
.elements-card { .elements-card{
margin: 10px;
width: 800px; width: 800px;
background-color: #fafafa; background-color: #fafafa;
} }
@ -44,8 +45,3 @@ button {
color: #212121; 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-card-content>
<mat-list role="list"> <mat-list role="list">
<mat-list-item *ngFor="let unidad of unidadesOrganizativas" <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> <mat-icon>apartment</mat-icon>
<span class="element-name">{{ unidad.nombre }}</span> {{ unidad.nombre }}
</span>
<span class="actions"> <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> </span>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
@ -28,28 +29,39 @@
<mat-card-subtitle>{{ breadcrumb.join(' > ') }}</mat-card-subtitle> <mat-card-subtitle>{{ breadcrumb.join(' > ') }}</mat-card-subtitle>
<mat-card-content> <mat-card-content>
<mat-list role="list"> <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>
<ng-container [ngSwitch]="getIcon(child.type)"> <span (click)="onSelectChild(child)">
<mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon> <ng-container [ngSwitch]="getIcon(child.type)">
<svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"> <mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
<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 *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
</svg> viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<svg *ngSwitchCase="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"> <path
<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" /> 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>
<svg *ngSwitchCase="'client-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="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">
</svg> <path
<svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"> 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" />
<path d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" /> </svg>
</svg> <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
</ng-container> viewBox="0 -960 960 960" width="24px" fill="#5f6368">
<span class="element-name">{{ child.name || child.nombre }}</span> <path
<span class="actions"> 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" />
<mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid, $event)">edit</mat-icon> </svg>
<mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid, child.name || child.nombre, child.type, $event)">delete</mat-icon> <svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px"
</span> 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-item>
</mat-list> </mat-list>
</mat-card-content> </mat-card-content>
@ -62,6 +74,7 @@
<p><strong>Tipo:</strong> {{ selectedDetail.type }}</p> <p><strong>Tipo:</strong> {{ selectedDetail.type }}</p>
<p><strong>ID:</strong> {{ selectedDetail.id }}</p> <p><strong>ID:</strong> {{ selectedDetail.id }}</p>
<p *ngIf="selectedDetail.uuid"><strong>UUID:</strong> {{ selectedDetail.uuid }}</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>
<mat-card-content *ngIf="!selectedDetail"> <mat-card-content *ngIf="!selectedDetail">
<p>Selecciona un elemento para ver sus detalles.</p> <p>Selecciona un elemento para ver sus detalles.</p>
@ -69,6 +82,4 @@
</mat-card> </mat-card>
</div> </div>
<app-classroom-view [clients]="clientsData" [pcInTable] = "2"></app-classroom-view>
<app-classroom-view
></app-classroom-view>

105
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 { export class GroupsComponent implements OnInit {
unidadesOrganizativas: UnidadOrganizativa[] = []; unidadesOrganizativas: UnidadOrganizativa[] = [];
selectedUnidad: UnidadOrganizativa | null = null; selectedUnidad: UnidadOrganizativa | null = null;
selectedDetail: any | null = null; selectedDetail: any | null = null; // Nueva variable para el detalle del elemento seleccionado
children: any[] = []; children: any[] = [];
breadcrumb: string[] = []; breadcrumb: string[] = [];
clientsData: any[] = []; // Nueva variable para almacenar los datos de clients
constructor(private dataService: DataService, public dialog: MatDialog) {} constructor(private dataService: DataService, public dialog: MatDialog) {}
ngOnInit(): void { ngOnInit(): void {
this.fetchUnidadesOrganizativas();
}
fetchUnidadesOrganizativas(): void {
this.dataService.getUnidadesOrganizativas().subscribe( this.dataService.getUnidadesOrganizativas().subscribe(
data => this.unidadesOrganizativas = data, data => this.unidadesOrganizativas = data,
error => console.error('Error fetching unidades organizativas', error) error => console.error('Error fetching unidades organizativas', error)
@ -35,14 +32,14 @@ export class GroupsComponent implements OnInit {
onSelectUnidad(unidad: UnidadOrganizativa): void { onSelectUnidad(unidad: UnidadOrganizativa): void {
this.selectedUnidad = unidad; this.selectedUnidad = unidad;
this.selectedDetail = unidad; this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada
this.breadcrumb = [unidad.nombre]; this.breadcrumb = [unidad.nombre];
this.loadChildrenAndClients(unidad.uuid); this.loadChildrenAndClients(unidad.uuid);
} }
onSelectChild(child: any): void { 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.breadcrumb.push(child.name || child.nombre);
this.loadChildrenAndClients(child.uuid); this.loadChildrenAndClients(child.uuid);
} }
@ -53,55 +50,93 @@ export class GroupsComponent implements OnInit {
childrenData => { childrenData => {
this.dataService.getClients(uuid).subscribe( this.dataService.getClients(uuid).subscribe(
clientsData => { 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 => { error => {
console.error('Error fetching clients', 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 => { error => {
console.error('Error fetching children', error); console.error('Error fetching children', error);
this.children = []; this.children = []; // Limpiar card2 en caso de error
} }
); );
} }
addOU(): void { 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 { 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 { 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) { if (result) {
this.dataService.deleteElement(uuid, type).subscribe( this.dataService.deleteElement(uuid, type).subscribe(
() => { () => {
this.loadChildrenAndClients(this.selectedUnidad?.uuid || ''); 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) 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);
}
} }
} }