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)));