From d188f8e5909bfdbfe5c422d7e30fff9ef85cfa30 Mon Sep 17 00:00:00 2001 From: apuente Date: Tue, 2 Jul 2024 10:34:40 +0200 Subject: [PATCH] UO icon css --- .../components/groups/groups.component.css | 17 +-- .../components/groups/groups.component.html | 67 +++++------ .../app/components/groups/groups.component.ts | 107 ++++++------------ 3 files changed, 71 insertions(+), 120 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index eb6ceca..4f49ead 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -7,11 +7,9 @@ mat-card { margin: 10px; } -.elements-card{ - margin: 10px; +.elements-card { width: 800px; background-color: #fafafa; - } .groups-button-row { @@ -33,16 +31,21 @@ 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; +} \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index f9c7cdd..7edc5cd 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -11,13 +11,12 @@ - - apartment - {{ unidad.nombre }} - + [ngClass]="{'selected-item': unidad === selectedUnidad, 'clickable-item': true}" + (click)="onSelectUnidad(unidad)"> + apartment + {{ unidad.nombre }} - edit + edit @@ -29,39 +28,28 @@ {{ breadcrumb.join(' > ') }} - -
- - - apartment - - - - - - - - - - - - - - {{ child.name || child.nombre }} - - - edit - delete - -
+ + + apartment + + + + + + + + + + + + + + {{ child.name || child.nombre }} + + edit + delete + @@ -74,7 +62,6 @@

Tipo: {{ selectedDetail.type }}

ID: {{ selectedDetail.id }}

UUID: {{ selectedDetail.uuid }}

-

Selecciona un elemento para ver sus detalles.

diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index 1e249c5..163b45e 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -16,13 +16,17 @@ import { EditClientComponent } from './clients/edit-client/edit-client.component export class GroupsComponent implements OnInit { unidadesOrganizativas: UnidadOrganizativa[] = []; selectedUnidad: UnidadOrganizativa | null = null; - selectedDetail: any | null = null; // Nueva variable para el detalle del elemento seleccionado + selectedDetail: any | null = null; children: any[] = []; breadcrumb: string[] = []; 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) @@ -31,14 +35,14 @@ export class GroupsComponent implements OnInit { onSelectUnidad(unidad: UnidadOrganizativa): void { this.selectedUnidad = unidad; - this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada + this.selectedDetail = unidad; this.breadcrumb = [unidad.nombre]; this.loadChildrenAndClients(unidad.uuid); } onSelectChild(child: any): void { - this.selectedDetail = child; // Mostrar detalles del niño seleccionado - if (child.type !== 'client' && child.uuid && child.id) { + this.selectedDetail = child; + if (child.type !== 'client' && child.uuid) { this.breadcrumb.push(child.name || child.nombre); this.loadChildrenAndClients(child.uuid); } @@ -47,95 +51,57 @@ export class GroupsComponent implements OnInit { loadChildrenAndClients(uuid: string): void { this.dataService.getChildren(uuid).subscribe( childrenData => { - console.log('Children data:', childrenData); this.dataService.getClients(uuid).subscribe( clientsData => { - console.log('Clients data:', clientsData); - 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; + this.children = [...childrenData, ...clientsData]; + if (this.children.length === 0) { + this.breadcrumb.pop(); } }, error => { console.error('Error fetching clients', error); - this.children = []; // Limpiar card2 en caso de error + this.children = []; } ); }, error => { console.error('Error fetching children', error); - this.children = []; // Limpiar card2 en caso de error + this.children = []; } ); } - - addOU(): void { - 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) - ); + addOU(): void { + this.dialog.open(CreateOrganizationalUnitComponent).afterClosed().subscribe(() => { + this.fetchUnidadesOrganizativas(); }); } addClient(): void { - 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) - ); + this.dialog.open(CreateClientComponent).afterClosed().subscribe(() => { + this.fetchUnidadesOrganizativas(); }); } getIcon(type: string): string { - 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 ''; - } + 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] || ''; } - onDeleteClick(uuid: string, name: string, type: string): void { - const dialogRef = this.dialog.open(DeleteModalComponent, { - width: '250px', - data: { name } - }); - - dialogRef.afterClosed().subscribe(result => { + onDeleteClick(uuid: string, name: string, type: string, event: MouseEvent): void { + event.stopPropagation(); + this.dialog.open(DeleteModalComponent, { width: '250px', data: { name } }).afterClosed().subscribe(result => { if (result) { this.dataService.deleteElement(uuid, type).subscribe( () => { this.loadChildrenAndClients(this.selectedUnidad?.uuid || ''); - - this.dataService.getUnidadesOrganizativas().subscribe( - data => this.unidadesOrganizativas = data, - error => console.error('Error fetching unidades organizativas', error) - ); - + this.fetchUnidadesOrganizativas(); }, error => console.error('Error deleting element', error) ); @@ -143,14 +109,9 @@ export class GroupsComponent implements OnInit { }); } - onEditClick(type: any, uuid: string): void { - console.log('Tipo del elemento a editar:', type); - console.log('UUID del elemento a editar:', uuid); - if (type != "client") { - const dialogRef = this.dialog.open(EditOrganizationalUnitComponent); - } else { - console.log('Editar cliente'); - const dialogRef = this.dialog.open(EditClientComponent); - } + 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í } }