diff --git a/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts b/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
index 13a9215b9..5b76e1b93 100644
--- a/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
+++ b/apps/metadata-editor-e2e/src/e2e/dashboard.cy.ts
@@ -296,12 +296,26 @@ describe('dashboard (authenticated)', () => {
})
})
describe('search filters', () => {
- function checkFilterByChangeDate() {
+ function selectUser(index = 0, openDropdown = true) {
+ if (openDropdown) {
+ cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
+ }
+ cy.get('.cdk-overlay-container')
+ .find('input[type="checkbox"]')
+ .eq(index)
+ .check()
+ }
+ function selectDateRange() {
cy.get('mat-calendar-header').find('button').first().click()
cy.get('mat-multi-year-view').contains('button', '2024').click()
cy.get('mat-year-view').contains('button', 'AUG').click()
cy.get('mat-month-view').contains('button', '1').click()
cy.get('mat-month-view').contains('button', '30').click()
+ }
+ function closeDropDown() {
+ cy.get('body').click(0, 0)
+ }
+ function checkFilterByChangeDate() {
cy.get('gn-ui-interactive-table')
.find('[data-cy="table-row"]')
.should('have.length', '1')
@@ -322,12 +336,8 @@ describe('dashboard (authenticated)', () => {
.find('gn-ui-button')
.should('have.length', 2)
})
- it('should filter the record list by editor (Barbara Roberts)', () => {
- cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
- cy.get('.cdk-overlay-container')
- .find('input[type="checkbox"]')
- .eq(1)
- .check()
+ it('should filter the record list by user (Barbara Roberts)', () => {
+ selectUser(1)
cy.get('gn-ui-interactive-table')
.find('[data-cy="table-row"]')
.should('have.length', '5')
@@ -339,18 +349,19 @@ describe('dashboard (authenticated)', () => {
})
it('should filter the record list by last update (changeDate)', () => {
cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+ selectDateRange()
checkFilterByChangeDate()
})
it('should display the expand icon for the date range dropdown correctly', () => {
cy.get('md-editor-search-filters')
.find('gn-ui-date-range-dropdown')
- .find('mat-icon')
- .should('contain.text', 'expand_more')
+ .find('ng-icon')
+ .should('have.attr', 'ng-reflect-name', 'matExpandMore')
cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
cy.get('md-editor-search-filters')
.find('gn-ui-date-range-dropdown')
- .find('mat-icon')
- .should('contain.text', 'expand_less')
+ .find('ng-icon')
+ .should('have.attr', 'ng-reflect-name', 'matExpandLess')
})
})
describe('myRecords search filters', () => {
@@ -364,9 +375,145 @@ describe('dashboard (authenticated)', () => {
})
it('should filter the record list by last update (changeDate)', () => {
cy.get('md-editor-search-filters').find('gn-ui-button').first().click()
+ selectDateRange()
checkFilterByChangeDate()
})
})
+ describe('allRecord search filters summary', () => {
+ beforeEach(() => {
+ cy.visit('/catalog/search')
+ })
+ it('should not display anything without selected filters', () => {
+ cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+ })
+ describe('selecting users', () => {
+ beforeEach(() => {
+ selectUser(1)
+ })
+ it('should display a label for badges of selected users', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('[data-cy="filterSummaryLabel"]')
+ .invoke('text')
+ .should('eq', 'Modified by: ')
+ })
+ it('should display the badge for a selected user', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('have.length', 1)
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .invoke('text')
+ .should('eq', 'Barbara Roberts')
+ })
+ it('should display a second badge for a second selected user', () => {
+ selectUser(0, false)
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('have.length', 2)
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .eq(1)
+ .invoke('text')
+ .should('eq', 'admin admin')
+ })
+ it('should remove one of two badges when a badge cross is clicked', () => {
+ selectUser(0, false)
+ closeDropDown()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .eq(0)
+ .find('ng-icon')
+ .click()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('have.length', 1)
+ })
+ })
+ describe('selecting date range', () => {
+ beforeEach(() => {
+ cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+ selectDateRange()
+ })
+ it('should display a label for the date range', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('[data-cy="filterSummaryLabel"]')
+ .invoke('text')
+ .should('eq', 'Modified on: ')
+ })
+ it('should display the badge for the selected date range', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .invoke('text')
+ .should('eq', '01.08.2024 - 30.08.2024')
+ })
+ it('should remove the badge when the badge cross is clicked', () => {
+ closeDropDown()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .find('ng-icon')
+ .click()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('not.exist')
+ })
+ })
+ describe('selecting multiple filters (users and date range)', () => {
+ beforeEach(() => {
+ selectUser(0)
+ closeDropDown()
+ cy.get('md-editor-search-filters').find('gn-ui-button').eq(1).click()
+ selectDateRange()
+ })
+ it('should display both badges', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('have.length', 2)
+ })
+ it('should clear all filters when the clear button is clicked', () => {
+ cy.get('gn-ui-search-filters-summary').find('button').last().click()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('have.length', 0)
+ cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+ })
+ })
+ })
+ describe('myRecords search filters summary', () => {
+ beforeEach(() => {
+ cy.visit('/my-space/my-records')
+ })
+ it('should not display anything without selected filters', () => {
+ cy.get('gn-ui-search-filters-summary-item').should('not.exist')
+ })
+ describe('selecting date range', () => {
+ beforeEach(() => {
+ cy.get('md-editor-search-filters').find('gn-ui-button').eq(0).click()
+ selectDateRange()
+ })
+ it('should display a label for the date range', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('[data-cy="filterSummaryLabel"]')
+ .invoke('text')
+ .should('eq', 'Modified on: ')
+ })
+ it('should display the badge for the selected date range', () => {
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .invoke('text')
+ .should('eq', '01.08.2024 - 30.08.2024')
+ })
+ it('should remove the badge when the badge cross is clicked', () => {
+ closeDropDown()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .find('ng-icon')
+ .click()
+ cy.get('gn-ui-search-filters-summary')
+ .find('gn-ui-badge')
+ .should('not.exist')
+ })
+ })
+ })
})
describe('Account settings access', () => {
it('should navigate to the account settings page', () => {
diff --git a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.html b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.html
index 75710a0f5..3d4728505 100644
--- a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.html
+++ b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.html
@@ -1,13 +1,20 @@
diff --git a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.spec.ts b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.spec.ts
index 487bdb861..2b2d9a2fb 100644
--- a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.spec.ts
+++ b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.spec.ts
@@ -2,13 +2,17 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
import { SearchFiltersComponent } from './search-filters.component'
import { MockBuilder } from 'ng-mocks'
import { TranslateModule } from '@ngx-translate/core'
+import { By } from '@angular/platform-browser'
+import { SearchFiltersSummaryComponent } from '@geonetwork-ui/feature/search'
describe('SearchFiltersComponent', () => {
let component: SearchFiltersComponent
let fixture: ComponentFixture
beforeEach(() => {
- return MockBuilder(SearchFiltersComponent)
+ return MockBuilder(SearchFiltersComponent).mock(
+ SearchFiltersSummaryComponent
+ )
})
beforeEach(async () => {
@@ -40,5 +44,15 @@ describe('SearchFiltersComponent', () => {
fixture.detectChanges()
expect(component.searchConfig).toEqual([])
})
+
+ it('should pass searchFields to SearchFiltersSummaryComponent', () => {
+ const searchFields = ['user', 'publisherOrg', 'format', 'isSpatial']
+ component.searchFields = searchFields
+ fixture.detectChanges()
+ const summaryComponent = fixture.debugElement.query(
+ By.directive(SearchFiltersSummaryComponent)
+ ).componentInstance
+ expect(summaryComponent.searchFields).toEqual(searchFields)
+ })
})
})
diff --git a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.ts b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.ts
index 68cc32e55..3b64b8a64 100644
--- a/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.ts
+++ b/apps/metadata-editor/src/app/dashboard/search-filters/search-filters.component.ts
@@ -1,13 +1,16 @@
import { Component, Input, OnInit } from '@angular/core'
import { CommonModule } from '@angular/common'
import { TranslateModule } from '@ngx-translate/core'
-import { FeatureSearchModule } from '@geonetwork-ui/feature/search'
import {
NgIconComponent,
provideIcons,
provideNgIconsConfig,
} from '@ng-icons/core'
import { iconoirFilterList } from '@ng-icons/iconoir'
+import {
+ FeatureSearchModule,
+ SearchFiltersSummaryComponent,
+} from '@geonetwork-ui/feature/search'
@Component({
selector: 'md-editor-search-filters',
@@ -17,6 +20,7 @@ import { iconoirFilterList } from '@ng-icons/iconoir'
TranslateModule,
FeatureSearchModule,
NgIconComponent,
+ SearchFiltersSummaryComponent,
],
providers: [
provideIcons({
diff --git a/apps/metadata-editor/src/app/records/my-records/my-records.component.ts b/apps/metadata-editor/src/app/records/my-records/my-records.component.ts
index 2068fd36f..de10855ff 100644
--- a/apps/metadata-editor/src/app/records/my-records/my-records.component.ts
+++ b/apps/metadata-editor/src/app/records/my-records/my-records.component.ts
@@ -13,7 +13,7 @@ import { RecordsListComponent } from '../records-list.component'
import {
FeatureSearchModule,
FieldsService,
- ResultsTableContainerComponent,
+ FILTER_SUMMARY_IGNORE_LIST,
SearchFacade,
} from '@geonetwork-ui/feature/search'
import { PlatformServiceInterface } from '@geonetwork-ui/common/domain/platform.service.interface'
@@ -38,6 +38,8 @@ import {
iconoirPagePlus,
} from '@ng-icons/iconoir'
+const FILTER_OWNER = 'owner'
+
@Component({
selector: 'md-editor-my-records',
templateUrl: './my-records.component.html',
@@ -47,7 +49,6 @@ import {
CommonModule,
TranslateModule,
RecordsListComponent,
- ResultsTableContainerComponent,
UiElementsModule,
RecordsCountComponent,
ButtonComponent,
@@ -66,6 +67,7 @@ import {
provideNgIconsConfig({
size: '1.5rem',
}),
+ { provide: FILTER_SUMMARY_IGNORE_LIST, useValue: [FILTER_OWNER] },
],
})
export class MyRecordsComponent implements OnInit {
@@ -93,7 +95,7 @@ export class MyRecordsComponent implements OnInit {
this.platformService.getMe().subscribe((user) => {
this.fieldsService
- .buildFiltersFromFieldValues({ owner: user.id })
+ .buildFiltersFromFieldValues({ [FILTER_OWNER]: user.id })
.subscribe((filters) => {
this.searchFacade.updateFilters(filters)
})
diff --git a/libs/feature/router/src/lib/default/state/query-params.utils.spec.ts b/libs/feature/router/src/lib/default/state/query-params.utils.spec.ts
index 08393b9ec..ec3c3ab1b 100644
--- a/libs/feature/router/src/lib/default/state/query-params.utils.spec.ts
+++ b/libs/feature/router/src/lib/default/state/query-params.utils.spec.ts
@@ -37,11 +37,11 @@ describe('query params utilities', () => {
[ROUTE_PARAMS.SORT]: 'createDate',
publisher: ['john', 'barbie'],
updateDate: {
- start: new Date('2010-03-10'),
- end: new Date('2014-01-01'),
+ start: new Date('2010-03-10T00:00:00'),
+ end: new Date('2014-01-01T00:00:00'),
},
changeDate: {
- end: new Date('2008-08-14'),
+ end: new Date('2008-08-14T00:00:00'),
},
})
})
@@ -51,7 +51,7 @@ describe('query params utilities', () => {
})
expect(params).toEqual({
changeDate: {
- end: new Date('2008-08-14'),
+ end: new Date('2008-08-14T00:00:00'),
},
})
})
diff --git a/libs/feature/router/src/lib/default/state/query-params.utils.ts b/libs/feature/router/src/lib/default/state/query-params.utils.ts
index 73ea22fa8..133d5dbc7 100644
--- a/libs/feature/router/src/lib/default/state/query-params.utils.ts
+++ b/libs/feature/router/src/lib/default/state/query-params.utils.ts
@@ -1,4 +1,8 @@
-import { DateRange, isDateRange } from '@geonetwork-ui/api/repository'
+import {
+ DateRange,
+ formatDate,
+ isDateRange,
+} from '@geonetwork-ui/api/repository'
import { ROUTE_PARAMS, SearchRouteParams } from '../constants'
export function flattenQueryParams(
@@ -12,12 +16,10 @@ export function flattenQueryParams(
) {
flattened[key] = [(flattened[key] as string[]).join(',')]
} else if (isDateRange(flattened[key] as DateRange)) {
+ const start = (flattened[key] as DateRange).start
+ const end = (flattened[key] as DateRange).end
flattened[key] = [
- `${
- (flattened[key] as DateRange).start?.toISOString().split('T')[0] || ''
- }..${
- (flattened[key] as DateRange).end?.toISOString().split('T')[0] || ''
- }`,
+ `${start ? formatDate(start) : ''}..${formatDate(end) || ''}`,
]
}
}
@@ -42,8 +44,8 @@ export function expandQueryParams(
} else if (isDateUrl(value)) {
const [start, end] = value.split('..')
expanded[key] = {
- ...(start && { start: new Date(start) }),
- ...(end && { end: new Date(end) }),
+ ...(start && { start: new Date(`${start}T00:00:00`) }),
+ ...(end && { end: new Date(`${end}T00:00:00`) }),
}
} else {
expanded[key] = value.split(',')
diff --git a/libs/feature/search/src/index.ts b/libs/feature/search/src/index.ts
index f6103754e..63ae62fd7 100644
--- a/libs/feature/search/src/index.ts
+++ b/libs/feature/search/src/index.ts
@@ -22,3 +22,5 @@ export * from './lib/results-layout/results-layout.component'
export * from './lib/sort-by/sort-by.component'
export * from './lib/state/container/search-state.container.directive'
export * from './lib/results-table/results-table-container.component'
+export * from './lib/search-filters-summary/search-filters-summary.component'
+export * from './lib/search-filters-summary-item/search-filters-summary-item.component'
diff --git a/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts b/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts
index d5bb87d07..33f7d30ad 100644
--- a/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts
+++ b/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts
@@ -72,13 +72,11 @@ export class FilterDropdownComponent implements OnInit {
onStartDateChange(start: Date) {
if (!start) return
- start.setUTCHours(24, 0, 0, 0)
this.dateRange = { ...this.dateRange, start }
}
onEndDateChange(end: Date) {
if (!end) return
- end.setUTCHours(24, 0, 0, 0)
this.dateRange = { ...this.dateRange, end }
if (this.dateRange.start && this.dateRange.end) {
this.fieldsService
diff --git a/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.css b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.html b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.html
new file mode 100644
index 000000000..558703608
--- /dev/null
+++ b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.html
@@ -0,0 +1,20 @@
+
+ {{
+ translatedLabel
+ }}
+ {{ fieldValue.label }}
+
diff --git a/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.spec.ts b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.spec.ts
new file mode 100644
index 000000000..45bf0fdb3
--- /dev/null
+++ b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.spec.ts
@@ -0,0 +1,155 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { SearchFiltersSummaryItemComponent } from './search-filters-summary-item.component'
+import { BehaviorSubject, firstValueFrom, of } from 'rxjs'
+import { MockBuilder, MockComponent, MockProvider } from 'ng-mocks'
+import { SearchFacade } from '../state/search.facade'
+import { SearchService } from '../utils/service/search.service'
+import { FieldFilters } from '@geonetwork-ui/common/domain/model/search'
+import { BadgeComponent } from '@geonetwork-ui/ui/inputs'
+import { CommonModule, DatePipe } from '@angular/common'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { FieldsService } from '../utils/service/fields.service'
+import { FieldType } from '../utils/service/fields'
+
+const FIELD_VALUES_FROM_FILTERS_MOCK = {
+ organization: [],
+ format: [],
+ resourceType: [],
+ representationType: [],
+ publicationYear: [],
+ topic: [],
+ inspireKeyword: [],
+ keyword: [],
+ documentStandard: [],
+ isSpatial: [],
+ q: [],
+ license: [],
+ owner: [],
+ producerOrg: [],
+ publisherOrg: [],
+ user: ['admin|admin|admin|Administrator', 'barbie|Roberts|Barbara|UserAdmin'],
+ changeDate: {
+ start: new Date('2024-11-01T00:00:00.000Z'),
+ end: new Date('2024-11-29T00:00:00.000Z'),
+ },
+}
+/* searchFilters$ is only used to trigger change detection.
+ ** its value is replaced by FIELD_VALUES_FROM_FILTERS_MOCK in stream
+ */
+class SearchFacadeMock {
+ searchFilters$ = new BehaviorSubject({})
+}
+class SearchServiceMock {
+ setFilters = jest.fn()
+}
+
+class TranslateServiceMock {
+ get = jest.fn(() => of(''))
+}
+
+describe('SearchFiltersSummaryItemComponent', () => {
+ let component: SearchFiltersSummaryItemComponent
+ let fixture: ComponentFixture
+ let searchFacade: SearchFacade
+ let translateService: TranslateService
+ let fieldsService: FieldsService
+
+ beforeEach(() => {
+ return MockBuilder(SearchFiltersSummaryItemComponent)
+ })
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CommonModule, TranslateModule.forRoot()],
+ declarations: [
+ SearchFiltersSummaryItemComponent,
+ MockComponent(BadgeComponent),
+ ],
+ providers: [
+ MockProvider(SearchFacade, SearchFacadeMock, 'useClass'),
+ MockProvider(SearchService, SearchServiceMock, 'useClass'),
+ MockProvider(FieldsService),
+ MockProvider(DatePipe),
+ MockProvider(TranslateService, TranslateServiceMock, 'useClass'),
+ ],
+ }).compileComponents()
+ fixture = TestBed.createComponent(SearchFiltersSummaryItemComponent)
+ component = fixture.componentInstance
+ searchFacade = TestBed.inject(SearchFacade)
+ fieldsService = TestBed.inject(FieldsService)
+ translateService = TestBed.inject(TranslateService)
+ })
+
+ it('should create', () => {
+ expect(component).toBeTruthy()
+ })
+
+ it('should set fieldValues$ observable for empty filters', async () => {
+ const fieldValues = await firstValueFrom(component.fieldValues$)
+ expect(fieldValues).toEqual([])
+ })
+
+ describe('fieldValues$', () => {
+ beforeEach(() => {
+ fieldsService.getFieldType = jest.fn(
+ (field: 'changeDate' | 'user') =>
+ (field === 'changeDate' ? 'dateRange' : 'values') as FieldType
+ )
+ fieldsService.readFieldValuesFromFilters = jest.fn(() =>
+ of(FIELD_VALUES_FROM_FILTERS_MOCK)
+ )
+ ;(searchFacade.searchFilters$ as BehaviorSubject).next({})
+ })
+ it('should set fieldValues$ observable for user values filters', async () => {
+ component.fieldName = 'user'
+ const fieldValues = await firstValueFrom(component.fieldValues$)
+ expect(fieldValues).toEqual([
+ {
+ value: 'admin|admin|admin|Administrator',
+ label: 'admin admin',
+ },
+ {
+ value: 'barbie|Roberts|Barbara|UserAdmin',
+ label: 'Barbara Roberts',
+ },
+ ])
+ })
+ it('should set fieldValues$ observable for changeDate dateRange filters', async () => {
+ component.fieldName = 'changeDate'
+ fixture.detectChanges()
+ const fieldValues = await firstValueFrom(component.fieldValues$)
+ expect(fieldValues).toEqual([
+ {
+ value: {
+ start: new Date('2024-11-01T00:00:00.000Z'),
+ end: new Date('2024-11-29T00:00:00.000Z'),
+ },
+ label: '01.11.2024 - 29.11.2024',
+ },
+ ])
+ })
+ })
+
+ describe('translateLabel', () => {
+ const fieldName = 'user'
+ const labelKey = `search.filters.summaryLabel.${fieldName}`
+ const fallbackKey = `search.filters.${fieldName}`
+ beforeEach(() => {
+ component.fieldName = fieldName
+ fixture.detectChanges()
+ translateService.get = jest.fn((key) => {
+ if (key === labelKey) {
+ return of(labelKey) // Simulate missing translation
+ } else if (key === fallbackKey) {
+ return of('Fallback Label')
+ }
+ return of('')
+ })
+ })
+ it('should translate label with fallback if necessary', () => {
+ component.translateLabel()
+ expect(component.translatedLabel).toBe('Fallback Label')
+ })
+ })
+})
diff --git a/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts
new file mode 100644
index 000000000..024a0217c
--- /dev/null
+++ b/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.ts
@@ -0,0 +1,118 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { CommonModule, DatePipe } from '@angular/common'
+import {
+ catchError,
+ firstValueFrom,
+ map,
+ Observable,
+ of,
+ switchMap,
+} from 'rxjs'
+import { BadgeComponent } from '@geonetwork-ui/ui/inputs'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DateRange } from '@geonetwork-ui/api/repository'
+import { FieldType, FieldValue } from '../utils/service/fields'
+import { SearchFacade } from '../state/search.facade'
+import { SearchService } from '../utils/service/search.service'
+import { FieldsService } from '../utils/service/fields.service'
+import { formatUserInfo } from '@geonetwork-ui/util/shared'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+
+marker('search.filters.summaryLabel.user')
+marker('search.filters.summaryLabel.changeDate')
+
+interface DisplayedValue {
+ label: string
+ value: FieldValue | DateRange
+}
+
+@Component({
+ selector: 'gn-ui-search-filters-summary-item',
+ standalone: true,
+ imports: [CommonModule, TranslateModule, BadgeComponent],
+ templateUrl: './search-filters-summary-item.component.html',
+ styleUrls: ['./search-filters-summary-item.component.css'],
+ providers: [DatePipe],
+})
+export class SearchFiltersSummaryItemComponent implements OnInit {
+ @Input() fieldName: string
+ fieldType: FieldType
+ translatedLabel: string
+
+ fieldValues$ = this.searchFacade.searchFilters$.pipe(
+ switchMap((filters) =>
+ this.fieldsService.readFieldValuesFromFilters(filters)
+ ),
+ map((fieldValues) =>
+ Array.isArray(fieldValues[this.fieldName])
+ ? (fieldValues[this.fieldName] as FieldValue[])
+ : ([fieldValues[this.fieldName]] as FieldValue[])
+ ),
+ map(
+ (fieldValues) => this.getReadableValues(fieldValues) as DisplayedValue[]
+ ),
+ catchError(() => of([]))
+ ) as Observable
+
+ constructor(
+ private searchFacade: SearchFacade,
+ private searchService: SearchService,
+ private fieldsService: FieldsService,
+ private datePipe: DatePipe,
+ private translate: TranslateService
+ ) {}
+
+ ngOnInit() {
+ this.fieldType = this.fieldsService.getFieldType(this.fieldName)
+ this.translateLabel()
+ }
+
+ translateLabel() {
+ const labelKey = `search.filters.summaryLabel.${this.fieldName}`
+ const fallbackKey = `search.filters.${this.fieldName}`
+ this.translate.get(labelKey).subscribe((value: string) => {
+ if (value === labelKey) {
+ this.translate.get(fallbackKey).subscribe((fallbackValue: string) => {
+ this.translatedLabel = fallbackValue
+ })
+ } else {
+ this.translatedLabel = value
+ }
+ })
+ }
+
+ getReadableValues(fieldValues: FieldValue[] | DateRange[]): DisplayedValue[] {
+ return fieldValues.map((value) => {
+ if (this.fieldType === 'dateRange') {
+ return {
+ value,
+ label: `${this.datePipe.transform(
+ value.start,
+ 'dd.MM.yyyy'
+ )} - ${this.datePipe.transform(value.end, 'dd.MM.yyyy')}`,
+ }
+ } else if (this.fieldName === 'user') {
+ return { value, label: formatUserInfo(value) }
+ } else {
+ return { value, label: value }
+ }
+ })
+ }
+
+ async removeFilterValue(fieldValue: FieldValue | DateRange) {
+ const currentFieldValues: DisplayedValue[] = await firstValueFrom(
+ this.fieldValues$
+ )
+ const updatedFieldValues = currentFieldValues
+ .filter(
+ (displayedValue: DisplayedValue) => displayedValue.value !== fieldValue
+ )
+ .map((displayedValue: DisplayedValue) => displayedValue.value)
+
+ this.fieldsService
+ .buildFiltersFromFieldValues({
+ [this.fieldName]: updatedFieldValues as FieldValue[],
+ })
+ .subscribe((filters) => this.searchService.updateFilters(filters))
+ }
+}
diff --git a/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.css b/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.html b/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.html
new file mode 100644
index 000000000..289a9d994
--- /dev/null
+++ b/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+