fix(search-results): hide empty result during typing (#1154)

* fix(search-results): hide empty result during typing * change if condition to show search result component, until the request ended * resolve lint error * fix no results display when term is empty * uncommit toggleTopPanel function * solve lint error * fix request delay on first debounce Co-authored-by: Philippe Lafreniere <[email protected]>
infra-geo-ouverte · Mar 21, 2023 · 8612247 · 8612247
1 parent 2310fa4
commit 8612247
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/packages/geo/src/lib/search/search-bar/search-bar.component.ts b/packages/geo/src/lib/search/search-bar/search-bar.component.ts
@@ -13,7 +13,7 @@ import {
   FloatLabelType,
   MatFormFieldAppearance
 } from '@angular/material/form-field';
-import { BehaviorSubject, Subscription, EMPTY, timer } from 'rxjs';
+import { BehaviorSubject, Subscription, timer } from 'rxjs';
 import { debounce, distinctUntilChanged } from 'rxjs/operators';
 
 import { LanguageService } from '@igo2/core';
@@ -244,7 +244,7 @@ export class SearchBarComponent implements OnInit, OnDestroy {
 
     this.stream$$ = this.stream$
       .pipe(
-        debounce((term: string) => (term === '' ? EMPTY : timer(this.debounce)))
+        debounce(() => timer(this.debounce))
       )
       .subscribe((term: string) => this.onSetTerm(term));
 

diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="(!store || store.stateView.empty) && (debouncedEmpty$ | async) " style="margin: 10px;">
+<div *ngIf="(!store || store.stateView.empty) && (debouncedEmpty$ | async)" style="margin: 10px;">
   <section class="mat-typography">
     <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</strong></h4>
     <p><strong>{{ 'igo.integration.searchResultsTool.doSearch' | translate }}</strong></p>
@@ -7,7 +7,7 @@ <h4><strong>{{ 'igo.integration.searchResultsTool.noResults' | translate }}</str
 </div>
 
 <igo-flexible
-  *ngIf="store && (store.stateView.empty$ | async)===false"
+  *ngIf="(debouncedEmpty$ | async) === false"
   #topPanel
   initial="100%"
   initialMobile="100%"

diff --git a/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts b/packages/integration/src/lib/search/search-results-tool/search-results-tool.component.ts
@@ -164,8 +164,11 @@ export class SearchResultsToolComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.searchTerm$$ = this.searchState.searchTerm$.subscribe(
       (searchTerm: string) => {
-        if (searchTerm !== undefined && searchTerm !== null) {
+        if (searchTerm !== undefined && searchTerm !== null && searchTerm !== '') {
           this.term = searchTerm;
+          this.debouncedEmpty$.next(false);
+        } else if (searchTerm === '') {
+          this.debouncedEmpty$.next(true);
         }
       }
     );