geonetwork-ui 2.8.0-dev.2abe6a279 → 2.8.0-dev.36f3534fa

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.html

@@ -16,22 +16,25 @@
         data-cy="download-format"
         >{{ format || ('downloads.format.unknown' | translate) }}</span
       >
-      <span
-        class="pl-2 inline-flex items-center text-gray-800 text-sm"
-        *ngIf="isFromWfs"
-        translate=""
-        >datahub.search.filter.generatedByWfs</span
-      >
-    </div>
-    <div *ngFor="let entry of liste$ | async">
-      <a [href]="entry['link'][0]['href']"
-        >{{ entry['link'][0]['href'].split('/').slice(-1) }}
-        <ng-icon
-          class="text-primary opacity-45 mr-3"
-          name="matCloudDownloadOutline"
+      @if (isFromWfs) {
+        <span
+          class="pl-2 inline-flex items-center text-gray-800 text-sm"
+          translate=""
+          >datahub.search.filter.generatedByWfs</span
         >
-        </ng-icon>
-      </a>
+      }
     </div>
+    @for (entry of liste$ | async; track entry) {
+      <div>
+        <a [href]="entry['link'][0]['href']"
+          >{{ entry['link'][0]['href'].split('/').slice(-1) }}
+          <ng-icon
+            class="text-primary opacity-45 mr-3"
+            name="matCloudDownloadOutline"
+          >
+          </ng-icon>
+        </a>
+      </div>
+    }
   </div>
 </a>

package/src/libs/feature/record/src/lib/gpf-api-dl-list-item/gpf-api-dl-list-item.component.ts

@@ -1,6 +1,6 @@
 import { CommonModule } from '@angular/common'
 import { HttpClient } from '@angular/common/http'
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, Input, OnInit, inject } from '@angular/core'
 import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
 import { map, mergeMap, Observable } from 'rxjs'
