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

package/src/libs/feature/search/src/lib/feature-search.module.ts

@@ -14,15 +14,21 @@ import { SearchEffects } from './state/effects'
 import { initialState, reducer, SEARCH_FEATURE_KEY } from './state/reducer'
 import { ResultsHitsContainerComponent } from './results-hits-number/results-hits.container.component'
 import { SearchStateContainerDirective } from './state/container/search-state.container.directive'
-import { AutocompleteComponent, UiInputsModule } from '../../../../../libs/ui/inputs/src'
+import {
+  AutocompleteComponent,
+  DateRangeDropdownComponent,
+  UiInputsModule,
+} from '../../../../../libs/ui/inputs/src'
 import { NgModule } from '@angular/core'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
-import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
-import { MatIconModule } from '@angular/material/icon'
+import { ErrorComponent, UiElementsModule } from '../../../../../libs/ui/elements/src'
 import { FilterDropdownComponent } from './filter-dropdown/filter-dropdown.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import {
+  SpinningLoaderComponent,
+  UiWidgetsModule,
+} from '../../../../../libs/ui/widgets/src'
 import { RecordsRepositoryInterface } from '../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { Gn4Repository } from '../../../../../libs/api/repository/src'
+import { FavoriteStarComponent } from './favorites/favorite-star/favorite-star.component'
 
 @NgModule({
   declarations: [
@@ -33,7 +39,6 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     ResultsListContainerComponent,
     ResultsHitsContainerComponent,
     SearchStateContainerDirective,
-    FavoriteStarComponent,
     FilterDropdownComponent,
   ],
   imports: [
@@ -49,9 +54,12 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     UiInputsModule,
     UiElementsModule,
     FacetsModule,
-    MatIconModule,
     UiWidgetsModule,
     AutocompleteComponent,
+    SpinningLoaderComponent,
+    ErrorComponent,
+    FavoriteStarComponent,
+    DateRangeDropdownComponent,
   ],
   exports: [
     SortByComponent,
@@ -62,7 +70,6 @@ import { Gn4Repository } from '../../../../../libs/api/repository/src'
     ResultsHitsContainerComponent,
     FacetsModule,
     SearchStateContainerDirective,
-    FavoriteStarComponent,
     FilterDropdownComponent,
   ],
   providers: [

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.html

@@ -1,11 +1,21 @@
-<gn-ui-dropdown-multiselect
-  class="w-full"
+<gn-ui-date-range-dropdown
+  *ngIf="fieldType === 'dateRange'; else multiselect"
   [title]="title"
-  [maxRows]="6"
-  [choices]="choices$ | async"
-  [selected]="selected$ | async"
-  [allowSearch]="true"
-  (selectValues)="onSelectedValues($event)"
-  [attr.data-cy-field]="fieldName"
->
-</gn-ui-dropdown-multiselect>
+  [startDate]="(selectedDateRange$ | async)?.start"
+  [endDate]="(selectedDateRange$ | async)?.end"
+  (startDateChange)="onStartDateChange($event)"
+  (endDateChange)="onEndDateChange($event)"
+></gn-ui-date-range-dropdown>
+<ng-template #multiselect>
+  <gn-ui-dropdown-multiselect
+    class="w-full"
+    [title]="title"
+    [maxRows]="6"
+    [choices]="(choices$ | async) || []"
+    [selected]="selected$ | async"
+    [allowSearch]="true"
+    (selectValues)="onSelectedValues($event)"
+    [attr.data-cy-field]="fieldName"
+  >
+  </gn-ui-dropdown-multiselect>
+</ng-template>

package/src/libs/feature/search/src/lib/filter-dropdown/filter-dropdown.component.ts

@@ -10,7 +10,12 @@ import { catchError, filter, map, startWith } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchService } from '../utils/service/search.service'
 import { FieldsService } from '../utils/service/fields.service'
-import { FieldAvailableValue, FieldValue } from '../utils/service/fields'
+import {
+  FieldAvailableValue,
+  FieldType,
+  FieldValue,
+} from '../utils/service/fields'
+import { DateRange } from '../../../../../../libs/api/repository/src'
 
 @Component({
   selector: 'gn-ui-filter-dropdown',
@@ -22,6 +27,8 @@ export class FilterDropdownComponent implements OnInit {
   @Input() fieldName: string
   @Input() title: string
 
+  fieldType: FieldType
+  dateRange: DateRange
   choices$: Observable<Choice[]>
   selected$ = this.searchFacade.searchFilters$.pipe(
     switchMap((filters) =>
@@ -33,6 +40,10 @@ export class FilterDropdownComponent implements OnInit {
     catchError(() => of([]))
   ) as Observable<FieldValue[]>
 
+  selectedDateRange$ = this.selected$.pipe(
+    map((selectedDateRange) => selectedDateRange as DateRange)
+  ) as Observable<DateRange>
+
   onSelectedValues(values: unknown[]) {
     this.fieldsService
       .buildFiltersFromFieldValues({ [this.fieldName]: values as FieldValue[] })
@@ -46,6 +57,7 @@ export class FilterDropdownComponent implements OnInit {
   ) {}
 
   ngOnInit() {
+    this.fieldType = this.fieldsService.getFieldType(this.fieldName)
     this.choices$ = this.fieldsService.getAvailableValues(this.fieldName).pipe(
       startWith([] as FieldAvailableValue[]),
       map((values) =>
@@ -57,4 +69,23 @@ export class FilterDropdownComponent implements OnInit {
       catchError(() => of([]))
     )
   }
+
+  onStartDateChange(start: Date) {
+    if (!start) return
+    this.dateRange = { ...this.dateRange, start }
+  }
+
+  onEndDateChange(end: Date) {
+    if (!end) return
+    this.dateRange = { ...this.dateRange, end }
+    if (this.dateRange.start && this.dateRange.end) {
+      this.fieldsService
+        .buildFiltersFromFieldValues({
+          [this.fieldName]: this.dateRange,
+        })
+        .subscribe((filters) => {
+          return this.searchService.updateFilters(filters)
+        })
+    }
+  }
 }

package/src/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html

@@ -6,6 +6,7 @@
   (inputSubmitted)="handleInputSubmission($event)"
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
-  [clearOnSelection]="true"
+  [preventCompleteOnSelection]="true"
   [autoFocus]="autoFocus"
+  [allowSubmit]="true"
 ></gn-ui-autocomplete>

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.html

@@ -9,12 +9,7 @@
     [recordUrlGetter]="recordUrlGetter"
     (mdSelect)="onMetadataSelection($event)"
   ></gn-ui-results-list>
-  <ng-container
-    *ngIf="
-      (facade.isLoading$ | async) === false &&
-      (facade.isEndOfResults$ | async) === false
-    "
-  >
+  <ng-container *ngIf="allowShowMore$ | async">
     <div class="show-more h-[100px] pt-[30px]" *ngIf="showMore === 'button'">
       <gn-ui-button
         data-cy="addMoreBtn"

package/src/libs/feature/search/src/lib/results-list/results-list.container.component.ts

@@ -7,7 +7,7 @@ import {
   Optional,
   Output,
 } from '@angular/core'
-import { Observable, tap } from 'rxjs'
+import { combineLatest, Observable, tap } from 'rxjs'
 import { filter, map } from 'rxjs/operators'
 import { SearchFacade } from '../state/search.facade'
 import { SearchError } from '../state/reducer'
@@ -39,6 +39,7 @@ export class ResultsListContainerComponent implements OnInit {
   errorCode$: Observable<number>
   errorMessage$: Observable<string>
   pipelineForQualityScoreActivated: Observable<boolean>
+  allowShowMore$: Observable<boolean>
 
   errorTypes = ErrorType
   recordUrlGetter = this.getRecordUrl.bind(this)
@@ -81,6 +82,16 @@ export class ResultsListContainerComponent implements OnInit {
       filter((error) => error !== null),
       map((error) => error.message)
     )
+    this.allowShowMore$ = combineLatest([
+      this.facade.isLoading$,
+      this.facade.currentPage$,
+      this.facade.totalPages$,
+    ]).pipe(
+      map(
+        ([loading, currentPage, totalPages]) =>
+          !loading && currentPage < totalPages
+      )
+    )
   }
 
   onMetadataSelection(metadata: CatalogRecord): void {

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.html

@@ -1,9 +1,15 @@
 <gn-ui-results-table
-  [records]="records$ | async"
-  [recordHasDraft]="hasDraft"
+  *ngIf="searchFacade.results$ | async as records"
+  [records]="records"
+  [hasDraft]="hasDraft"
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
+  [isUnsavedDraft]="isUnsavedDraft"
+  [canDelete]="canDelete"
+  [canDuplicate]="canDuplicate"
   (recordClick)="handleRecordClick($event)"
+  (duplicateRecord)="handleDuplicateRecord($event)"
+  (deleteRecord)="handleDeleteRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

package/src/libs/feature/search/src/lib/results-table/results-table-container.component.ts

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnDestroy,
+  Output,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SearchFacade } from '../state/search.facade'
 import { SelectionService } from '../../../../../../libs/api/repository/src'
@@ -6,6 +12,9 @@ import { SearchService } from '../utils/service/search.service'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 import { ResultsTableComponent } from '../../../../../../libs/ui/search/src'
 import { CommonModule } from '@angular/common'
+import { Subscription } from 'rxjs'
+import { NotificationsService } from '../../../../../../libs/feature/notifications/src'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-results-table-container',
@@ -14,27 +23,83 @@ import { CommonModule } from '@angular/common'
   standalone: true,
   imports: [CommonModule, ResultsTableComponent],
 })
-export class ResultsTableContainerComponent {
+export class ResultsTableContainerComponent implements OnDestroy {
+  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+
+  subscription = new Subscription()
 
-  records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
   sortBy$ = this.searchFacade.sortBy$
 
   hasDraft = (record: CatalogRecord): boolean =>
     this.recordsRepository.recordHasDraft(record.uniqueIdentifier)
 
+  isUnsavedDraft = (record: CatalogRecord): boolean =>
+    this.recordsRepository.isRecordNotYetSaved(record.uniqueIdentifier)
+
   constructor(
-    private searchFacade: SearchFacade,
+    protected searchFacade: SearchFacade,
     private searchService: SearchService,
     private selectionService: SelectionService,
-    private recordsRepository: RecordsRepositoryInterface
+    private recordsRepository: RecordsRepositoryInterface,
+    private notificationsService: NotificationsService,
+    private translateService: TranslateService
   ) {}
 
   handleRecordClick(item: unknown) {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  async handleDeleteRecord(item: unknown) {
+    const uniqueIdentifier = (item as CatalogRecord).uniqueIdentifier
+    this.subscription.add(
+      this.recordsRepository.deleteRecord(uniqueIdentifier).subscribe({
+        next: () => {
+          this.recordsRepository.clearRecordDraft(uniqueIdentifier)
+          this.searchFacade.requestNewResults()
+          this.notificationsService.showNotification(
+            {
+              type: 'success',
+              title: this.translateService.instant(
+                'editor.record.deleteSuccess.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteSuccess.body'
+              )}`,
+            },
+            2500
+          )
+        },
+        error: (error) => {
+          this.notificationsService.showNotification(
+            {
+              type: 'error',
+              title: this.translateService.instant(
+                'editor.record.deleteError.title'
+              ),
+              text: `${this.translateService.instant(
+                'editor.record.deleteError.body'
+              )} ${error}`,
+              closeMessage: this.translateService.instant(
+                'editor.record.deleteError.closeMessage'
+              ),
+            },
+            undefined,
+            error
+          )
+        },
+      })
+    )
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }
@@ -46,4 +111,8 @@ export class ResultsTableContainerComponent {
       this.selectionService.selectRecords(records)
     }
   }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe()
+  }
 }

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

@@ -0,0 +1,17 @@
+<div
+  class="flex flex-row py-3 px-4 gap-4 overflow-hidden grow border-[1px] border-gray-200"
+  *ngIf="searchFilterActive$ | async"
+>
+  <div class="flex flex-row flex-wrap items-center gap-2">
+    <gn-ui-search-filters-summary-item
+      *ngFor="let field of searchFields; let i = index"
+      [fieldName]="field"
+    ></gn-ui-search-filters-summary-item>
+  </div>
+  <button
+    class="bg-white text-black font-bold ml-auto"
+    (click)="clearFilters()"
+  >
+    {{ 'search.filters.clear' | translate }}
+  </button>
+</div>

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(','),