geonetwork-ui 2.8.0-dev.cba2fd2eb → 2.8.0-dev.e46888fcc

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

@@ -0,0 +1,190 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
+import {
+  DatasetRecord,
+  DatasetTemporalExtent,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { StacItemsResultGridComponent } from '../../../../../../libs/ui/elements/src'
+import {
+  ButtonComponent,
+  DateRangeInputsComponent,
+} from '../../../../../../libs/ui/inputs/src'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { matDeleteOutline } from '@ng-icons/material-icons/outline'
+import { TranslateDirective, TranslateService } from '@ngx-translate/core'
+import { DataService } from '../../../../../../libs/feature/dataviz/src'
+import {
+  BehaviorSubject,
+  catchError,
+  combineLatest,
+  debounceTime,
+  from,
+  map,
+  Observable,
+  of,
+  switchMap,
+  take,
+  tap,
+} from 'rxjs'
+import { GetCollectionItemsOptions, StacItem } from '@camptocamp/ogc-client'
+import { MdViewFacade } from '../state'
+import { PreviousNextButtonsComponent } from '../../../../../../libs/ui/layout/src'
+import { FetchError } from '../../../../../../libs/util/data-fetcher/src'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
+
+const STAC_ITEMS_PER_PAGE = 12
+const DEBOUNCE_TIME_MS = 500
+
+@Component({
+  selector: 'gn-ui-stac-view',
+  templateUrl: './stac-view.component.html',
+  styleUrls: ['./stac-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    NgIconComponent,
+    TranslateDirective,
+    StacItemsResultGridComponent,
+    DateRangeInputsComponent,
+    PreviousNextButtonsComponent,
+    PopupAlertComponent,
+    ButtonComponent,
+  ],
+  viewProviders: [provideIcons({ matDeleteOutline })],
+})
+export class StacViewComponent implements OnInit {
+  isFilterModified = false
+  error = null
+
+  initialTemporalExtent: DatasetTemporalExtent | null = null
+  currentTemporalExtent$ = new BehaviorSubject<DatasetTemporalExtent | null>(
+    null
+  )
+
+  initialPageUrl: string
+  previousPageUrl: string
+  nextPageUrl: string
+  currentPageUrl$ = new BehaviorSubject<string | null>(null)
+
+  items$: Observable<StacItem[]> = combineLatest([
+    this.currentPageUrl$,
+    this.currentTemporalExtent$,
+  ]).pipe(
+    debounceTime(DEBOUNCE_TIME_MS),
+    switchMap(([currentPageUrl, temporalExtent]) => {
+      this.error = null
+      const options: GetCollectionItemsOptions = {
+        limit: STAC_ITEMS_PER_PAGE,
+      }
+      if (temporalExtent && (temporalExtent.start || temporalExtent.end)) {
+        options.datetime = {
+          ...(temporalExtent.start && { start: temporalExtent.start }),
+          ...(temporalExtent.end && { end: temporalExtent.end }),
+        }
+      }
+      return from(
+        this.dataService.getItemsFromStacApi(currentPageUrl, options)
+      ).pipe(
+        tap((stacDocument) => {
+          this.previousPageUrl =
+            stacDocument.links.find((link) => link.rel === 'previous')?.href ||
+            null
+          this.nextPageUrl =
+            stacDocument.links.find((link) => link.rel === 'next')?.href || null
+        }),
+        map((stacDocument) => stacDocument.features),
+        catchError((err) => {
+          this.handleError(err)
+          return of([])
+        })
+      )
+    })
+  )
+
+  constructor(
+    private dataService: DataService,
+    private metadataViewFacade: MdViewFacade,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.metadataViewFacade.metadata$
+      .pipe(
+        take(1),
+        map((metadata) => {
+          const temporalExtents =
+            metadata?.kind === 'dataset'
+              ? (metadata as DatasetRecord).temporalExtents
+              : []
+
+          return temporalExtents.length > 0
+            ? temporalExtents[0]
+            : ({
+                start: null,
+                end: null,
+              } as DatasetTemporalExtent)
+        })
+      )
+      .subscribe((extent) => {
+        this.initialTemporalExtent = extent
+        this.currentTemporalExtent$.next(extent)
+      })
+
+    this.metadataViewFacade.stacLinks$
+      .pipe(
+        take(1),
+        map((links) => (links && links.length > 0 ? links[0] : null))
+      )
+      .subscribe((link) => {
+        if (link) {
+          this.initialPageUrl = link.url.href
+          this.currentPageUrl$.next(link.url.href)
+        }
+      })
+  }
+
+  onTemporalExtentChange(extent: DatasetTemporalExtent | null) {
+    this.currentTemporalExtent$.next(extent)
+    // make sure to use url without pagination token when temporal filter changes
+    this.currentPageUrl$.next(this.initialPageUrl)
+    this.isFilterModified = true
+  }
+
+  onResetFilters() {
+    this.currentTemporalExtent$.next(this.initialTemporalExtent)
+    this.isFilterModified = false
+  }
+
+  handleError(error: FetchError | Error | string) {
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else if (error instanceof Error) {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    } else {
+      this.error = this.translateService.instant(error)
+      console.warn(error)
+    }
+  }
+
+  // Paginable API
+  get isFirstPage() {
+    return this.previousPageUrl == null
+  }
+  get isLastPage() {
+    return this.nextPageUrl == null
+  }
+  goToNextPage() {
+    this.currentPageUrl$.next(this.nextPageUrl)
+  }
+  goToPrevPage() {
+    this.currentPageUrl$.next(this.previousPageUrl)
+  }
+}

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

@@ -27,3 +27,4 @@ export * from './lib/application-banner/application-banner.component'
 export * from './lib/internal-link-card/internal-link-card.component'
 export * from './lib/service-capabilities/service-capabilities.component'
 export * from './lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component'
+export * from './lib/stac-items-result-grid/stac-items-result-grid.component'

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/stac-items-result-grid/stac-items-result-grid.component.html

@@ -0,0 +1,13 @@
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-[10px]">
+  <div *ngFor="let item of items">
+    <div
+      data-cy="stac-item-card"
+      class="h-[173px] flex flex-col justify-between gap-4 bg-white rounded-lg border border-gray-300 px-5 py-3 mx-auto"
+    >
+      <h2 class="text-xl text-black line-clamp-4 break-words">
+        {{ item.id }}
+      </h2>
+      <p class="truncate">{{ item.properties.datetime }}</p>
+    </div>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/stac-items-result-grid/stac-items-result-grid.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { StacItem } from '@camptocamp/ogc-client'
+
+@Component({
+  selector: 'gn-ui-stac-items-result-grid',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './stac-items-result-grid.component.html',
+  styleUrl: './stac-items-result-grid.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class StacItemsResultGridComponent {
+  @Input() items: StacItem[] = []
+}

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/ui/inputs/src/index.ts

@@ -24,3 +24,4 @@ export * from './lib/text-input/text-input.component'
 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'

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

@@ -5,7 +5,11 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
+import {
+  DateAdapter,
+  MAT_DATE_LOCALE,
+  MatNativeDateModule,
+} from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
 import {
@@ -14,6 +18,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirCalendar } from '@ng-icons/iconoir'
+import { TranslateService } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -32,9 +37,20 @@ import { iconoirCalendar } from '@ng-icons/iconoir'
     provideNgIconsConfig({
       size: '1.5rem',
     }),
+    {
+      provide: MAT_DATE_LOCALE,
+      useFactory: (locale: string) => locale,
+    },
   ],
 })
 export class DatePickerComponent {
   @Input() date: Date
   @Output() dateChange = new EventEmitter<Date>()
+
+  constructor(
+    private dateAdapter: DateAdapter<Date>,
+    private translate: TranslateService
+  ) {
+    this.dateAdapter.setLocale(this.translate.currentLang)
+  }
 }

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

