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

refs #1641. Implement debounced client filtering in groups component
testing/ogGui-multibranch/pipeline/head This commit looks good Details

pull/13/head
Lucas Lara García 2025-03-05 15:45:23 +01:00
parent 5907404f77
commit c568d5a8e7
1 changed files with 19 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import {HttpClient, HttpParams} from '@angular/common/http'; import { HttpClient, HttpParams } from '@angular/common/http';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog'; import { MatDialog } from '@angular/material/dialog';
import { MatBottomSheet } from '@angular/material/bottom-sheet'; import { MatBottomSheet } from '@angular/material/bottom-sheet';
@ -21,6 +21,8 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component"; import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component";
import { SelectionModel } from "@angular/cdk/collections"; import { SelectionModel } from "@angular/cdk/collections";
import { ManageClientComponent } from "./shared/clients/manage-client/manage-client.component"; import { ManageClientComponent } from "./shared/clients/manage-client/manage-client.component";
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
enum NodeType { enum NodeType {
OrganizationalUnit = 'organizational-unit', OrganizationalUnit = 'organizational-unit',
@ -65,17 +67,18 @@ export class GroupsComponent implements OnInit, OnDestroy {
private originalTreeData: TreeNode[] = []; private originalTreeData: TreeNode[] = [];
arrayClients: any[] = []; arrayClients: any[] = [];
filters: { [key: string]: string } = {}; filters: { [key: string]: string } = {};
private clientFilterSubject = new Subject<string>();
protected status = [ protected status = [
{value: 'off', name: 'Apagado'}, { value: 'off', name: 'Apagado' },
{value: 'initializing', name: 'Inicializando'}, { value: 'initializing', name: 'Inicializando' },
{value: 'og-live', name: 'Og Live'}, { value: 'og-live', name: 'Og Live' },
{value: 'linux', name: 'Linux'}, { value: 'linux', name: 'Linux' },
{value: 'linux-session', name: 'Linux Session'}, { value: 'linux-session', name: 'Linux Session' },
{value: 'windows', name: 'Windows'}, { value: 'windows', name: 'Windows' },
{value: 'windows-session', name: 'Windows Session'}, { value: 'windows-session', name: 'Windows Session' },
{value: 'busy', name: 'Ocupado'}, { value: 'busy', name: 'Ocupado' },
{value: 'mac', name: 'Mac'}, { value: 'mac', name: 'Mac' },
]; ];
displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions']; displayedColumns: string[] = ['select', 'status', 'ip', 'name', 'oglive', 'subnet', 'pxeTemplate', 'actions'];
@ -144,6 +147,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
this.updateClientStatus(data['@id'], data.status); this.updateClientStatus(data['@id'], data.status);
} }
} }
this.clientFilterSubject.pipe(debounceTime(500)).subscribe(searchTerm => {
this.filters['query'] = searchTerm;
this.filterClients(searchTerm);
});
} }
private updateClientStatus(clientUuid: string, newStatus: string): void { private updateClientStatus(clientUuid: string, newStatus: string): void {
@ -638,8 +646,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
onClientFilterInput(event: Event): void { onClientFilterInput(event: Event): void {
const input = event.target as HTMLInputElement; const input = event.target as HTMLInputElement;
const searchTerm = input?.value || ''; const searchTerm = input?.value || '';
this.filters['query'] = searchTerm; this.clientFilterSubject.next(searchTerm);
this.filterClients(searchTerm);
} }
onClientFilterStatusInput(event: Event): void { onClientFilterStatusInput(event: Event): void {