geonetwork-ui 2.11.0-dev.68d9eaa3a → 2.11.0-dev.7f3cfba04

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

@@ -1,7 +1,8 @@
-import { Injectable, Injector, inject } from '@angular/core'
+import { inject, Injectable, InjectionToken, Injector } from '@angular/core'
 import {
   AbstractSearchField,
   AvailableServicesField,
+  BoundingBoxSearchField,
   DateRangeSearchField,
   FieldValue,
   FullTextSearchField,
@@ -10,10 +11,11 @@ import {
   MultilingualSearchField,
   OrganizationSearchField,
   OwnerSearchField,
+  RecordKindField,
+  ResourceCreationRevisionDateSearchField,
   ResourceTypeLegacyField,
   SimpleSearchField,
   TranslatedSearchField,
-  RecordKindField,
   UserSearchField,
 } from './fields'
 import { forkJoin, Observable, of } from 'rxjs'
@@ -42,14 +44,30 @@ 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')
+marker('search.filters.documentStandard')
+
+export interface CustomSearchField {
+  name: string
+  baseFilter: string
+  excludeValues?: string[]
+  includeValues?: string[]
+}
 
+export const CUSTOM_FIELDS = new InjectionToken<CustomSearchField[]>(
+  'custom-fields'
+)
 @Injectable({
   providedIn: 'root',
 })
 export class FieldsService {
   protected injector = inject(Injector)
+  private customFields =
+    inject<CustomSearchField[]>(CUSTOM_FIELDS, { optional: true }) ?? []
 
-  protected fields = {
+  private baseFields: Record<string, AbstractSearchField> = {
     organization: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new ResourceTypeLegacyField(this.injector), // Deprecated, use `recordKind` instead
@@ -94,8 +112,50 @@ 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),
-  } as Record<string, AbstractSearchField>
+    spatialExtent: new BoundingBoxSearchField('spatialExtent', this.injector),
+  }
+
+  protected fields: Record<string, AbstractSearchField>
+
+  constructor() {
+    this.fields = { ...this.baseFields }
+    for (const customField of this.customFields) {
+      const baseField = this.baseFields[customField.baseFilter]
+      if (!(baseField instanceof SimpleSearchField)) {
+        console.warn(
+          `The custom field '${customField.name}' relies on a base field '${
+            customField.baseFilter
+          }' that is not supported. This field will be ignored.`
+        )
+        continue
+      }
+      if (!customField.name.includes(':')) {
+        console.warn(
+          `The custom field '${customField.name}' is not scoped with a prefix. Custom fields must have their names prefixed, for instance "myOrg:myKeywords". This field will be ignored.`
+        )
+        continue
+      }
+      const newField = baseField.clone()
+      newField.setFieldIdentifier(customField.name)
+      if (customField.includeValues) {
+        newField.includeValues = customField.includeValues
+      }
+      if (customField.excludeValues) {
+        newField.excludeValues = customField.excludeValues
+      }
+      this.fields[customField.name] = newField
+    }
+  }
 
   get supportedFields() {
     return Object.keys(this.fields)

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 {
@@ -49,6 +53,15 @@ export class SimpleSearchField implements AbstractSearchField {
   // FIXME: this is required to register runtime fields; abstract this as well
   protected esService = this.injector.get(ElasticsearchService)
 
+  private customIdentifier?: string
+
+  protected get fieldIdentifier(): string {
+    return this.customIdentifier ?? this.esFieldName
+  }
+
+  public includeValues: string[] = []
+  public excludeValues: string[] = []
+
   constructor(
     protected esFieldName: string,
     protected injector: Injector,
@@ -56,13 +69,24 @@ export class SimpleSearchField implements AbstractSearchField {
     protected orderType: 'key' | 'count' = 'key'
   ) {}
 
+  public setFieldIdentifier(fieldIdentifier: string) {
+    this.customIdentifier = fieldIdentifier
+    this.esService.registerFieldAlias(fieldIdentifier, this.esFieldName)
+  }
+
   protected getAggregations(): AggregationsParams {
     return {
-      [this.esFieldName]: {
+      [this.fieldIdentifier]: {
         type: 'terms',
         field: this.esFieldName,
         limit: 1000,
         sort: [this.order, this.orderType],
+        ...(this.includeValues?.length && {
+          includeValues: this.includeValues,
+        }),
+        ...(this.excludeValues?.length && {
+          excludeValues: this.excludeValues,
+        }),
       },
     }
   }
@@ -75,7 +99,7 @@ export class SimpleSearchField implements AbstractSearchField {
     return this.repository.aggregate(this.getAggregations()).pipe(
       map(
         (response) =>
-          (response[this.esFieldName] as AggregationBuckets).buckets || []
+          (response[this.fieldIdentifier] as AggregationBuckets).buckets || []
       ),
       switchMap((buckets: TermBucket[]) => {
         const bucketPromises = buckets.map(async (bucket) => ({
@@ -93,7 +117,7 @@ export class SimpleSearchField implements AbstractSearchField {
     // FieldValue[]
     if (this.getType() === 'values') {
       return of({
-        [this.esFieldName]: (values as FieldValue[]).reduce((acc, val) => {
+        [this.fieldIdentifier]: (values as FieldValue[]).reduce((acc, val) => {
           const value = val.toString()
           if (value !== '') {
             return { ...acc, [value]: true }
@@ -104,13 +128,13 @@ export class SimpleSearchField implements AbstractSearchField {
     }
     // DateRange
     return of({
-      [this.esFieldName]: values[0] !== '' ? values[0] : {},
+      [this.fieldIdentifier]: values[0] !== '' ? values[0] : {},
     })
   }
   getValuesForFilter(
     filters: FieldFilters
   ): Observable<FieldValue[] | FieldValue | DateRange> {
-    const filter = filters[this.esFieldName]
+    const filter = filters[this.fieldIdentifier]
     if (!filter) return of([])
     // filter by expression
     if (typeof filter === 'string') {
@@ -128,6 +152,10 @@ export class SimpleSearchField implements AbstractSearchField {
   getType(): FieldType {
     return 'values'
   }
+
+  clone(): typeof this {
+    return Object.create(this)
+  }
 }
 
 export class TranslatedSearchField extends SimpleSearchField {
@@ -431,6 +459,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.fieldIdentifier]: values.map(Number) as BoundingBox,
+    })
+  }
+
+  getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
+    const filter = filters[this.fieldIdentifier]
+    return of(isBoundingBox(filter) ? filter : [])
+  }
+
+  getType(): FieldType {
+    return 'spatialExtent'
+  }
+}
+
 marker('search.filters.availableServices.view')
 marker('search.filters.availableServices.download')
 
@@ -540,7 +623,7 @@ export class RecordKindField extends SimpleSearchField {
 
   getFiltersForValues(values: FieldValue[]): Observable<FieldFilters | string> {
     const filters: FieldFilters = {
-      [this.esFieldName]: values.reduce((acc, value) => {
+      [this.fieldIdentifier]: values.reduce((acc, value) => {
         if (value === '') return { ...acc, [value]: true }
 
         const keysToAdd = this.TYPE_MAPPING[value] || [value]
@@ -567,7 +650,7 @@ export class RecordKindField extends SimpleSearchField {
   }
 
   getValuesForFilter(filters: FieldFilters): Observable<FieldValue[]> {
-    const filter = filters[this.esFieldName]
+    const filter = filters[this.fieldIdentifier]
     if (!filter) return of([])
 
     const activeValues = Object.keys(filter).filter((v) => filter[v])

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -17,9 +17,9 @@
           <ng-template #titleTemplate>
             <div class="px-2">
               <div class="text-lg font-bold">{{ featureType.name }}</div>
-              @if (featureType.definition) {
+              @if (featureType.description) {
                 <div class="text-sm">
-                  {{ featureType.definition }}
+                  {{ featureType.description }}
                 </div>
               }
             </div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -19,7 +19,7 @@ import { iconoirList } from '@ng-icons/iconoir'
 marker('feature.catalog.attribute.type')
 marker('feature.catalog.attribute.name')
 marker('feature.catalog.attribute.code')
-marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.description')
 marker('feature.catalog.attribute.values')
 
 interface ColumnDefinition {
@@ -56,7 +56,7 @@ export class FeatureCatalogListComponent {
   readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
     { key: 'type', width: '25%' },
     { key: 'name', width: '40%' },
-    { key: 'definition', width: 'minmax(0px, 1fr)' },
+    { key: 'description', width: 'minmax(0px, 1fr)' },
   ]
 
   readonly COLUMN_VALUES: ColumnDefinition = {

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.css

@@ -16,10 +16,6 @@ gn-ui-button {
   --gn-ui-button-padding: 0;
   font-size: 1em;
 }
-ng-icon.search {
-  margin-top: 0.6rem;
-  margin-left: 0.6rem;
-}
 gn-ui-button:last-of-type {
   --gn-ui-button-rounded: 0 var(--gn-ui-text-input-rounded, 0.25em)
     var(--gn-ui-text-input-rounded, 0.25em) 0;

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

@@ -1,9 +1,9 @@
 <span class="w-full inline-block relative">
   @if (!allowSubmit) {
     <div
-      class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none"
+      class="absolute inset-y-[--icon-padding] left-[--icon-padding] w-[--icon-width] pointer-events-none flex items-center justify-center"
     >
-      <ng-icon name="iconoirSearch" class="text-primary search"></ng-icon>
+      <ng-icon name="iconoirSearch" class="text-primary"></ng-icon>
     </div>
   }
   <div class="flex flex-row">
@@ -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()
@@ -126,13 +134,13 @@ export class AutocompleteComponent
   getExtraClass(): string {
     if (this.allowSubmit) {
       if (this.enterButton) {
-        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] inset-y-[--icon-padding]'
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] top-1/2 -translate-y-1/2'
       } else {
-        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] inset-y-[calc(0.25*var(--icon-width))]'
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] top-1/2 -translate-y-1/2'
       }
     } else {
       if (!this.enterButton) {
-        return 'border rounded-lg absolute w-8 h-8 right-2 inset-y-2'
+        return 'border rounded-lg absolute w-8 h-8 right-2 top-1/2 -translate-y-1/2'
       }
     }
     return 'border rounded-lg absolute w-8 h-8'

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;
   }
 }