@@ -0,0 +1,15 @@
+<div class="m-8">
+  <p class="mb-4" translate>daterange.filter.period</p>
+  <p translate>daterange.filter.from</p>
+  <gn-ui-date-picker
+    id="start-date-picker"
+    [date]="temporalExtent?.start"
+    (dateChange)="onStartDateChange($event)"
+  ></gn-ui-date-picker>
+  <p class="mt-4" translate>daterange.filter.to</p>
+  <gn-ui-date-picker
+    id="end-date-picker"
+    [date]="temporalExtent?.end"
+    (dateChange)="onEndDateChange($event)"
+  ></gn-ui-date-picker>
+</div>

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

@@ -0,0 +1,41 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { DatePickerComponent } from '../date-picker/date-picker.component'
+import { DatasetTemporalExtent } from '../../../../../../libs/common/domain/src/lib/model/record/metadata.model'
+import { TranslateDirective } from '@ngx-translate/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-date-range-inputs',
+  standalone: true,
+  imports: [CommonModule, TranslateDirective, DatePickerComponent],
+  templateUrl: './date-range-inputs.component.html',
+  styleUrl: './date-range-inputs.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DateRangeInputsComponent {
+  @Input() temporalExtent: DatasetTemporalExtent | null
+  @Output() temporalExtentChange =
+    new EventEmitter<DatasetTemporalExtent | null>()
+
+  onStartDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      start: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+
+  onEndDateChange(date: Date) {
+    this.temporalExtent = {
+      ...this.temporalExtent,
+      end: date,
+    }
+    this.temporalExtentChange.emit(this.temporalExtent)
+  }
+}

