diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts
index 87708db479..c20394acca 100644
--- a/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts
+++ b/libs/feature/catalog/src/lib/organisations/organisations.component.spec.ts
@@ -16,10 +16,10 @@ import { OrganisationsComponent } from './organisations.component'
import { OrganizationsServiceInterface } from '@geonetwork-ui/common/domain/organizations.service.interface'
@Component({
- selector: 'gn-ui-organisations-sort',
+ selector: 'gn-ui-organisations-filter',
template: '
',
})
-class OrganisationsSortMockComponent {
+class OrganisationsFilterMockComponent {
@Output() sortBy = new EventEmitter
()
}
@Component({
@@ -31,6 +31,15 @@ class OrganisationPreviewMockComponent {
@Output() clickedOrganisation = new EventEmitter()
}
+@Component({
+ selector: 'gn-ui-organisations-result',
+ template: '',
+})
+class OrganisationsResultMockComponent {
+ @Input() hits: number
+ @Input() total: number
+}
+
@Component({
selector: 'gn-ui-pagination',
template: '',
@@ -43,6 +52,7 @@ class PaginationMockComponent {
class OrganisationsServiceMock {
organisations$ = of(ORGANISATIONS_FIXTURE)
+ organisationsCount$ = of(ORGANISATIONS_FIXTURE.length)
}
const organisationMock = {
@@ -63,9 +73,10 @@ describe('OrganisationsComponent', () => {
await TestBed.configureTestingModule({
declarations: [
OrganisationsComponent,
- OrganisationsSortMockComponent,
+ OrganisationsFilterMockComponent,
OrganisationPreviewMockComponent,
PaginationMockComponent,
+ OrganisationsResultMockComponent,
ContentGhostComponent,
],
providers: [
@@ -93,6 +104,7 @@ describe('OrganisationsComponent', () => {
describe('on component init', () => {
let orgPreviewComponents: OrganisationPreviewMockComponent[]
+ let orgResultComponent: OrganisationsResultMockComponent
let paginationComponentDE: DebugElement
let setCurrentPageSpy
let setSortBySpy
@@ -156,7 +168,7 @@ describe('OrganisationsComponent', () => {
beforeEach(() => {
setSortBySpy = jest.spyOn(component, 'setSortBy')
de.query(
- By.directive(OrganisationsSortMockComponent)
+ By.directive(OrganisationsFilterMockComponent)
).triggerEventHandler('sortBy', ['desc', 'recordCount'])
fixture.detectChanges()
orgPreviewComponents = de
@@ -181,6 +193,69 @@ describe('OrganisationsComponent', () => {
)
})
})
+ describe('filter organisations', () => {
+ describe('initial state', () => {
+ beforeEach(() => {
+ orgResultComponent = de.query(
+ By.directive(OrganisationsResultMockComponent)
+ )
+ })
+ it('should display number of organisations found to equal all', () => {
+ expect(orgResultComponent.componentInstance.hits).toEqual(
+ ORGANISATIONS_FIXTURE.length
+ )
+ })
+ it('should display number of all organisations', () => {
+ expect(orgResultComponent.componentInstance.total).toEqual(
+ ORGANISATIONS_FIXTURE.length
+ )
+ })
+ })
+ describe('entering search terms', () => {
+ beforeEach(() => {
+ orgResultComponent = de.query(
+ By.directive(OrganisationsResultMockComponent)
+ )
+ })
+ it('should ignore case and display 11 matches for "Data", "DATA" or "data"', () => {
+ component.filterBy$.next('Data')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(11)
+ component.filterBy$.next('DATA')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(11)
+ component.filterBy$.next('data')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(11)
+ })
+ it('should ignore accents and case and display 2 matches for "é Data Org", "e Data Org" or "E Data Org"', () => {
+ component.filterBy$.next('é Data Org')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(2)
+ component.filterBy$.next('e Data Org')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(2)
+ component.filterBy$.next('E Data Org')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(2)
+ })
+ it('should combine multiple termes with "AND" logic and display 1 match for "a data"', () => {
+ component.filterBy$.next('a data')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(1)
+ })
+ it('should combine multiple termes with "AND" logic and display 11 matches for "data org"', () => {
+ component.filterBy$.next('data org')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(11)
+ })
+ it('should display 12 matches for "ORG"', () => {
+ component.filterBy$.next('ORG')
+ fixture.detectChanges()
+ expect(orgResultComponent.componentInstance.hits).toEqual(12)
+ })
+ })
+ })
describe('click on organisation', () => {
let orgSelected
beforeEach(() => {
diff --git a/libs/feature/catalog/src/lib/organisations/organisations.component.ts b/libs/feature/catalog/src/lib/organisations/organisations.component.ts
index 79d1c3e25c..12b07a70ec 100644
--- a/libs/feature/catalog/src/lib/organisations/organisations.component.ts
+++ b/libs/feature/catalog/src/lib/organisations/organisations.component.ts
@@ -33,27 +33,34 @@ export class OrganisationsComponent {
totalPages: number
currentPage$ = new BehaviorSubject(1)
+ organisationResults: number
sortBy$: BehaviorSubject = new BehaviorSubject(['asc', 'name'])
-
- organisationsSorted$: Observable = combineLatest([
+ filterBy$: BehaviorSubject = new BehaviorSubject('')
+ organisationsTotal$ = this.organisationsService.organisationsCount$
+ organisationsFilteredAndSorted$: Observable = combineLatest([
this.organisationsService.organisations$.pipe(
startWith(Array(this.itemsOnPage).fill({}))
),
this.sortBy$,
+ this.filterBy$,
]).pipe(
- map(([organisations, sortBy]) =>
- this.sortOrganisations(organisations, sortBy)
- )
+ map(([organisations, sortBy, filterBy]) => {
+ const filteredOrganisations = this.filterOrganisations(
+ organisations,
+ filterBy
+ )
+ return this.sortOrganisations(filteredOrganisations, sortBy)
+ })
)
organisations$: Observable = combineLatest([
- this.organisationsSorted$,
+ this.organisationsFilteredAndSorted$,
this.currentPage$,
]).pipe(
- tap(
- ([organisations]) =>
- (this.totalPages = Math.ceil(organisations.length / this.itemsOnPage))
- ),
+ tap(([organisations]) => {
+ this.organisationResults = organisations.length
+ this.totalPages = Math.ceil(organisations.length / this.itemsOnPage)
+ }),
map(([organisations, page]) =>
organisations.slice(
(page - 1) * this.itemsOnPage,
@@ -66,10 +73,35 @@ export class OrganisationsComponent {
this.currentPage$.next(page)
}
+ protected setFilterBy(value: string): void {
+ this.filterBy$.next(value)
+ }
+
protected setSortBy(value: SortByField): void {
this.sortBy$.next(value)
}
+ private filterOrganisations(organisations: Organization[], filterBy: string) {
+ if (!filterBy) return organisations
+ const filterRegex = new RegExp(
+ this.normalizeString(filterBy) //ignore accents and case
+ .replace(/[^a-z0-9\s]/g, '') //ignore special characters
+ .replace(/\s(?=.)/g, '.*') //replace whitespaces by "AND" separator
+ .replace(/\s/g, ''), //remove potential whitespaces left
+ 'i'
+ )
+ return [...organisations].filter((org) => {
+ return this.normalizeString(org.name).match(filterRegex)
+ })
+ }
+
+ private normalizeString(str: string) {
+ return str
+ .normalize('NFD')
+ .replace(/[\u0300-\u036f]/g, '')
+ .toLowerCase()
+ }
+
private sortOrganisations(
organisations: Organization[],
sortBy: SortByField
diff --git a/libs/ui/catalog/src/index.ts b/libs/ui/catalog/src/index.ts
index 97165c1c8f..3cebead339 100644
--- a/libs/ui/catalog/src/index.ts
+++ b/libs/ui/catalog/src/index.ts
@@ -2,4 +2,4 @@ export * from './lib/ui-catalog.module'
export * from './lib/catalog-title/catalog-title.component'
export * from './lib/language-switcher/language-switcher.component'
export * from './lib/organisation-preview/organisation-preview.component'
-export * from './lib/organisations-sort/organisations-sort.component'
+export * from './lib/organisations-filter/organisations-filter.component'
diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.html b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.html
similarity index 52%
rename from libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.html
rename to libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.html
index 6edd40bab9..6fd793a552 100644
--- a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.html
+++ b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.html
@@ -1,8 +1,11 @@
-
- organisation.sort.intro
+
+
{
- let component: OrganisationsSortComponent
- let fixture: ComponentFixture
+ let component: OrganisationsFilterComponent
+ let fixture: ComponentFixture
beforeEach(async () => {
await TestBed.configureTestingModule({
- declarations: [OrganisationsSortComponent, DropdownSelectorMockComponent],
+ declarations: [
+ OrganisationsFilterComponent,
+ DropdownSelectorMockComponent,
+ ],
imports: [TranslateModule.forRoot()],
}).compileComponents()
- fixture = TestBed.createComponent(OrganisationsSortComponent)
+ fixture = TestBed.createComponent(OrganisationsFilterComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.stories.ts b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts
similarity index 69%
rename from libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.stories.ts
rename to libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts
index de2da26bd9..62adb35991 100644
--- a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.stories.ts
+++ b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.stories.ts
@@ -9,12 +9,12 @@ import {
TRANSLATE_DEFAULT_CONFIG,
UtilI18nModule,
} from '@geonetwork-ui/util/i18n'
-import { OrganisationsSortComponent } from './organisations-sort.component'
+import { OrganisationsFilterComponent } from './organisations-filter.component'
import { DropdownSelectorComponent } from '@geonetwork-ui/ui/inputs'
export default {
- title: 'Catalog/OrganisationsSortComponent',
- component: OrganisationsSortComponent,
+ title: 'Catalog/OrganisationsFilterComponent',
+ component: OrganisationsFilterComponent,
decorators: [
moduleMetadata({
declarations: [DropdownSelectorComponent],
@@ -27,6 +27,6 @@ export default {
(story) => `${story}
`
),
],
-} as Meta
+} as Meta
-export const Primary: StoryObj = {}
+export const Primary: StoryObj = {}
diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.ts b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts
similarity index 69%
rename from libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.ts
rename to libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts
index 682eb36f7f..b6f2049525 100644
--- a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.ts
+++ b/libs/ui/catalog/src/lib/organisations-filter/organisations-filter.component.ts
@@ -6,14 +6,14 @@ import {
} from '@angular/core'
import { marker } from '@biesbjerg/ngx-translate-extract-marker'
import { SortByField } from '@geonetwork-ui/common/domain/model/search'
+import { Subject, debounceTime } from 'rxjs'
@Component({
- selector: 'gn-ui-organisations-sort',
- templateUrl: './organisations-sort.component.html',
- styleUrls: ['./organisations-sort.component.css'],
+ selector: 'gn-ui-organisations-filter',
+ templateUrl: './organisations-filter.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
})
-export class OrganisationsSortComponent {
+export class OrganisationsFilterComponent {
choices: { value: string; label: string }[] = [
{
value: 'asc,name',
@@ -33,8 +33,14 @@ export class OrganisationsSortComponent {
},
]
@Output() sortBy = new EventEmitter()
+ filterByValueChange = new Subject()
+ @Output() filterBy = this.filterByValueChange.pipe(debounceTime(300))
selectOrderToDisplay(selectValue: string) {
this.sortBy.emit(selectValue.split(',') as SortByField)
}
+
+ filterOrganisations(inputValue: string) {
+ this.filterByValueChange.next(inputValue)
+ }
}
diff --git a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.html b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.html
new file mode 100644
index 0000000000..f9dc225276
--- /dev/null
+++ b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.html
@@ -0,0 +1,5 @@
+
+ organisations.hits.found
+
diff --git a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts
new file mode 100644
index 0000000000..4c9a6314a7
--- /dev/null
+++ b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { OrganisationsResultComponent } from './organisations-result.component'
+
+describe('OrganisationsResultComponent', () => {
+ let component: OrganisationsResultComponent
+ let fixture: ComponentFixture
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({
+ declarations: [OrganisationsResultComponent],
+ })
+ fixture = TestBed.createComponent(OrganisationsResultComponent)
+ component = fixture.componentInstance
+ fixture.detectChanges()
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+})
diff --git a/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts
new file mode 100644
index 0000000000..3ed741624b
--- /dev/null
+++ b/libs/ui/catalog/src/lib/organisations-result/organisations-result.component.ts
@@ -0,0 +1,11 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+
+@Component({
+ selector: 'gn-ui-organisations-result',
+ templateUrl: './organisations-result.component.html',
+ changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrganisationsResultComponent {
+ @Input() hits: number
+ @Input() total: number
+}
diff --git a/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.css b/libs/ui/catalog/src/lib/organisations-sort/organisations-sort.component.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/libs/ui/catalog/src/lib/ui-catalog.module.ts b/libs/ui/catalog/src/lib/ui-catalog.module.ts
index d1b97a9597..990100a7f3 100644
--- a/libs/ui/catalog/src/lib/ui-catalog.module.ts
+++ b/libs/ui/catalog/src/lib/ui-catalog.module.ts
@@ -5,16 +5,18 @@ import { OrganisationPreviewComponent } from './organisation-preview/organisatio
import { TranslateModule } from '@ngx-translate/core'
import { MatIconModule } from '@angular/material/icon'
import { UiElementsModule } from '@geonetwork-ui/ui/elements'
-import { OrganisationsSortComponent } from './organisations-sort/organisations-sort.component'
+import { OrganisationsFilterComponent } from './organisations-filter/organisations-filter.component'
import { UiInputsModule } from '@geonetwork-ui/ui/inputs'
import { LanguageSwitcherComponent } from './language-switcher/language-switcher.component'
+import { OrganisationsResultComponent } from './organisations-result/organisations-result.component'
@NgModule({
declarations: [
CatalogTitleComponent,
OrganisationPreviewComponent,
- OrganisationsSortComponent,
+ OrganisationsFilterComponent,
LanguageSwitcherComponent,
+ OrganisationsResultComponent,
],
imports: [
CommonModule,
@@ -26,8 +28,9 @@ import { LanguageSwitcherComponent } from './language-switcher/language-switcher
exports: [
CatalogTitleComponent,
OrganisationPreviewComponent,
- OrganisationsSortComponent,
+ OrganisationsFilterComponent,
LanguageSwitcherComponent,
+ OrganisationsResultComponent,
],
})
export class UiCatalogModule {}
diff --git a/libs/ui/inputs/src/lib/search-input/search-input.component.html b/libs/ui/inputs/src/lib/search-input/search-input.component.html
new file mode 100644
index 0000000000..6a3b995e34
--- /dev/null
+++ b/libs/ui/inputs/src/lib/search-input/search-input.component.html
@@ -0,0 +1,25 @@
+
+
+
+ search
+
+
+