From d0223eb2a315ef9dcfca6069ab80224f4a6663a1 Mon Sep 17 00:00:00 2001
From: Dylan Hemsworth <dylan.hemsworth@gmail.com>
Date: Wed, 11 Oct 2023 15:08:23 -0700
Subject: [PATCH] Add text search timers to all list pages

---
 .../area-restriction-list.component.desktop.html    |  4 ++--
 .../area-restriction-list.component.mobile.html     |  2 +-
 .../area-restriction-list.component.ts              | 13 ++++++++++++-
 .../bans-list/bans-list.component.desktop.html      |  4 ++--
 .../bans-list/bans-list.component.mobile.html       |  2 +-
 .../bans-list/bans-list.component.ts                | 13 ++++++++++++-
 .../evac-list/evac-list.component.desktop.html      |  4 ++--
 .../evac-list/evac-list.component.mobile.html       |  2 +-
 .../evac-list/evac-list.component.ts                | 13 ++++++++++++-
 9 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.desktop.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.desktop.html
index 9e341f668a..881fd9a1c4 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.desktop.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.desktop.html
@@ -2,9 +2,9 @@
 <div class="table-search-header flex-y-fixed">
     <div class="search-and-filters">
         <div class="field search-input">
-            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
             <button mat-mdc-button matSuffix mat-mdc-icon-button class="input-clear-button" *ngIf="searchText"
-                    aria-label="Clear" (click)="searchText=undefined; search(); $event.stopPropagation()"
+                    aria-label="Clear" (click)="searchText=undefined; searchByText(); $event.stopPropagation()"
                     matTooltip="Clear">
                     <span class="button-wrapper">
                         <mat-icon>close</mat-icon>
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.mobile.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.mobile.html
index b07dc759f2..652277249a 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.mobile.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.mobile.html
@@ -2,7 +2,7 @@
     <div class="search-and-filters">
         <div class="field search-input">
           <mat-icon class="search-icon" matSuffix>search</mat-icon>
-          <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+          <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
         </div>
         <button mat-fab matTooltip="Filter by Location" class="filter-button"
           aria-label="By Location" (click)="searchByLocation(); $event.stopPropagation()">
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.ts
index f01c9bc3b0..2daf40e63c 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.ts
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/area-restriction-list/area-restriction-list.component.ts
@@ -17,7 +17,7 @@ export class AreaRestrictionListComponent implements OnInit {
   public selectedSortOrder = 'DESC'
   public sortOptions = [{ description: 'Fire Centre', code: 'fireCentre'}, { description: 'Name', code: 'name'}, { description: 'Issued On', code: 'issuedOn'}]
   public searchText
-
+  public searchTimer
   columnsToDisplay = ["name", "issuedOn", "fireCentre", "distance", "viewMap", "details"];
 
   constructor ( private agolService: AGOLService, private cdr: ChangeDetectorRef, private commonUtilityService: CommonUtilityService ) {}
@@ -87,4 +87,15 @@ export class AreaRestrictionListComponent implements OnInit {
   sortData (event: any) {
     this.cdr.detectChanges()
   }
+
+  searchByText() {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = null
+    }
+
+    this.searchTimer = setTimeout(() => {
+      this.search()
+    }, 1000)
+  }
 }
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.desktop.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.desktop.html
index 3f6601186b..841076f288 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.desktop.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.desktop.html
@@ -2,9 +2,9 @@
 <div class="table-search-header flex-y-fixed">
     <div class="search-and-filters">
         <div class="field search-input">
-            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
             <button mat-mdc-button matSuffix mat-mdc-icon-button class="input-clear-button" *ngIf="searchText"
-                    aria-label="Clear" (click)="searchText=undefined; search(); $event.stopPropagation()"
+                    aria-label="Clear" (click)="searchText=undefined; searchByText(); $event.stopPropagation()"
                     matTooltip="Clear">
                     <span class="button-wrapper">
                         <mat-icon>close</mat-icon>
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.mobile.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.mobile.html
index f9c8ae2f16..320ae8b41a 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.mobile.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.mobile.html
@@ -2,7 +2,7 @@
   <div class="search-and-filters">
       <div class="field search-input">
         <mat-icon class="search-icon" matSuffix>search</mat-icon>
-        <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+        <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
       </div>
       <button mat-fab matTooltip="Filter by Location" class="filter-button"
         aria-label="By Location" (click)="searchByLocation(); $event.stopPropagation()">
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.ts
index dcf76a7105..04a09a7eb2 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.ts
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.ts
@@ -18,7 +18,7 @@ export class BansListComponent implements OnInit {
   public category1 = true
   public category2 = true
   public category3 = true
-
+  public searchTimer
   columnsToDisplay = ["fireCentre", "type", "details", "issuedOn", "viewMap", "fullDetails"];
 
   constructor ( private agolService: AGOLService, private cdr: ChangeDetectorRef ) {}
@@ -102,4 +102,15 @@ export class BansListComponent implements OnInit {
   sortData (event: any) {
     this.cdr.detectChanges()
   }
+
+  searchByText() {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = null
+    }
+
+    this.searchTimer = setTimeout(() => {
+      this.search()
+    }, 1000)
+  }
 }
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.desktop.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.desktop.html
index 854f682883..17fded8d3c 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.desktop.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.desktop.html
@@ -2,9 +2,9 @@
 <div class="table-search-header flex-y-fixed">
     <div class="search-and-filters">
         <div class="field search-input">
-            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+            <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
             <button mat-mdc-button matSuffix mat-mdc-icon-button class="input-clear-button" *ngIf="searchText"
-                    aria-label="Clear" (click)="searchText=undefined; search(); $event.stopPropagation()"
+                    aria-label="Clear" (click)="searchText=undefined; searchByText(); $event.stopPropagation()"
                     matTooltip="Clear">
                     <span class="button-wrapper">
                         <mat-icon>close</mat-icon>
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.mobile.html b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.mobile.html
index 0e9e4d4091..c12f721731 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.mobile.html
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.mobile.html
@@ -2,7 +2,7 @@
   <div class="search-and-filters">
       <div class="field search-input">
         <mat-icon class="search-icon" matSuffix>search</mat-icon>
-        <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="search()">
+        <input matInput class="search-input" aria-label="Search" placeholder="     Search" [(ngModel)]="searchText" (ngModelChange)="searchByText()">
       </div>
       <button mat-fab matTooltip="Filter by Location" class="filter-button"
         aria-label="By Location" (click)="searchByLocation(); $event.stopPropagation()">
diff --git a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.ts b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.ts
index 0f1276a40a..338514676d 100644
--- a/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.ts
+++ b/client/wfnews-war/src/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.ts
@@ -17,7 +17,7 @@ export class EvacListComponent implements OnInit {
   public selectedSortOrder = 'DESC'
   public sortOptions = [{ description: 'Name', code: 'name'}, { description: 'Status', code: 'status'}, { description: 'Agency', code: 'agency'}, { description: 'Issued On', code: 'issuedOn'}]
   public searchText
-
+  public searchTimer
   public order = true
   public alert = true
 
@@ -112,4 +112,15 @@ export class EvacListComponent implements OnInit {
   sortData (event: any) {
     this.cdr.detectChanges()
   }
+
+  searchByText() {
+    if (this.searchTimer) {
+      clearTimeout(this.searchTimer)
+      this.searchTimer = null
+    }
+
+    this.searchTimer = setTimeout(() => {
+      this.search()
+    }, 1000)
+  }
 }