package/src/libs/ui/layout/src/lib/paginable.interface.ts

@@ -6,9 +6,9 @@
 export interface Paginable {
   isFirstPage: boolean
   isLastPage: boolean
-  pagesCount: number
-  currentPage: number
-  goToPage(index: number): void
+  pagesCount?: number
+  currentPage?: number
+  goToPage?(index: number): void
   goToNextPage(): void
   goToPrevPage(): void
 }

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.html

@@ -3,28 +3,34 @@
     data-test="previousButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isFirstPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isFirstPage"
     (buttonClick)="listComponent.goToPrevPage()"
   >
     <ng-icon name="matArrowBackIos"></ng-icon>
+    <span *ngIf="displayLabels" class="ml-2" translate
+      >pagination.previousPage</span
+    >
   </gn-ui-button>
   <gn-ui-button
     data-test="nextButton"
     type="light"
     [extraClass]="
-      'w-10 h-8 px-2 py-1 rounded-lg ' +
+      'w-auto min-w-10 h-8 px-2 py-1 rounded-lg ' +
       (!listComponent.isLastPage
-        ? 'border border-gray-300'
-        : 'border border-gray-100')
+        ? 'border border-gray-300 text-main'
+        : 'border border-gray-100 text-gray-300')
     "
     [disabled]="listComponent.isLastPage"
     (buttonClick)="listComponent.goToNextPage()"
   >
+    <span *ngIf="displayLabels" class="mr-2" translate
+      >pagination.nextPage</span
+    >
     <ng-icon name="matArrowForwardIos"></ng-icon>
   </gn-ui-button>
 </div>

package/src/libs/ui/layout/src/lib/previous-next-buttons/previous-next-buttons.component.ts

@@ -10,13 +10,15 @@ import {
 } from '@ng-icons/material-icons/baseline'
 import { Paginable } from '../paginable.interface'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+import { CommonModule } from '@angular/common'
+import { TranslateDirective } from '@ngx-translate/core'
 
 @Component({
   selector: 'gn-ui-previous-next-buttons',
   templateUrl: './previous-next-buttons.component.html',
   styleUrls: ['./previous-next-buttons.component.css'],
   standalone: true,
-  imports: [ButtonComponent, NgIconComponent],
+  imports: [CommonModule, ButtonComponent, NgIconComponent, TranslateDirective],
   providers: [
     provideIcons({ matArrowBackIos, matArrowForwardIos }),
     provideNgIconsConfig({
@@ -26,4 +28,5 @@ import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 })
 export class PreviousNextButtonsComponent {
   @Input() listComponent: Paginable
+  @Input() displayLabels = false
 }

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
+    )
+  }
+}