Add text search timers to all list pages

bcgov · Oct 11, 2023 · d0223eb · d0223eb
1 parent f4f8d07
commit d0223eb
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 12 deletions.
diff --git a/.../wildfires-list-header/area-restriction-list/area-restriction-list.component.desktop.html b/.../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/...s/wildfires-list-header/area-restriction-list/area-restriction-list.component.mobile.html b/...s/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/...components/wildfires-list-header/area-restriction-list/area-restriction-list.component.ts b/...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/...gular/src/app/components/wildfires-list-header/bans-list/bans-list.component.desktop.html b/...gular/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/...ngular/src/app/components/wildfires-list-header/bans-list/bans-list.component.mobile.html b/...ngular/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/...rc/main/angular/src/app/components/wildfires-list-header/bans-list/bans-list.component.ts b/...rc/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/...gular/src/app/components/wildfires-list-header/evac-list/evac-list.component.desktop.html b/...gular/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/...ngular/src/app/components/wildfires-list-header/evac-list/evac-list.component.mobile.html b/...ngular/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/...rc/main/angular/src/app/components/wildfires-list-header/evac-list/evac-list.component.ts b/...rc/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)
+  }
 }