From 21078a8ab0e2ee1545013bc01712da52de9b59b2 Mon Sep 17 00:00:00 2001 From: apuente Date: Sun, 1 Dec 2024 23:03:01 +0100 Subject: [PATCH] Refactor groups component --- .../components/groups/groups.component.css | 13 +++ .../components/groups/groups.component.html | 95 +++++++++++++----- .../app/components/groups/groups.component.ts | 96 ++++++++++++++++++- ogWebconsole/src/locale/es.json | 5 +- 4 files changed, 179 insertions(+), 30 deletions(-) diff --git a/ogWebconsole/src/app/components/groups/groups.component.css b/ogWebconsole/src/app/components/groups/groups.component.css index 60fad89..811fba0 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.css +++ b/ogWebconsole/src/app/components/groups/groups.component.css @@ -593,3 +593,16 @@ button[mat-raised-button] { gap: 1rem; align-items: center; } + +.filters-container { + display: flex; + flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea si no caben */ + gap: 16px; /* Espaciado entre los elementos */ + margin: 16px 0; /* Separación con otros elementos */ + padding: 0 16px; /* Opcional, para añadir un poco de espacio interno */ +} + +.filters-container mat-form-field { + flex: 1 1 300px; /* Toma todo el ancho disponible hasta 300px por elemento */ + max-width: 300px; /* Limita el ancho máximo */ +} diff --git a/ogWebconsole/src/app/components/groups/groups.component.html b/ogWebconsole/src/app/components/groups/groups.component.html index b672684..308e714 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.html +++ b/ogWebconsole/src/app/components/groups/groups.component.html @@ -1,5 +1,5 @@ - - +
@@ -22,8 +22,52 @@ {{ 'legendButton' | translate }}
+ - + + + + + + + Filtros + + + + +
+ + + + {{ savedFilter[0] }} + + + + + + Buscar en el árbol + + + + + Filtrar por tipo + + Todos + Unidades Organizativas + Aulas + Clientes + Grupos + + + + + Buscar cliente + + +
+ + + @@ -44,10 +88,7 @@ - + - + -
+
@@ -112,12 +156,11 @@ {{ - node.type === 'organizational-unit' - ? 'apartment' - : node.type === 'classroom' - ? 'school' - : node.type === 'client' - ? 'computer' + node.type === 'organizational-unit' ? 'apartment' + : node.type === 'classrooms-group' ? 'meeting_room' + : node.type === 'classroom' ? 'school' + : node.type === 'clients-group' ? 'lan' + : node.type === 'client' ? 'computer' : 'group' }} @@ -139,15 +182,15 @@ 'pc-macos': node.type === 'client' && node.status === 'macos', 'pc-off': node.type === 'client' && node.status === 'off' }"> - {{ - node.type === 'organizational-unit' - ? 'apartment' - : node.type === 'classroom' - ? 'school' - : node.type === 'client' - ? 'computer' - : 'group' - }} + {{ + node.type === 'organizational-unit' ? 'apartment' + : node.type === 'classrooms-group' ? 'meeting_room' + : node.type === 'classroom' ? 'school' + : node.type === 'clients-group' ? 'lan' + : node.type === 'client' ? 'computer' + : 'group' + }} + {{ node.name }} @@ -331,7 +374,7 @@
- + \ No newline at end of file diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts index b9bf844..f0fa53b 100644 --- a/ogWebconsole/src/app/components/groups/groups.component.ts +++ b/ogWebconsole/src/app/components/groups/groups.component.ts @@ -64,8 +64,10 @@ export class GroupsComponent implements OnInit { commandsLoading: boolean = false; selectedClients: any[] = []; cols: number = 4; + selectedClientsOriginal: any[] = []; currentView: 'card' | 'list' = 'list'; - + isTreeViewActive: boolean = false; + savedFilterNames: any[] = []; @ViewChild('clientTab') clientTabComponent!: ClientTabViewComponent; @ViewChild('organizationalUnitTab') organizationalUnitTabComponent!: OrganizationalUnitTabViewComponent; @@ -121,6 +123,7 @@ export class GroupsComponent implements OnInit { this.selectedUnidad = null; this.selectedDetail = null; this.selectedClients = []; + this.isTreeViewActive = false; } onTabChange(event: MatTabChangeEvent): void { @@ -133,11 +136,30 @@ export class GroupsComponent implements OnInit { getFilters(): void { this.dataService.getFilters().subscribe( - data => {}, - error => console.error('Error fetching filters:', error) + data => { + this.savedFilterNames = data.map((filter: any) => [filter.name, filter.uuid]); + }, + error => { + console.error('Error fetching filters:', error); + } ); } + loadSelectedFilter(savedFilter: any) { + const url = `${this.baseUrl}/views/` + savedFilter[1]; + console.log('llamando a:', url); + + this.dataService.getFilter(savedFilter[1]).subscribe(response => { + console.log('Response from server:', response.filters); + if (response) { + console.log('Filter1:', response.filters); + } + }, error => { + console.error('Error:', error); + }); + } + + search(): void { this.loading = true; this.dataService.getOrganizationalUnits(this.searchTerm).subscribe( @@ -160,6 +182,7 @@ export class GroupsComponent implements OnInit { const treeData = this.convertToTreeData(fullData); this.treeDataSource.data = treeData[0]?.children || []; }); + this.isTreeViewActive = true; } async loadChildrenAndClients(id: string): Promise { @@ -204,6 +227,7 @@ export class GroupsComponent implements OnInit { const url = `${this.baseUrl}${node['@id']}`; this.http.get(url).subscribe( (data: any) => { + this.selectedClientsOriginal = [...data.clients]; this.selectedClients = data.clients || []; }, (error) => { @@ -212,13 +236,17 @@ export class GroupsComponent implements OnInit { ); } else { this.selectedClients = []; + this.selectedClientsOriginal = []; } } getNodeIcon(node: any): string { + console.log('Node:', node); switch (node.type) { case 'organizational-unit': return 'apartment'; + case 'classrooms-group': return 'doors'; case 'classroom': return 'school'; + case 'clients-group': return 'lan'; case 'client': return 'computer'; default: return 'group'; } @@ -436,5 +464,67 @@ export class GroupsComponent implements OnInit { hasChild = (_: number, node: FlatNode): boolean => node.expandable; isLeafNode = (_: number, node: FlatNode): boolean => !node.expandable; + + /* filtros */ + selectedTreeFilter: string = ''; + filterTree(searchTerm: string, filterType: string): void { + const filterNodes = (nodes: any[]): any[] => { + return nodes + .map(node => { + const matchesName = node.name.toLowerCase().includes(searchTerm.toLowerCase()); + const matchesType = filterType ? node.type.toLowerCase() === filterType.toLowerCase() : true; + + // Filtrar hijos recursivamente + const filteredChildren = node.children ? filterNodes(node.children) : []; + + // Si el nodo o algún hijo coincide, incluirlo + if (matchesName && matchesType || filteredChildren.length > 0) { + return { ...node, children: filteredChildren }; + } + return null; // Excluir nodos que no coinciden + }) + .filter(node => node !== null); // Eliminar nodos excluidos + }; + + // Aplicar filtro sobre el árbol completo + const filteredData = filterNodes(this.treeDataSource.data); + + // Actualizar el origen de datos del árbol + this.treeDataSource.data = filteredData; + } + + onTreeFilterInput(event: Event): void { + const input = event.target as HTMLInputElement; + const searchTerm = input?.value || ''; // Maneja el caso de nulo o indefinido + this.filterTree(searchTerm, this.selectedTreeFilter); + } + + onClientFilterInput(event: Event): void { + const input = event.target as HTMLInputElement; + const searchTerm = input?.value || ''; // Maneja valores nulos o indefinidos + this.filterClients(searchTerm); + } + + + filterClients(searchTerm: string): void { + if (!searchTerm) { + // Restaurar los datos originales si no hay filtro + this.selectedClients = [...this.selectedClientsOriginal]; + return; + } + + const lowerTerm = searchTerm.toLowerCase(); + + this.selectedClients = this.selectedClientsOriginal.filter(client => { + const matchesName = client.name.toLowerCase().includes(lowerTerm); + const matchesIP = client.ip?.toLowerCase().includes(lowerTerm) || false; + const matchesStatus = client.status?.toLowerCase().includes(lowerTerm) || false; + const matchesMac = client.mac?.toLowerCase().includes(lowerTerm) || false; + + return matchesName || matchesIP || matchesStatus || matchesMac; + }); + } + + } diff --git a/ogWebconsole/src/locale/es.json b/ogWebconsole/src/locale/es.json index fe202b0..b13e8b4 100644 --- a/ogWebconsole/src/locale/es.json +++ b/ogWebconsole/src/locale/es.json @@ -421,5 +421,8 @@ "TOOLTIP_MENUS": "Gestión de menús (opción deshabilitada)", "search": "Buscar", "TOOLTIP_SEARCH": "Función de búsqueda (opción deshabilitada)", - "detailsOf": "Detalles de" + "detailsOf": "Detalles de", + "editUnitMenu": "Editar", + "addInternalUnitMenu": "Añadir", + "addClientMenu": "Añadir cliente" }