geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.4e8752d34

package/src/libs/feature/search/src/lib/search-filters-summary/search-filters-summary.component.ts

@@ -0,0 +1,78 @@
+import { Component, Inject, Input, OnInit, Optional } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { first, map, Observable } from 'rxjs'
+import { SearchFiltersSummaryItemComponent } from '../search-filters-summary-item/search-filters-summary-item.component'
+import { TranslateModule } from '@ngx-translate/core'
+import { SearchFacade } from '../state/search.facade'
+import { SearchService } from '../utils/service/search.service'
+import { FieldFilters } from '../../../../../../libs/common/domain/src/lib/model/search'
+import { InjectionToken } from '@angular/core'
+
+export const FILTER_SUMMARY_IGNORE_LIST = new InjectionToken<string[]>(
+  'FILTER_SUMMARY_IGNORE_LIST'
+)
+@Component({
+  selector: 'gn-ui-search-filters-summary',
+  imports: [CommonModule, SearchFiltersSummaryItemComponent, TranslateModule],
+  templateUrl: './search-filters-summary.component.html',
+  styleUrls: ['./search-filters-summary.component.css'],
+  standalone: true,
+})
+export class SearchFiltersSummaryComponent implements OnInit {
+  @Input() searchFields: string[] = []
+  filterSummaryIgnoreList: string[]
+
+  searchFilterActive$: Observable<boolean>
+
+  constructor(
+    private searchFacade: SearchFacade,
+    private searchService: SearchService,
+    @Optional()
+    @Inject(FILTER_SUMMARY_IGNORE_LIST)
+    filterSummaryIgnoreList: string[]
+  ) {
+    const defaultIgnoreList = ['any']
+    this.filterSummaryIgnoreList = [
+      ...defaultIgnoreList,
+      ...(filterSummaryIgnoreList ?? []),
+    ]
+  }
+
+  ngOnInit(): void {
+    this.searchFilterActive$ = this.searchFacade.searchFilters$.pipe(
+      map((filters) => this.hasNonEmptyValues(filters))
+    )
+  }
+
+  hasNonEmptyValues(filters: FieldFilters): boolean {
+    const filteredFilters = {}
+    for (const [key, value] of Object.entries(filters)) {
+      if (!this.filterSummaryIgnoreList.includes(key)) {
+        filteredFilters[key] = value
+      }
+    }
+    return Object.values(filteredFilters).some(
+      (value) =>
+        value !== undefined &&
+        (typeof value !== 'object' ||
+          (typeof value === 'object' && Object.keys(value).length > 0))
+    )
+  }
+
+  clearFilters() {
+    this.searchFacade.searchFilters$
+      .pipe(
+        first(),
+        map((filters) => {
+          const newFilters = { ...filters }
+          Object.keys(newFilters).forEach((key) => {
+            if (!this.filterSummaryIgnoreList.includes(key)) {
+              delete newFilters[key]
+            }
+          })
+          return newFilters
+        })
+      )
+      .subscribe((filters) => this.searchService.setFilters(filters))
+  }
+}

package/src/libs/feature/search/src/lib/search-filters-summary-item/search-filters-summary-item.component.html

@@ -0,0 +1,20 @@
+<div
+  *ngIf="(fieldValues$ | async)?.length > 0"
+  class="flex flex-row items-center gap-2"
+>
+  <span class="text-gray-800" data-cy="filterSummaryLabel">{{
+    translatedLabel
+  }}</span>
+  <gn-ui-badge
+    *ngFor="let fieldValue of fieldValues$ | async"
+    class="gn-ui-badge"
+    [style.--gn-ui-badge-rounded]="'8px'"
+    [style.--gn-ui-badge-padding]="'3px 4px'"
+    [style.--gn-ui-badge-text-color]="'black'"
+    [style.--gn-ui-badge-background-color]="'#F2F2F2'"
+    [style.--gn-ui-badge-font-weight]="'700'"
+    [removable]="true"
+    (badgeRemoveClicked)="removeFilterValue(fieldValue.value)"
+    >{{ fieldValue.label }}</gn-ui-badge
+  >
+</div>

package/src/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 '../../../../../../libs/ui/inputs/src'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DateRange } from '../../../../../../libs/api/repository/src'
+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 '../../../../../../libs/util/shared/src'
+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<DisplayedValue[]>
+
+  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))
+  }
+}

package/src/libs/feature/search/src/lib/sort-by/sort-by.component.ts

@@ -28,6 +28,10 @@ export class SortByComponent implements OnInit {
       label: marker('results.sortBy.dateStamp'),
       value: SortByEnum.CREATE_DATE.join(','),
     },
