Nuevo layout para las cards

pull/4/head
Alvaro Puente Mella 2024-06-25 14:55:41 +02:00
parent d64a55ba0d
commit eea8cf6db2
2 changed files with 25 additions and 11 deletions

View File

@ -24,9 +24,10 @@
</mat-list>
</mat-card-content>
</mat-card>
<mat-card class="elements-card" *ngIf="children.length > 0">
<mat-card-title>{{ breadcrumb.join(' > ') }}</mat-card-title>
<mat-card class="elements-card">
<mat-card-title>Elementos</mat-card-title>
<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}">
@ -67,4 +68,17 @@
</mat-card-content>
</mat-card>
</div>
<mat-card class="details-card">
<mat-card-title>Detalles del elemento</mat-card-title>
<mat-card-content *ngIf="selectedDetail">
<p><strong>Nombre:</strong> {{ selectedDetail.name || selectedDetail.nombre }}</p>
<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>
</mat-card-content>
</mat-card>
</div>

View File

@ -16,6 +16,7 @@ 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
children: any[] = [];
breadcrumb: string[] = [];
@ -30,12 +31,14 @@ export class GroupsComponent implements OnInit {
onSelectUnidad(unidad: UnidadOrganizativa): void {
this.selectedUnidad = unidad;
this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada
this.breadcrumb = [unidad.nombre];
this.loadChildrenAndClients(unidad.uuid);
}
onSelectChild(child: any): void {
if (child.uuid && child.id) {
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);
}
@ -72,6 +75,7 @@ export class GroupsComponent implements OnInit {
}
);
}
addOU(): void {
const dialogRef = this.dialog.open(CreateOrganizationalUnitComponent);
@ -143,14 +147,10 @@ export class GroupsComponent implements OnInit {
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, {
data: { type, uuid }
});
const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
} else {
console.log('Editar cliente');
const dialogRef = this.dialog.open(EditClientComponent, {
data: { type, uuid }
});
const dialogRef = this.dialog.open(EditClientComponent);
}
}
}