refs #1641. Implement debounced client filtering in groups component
testing/ogGui-multibranch/pipeline/head This commit looks good
Details
testing/ogGui-multibranch/pipeline/head This commit looks good
Details
parent
5907404f77
commit
c568d5a8e7
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue