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

View File

@ -21,6 +21,8 @@ import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { CreateMultipleClientComponent } from "./shared/clients/create-multiple-client/create-multiple-client.component";
import { SelectionModel } from "@angular/cdk/collections";
import { ManageClientComponent } from "./shared/clients/manage-client/manage-client.component";
import { debounceTime } from 'rxjs/operators';
import { Subject } from 'rxjs';
enum NodeType {
OrganizationalUnit = 'organizational-unit',
@ -65,6 +67,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
private originalTreeData: TreeNode[] = [];
arrayClients: any[] = [];
filters: { [key: string]: string } = {};
private clientFilterSubject = new Subject<string>();
protected status = [
{ value: 'off', name: 'Apagado' },
@ -144,6 +147,11 @@ export class GroupsComponent implements OnInit, OnDestroy {
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 {
@ -638,8 +646,7 @@ export class GroupsComponent implements OnInit, OnDestroy {
onClientFilterInput(event: Event): void {
const input = event.target as HTMLInputElement;
const searchTerm = input?.value || '';
this.filters['query'] = searchTerm;
this.filterClients(searchTerm);
this.clientFilterSubject.next(searchTerm);
}
onClientFilterStatusInput(event: Event): void {