From c568d5a8e76835594913046a0194f38dbf574679 Mon Sep 17 00:00:00 2001
From: llara <llara@localhost>
Date: Wed, 5 Mar 2025 15:45:23 +0100
Subject: [PATCH] refs #1641. Implement debounced client filtering in groups
 component

---
 .../app/components/groups/groups.component.ts | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/ogWebconsole/src/app/components/groups/groups.component.ts b/ogWebconsole/src/app/components/groups/groups.component.ts
index 9b26473..133e2bc 100644
--- a/ogWebconsole/src/app/components/groups/groups.component.ts
+++ b/ogWebconsole/src/app/components/groups/groups.component.ts
@@ -1,5 +1,5 @@
 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 { MatDialog } from '@angular/material/dialog';
 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 { 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,17 +67,18 @@ 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'},
-    {value: 'initializing', name: 'Inicializando'},
-    {value: 'og-live', name: 'Og Live'},
-    {value: 'linux', name: 'Linux'},
-    {value: 'linux-session', name: 'Linux Session'},
-    {value: 'windows', name: 'Windows'},
-    {value: 'windows-session', name: 'Windows Session'},
-    {value: 'busy', name: 'Ocupado'},
-    {value: 'mac', name: 'Mac'},
+    { value: 'off', name: 'Apagado' },
+    { value: 'initializing', name: 'Inicializando' },
+    { value: 'og-live', name: 'Og Live' },
+    { value: 'linux', name: 'Linux' },
+    { value: 'linux-session', name: 'Linux Session' },
+    { value: 'windows', name: 'Windows' },
+    { value: 'windows-session', name: 'Windows Session' },
+    { value: 'busy', name: 'Ocupado' },
+    { value: 'mac', name: 'Mac' },
   ];
 
   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.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 {