geonetwork-ui 2.8.0-dev.8cb6904b7 → 2.8.0-dev.94b119e28

package/src/libs/api/repository/src/lib/gn4/elasticsearch/constant.ts

@@ -7,7 +7,6 @@ export const ES_SOURCE_SUMMARY = [
   'resourceAbstractObject',
   'overview',
   'logo',
-  'codelist_status_text',
   'link',
   'linkProtocol',
   'contactForResource*.organisation*',

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -113,6 +113,12 @@ export interface INSPIRE_topic {
   label: string
 }
 
+export interface ResourceIdentifier {
+  code: string
+  codeSpace?: string
+  url?: string
+}
+
 export interface BaseRecord {
   uniqueIdentifier: Uuid
   ownerOrganization: Organization
@@ -135,7 +141,8 @@ export interface BaseRecord {
   updateFrequency?: UpdateFrequency
 
   // information related to the resource (dataset, service)
-  resourceIdentifier?: string
+
+  resourceIdentifiers?: Array<ResourceIdentifier>
   contactsForResource: Array<Individual>
   resourceCreated?: Date
   resourcePublished?: Date

package/src/libs/feature/dataviz/src/lib/service/data.service.ts

@@ -97,16 +97,27 @@ export class DataService {
         if (!featureType) {
           throw new Error('wfs.featuretype.notfound')
         }
+
+        const wfsVersion = endpoint.getVersion()
+        const addSrsName = wfsVersion === '1.1.0' || wfsVersion === '2.0.0'
+        const defaultCrs = featureType.defaultCrs
+
+        const shouldAddOutputCrs = addSrsName && defaultCrs
+
         return {
-          all: featureType.outputFormats.reduce(
-            (prev, curr) => ({
+          all: featureType.outputFormats.reduce((prev, curr) => {
+            const isJsonFormat = curr.toLowerCase().includes('json')
+            return {
               ...prev,
               [curr]: endpoint.getFeatureUrl(featureType.name, {
                 outputFormat: curr,
+                ...(shouldAddOutputCrs &&
+                  !isJsonFormat && {
+                    outputCrs: defaultCrs,
+                  }),
               }),
-            }),
-            {}
-          ),
+            }
+          }, {}),
           geojson: endpoint.supportsJson(featureType.name)
             ? endpoint.getFeatureUrl(featureType.name, {
                 asJson: true,

package/src/libs/feature/dataviz/src/lib/stac-view/stac-view.component.html

@@ -1,5 +1,40 @@
-<div class="w-full h-full flex flex-col">
-  <div
-    class="relative h-full mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden"
-  ></div>
+<div
+  class="w-full h-full flex flex-row mt-6 bg-white border border-gray-300 rounded-lg overflow-hidden"
+>
+  <div class="flex-1 flex flex-col">
+    <div class="m-8">
+      <p class="mb-4" translate>stac.filter.period</p>
+      <p translate>stac.filter.from</p>
+      <gn-ui-date-picker
+        id="start-date-picker"
+        [date]="currentTemporalExtent?.start"
+        (dateChange)="onStartDateChange($event)"
+      />
+      <p class="mt-4" translate>stac.filter.to</p>
+      <gn-ui-date-picker
+        id="end-date-picker"
+        [date]="currentTemporalExtent?.end"
+        (dateChange)="onEndDateChange($event)"
+      />
+    </div>
+
+    <div class="mt-auto mb-8 mx-8" *ngIf="isTemporalFilterModified">
+      <button
+        id="reset-filters-button"
+        type="button"
+        class="flex items-center"
+        (click)="onResetFilters()"
+      >
+        <span translate>stac.filter.reset</span>
+        <ng-icon
+          name="matDeleteOutline"
+          class="pointer-events-none ml-2"
+        ></ng-icon>
+      </button>
+    </div>
+  </div>
+
+  <div class="w-[655px] flex-shrink-0 flex items-center justify-center">
+    <span>Map...</span>
+  </div>
 </div>

package/src/libs/feature/dataviz/src/lib/stac-view/stac-view.component.ts

@@ -3,11 +3,16 @@ import {
   ChangeDetectionStrategy,
   Component,
   Input,
-  OnDestroy,
+  OnInit,
 } from '@angular/core'
-import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { TranslatePipe } from '@ngx-translate/core'
-import { Subscription } from 'rxjs'
+import {
+  DatasetServiceDistribution,
+  DatasetTemporalExtent,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { DatePickerComponent } from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matDeleteOutline } from '@ng-icons/material-icons/outline'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-stac-view',
@@ -15,13 +20,43 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./stac-view.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, TranslatePipe],
+  imports: [
+    CommonModule,
+    DatePickerComponent,
+    NgIconComponent,
+    TranslateDirective,
+  ],
+  viewProviders: [provideIcons({ matDeleteOutline })],
 })
-export class StacViewComponent implements OnDestroy {
+export class StacViewComponent implements OnInit {
   @Input() link: DatasetServiceDistribution
-  private subscription = new Subscription()
+  @Input() initialTemporalExtent: DatasetTemporalExtent | null
+
+  currentTemporalExtent: DatasetTemporalExtent | null = null
+  isTemporalFilterModified = false
+
+  onStartDateChange(date: Date) {
+    this.currentTemporalExtent = {
+      ...this.currentTemporalExtent,
+      start: date,
+    }
+    this.isTemporalFilterModified = true
+  }
+
+  onEndDateChange(date: Date) {
+    this.currentTemporalExtent = {
+      ...this.currentTemporalExtent,
+      end: date,
+    }
+    this.isTemporalFilterModified = true
+  }
+
+  onResetFilters() {
+    this.currentTemporalExtent = this.initialTemporalExtent
+    this.isTemporalFilterModified = false
+  }
 
-  ngOnDestroy() {
-    this.subscription.unsubscribe()
+  ngOnInit() {
+    this.currentTemporalExtent = this.initialTemporalExtent
   }
 }

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.html

@@ -69,11 +69,11 @@
         (valueChange)="valueChange.emit($event)"
       ></gn-ui-form-field-overviews>
     </ng-container>
-    <ng-container *ngSwitchCase="'resourceIdentifier'">
+    <ng-container *ngSwitchCase="'resourceIdentifiers'">
       <gn-ui-form-field-simple
         [type]="'text'"
-        [value]="valueAsString"
-        (valueChange)="valueChange.emit($event)"
+        [value]="valueAsResourceIdentifierCode"
+        (valueChange)="handleResourceIdentifierChange($event)"
       ></gn-ui-form-field-simple>
     </ng-container>
     <ng-container *ngSwitchCase="'resourceCreated'">

package/src/libs/feature/editor/src/lib/components/record-form/form-field/form-field.component.ts

@@ -142,4 +142,34 @@ export class FormFieldComponent {
   get valueAsOnlineResources() {
     return this.value as Array<OnlineResource>
   }
+  get valueAsResourceIdentifierCode() {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+    return identifiers?.[0]?.code || ''
+  }
+
+  handleResourceIdentifierChange(code: string) {
+    const identifiers = this.value as Array<{
+      code: string
+      codeSpace?: string
+      url?: string
+    }>
+
+    if (!code) {
+      this.valueChange.emit(identifiers?.slice(1) || [])
+      return
+    }
+
+    if (identifiers?.[0]) {
+      this.valueChange.emit([
+        { ...identifiers[0], code },
+        ...identifiers.slice(1),
+      ])
+    } else {
+      this.valueChange.emit([{ code }])
+    }
+  }
 }

package/src/libs/feature/editor/src/lib/fields.config.ts

@@ -81,7 +81,7 @@ export const RECORD_RESOURCE_CREATED_FIELD: EditorField = {
 }
 
 export const RESOURCE_IDENTIFIER_FIELD: EditorField = {
-  model: 'resourceIdentifier',
+  model: 'resourceIdentifiers',
   formFieldConfig: {
     labelKey: marker('editor.record.form.field.resourceIdentifier'),
   },

package/src/libs/feature/record/src/lib/state/mdview.facade.ts

@@ -89,6 +89,25 @@ export class MdViewFacade {
     shareReplay(1)
   )
 
+  resourceDoi$ = this.metadata$.pipe(
+    map((record) => {
+      if (!record?.resourceIdentifiers?.length) return null
+      const doiIdentifier = record.resourceIdentifiers.find(
+        (id) =>
+          id.codeSpace?.toLowerCase().includes('doi.org') ||
+          id.code.startsWith('10.')
+      )
+
+      if (!doiIdentifier) return null
+
+      return {
+        code: doiIdentifier.code,
+        url: doiIdentifier.url ? doiIdentifier.url : null,
+      }
+    }),
+    shareReplay(1)
+  )
+
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))

package/src/libs/feature/search/src/lib/constants.ts

@@ -11,7 +11,6 @@ export const FIELDS_SUMMARY: FieldName[] = [
   'resourceAbstractObject',
   'overview',
   'logo',
-  'codelist_status_text',
   'link',
   'linkProtocol',
   'contactForResource*.organisation*',

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

@@ -14,6 +14,7 @@ export * from './lib/markdown-editor/markdown-editor.component'
 export * from './lib/markdown-parser/markdown-parser.component'
 export * from './lib/metadata-catalog/metadata-catalog.component'
 export * from './lib/metadata-contact/metadata-contact.component'
+export * from './lib/metadata-doi/metadata-doi.component'
 export * from './lib/metadata-info/metadata-info.component'
 export * from './lib/metadata-quality-item/metadata-quality-item.component'
 export * from './lib/metadata-quality/metadata-quality.component'

package/src/libs/ui/elements/src/lib/metadata-doi/metadata-doi.component.html

@@ -0,0 +1,31 @@
+<div
+  class="border border-gray-300 rounded-lg py-4 px-5 text-black flex justify-between items-center gap-4"
+>
+  <div class="overflow-hidden flex-1">
+    <p class="text-base font-medium mb-3">DOI</p>
+    <p
+      class="text-base font-medium overflow-hidden text-ellipsis whitespace-nowrap"
+      [title]="code"
+    >
+      {{ code }}
+    </p>
+  </div>
+  <div class="flex gap-2 items-start">
+    <gn-ui-copy-text-button
+      [text]="code"
+      [displayText]="false"
+      [tooltipText]="'record.metadata.doi.copy' | translate"
+      class="[&>div]:flex [&>div]:items-center [&>div]:justify-center [&_button]:w-[40px] [&_button]:h-[32px] [&_button]:flex [&_button]:items-center [&_button]:justify-center [&_button]:hover:bg-gray-100 [&_button]:rounded-lg [&_button]:transition-colors [&_button]:border [&_button]:border-gray-300 [&_button]:px-2 [&_button]:py-1 [&_ng-icon]:w-5 [&_ng-icon]:h-5"
+    ></gn-ui-copy-text-button>
+    <a
+      *ngIf="link"
+      [href]="link"
+      target="_blank"
+      rel="noopener noreferrer"
+      class="w-[40px] h-[32px] flex items-center justify-center hover:bg-gray-100 rounded-lg transition-colors border border-gray-300 px-2 py-1"
+      [matTooltip]="'record.metadata.doi.open' | translate"
+    >
+      <ng-icon name="matOpenInNew" size="20"></ng-icon>
+    </a>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/metadata-doi/metadata-doi.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import { MatTooltipModule } from '@angular/material/tooltip'
+import { matOpenInNew } from '@ng-icons/material-icons/baseline'
+import { TranslatePipe } from '@ngx-translate/core'
+import { CopyTextButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-metadata-doi',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatTooltipModule,
+    NgIcon,
+    TranslatePipe,
+    CopyTextButtonComponent,
+  ],
+  templateUrl: './metadata-doi.component.html',
+  styleUrl: './metadata-doi.component.css',
+  viewProviders: [
+    provideIcons({
+      matOpenInNew,
+    }),
+  ],
+})
+export class MetadataDoiComponent {
+  @Input() code!: string
+  @Input() link?: string
+}

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -186,27 +186,30 @@
       data-test="details-panel-resource-created"
     >
       <p class="text-sm" translate>record.metadata.creation</p>
-      <p class="text-primary font-medium mt-1 resource-created">
-        {{ formatDate(metadata.resourceCreated) }}
-      </p>
+      <p
+        class="text-primary font-medium mt-1 resource-created"
+        [gnUiHumanizeDate]="metadata.resourceCreated"
+      ></p>
     </div>
     <div
       *ngIf="metadata.resourcePublished"
       data-test="details-panel-resource-published"
     >
       <p class="text-sm" translate>record.metadata.publication</p>
-      <p class="text-primary font-medium mt-1 resource-published">
-        {{ formatDate(metadata.resourcePublished) }}
-      </p>
+      <p
+        class="text-primary font-medium mt-1 resource-published"
+        [gnUiHumanizeDate]="metadata.resourcePublished"
+      ></p>
     </div>
     <div
       *ngIf="metadata.resourceUpdated"
       data-test="details-panel-resource-updated"
     >
       <p class="text-sm" translate>record.metadata.update</p>
-      <p class="text-primary font-medium mt-1 resource-updated">
-        {{ formatDate(metadata.resourceUpdated) }}
-      </p>
+      <p
+        class="text-primary font-medium mt-1 resource-updated"
+        [gnUiHumanizeDate]="metadata.resourceUpdated"
+      ></p>
     </div>
     <div
       *ngIf="metadata.kind === 'dataset' && metadata.updateFrequency"
@@ -294,9 +297,10 @@
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">
       <p class="text-sm" translate>record.metadata.updatedOn</p>
-      <p class="text-primary font-medium">
-        {{ metadata.recordUpdated && formatDateTime(metadata.recordUpdated) }}
-      </p>
+      <p
+        class="text-primary font-medium"
+        [gnUiHumanizeDate]="metadata.recordUpdated"
+      ></p>
     </div>
     <div *ngIf="metadata.landingPage">
       <p class="text-sm" translate>record.metadata.sheet</p>

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.ts

@@ -26,7 +26,7 @@ import { matOpenInNew } from '@ng-icons/material-icons/baseline'
 import { matMailOutline } from '@ng-icons/material-icons/outline'
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component'
 import { GnUiLinkifyDirective } from './linkify.directive'
-
+import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/src'
 import { CommonModule } from '@angular/common'
 import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
 
@@ -49,6 +49,7 @@ import { SpatialExtentComponent } from '../../../../../../libs/ui/map/src'
     CopyTextButtonComponent,
     NgIcon,
     GnUiLinkifyDirective,
+    GnUiHumanizeDateDirective,
     SpatialExtentComponent,
   ],
   viewProviders: [
@@ -146,12 +147,4 @@ export class MetadataInfoComponent {
   onKeywordClick(keyword: Keyword) {
     this.keyword.emit(keyword)
   }
-
-  formatDate(date: Date): string {
-    return this.dateService.formatDate(date)
-  }
-
-  formatDateTime(date: Date): string {
-    return this.dateService.formatDateTime(date)
-  }
 }

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.html

@@ -13,7 +13,7 @@
     </div>
     <div class="p-4 flex flex-col">
       <span>{{ userFeedbackParent.authorName }}</span>
-      <span> {{ userFeedbackParent.date | timeSince }}</span>
+      <span [gnUiHumanizeDate]="userFeedbackParent.date"></span>
     </div>
   </div>
   <div data-cy="commentText" class="mt-4 whitespace-pre-line">

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.ts

@@ -11,13 +11,13 @@ import {
   UserFeedbackViewModel,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
-import { TimeSincePipe } from './time-since.pipe'
 import { CommonModule } from '@angular/common'
 import { ButtonComponent, TextAreaComponent } from '../../../../../../libs/ui/inputs/src'
 import { TranslatePipe } from '@ngx-translate/core'
 import { SpinningLoaderComponent } from '../../../../../../libs/ui/widgets/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { matSendOutline } from '@ng-icons/material-icons/outline'
+import { GnUiHumanizeDateDirective } from '../../../../../../libs/util/shared/src'
 
 @Component({
   selector: 'gn-ui-user-feedback-item',
@@ -27,11 +27,11 @@ import { matSendOutline } from '@ng-icons/material-icons/outline'
   standalone: true,
   imports: [
     CommonModule,
-    TimeSincePipe,
     TextAreaComponent,
     TranslatePipe,
     ButtonComponent,
     SpinningLoaderComponent,
+    GnUiHumanizeDateDirective,
     NgIcon,
   ],
   viewProviders: [

package/src/libs/util/i18n/src/lib/date-locales.ts

@@ -0,0 +1,63 @@
+import { LanguageCode2 } from './language-codes'
+import {
+  ar,
+  az,
+  ca,
+  cs,
+  cy,
+  da,
+  de,
+  enUS,
+  es,
+  fi,
+  fr,
+  hy,
+  is,
+  it,
+  ka,
+  ko,
+  Locale,
+  nl,
+  nn,
+  pl,
+  pt,
+  ru,
+  sk,
+  sv,
+  tr,
+  uk,
+  zhCN,
+} from 'date-fns/locale'
+
+// all 2-char language codes should be listed here
+const locales: Record<LanguageCode2, Locale> = {
+  en: enUS,
+  nl: nl,
+  fr: fr,
+  de: de,
+  ko: ko,
+  es: es,
+  cs: cs,
+  ca: ca,
+  fi: fi,
+  is: is,
+  it: it,
+  pt: pt,
+  ru: ru,
+  zh: zhCN,
+  sk: sk,
+  ar: ar,
+  da: da,
+  no: nn,
+  pl: pl,
+  sv: sv,
+  tr: tr,
+  hy: hy,
+  az: az,
+  ka: ka,
+  uk: uk,
+  cy: cy,
+  rm: enUS, // locale is unavailable
+}
+
+export default locales

package/src/libs/util/shared/src/index.ts

@@ -4,3 +4,4 @@ export * from './lib/links'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
 export * from './lib/record'
+export * from './lib/humanize-date.directive'

package/src/libs/util/shared/src/lib/humanize-date.directive.ts

@@ -0,0 +1,35 @@
+import { Renderer2, Directive, ElementRef, Input, OnInit } from '@angular/core'
+import { DateService } from './services/date.service'
+
+@Directive({
+  selector: '[gnUiHumanizeDate]',
+  standalone: true,
+})
+export class GnUiHumanizeDateDirective implements OnInit {
+  @Input() gnUiHumanizeDate: Date | string
+
+  constructor(
+    private dateService: DateService,
+    private el: ElementRef,
+    private renderer: Renderer2
+  ) {}
+
+  async ngOnInit() {
+    await this.updateElement()
+  }
+
+  private async updateElement(): Promise<void> {
+    const dateValue = this.gnUiHumanizeDate
+
+    const fullDateTime = this.dateService.formatDateTime(dateValue)
+    const relativeDate =
+      await this.dateService.formatRelativeDateTime(dateValue)
+
+    this.renderer.setAttribute(this.el.nativeElement, 'title', fullDateTime)
+    this.renderer.setProperty(
+      this.el.nativeElement,
+      'textContent',
+      relativeDate
+    )
+  }
+}

package/src/libs/util/shared/src/lib/services/date.service.ts

@@ -1,10 +1,18 @@
 import { Injectable } from '@angular/core'
 import { TranslateService } from '@ngx-translate/core'
+import { type Locale } from 'date-fns/locale'
+import { formatDistance } from 'date-fns/formatDistance'
+
+const DEFAULT_LANGUAGE = 'en'
 
 @Injectable({
   providedIn: 'root',
 })
 export class DateService {
+  dateLocales = import('../../../../../../libs/util/i18n/src/lib/date-locales').then(
+    (obj) => obj.default
+  )
+
   constructor(private translateService: TranslateService) {}
 
   private getDateObject(date: Date | string): Date {
@@ -22,11 +30,17 @@ export class DateService {
     locale: string
     dateObj: Date
   } {
-    const locale = this.translateService.currentLang || 'en-US'
+    const locale = this.translateService.currentLang || DEFAULT_LANGUAGE
     const dateObj = this.getDateObject(date)
     return { locale, dateObj }
   }
 
+  private async getDateLocale(): Promise<Locale> {
+    const lang = this.translateService.currentLang || DEFAULT_LANGUAGE
+    const locales = await this.dateLocales
+    return locales[lang]
+  }
+
   formatDate(
     date: Date | string,
     options?: Intl.DateTimeFormatOptions
@@ -42,4 +56,16 @@ export class DateService {
     const { locale, dateObj } = this.getLocaleAndDate(date)
     return dateObj.toLocaleString(locale, options)
   }
+
+  async formatRelativeDateTime(date: Date | string): Promise<string> {
+    const dateObj = this.getDateObject(date)
+
+    const now = new Date()
+    const locale = await this.getDateLocale()
+
+    return formatDistance(dateObj, now, {
+      addSuffix: true,
+      locale: locale,
+    })
+  }
 }