@@ -22,12 +22,12 @@ import { matCloudDownloadOutline } from '@ng-icons/material-icons/outline'
   ],
 })
 export class GpfApiDlListItemComponent implements OnInit {
+  protected http = inject(HttpClient)
+
   @Input() link
   @Input() color: string
   @Input() format: string
   @Input() isFromWfs: boolean
-
-  constructor(protected http: HttpClient) {}
   liste$: Observable<any>
 
   ngOnInit(): void {

package/src/libs/feature/record/src/lib/map-view/map-view.component.html

@@ -2,17 +2,18 @@
   <div
     class="flex flex-col md:flex-row gap-4 py-4 px-5 bg-white border border-color-border rounded-lg mt-6"
   >
-    <gn-ui-dropdown-selector
-      *ngIf="displaySource"
-      class="w-full md:flex-1 md:min-w-0"
-      extraBtnClass="font-sans font-bold"
-      [title]="'map.select.layer' | translate"
-      [choices]="dropdownChoices$ | async"
-      [selected]="_selectedChoice"
-      (selectValue)="selectLinkToDisplay($event)"
-    ></gn-ui-dropdown-selector>
+    @if (displaySource) {
+      <gn-ui-dropdown-selector
+        class="w-full md:flex-1 md:min-w-0"
+        extraBtnClass="font-sans font-bold"
+        [title]="'map.select.layer' | translate"
+        [choices]="dropdownChoices$ | async"
+        [selected]="_selectedChoice"
+        (selectValue)="selectLinkToDisplay($event)"
+      ></gn-ui-dropdown-selector>
+    }
 
-    <ng-container *ngIf="(styleLinks$ | async)?.length > 0; else styleDisabled">
+    @if ((styleLinks$ | async)?.length > 0) {
       <gn-ui-dropdown-selector
         class="w-full md:flex-1 md:min-w-0"
         extraBtnClass="font-sans font-bold"
@@ -21,8 +22,7 @@
         [selected]="_styleFromConfig"
         (selectValue)="selectStyleToDisplay($event)"
       ></gn-ui-dropdown-selector>
-    </ng-container>
-    <ng-template #styleDisabled>
+    } @else {
       <gn-ui-dropdown-selector
         class="w-full md:flex-1 md:min-w-0 text-gray-400"
         extraBtnClass="font-sans font-bold text-gray-400"
@@ -30,7 +30,7 @@
         [choices]="styleDropdownChoices$ | async"
         [disabled]="true"
       ></gn-ui-dropdown-selector>
-    </ng-template>
+    }
 
     <div class="self-end md:ml-2">
       <gn-ui-external-viewer-button
@@ -40,7 +40,7 @@
       </gn-ui-external-viewer-button>
     </div>
   </div>
-  <ng-container *ngIf="hidePreview; else mapView">
+  @if (hidePreview) {
     <gn-ui-popup-alert
       type="warning"
       icon="matErrorOutlineOutline"
@@ -48,8 +48,7 @@
     >
       <span translate>record.feature.limit</span>
     </gn-ui-popup-alert>
-  </ng-container>
-  <ng-template #mapView>
+  } @else {
     <div
       class="relative w-full h-full bg-white border border-gray-300 rounded-lg overflow-hidden"
     >
@@ -80,7 +79,6 @@
           [feature]="selection"
         ></gn-ui-feature-detail>
       </div>
-
       <div
         class="top-[1em] p-3 bg-white absolute overflow-y-auto overflow-x-hidden max-h-72 w-56"
         [ngClass]="{ 'right-[1em]': !selection, 'right-[16em]': selection }"
@@ -106,30 +104,31 @@
           (legendStatusChange)="onLegendStatusChange($event)"
         ></gn-ui-map-legend>
       </div>
-
-      <gn-ui-button
-        *ngIf="!showLegend && legendExists && !selection"
-        type="outline"
-        (buttonClick)="toggleLegend()"
-        extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
-        translate
-      >
-        map.legend.title
-      </gn-ui-button>
-
-      <gn-ui-loading-mask
-        *ngIf="loading"
-        class="absolute inset-0"
-        [message]="'map.loading.data' | translate"
-      ></gn-ui-loading-mask>
-      <gn-ui-popup-alert
-        *ngIf="error"
-        type="warning"
-        icon="matErrorOutlineOutline"
-        class="absolute m-2 inset-0"
-      >
-        <span translate>{{ error }}</span>
-      </gn-ui-popup-alert>
+      @if (!showLegend && legendExists && !selection) {
+        <gn-ui-button
+          type="outline"
+          (buttonClick)="toggleLegend()"
+          extraClass="absolute top-[1em] right-[1em] rounded p-1 text-xs bg-white"
+          translate
+        >
+          {{ 'map.legend.title' | translate }}
+        </gn-ui-button>
+      }
+      @if (loading) {
+        <gn-ui-loading-mask
+          class="absolute inset-0"
+          [message]="'map.loading.data' | translate"
+        ></gn-ui-loading-mask>
+      }
+      @if (error) {
+        <gn-ui-popup-alert
+          type="warning"
+          icon="matErrorOutlineOutline"
+          class="absolute m-2 inset-0"
+        >
+          <span translate>{{ error }}</span>
+        </gn-ui-popup-alert>
+      }
     </div>
-  </ng-template>
+  }
 </div>

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

@@ -7,6 +7,7 @@ import {
   Input,
   Output,
   ViewChild,
+  inject,
 } from '@angular/core'
 import { MapUtilsService } from '../../../../../../libs/feature/map/src'
 import { getLinkId, getLinkLabel } from '../../../../../../libs/util/shared/src'
@@ -27,7 +28,6 @@ import {
   map,
   shareReplay,
   switchMap,
-  take,
   tap,
 } from 'rxjs/operators'
 import { MdViewFacade } from '../state/mdview.facade'
@@ -106,6 +106,12 @@ marker('map.select.style')
   ],
 })
 export class MapViewComponent implements AfterViewInit {
+  private mdViewFacade = inject(MdViewFacade)
+  private mapUtils = inject(MapUtilsService)
+  private dataService = inject(DataService)
+  private changeRef = inject(ChangeDetectorRef)
+  private translateService = inject(TranslateService)
+
   @Input() set exceedsLimit(value: boolean) {
     this.excludeWfs$.next(value)
   }
@@ -118,7 +124,11 @@ export class MapViewComponent implements AfterViewInit {
   @Input() set selectedView(value: string) {
     this.selectedView$.next(value)
   }
-  @Input() set datavizConfig(value: any) {
+  @Input() set datavizConfig(value: {
+    view?: string
+    styleTMSIndex?: number
+    source?: DatasetOnlineResource
+  }) {
     if (value && value.view === 'map') {
       this.selectedView$.next(value.view)
       if (value.styleTMSIndex) {
@@ -345,14 +355,6 @@ export class MapViewComponent implements AfterViewInit {
     shareReplay(1)
   )
 
-  constructor(
-    private mdViewFacade: MdViewFacade,
-    private mapUtils: MapUtilsService,
-    private dataService: DataService,
-    private changeRef: ChangeDetectorRef,
-    private translateService: TranslateService
-  ) {}
-
   async ngAfterViewInit() {
     const map = await this.mapContainer.openlayersMap
     prioritizePageScroll(map.getInteractions())

package/src/libs/feature/record/src/lib/record-meta/record-meta.component.ts

@@ -1,10 +1,10 @@
-import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
   Input,
   OnChanges,
   OnDestroy,
+  inject,
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
@@ -14,12 +14,12 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
   template: '',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule],
+  imports: [],
 })
 export class RecordMetaComponent implements OnDestroy, OnChanges {
-  @Input() metadata: CatalogRecord
+  private meta = inject(Meta)
 
-  constructor(private meta: Meta) {}
+  @Input() metadata: CatalogRecord
 
   ngOnChanges() {
     if (this.metadata?.title) {

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

@@ -0,0 +1,8 @@
+:host {
+  --gn-ui-button-padding: 7px 8px;
+}
+
+/* Ensure OpenLayers controls are above the custom toggle */
+::ng-deep .ol-overlaycontainer-stopevent {
+  z-index: 11 !important;
+}

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

@@ -0,0 +1,87 @@
+<div class="mt-6 bg-white border border-gray-300 overflow-hidden rounded-lg">
+  <div
+    class="w-full h-[700px] md:h-[366px] flex md:flex-row flex-col border-b border-gray-300"
+  >
+    @let filterState = filterState$ | async;
+
+    <div class="w-full md:w-5/12 h-[366px] flex flex-col">
+      <gn-ui-date-range-inputs
+        [temporalExtent]="filterState.temporalExtent"
+        (temporalExtentChange)="onTemporalExtentChange($event)"
+      ></gn-ui-date-range-inputs>
+
+      <div class="mt-auto mb-8 mx-8" *ngIf="isFilterModified$ | async">
+        <gn-ui-button
+          id="reset-filters-button"
+          type="light"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </div>
+
+    <div class="w-full md:w-7/12 h-[334px] md:h-[366px] flex flex-col">
+      <gn-ui-map-container
+        #mapContainer
+        [context]="mapContext$ | async"
+        (extentChange)="onSpatialExtentChange($event)"
+        (resolvedExtentChange)="onResolvedMapExtentChange($event)"
+        class="w-full h-full"
+      >
+        <div
+          class="bg-white rounded-xl shadow-xl absolute left-1/2 transform -translate-x-1/2 bottom-0 mb-2.5 px-4 py-2 z-10 max-w-[90%] w-max"
+        >
+          <gn-ui-check-toggle
+            [value]="filterState.isSpatialExtentFilterEnabled"
+            (toggled)="onSpatialFilterToggle($event)"
+            [label]="'stac.filter.enable' | translate"
+            [color]="'primary'"
+          ></gn-ui-check-toggle>
+        </div>
+      </gn-ui-map-container>
+    </div>
+  </div>
+  <div
+    class="relative mx-5 my-[30px] min-h-[274px] flex items-center justify-center flex-col"
+  >
+    <!-- Keep grid outside ngIf to keep items$ observable alive -->
+    <gn-ui-stac-items-result-grid
+      [items]="items$ | async"
+    ></gn-ui-stac-items-result-grid>
+    <div
+      *ngIf="(items$ | async)?.length > 0; else noResultsOrError"
+      class="mt-[20px] mx-auto flex justify-center"
+    >
+      <gn-ui-previous-next-buttons
+        [listComponent]="this"
+        [displayLabels]="true"
+      ></gn-ui-previous-next-buttons>
+    </div>
+    <ng-template #noResultsOrError>
+      <gn-ui-popup-alert
+        *ngIf="error$ | async as error"
+        type="warning"
+        icon="matErrorOutlineOutline"
+        class="absolute left-0 top-0 w-full block"
+      >
+        <span translate>{{ error }}</span>
+      </gn-ui-popup-alert>
+      <div
+        *ngIf="(error$ | async) === null"
+        class="flex items-center justify-center flex-col h-full gap-[10px]"
+      >
+        <h2 class="text-center text-xl" translate>stac.results.noResults</h2>
+        <gn-ui-button
+          id="no-results-button"
+          type="secondary"
+          (buttonClick)="onResetFilters()"
+        >
+          <span translate>stac.filter.reset</span>
+          <ng-icon name="matDeleteOutline" class="ml-2"></ng-icon>
+        </gn-ui-button>
+      </div>
+    </ng-template>
+  </div>
+</div>