+    {
+      label: marker('results.sortBy.changeDate'),
+      value: SortByEnum.CHANGE_DATE.join(','),
+    },
     {
       label: marker('results.sortBy.popularity'),
       value: SortByEnum.POPULARITY.join(','),

package/src/libs/feature/search/src/lib/state/actions.ts

@@ -56,7 +56,10 @@ export class AddSearch implements Action {
 export class SetConfigFilters extends AbstractAction implements Action {
   readonly type = SET_CONFIG_FILTERS
 
-  constructor(public payload: FieldFilters, id?: string) {
+  constructor(
+    public payload: FieldFilters,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -64,7 +67,10 @@ export class SetConfigFilters extends AbstractAction implements Action {
 export class SetFilters extends AbstractAction implements Action {
   readonly type = SET_FILTERS
 
-  constructor(public payload: FieldFilters, id?: string) {
+  constructor(
+    public payload: FieldFilters,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -72,7 +78,10 @@ export class SetFilters extends AbstractAction implements Action {
 export class UpdateFilters extends AbstractAction implements Action {
   readonly type = UPDATE_FILTERS
 
-  constructor(public payload: FieldFilters, id?: string) {
+  constructor(
+    public payload: FieldFilters,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -80,27 +89,39 @@ export class UpdateFilters extends AbstractAction implements Action {
 export class SetSearch extends AbstractAction implements Action {
   readonly type = SET_SEARCH
 
-  constructor(public payload: SearchStateParams, id?: string) {
+  constructor(
+    public payload: SearchStateParams,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class SetFavoritesOnly extends AbstractAction implements Action {
   readonly type = SET_FAVORITES_ONLY
-  constructor(public favoritesOnly: boolean, id?: string) {
+  constructor(
+    public favoritesOnly: boolean,
+    id?: string
+  ) {
     super(id)
   }
 }
 export class SetSortBy extends AbstractAction implements Action {
   readonly type = SET_SORT_BY
-  constructor(public sortBy: SortByField, id?: string) {
+  constructor(
+    public sortBy: SortByField,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class SetPageSize extends AbstractAction implements Action {
   readonly type = SET_PAGE_SIZE
-  constructor(public limit: number, id?: string) {
+  constructor(
+    public limit: number,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -108,7 +129,10 @@ export class SetPageSize extends AbstractAction implements Action {
 export class Paginate extends AbstractAction implements Action {
   readonly type = PAGINATE
   // Note: page number is one-based!!
-  constructor(public pageNumber: number, id?: string) {
+  constructor(
+    public pageNumber: number,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -116,7 +140,10 @@ export class Paginate extends AbstractAction implements Action {
 export class SetResultsLayout extends AbstractAction implements Action {
   readonly type = SET_RESULTS_LAYOUT
 
-  constructor(public resultsLayout: string, id?: string) {
+  constructor(
+    public resultsLayout: string,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -124,7 +151,10 @@ export class SetResultsLayout extends AbstractAction implements Action {
 export class AddResults extends AbstractAction implements Action {
   readonly type = ADD_RESULTS
 
-  constructor(public payload: CatalogRecord[], id?: string) {
+  constructor(
+    public payload: CatalogRecord[],
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -156,35 +186,50 @@ export class RequestNewResults extends AbstractAction implements Action {
 export class SetResultsAggregations extends AbstractAction implements Action {
   readonly type = SET_RESULTS_AGGREGATIONS
 
-  constructor(public payload: Aggregations, id?: string) {
+  constructor(
+    public payload: Aggregations,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class SetResultsHits extends AbstractAction implements Action {
   readonly type = SET_RESULTS_HITS
-  constructor(public payload: number, id?: string) {
+  constructor(
+    public payload: number,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class SetConfigAggregations extends AbstractAction implements Action {
   readonly type = SET_CONFIG_AGGREGATIONS
-  constructor(public payload: AggregationsParams, id?: string) {
+  constructor(
+    public payload: AggregationsParams,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class UpdateConfigAggregations extends AbstractAction implements Action {
   readonly type = UPDATE_CONFIG_AGGREGATIONS
-  constructor(public payload: AggregationsParams, id?: string) {
+  constructor(
+    public payload: AggregationsParams,
+    id?: string
+  ) {
     super(id)
   }
 }
 
 export class SetConfigRequestFields extends AbstractAction implements Action {
   readonly type = SET_CONFIG_REQUEST_FIELDS
-  constructor(public payload: FieldName[], id?: string) {
+  constructor(
+    public payload: FieldName[],
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -226,7 +271,11 @@ export class PatchResultsAggregations extends AbstractAction implements Action {
 export class SetError extends AbstractAction implements Action {
   readonly type = SET_ERROR
 
-  constructor(public code: number, public message: string, id?: string) {
+  constructor(
+    public code: number,
+    public message: string,
+    id?: string
+  ) {
     super(id)
   }
 }
@@ -241,7 +290,10 @@ export class ClearError extends AbstractAction implements Action {
 
 export class SetSpatialFilterEnabled extends AbstractAction implements Action {
   readonly type = SET_SPATIAL_FILTER_ENABLED
-  constructor(public enabled: boolean, id?: string) {
+  constructor(
+    public enabled: boolean,
+    id?: string
+  ) {
     super(id)
   }
 }

package/src/libs/feature/search/src/lib/state/effects.ts

@@ -154,7 +154,7 @@ export class SearchEffects {
             ([state, favorites, geometry]: [
               SearchStateSearch,
               string[],
-              Geometry | undefined
+              Geometry | undefined,
             ]) => {
               const { currentPage, pageSize, sort } = state.params
               const filters = {

package/src/libs/feature/search/src/lib/state/search.facade.ts

@@ -38,8 +38,6 @@ import {
   getSearchResultsLoading,
   getSearchSortBy,
   getSpatialFilterEnabled,
-  isBeginningOfResults,
-  isEndOfResults,
   totalPages,
 } from './selectors'
 import { FILTER_GEOMETRY } from '../filter-geometry.token'
@@ -60,8 +58,6 @@ export class SearchFacade {
   layout$: Observable<string>
   sortBy$: Observable<SortByField>
   isLoading$: Observable<boolean>
-  isBeginningOfResults$: Observable<boolean>
-  isEndOfResults$: Observable<boolean>
   totalPages$: Observable<number>
   currentPage$: Observable<number>
   pageSize$: Observable<number>
@@ -101,10 +97,6 @@ export class SearchFacade {
     this.isLoading$ = this.store.pipe(select(getSearchResultsLoading, searchId))
     this.searchFilters$ = this.store.pipe(select(getSearchFilters, searchId))
     this.resultsHits$ = this.store.pipe(select(getSearchResultsHits, searchId))
-    this.isBeginningOfResults$ = this.store.pipe(
-      select(isBeginningOfResults, searchId)
-    )
-    this.isEndOfResults$ = this.store.pipe(select(isEndOfResults, searchId))
     this.totalPages$ = this.store.pipe(select(totalPages, searchId))
     this.currentPage$ = this.store.pipe(select(currentPage, searchId))
     this.pageSize$ = this.store.pipe(select(getPageSize, searchId))

package/src/libs/feature/search/src/lib/state/selectors.ts

@@ -50,24 +50,6 @@ export const getSearchResultsHits = createSelector(
   (state: SearchStateSearch) => state.results.count
 )
 
-export const isBeginningOfResults = createSelector(
-  getSearchStateSearch,
-  (state: SearchStateSearch) => {
-    return state.params.currentPage === 0
-  }
-)
-
-export const isEndOfResults = createSelector(
-  getSearchStateSearch,
-  (state: SearchStateSearch) => {
-    return (
-      state.params.currentPage * state.params.pageSize +
-        state.params.pageSize >=
-      state.results.count
-    )
-  }
-)
-
 export const totalPages = createSelector(
   getSearchStateSearch,
   (state: SearchStateSearch) => {

package/src/libs/feature/search/src/lib/utils/service/fields.service.ts

@@ -1,6 +1,7 @@
 import { Injectable, Injector } from '@angular/core'
 import {
   AbstractSearchField,
+  DateRangeSearchField,
   FieldValue,
   FullTextSearchField,
   IsSpatialSearchField,
@@ -10,14 +11,16 @@ import {
   OwnerSearchField,
   SimpleSearchField,
   TranslatedSearchField,
+  UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
 import { map } from 'rxjs/operators'
 import { FieldFilters } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { DateRange } from '../../../../../../../libs/api/repository/src'
 
 // key is the field name
-export type FieldValues = Record<string, FieldValue[] | FieldValue>
+export type FieldValues = Record<string, FieldValue[] | FieldValue | DateRange>
 
 marker('search.filters.format')
 marker('search.filters.inspireKeyword')
@@ -33,6 +36,8 @@ marker('search.filters.topic')
 marker('search.filters.contact')
 marker('search.filters.producerOrg')
 marker('search.filters.publisherOrg')
+marker('search.filters.user')
+marker('search.filters.changeDate')
 
 @Injectable({
   providedIn: 'root',
@@ -84,6 +89,8 @@ export class FieldsService {
       'asc',
       'key'
     ),
+    user: new UserSearchField(this.injector),
+    changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {
@@ -98,13 +105,20 @@ export class FieldsService {
     return this.fields[fieldName].getAvailableValues()
   }
 
-  private getFiltersForValues(fieldName: string, values: FieldValue[]) {
+  private getFiltersForValues(
+    fieldName: string,
+    values: FieldValue[] | DateRange[]
+  ) {
     return this.fields[fieldName].getFiltersForValues(values)
   }
   private getValuesForFilters(fieldName: string, filters: FieldFilters) {
     return this.fields[fieldName].getValuesForFilter(filters)
   }
 
+  getFieldType(fieldName: string) {
+    return this.fields[fieldName].getType()
+  }
+
   buildFiltersFromFieldValues(
     fieldValues: FieldValues
   ): Observable<FieldFilters> {
@@ -116,7 +130,10 @@ export class FieldsService {
       const values = Array.isArray(fieldValues[fieldName])
         ? fieldValues[fieldName]
         : [fieldValues[fieldName]]
-      return this.getFiltersForValues(fieldName, values as FieldValue[])
+      return this.getFiltersForValues(
+        fieldName,
+        values as FieldValue[] | DateRange[]
+      )
     })
     return forkJoin(filtersByField$).pipe(
       map((filters) =>