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

UO icon css

pull/4/head
Alvaro Puente Mella 2024-07-02 10:34:40 +02:00
parent 6dec7c7f2c
commit d188f8e590
3 changed files with 71 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -11,13 +11,12 @@
<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}"
<span (click)="onSelectUnidad(unidad)"> (click)="onSelectUnidad(unidad)">
<mat-icon>apartment</mat-icon> <mat-icon>apartment</mat-icon>
{{ unidad.nombre }} <span class="element-name">{{ unidad.nombre }}</span>
</span>
<span class="actions"> <span class="actions">
<mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid)">edit</mat-icon> <mat-icon class="edit-icon" (click)="onEditClick(unidad.type, unidad.uuid, $event)">edit</mat-icon>
</span> </span>
</mat-list-item> </mat-list-item>
</mat-list> </mat-list>
@ -29,39 +28,28 @@
<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}"
<div> (click)="onSelectChild(child)">
<span (click)="onSelectChild(child)"> <ng-container [ngSwitch]="getIcon(child.type)">
<ng-container [ngSwitch]="getIcon(child.type)"> <mat-icon *ngSwitchCase="'apartment'">apartment</mat-icon>
<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">
<svg *ngSwitchCase="'classrooms-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" <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" />
viewBox="0 -960 960 960" width="24px" fill="#5f6368"> </svg>
<path <svg *ngSwitchCase="'classroom-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-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="'classroom-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" <svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
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" />
<path </svg>
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="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
</svg> <path d="M120-80v-280h120v-160h200v-80H320v-280h320v280H520v80h200v160h120v280H520v-280h120v-80H320v80h120v280H120Zm280-600h160v-120H400v120ZM200-160h160v-120H200v120Zm400 0h160v-120H600v120ZM480-680ZM360-280Zm240 0Z" />
<svg *ngSwitchCase="'client-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" </svg>
viewBox="0 -960 960 960" width="24px" fill="#5f6368"> </ng-container>
<path <span class="element-name">{{ child.name || child.nombre }}</span>
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" /> <span class="actions">
</svg> <mat-icon class="edit-icon" (click)="onEditClick(child.type, child.uuid, $event)">edit</mat-icon>
<svg *ngSwitchCase="'clients-group-icon'" xmlns="http://www.w3.org/2000/svg" height="24px" <mat-icon class="delete-icon" (click)="onDeleteClick(child.uuid, child.name || child.nombre, child.type, $event)">delete</mat-icon>
viewBox="0 -960 960 960" width="24px" fill="#5f6368"> </span>
<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>
@ -74,7 +62,6 @@
<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>

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

@ -16,13 +16,17 @@ 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; // Nueva variable para el detalle del elemento seleccionado selectedDetail: any | null = null;
children: any[] = []; children: any[] = [];
breadcrumb: string[] = []; breadcrumb: string[] = [];
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)
@ -31,14 +35,14 @@ export class GroupsComponent implements OnInit {
onSelectUnidad(unidad: UnidadOrganizativa): void { onSelectUnidad(unidad: UnidadOrganizativa): void {
this.selectedUnidad = unidad; this.selectedUnidad = unidad;
this.selectedDetail = unidad; // Mostrar detalles de la unidad seleccionada this.selectedDetail = unidad;
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; // Mostrar detalles del niño seleccionado this.selectedDetail = child;
if (child.type !== 'client' && child.uuid && child.id) { if (child.type !== 'client' && child.uuid) {
this.breadcrumb.push(child.name || child.nombre); this.breadcrumb.push(child.name || child.nombre);
this.loadChildrenAndClients(child.uuid); this.loadChildrenAndClients(child.uuid);
} }
@ -47,95 +51,57 @@ export class GroupsComponent implements OnInit {
loadChildrenAndClients(uuid: string): void { loadChildrenAndClients(uuid: string): void {
this.dataService.getChildren(uuid).subscribe( this.dataService.getChildren(uuid).subscribe(
childrenData => { childrenData => {
console.log('Children data:', childrenData);
this.dataService.getClients(uuid).subscribe( this.dataService.getClients(uuid).subscribe(
clientsData => { clientsData => {
console.log('Clients data:', clientsData); this.children = [...childrenData, ...clientsData];
const newChildren = [...childrenData, ...clientsData]; if (this.children.length === 0) {
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 = []; // Limpiar card2 en caso de error this.children = [];
} }
); );
}, },
error => { error => {
console.error('Error fetching 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 addOU(): void {
dialogRef.afterClosed().subscribe(() => { this.dialog.open(CreateOrganizationalUnitComponent).afterClosed().subscribe(() => {
// Aquí puedes actualizar las cards o hacer cualquier otra acción necesaria después de añadir una unidad organizativa this.fetchUnidadesOrganizativas();
this.dataService.getUnidadesOrganizativas().subscribe(
data => this.unidadesOrganizativas = data,
error => console.error('Error fetching unidades organizativas', error)
);
}); });
} }
addClient(): void { addClient(): void {
const dialogRef = this.dialog.open(CreateClientComponent); this.dialog.open(CreateClientComponent).afterClosed().subscribe(() => {
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 {
switch(type) { const iconMap: { [key: string]: string } = {
case 'organizational-unit': 'organizational-unit': 'apartment',
return 'apartment'; 'classroom-group': 'classrooms-group-icon',
case 'classroom-group': 'classroom': 'classroom-icon',
return 'classrooms-group-icon'; 'client': 'client-icon',
case 'classroom': 'clients-group': 'clients-group-icon'
return 'classroom-icon'; };
case 'client': return iconMap[type] || '';
return 'client-icon';
case 'clients-group':
return 'clients-group-icon';
default:
return '';
}
} }
onDeleteClick(uuid: string, name: string, type: string): void { onDeleteClick(uuid: string, name: string, type: string, event: MouseEvent): void {
const dialogRef = this.dialog.open(DeleteModalComponent, { event.stopPropagation();
width: '250px', this.dialog.open(DeleteModalComponent, { width: '250px', data: { name } }).afterClosed().subscribe(result => {
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)
); );
@ -143,14 +109,9 @@ export class GroupsComponent implements OnInit {
}); });
} }
onEditClick(type: any, uuid: string): void { onEditClick(type: string, uuid: string, event: MouseEvent): void {
console.log('Tipo del elemento a editar:', type); event.stopPropagation();
console.log('UUID del elemento a editar:', uuid); const dialogComponent = type === 'client' ? EditClientComponent : EditOrganizationalUnitComponent;
if (type != "client") { this.dialog.open(dialogComponent as any); // Usando type assertion aquí
const dialogRef = this.dialog.open(EditOrganizationalUnitComponent);
} else {
console.log('Editar cliente');
const dialogRef = this.dialog.open(EditClientComponent);
}
} }
} }