geonetwork-ui 2.11.0-dev.ca7fb6b05 → 2.11.0-dev.cf22e64cf

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

@@ -1,5 +1,5 @@
 import { Component, Input, OnInit, inject } from '@angular/core'
-import { CommonModule, DatePipe } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   catchError,
   firstValueFrom,
@@ -15,11 +15,15 @@ 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 { DateService, formatUserInfo } from '../../../../../../libs/util/shared/src'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 marker('search.filters.summaryLabel.user')
 marker('search.filters.summaryLabel.changeDate')
+marker('search.filters.summaryLabel.resourceCreationRevisionDate')
+marker('search.filters.summaryLabel.temporalExtent')
+
+const OPEN_BOUND = '…'
 
 interface DisplayedValue {
   label: string
@@ -32,13 +36,12 @@ interface DisplayedValue {
   imports: [CommonModule, BadgeComponent],
   templateUrl: './search-filters-summary-item.component.html',
   styleUrls: ['./search-filters-summary-item.component.css'],
-  providers: [DatePipe],
 })
 export class SearchFiltersSummaryItemComponent implements OnInit {
   private searchFacade = inject(SearchFacade)
   private searchService = inject(SearchService)
   private fieldsService = inject(FieldsService)
-  private datePipe = inject(DatePipe)
+  private dateService = inject(DateService)
   private translate = inject(TranslateService)
 
   @Input() fieldName: string
@@ -82,12 +85,10 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
   getReadableValues(fieldValues: FieldValue[] | DateRange[]): DisplayedValue[] {
     return fieldValues.map((value) => {
       if (this.fieldType === 'dateRange') {
+        const { start, end } = value as DateRange
         return {
           value,
-          label: `${this.datePipe.transform(
-            value.start,
-            'dd.MM.yyyy'
-          )} - ${this.datePipe.transform(value.end, 'dd.MM.yyyy')}`,
+          label: `${this.formatBound(start)} - ${this.formatBound(end)}`,
         }
       } else if (this.fieldName === 'user') {
         return { value, label: formatUserInfo(value) }
@@ -97,6 +98,16 @@ export class SearchFiltersSummaryItemComponent implements OnInit {
     })
   }
 
+  private formatBound(date: Date | undefined): string {
+    return date
+      ? this.dateService.formatDate(date, {
+          day: '2-digit',
+          month: '2-digit',
+          year: 'numeric',
+        })
+      : OPEN_BOUND
+  }
+
   async removeFilterValue(fieldValue: FieldValue | DateRange) {
     const currentFieldValues: DisplayedValue[] = await firstValueFrom(
       this.fieldValues$

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

@@ -8,7 +8,6 @@ import {
   SortByField,
 } from '../../../../../../libs/common/domain/src/lib/model/search'
 import { DEFAULT_PAGE_SIZE, FIELDS_SUMMARY } from '../constants'
-import { getOptionalSearchConfig } from '../../../../../../libs/util/app-config/src'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 
 export const SEARCH_FEATURE_KEY = 'searchState'
@@ -56,9 +55,7 @@ export const initSearch = (): SearchStateSearch => {
     },
     params: {
       filters: {},
-      pageSize: getOptionalSearchConfig()?.LIMIT
-        ? getOptionalSearchConfig().LIMIT
-        : DEFAULT_PAGE_SIZE,
+      pageSize: DEFAULT_PAGE_SIZE,
       currentPage: 0,
       favoritesOnly: false,
       useSpatialFilter: true,

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

@@ -2,6 +2,7 @@ import { Injectable, Injector, inject } from '@angular/core'
 import {
   AbstractSearchField,
   AvailableServicesField,
+  BoundingBoxSearchField,
   DateRangeSearchField,
   FieldValue,
   FullTextSearchField,
@@ -10,6 +11,7 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  ResourceCreationRevisionDateSearchField,
   ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
@@ -42,7 +44,9 @@ marker('search.filters.producerOrg')
 marker('search.filters.publisherOrg')
 marker('search.filters.user')
 marker('search.filters.changeDate')
-
+marker('search.filters.resourceCreationRevisionDate')
+marker('search.filters.temporalExtent')
+marker('search.filters.spatialExtent')
 @Injectable({
   providedIn: 'root',
 })
@@ -94,7 +98,17 @@ export class FieldsService {
     ),
     user: new UserSearchField(this.injector),
     changeDate: new DateRangeSearchField('changeDate', this.injector, 'desc'),
+    resourceCreationRevisionDate: new ResourceCreationRevisionDateSearchField(
+      this.injector,
+      'desc'
+    ),
+    temporalExtent: new DateRangeSearchField(
+      'resourceTemporalExtentDateRange',
+      this.injector,
+      'desc'
+    ),
     availableServices: new AvailableServicesField(this.injector),
+    spatialExtent: new BoundingBoxSearchField('spatialExtent', this.injector),
   } as Record<string, AbstractSearchField>
 
   get supportedFields() {

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

@@ -20,10 +20,14 @@ import {
   isDateRange,
   METADATA_LANGUAGE,
 } from '../../../../../../../libs/api/repository/src'
-import { formatUserInfo } from '../../../../../../../libs/util/shared/src'
+import {
+  BoundingBox,
+  formatUserInfo,
+  isBoundingBox,
+} from '../../../../../../../libs/util/shared/src'
 import { PossibleResourceTypes } from '../../../../../../../libs/api/metadata-converter/src'
 
-export type FieldType = 'values' | 'dateRange'
+export type FieldType = 'values' | 'dateRange' | 'spatialExtent'
 
 export type FieldValue = string | number
 export interface FieldAvailableValue {
@@ -431,6 +435,61 @@ export class DateRangeSearchField extends SimpleSearchField {
   }
 }
 
+// treats a resource's creation/revision dates as an interval (its min and max), so a record matches
+// when that interval intersects the filter range, not just when a single date falls inside it
+export class ResourceCreationRevisionDateSearchField extends DateRangeSearchField {
+  constructor(injector: Injector, order: 'asc' | 'desc' = 'desc') {
+    super('resourceCreationRevisionDate', injector, order)
+    const dateSourceFields = [
+      'creationDateForResource',
+      'revisionDateForResource',
+    ]
+    const collectSortedDates = dateSourceFields
+      .map(
+        (field) => `if (doc.containsKey('${field}')) {
+  for (def date : doc['${field}']) { dates.add(date.millis); }
+}`
+      )
+      .join('\n')
+
+    this.esService.registerRuntimeField(
+      'resourceCreationRevisionDateMin',
+      `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[0]); }`,
+      'date'
+    )
+    this.esService.registerRuntimeField(
+      'resourceCreationRevisionDateMax',
+      `def dates = [];
+${collectSortedDates}
+if (dates.length > 0) { dates.sort(null); emit(dates[dates.length - 1]); }`,
+      'date'
+    )
+  }
+}
+
+export class BoundingBoxSearchField extends SimpleSearchField {
+  getAvailableValues(): Observable<FieldAvailableValue[]> {
+    return of([])
+  }
+
+  getFiltersForValues(values: FieldValue[]): Observable<FieldFilters> {
+    return of({
+      [this.esFieldName]: values.map(Number) as BoundingBox,
+    })
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.esFieldName]
+    return of(isBoundingBox(filter) ? filter : [])
+  }
+
+  getType(): FieldType {
+    return 'spatialExtent'
+  }
+}
+
 marker('search.filters.availableServices.view')
 marker('search.filters.availableServices.download')
 

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -128,7 +128,8 @@ export class ServiceCapabilitiesComponent implements OnInit {
       this.loading = true
       this.availableLayers = await getLayers(
         this.apiLinks[0].url.href,
-        this.apiLinks[0].accessServiceProtocol
+        this.apiLinks[0].accessServiceProtocol,
+        true
       )
       this.loading = false
       this.cdr.detectChanges()

package/src/libs/ui/inputs/src/index.ts

@@ -4,6 +4,7 @@ export * from './lib/button/button.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/checkbox/checkbox.component'
 export * from './lib/copy-text-button/copy-text-button.component'
+export * from './lib/date-adapter.providers'
 export * from './lib/date-picker/date-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'
 export * from './lib/date-range-picker/date-range-picker.component'
@@ -25,3 +26,4 @@ export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/search-feature-catalog/search-feature-catalog.component'
 export * from './lib/date-range-inputs/date-range-inputs.component'
+export * from './lib/spatial-extent-dropdown/spatial-extent-dropdown.component'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -83,7 +83,16 @@
 >
   @for (suggestion of suggestions$ | async; track suggestion) {
     <mat-option [value]="suggestion" class="p-2 suggestion text-start">
-      {{ displayWithFnInternal(suggestion) }}
+      @if (displayWithTemplate) {
+        <ng-container
+          *ngTemplateOutlet="
+            displayWithTemplate;
+            context: { $implicit: suggestion }
+          "
+        ></ng-container>
+      } @else {
+        {{ displayWithFnInternal(suggestion) }}
+      }
     </mat-option>
   }
 </mat-autocomplete>

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -11,6 +11,7 @@ import {
   OnInit,
   Output,
   SimpleChanges,
+  TemplateRef,
   ViewChild,
   inject,
 } from '@angular/core'
@@ -97,6 +98,13 @@ export class AutocompleteComponent
   @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
+  /**
+   * Custom template to render each suggestion. Takes precedence over
+   * `displayWithFn` when set.
+   */
+  @Input() displayWithTemplate?: TemplateRef<{
+    $implicit: AutocompleteItem
+  }>
 
   searching: boolean
   control = new UntypedFormControl()

package/src/libs/ui/inputs/src/lib/date-adapter.providers.ts

@@ -0,0 +1,30 @@
+import { inject, Provider } from '@angular/core'
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+} from '@angular/material/core'
+import {
+  DateFnsAdapter,
+  MAT_DATE_FNS_FORMATS,
+} from '@angular/material-date-fns-adapter'
+import { enUS } from 'date-fns/locale/en-US'
+import { DateService } from '../../../../../libs/util/shared/src'
+
+export function provideLocalizedDateAdapter(): Provider[] {
+  return [
+    { provide: MAT_DATE_LOCALE, useValue: enUS },
+    { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
+    {
+      provide: DateAdapter,
+      useFactory: () => {
+        const dateService = inject(DateService)
+        const adapter = new DateFnsAdapter()
+        dateService
+          .getDateFnsLocale()
+          .then((locale) => adapter.setLocale(locale))
+        return adapter
+      },
+    },
+  ]
+}

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -2,15 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  inject,
   Input,
   Output,
 } from '@angular/core'
-import {
-  DateAdapter,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
 import {
@@ -19,7 +13,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirCalendar } from '@ng-icons/iconoir'
-import { TranslateService } from '@ngx-translate/core'
+import { provideLocalizedDateAdapter } from '../date-adapter.providers'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -27,31 +21,16 @@ import { TranslateService } from '@ngx-translate/core'
   styleUrls: ['./date-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    MatNativeDateModule,
-    MatDatepickerModule,
-    ButtonComponent,
-    NgIconComponent,
-  ],
+  imports: [MatDatepickerModule, ButtonComponent, NgIconComponent],
   providers: [
     provideIcons({ iconoirCalendar }),
     provideNgIconsConfig({
       size: '1.5rem',
     }),
-    {
-      provide: MAT_DATE_LOCALE,
-      useFactory: (locale: string) => locale,
-    },
+    provideLocalizedDateAdapter(),
   ],
 })
 export class DatePickerComponent {
-  private dateAdapter = inject<DateAdapter<Date>>(DateAdapter)
-  private translate = inject(TranslateService)
-
   @Input() date: Date
   @Output() dateChange = new EventEmitter<Date>()
-
-  constructor() {
-    this.dateAdapter.setLocale(this.translate.getCurrentLang())
-  }
 }

package/src/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.css

@@ -1,5 +1,39 @@
-:host {
-  .mat-date-range-input-container {
-    display: none;
+mat-calendar {
+  width: 100%;
+}
+
+.calendar {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.calendar > mat-calendar {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.calendar.expand {
+  animation: open 200ms ease-out;
+}
+
+.calendar.collapse {
+  animation: open 200ms ease-in reverse;
+}
+
+@keyframes open {
+  from {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  to {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .calendar.expand,
+  .calendar.collapse {
+    animation-duration: 1ms;
   }
 }

package/src/libs/ui/inputs/src/lib/date-range-dropdown/date-range-dropdown.component.html

@@ -1,30 +1,149 @@
 <gn-ui-button
   type="outline"
   extraClass="bg-background w-full !p-[8px] !pl-[16px]"
-  (buttonClick)="picker.open()"
+  [title]="title"
+  (buttonClick)="openOverlay()"
+  cdkOverlayOrigin
+  #overlayOrigin="cdkOverlayOrigin"
 >
   <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
     <div class="text-left font-medium truncate py-1">
       {{ title }}
     </div>
+    @if (selectedDatesCount) {
+      <div
+        class="gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
+      >
+        {{ selectedDatesCount }}
+      </div>
+    }
   </div>
+  <button
+    class="h-6 w-6 flex items-center justify-center"
+    data-test="dropdown-clear"
+  >
+    @if (selectedDatesCount && !overlayOpen) {
+      <ng-icon
+        class="shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn"
+        (click)="clearDates($event)"
+        name="matClose"
+      ></ng-icon>
+    }
+  </button>
   <ng-icon
-    [name]="isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'"
+    data-test="dropdown-toggle"
+    [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
     class="shrink-0 opacity-40"
   >
   </ng-icon>
 </gn-ui-button>
-<!--date range input is just present for output events and hidden from the DOM-->
-<mat-date-range-input [rangePicker]="picker">
-  <input
-    matStartDate
-    [value]="startDate"
-    (dateInput)="startDateChange.emit($event.value)"
-  />
-  <input
-    matEndDate
-    [value]="endDate"
-    (dateInput)="endDateChange.emit($event.value)"
-  />
-</mat-date-range-input>
-<mat-date-range-picker #picker></mat-date-range-picker>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="w-[296px] flex flex-col gap-2 bg-white border border-gray-400 rounded px-4 py-3 shadow-lg text-main text-[16px] leading-[24px]"
+    data-test="date-range-panel"
+  >
+    <div class="flex flex-col justify-center border-b border-gray-300 pb-1">
+      <ng-container
+        [ngTemplateOutlet]="boundRow"
+        [ngTemplateOutletContext]="{
+          bound: 'start',
+          label: 'daterange.filter.from',
+          date: startDate,
+        }"
+      ></ng-container>
+      @if (expandedBound === 'start') {
+        <div class="calendar" animate.enter="expand" animate.leave="collapse">
+          <mat-calendar
+            data-test="start-date-calendar"
+            [selected]="startDate"
+            [startAt]="startDate ?? endDate"
+            [maxDate]="endDate"
+            (selectedChange)="setStartDate($event)"
+          ></mat-calendar>
+        </div>
+      }
+    </div>
+    <div class="flex flex-col justify-center">
+      <ng-container
+        [ngTemplateOutlet]="boundRow"
+        [ngTemplateOutletContext]="{
+          bound: 'end',
+          label: 'daterange.filter.to',
+          date: endDate,
+        }"
+      ></ng-container>
+      @if (expandedBound === 'end') {
+        <div class="calendar" animate.enter="expand" animate.leave="collapse">
+          <mat-calendar
+            data-test="end-date-calendar"
+            [selected]="endDate"
+            [startAt]="endDate ?? startDate"
+            [minDate]="startDate"
+            (selectedChange)="setEndDate($event)"
+          ></mat-calendar>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #boundRow let-bound="bound" let-label="label" let-date="date">
+  <div class="flex items-center gap-1 w-full">
+    <span class="w-[80px] shrink-0" [translate]="label"></span>
+    <div
+      class="flex-1 min-w-0 flex items-center gap-1 border rounded-lg px-2 py-1 transition-colors"
+      [class]="
+        invalidBounds[bound]
+          ? 'border-red-400 text-red-800 focus-within:border-red-800 hover:border-red-800'
+          : 'border-gray-400 focus-within:border-main hover:border-main'
+      "
+    >
+      <ng-icon
+        name="iconoirCalendar"
+        class="shrink-0"
+        aria-hidden="true"
+      ></ng-icon>
+      <input
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [gnUiAutofocus]="bound === expandedBound"
+        class="min-w-0 grow bg-transparent focus:outline-none"
+        [value]="date ? formatDate(date) : ''"
+        [placeholder]="'daterange.filter.datePlaceholder' | translate"
+        [attr.aria-label]="label | translate"
+        [attr.aria-invalid]="invalidBounds[bound] || null"
+        [attr.data-test]="bound + '-date-input'"
+        (change)="onDateInput(bound, $event)"
+        (blur)="normalizeDateInput(bound, $event)"
+        (click)="expandedBound !== bound && toggleBound(bound)"
+      />
+    </div>
+    <div class="shrink-0 flex items-center justify-end">
+      <gn-ui-button
+        type="light"
+        [style.--gn-ui-button-padding]="0"
+        [style.--gn-ui-button-width]="'24px'"
+        [style.--gn-ui-button-height]="'24px'"
+        [attr.aria-expanded]="expandedBound === bound"
+        [attr.data-test]="bound + '-date-toggle'"
+        (buttonClick)="toggleBound(bound)"
+      >
+        <ng-icon
+          [name]="expandedBound === bound ? 'matExpandLess' : 'matExpandMore'"
+        ></ng-icon>
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>