From e5e2370923f387030f5c17a889eb051a6c489c3e Mon Sep 17 00:00:00 2001 From: gbrodman Date: Fri, 8 Dec 2023 15:37:30 -0500 Subject: [PATCH] Debouncedly use a search term in console domain list (#2242) --- .../src/app/domains/domainList.component.html | 8 +++++- .../src/app/domains/domainList.component.ts | 28 +++++++++++++++---- .../src/app/domains/domainList.service.ts | 6 ++-- .../app/shared/services/backend.service.ts | 6 +++- 4 files changed, 39 insertions(+), 9 deletions(-) diff --git a/console-webapp/src/app/domains/domainList.component.html b/console-webapp/src/app/domains/domainList.component.html index 4cc98f625..f2cd6b95f 100644 --- a/console-webapp/src/app/domains/domainList.component.html +++ b/console-webapp/src/app/domains/domainList.component.html @@ -1,7 +1,13 @@
Filter - +
diff --git a/console-webapp/src/app/domains/domainList.component.ts b/console-webapp/src/app/domains/domainList.component.ts index 6c5c754b3..c6557e539 100644 --- a/console-webapp/src/app/domains/domainList.component.ts +++ b/console-webapp/src/app/domains/domainList.component.ts @@ -18,6 +18,7 @@ import { BackendService } from '../shared/services/backend.service'; import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { RegistrarService } from '../registrar/registrar.service'; import { Domain, DomainListService } from './domainList.service'; +import { Subject, debounceTime } from 'rxjs'; @Component({ selector: 'app-domain-list', @@ -27,6 +28,7 @@ import { Domain, DomainListService } from './domainList.service'; }) export class DomainListComponent { public static PATH = 'domain-list'; + private readonly DEBOUNCE_MS = 500; displayedColumns: string[] = [ 'domainName', @@ -38,6 +40,9 @@ export class DomainListComponent { dataSource: MatTableDataSource = new MatTableDataSource(); isLoading = true; + searchTermSubject = new Subject(); + searchTerm?: string; + pageNumber?: number; resultsPerPage = 50; totalResults?: number; @@ -52,13 +57,28 @@ export class DomainListComponent { ngOnInit() { this.dataSource.paginator = this.paginator; + // Don't spam the server unnecessarily while the user is typing + this.searchTermSubject + .pipe(debounceTime(this.DEBOUNCE_MS)) + .subscribe((searchTermValue) => { + this.reloadData(); + }); this.reloadData(); } + ngOnDestroy() { + this.searchTermSubject.complete(); + } + reloadData() { this.isLoading = true; this.domainListService - .retrieveDomains(this.pageNumber, this.resultsPerPage, this.totalResults) + .retrieveDomains( + this.pageNumber, + this.resultsPerPage, + this.totalResults, + this.searchTerm + ) .subscribe((domainListResult) => { this.dataSource.data = domainListResult.domains; this.totalResults = domainListResult.totalResults; @@ -66,10 +86,8 @@ export class DomainListComponent { }); } - /** TODO: the backend will need to accept a filter string. */ - applyFilter(event: KeyboardEvent) { - // const filterValue = (event.target as HTMLInputElement).value; - this.reloadData(); + sendInput() { + this.searchTermSubject.next(this.searchTerm!); } onPageChange(event: PageEvent) { diff --git a/console-webapp/src/app/domains/domainList.service.ts b/console-webapp/src/app/domains/domainList.service.ts index b2a4a6a4f..816559ce0 100644 --- a/console-webapp/src/app/domains/domainList.service.ts +++ b/console-webapp/src/app/domains/domainList.service.ts @@ -47,7 +47,8 @@ export class DomainListService { retrieveDomains( pageNumber?: number, resultsPerPage?: number, - totalResults?: number + totalResults?: number, + searchTerm?: string ) { return this.backendService .getDomains( @@ -55,7 +56,8 @@ export class DomainListService { this.checkpointTime, pageNumber, resultsPerPage, - totalResults + totalResults, + searchTerm ) .pipe( tap((domainListResult: DomainListResult) => { diff --git a/console-webapp/src/app/shared/services/backend.service.ts b/console-webapp/src/app/shared/services/backend.service.ts index b5d98a3e5..c6c977a6a 100644 --- a/console-webapp/src/app/shared/services/backend.service.ts +++ b/console-webapp/src/app/shared/services/backend.service.ts @@ -69,7 +69,8 @@ export class BackendService { checkpointTime?: string, pageNumber?: number, resultsPerPage?: number, - totalResults?: number + totalResults?: number, + searchTerm?: string ): Observable { var url = `/console-api/domain-list?registrarId=${registrarId}`; if (checkpointTime) { @@ -84,6 +85,9 @@ export class BackendService { if (totalResults) { url += `&totalResults=${totalResults}`; } + if (searchTerm) { + url += `&searchTerm=${searchTerm}`; + } return this.http .get(url) .pipe(catchError((err) => this.errorCatcher(err)));