refactor(organisations): move debounceTime to UI component

geonetwork · Dec 15, 2023 · e24a047 · e24a047
1 parent fe72d8e
commit e24a047
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.ts
@@ -9,7 +9,7 @@ import {
 } from '@angular/core'
 import { Organization } from '@geonetwork-ui/common/domain/model/record'
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs'
-import { debounceTime, map, startWith, tap } from 'rxjs/operators'
+import { map, startWith, tap } from 'rxjs/operators'
 import { ORGANIZATION_URL_TOKEN } from '../feature-catalog.module'
 import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
 import { SortByField } from '@geonetwork-ui/common/domain/model/search'
@@ -36,21 +36,18 @@ export class OrganisationsComponent {
   organisationResults: number
   sortBy$: BehaviorSubject<SortByField> = new BehaviorSubject(['asc', 'name'])
   filterBy$: BehaviorSubject<string> = new BehaviorSubject('')
-  filterByDebounced$: Observable<string> = this.filterBy$.pipe(
-    debounceTime(300)
-  )
   organisationsTotal$ = this.organisationsService.organisationsCount$
   organisationsFilteredAndSorted$: Observable<Organization[]> = combineLatest([
     this.organisationsService.organisations$.pipe(
       startWith(Array(this.itemsOnPage).fill({}))
     ),
     this.sortBy$,
-    this.filterByDebounced$,
+    this.filterBy$,
   ]).pipe(
-    map(([organisations, sortBy, filterByDebounced]) => {
+    map(([organisations, sortBy, filterBy]) => {
       const filteredOrganisations = this.filterOrganisations(
         organisations,
-        filterByDebounced
+        filterBy
       )
       return this.sortOrganisations(filteredOrganisations, sortBy)
     })

diff --git a/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts
@@ -6,6 +6,7 @@ import {
 } from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { SortByField } from '@geonetwork-ui/common/domain/model/search'
+import { debounceTime } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-organisations-filter',
@@ -32,13 +33,14 @@ export class OrganisationsFilterComponent {
     },
   ]
   @Output() sortBy = new EventEmitter<SortByField>()
-  @Output() filterBy = new EventEmitter<string>()
+  @Output() filterByValueChange = new EventEmitter<string>()
+  @Output() filterBy = this.filterByValueChange.pipe(debounceTime(300))
 
   selectOrderToDisplay(selectValue: string) {
     this.sortBy.emit(selectValue.split(',') as SortByField)
   }
 
   filterOrganisations(inputValue: string) {
-    this.filterBy.emit(inputValue)
+    this.filterByValueChange.next(inputValue)
   }
 }