geonetwork-ui 2.3.0-dev.2b8cc035 → 2.3.0-dev.3222f975

package/src/libs/feature/map/src/lib/add-layer-from-ogc-api/add-layer-from-ogc-api.component.ts

@@ -14,7 +14,7 @@ import {
   MapContextLayerTypeEnum,
 } from '../map-context/map-context.model'
 import { TranslateModule } from '@ngx-translate/core'
-import { UiInputsModule } from '../../../../../../libs/ui/inputs/src'
+import { DropdownChoice, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import { CommonModule } from '@angular/common'
 import { MapLayer } from '../+state/map.models'
 
@@ -30,18 +30,16 @@ export class AddLayerFromOgcApiComponent implements OnInit {
   @Output() layerAdded = new EventEmitter<MapLayer>()
 
   urlChange = new Subject<string>()
-  layerUrl = ''
   loading = false
-  layers: string[] = []
-  ogcEndpoint: OgcApiEndpoint = null
+  layers: any[] = []
   errorMessage: string | null = null
+  selectedLayerTypes: { [key: string]: DropdownChoice['value'] } = {}
 
   constructor(private changeDetectorRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     this.urlChange.pipe(debounceTime(700)).subscribe(() => {
       this.loadLayers()
-      this.changeDetectorRef.detectChanges() // manually trigger change detection
     })
   }
 
@@ -49,14 +47,13 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     this.errorMessage = null
     try {
       this.loading = true
-      if (this.ogcUrl.trim() === '') {
+      if (!this.ogcUrl.trim()) {
         this.layers = []
         return
       }
-      this.ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
-
-      // Currently only supports feature collections
-      this.layers = await this.ogcEndpoint.featureCollections
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      this.layers = await ogcEndpoint.allCollections
+      this.setDefaultLayerTypes()
     } catch (error) {
       const err = error as Error
       this.layers = []
@@ -67,14 +64,72 @@ export class AddLayerFromOgcApiComponent implements OnInit {
     }
   }
 
-  async addLayer(layer: string) {
-    this.layerUrl = await this.ogcEndpoint.getCollectionItemsUrl(layer)
+  setDefaultLayerTypes() {
+    this.layers.forEach((layer) => {
+      const choices = this.getLayerChoices(layer)
+      if (choices.length > 0) {
+        this.selectedLayerTypes[layer.name] = choices[0].value
+      }
+    })
+  }
 
-    const layerToAdd: MapContextLayerModel = {
-      name: layer,
-      url: this.layerUrl,
-      type: MapContextLayerTypeEnum.OGCAPI,
+  getLayerChoices(layer: any) {
+    const choices = []
+    if (layer.hasRecords) {
+      choices.push({ label: 'Records', value: 'record' })
+    }
+    if (layer.hasFeatures) {
+      choices.push({ label: 'Features', value: 'features' })
+    }
+    if (layer.hasVectorTiles) {
+      choices.push({ label: 'Vector Tiles', value: 'vectorTiles' })
+    }
+    if (layer.hasMapTiles) {
+      choices.push({ label: 'Map Tiles', value: 'mapTiles' })
+    }
+    return choices
+  }
+
+  shouldDisplayLayer(layer: any) {
+    return (
+      layer.hasRecords ||
+      layer.hasFeatures ||
+      layer.hasVectorTiles ||
+      layer.hasMapTiles
+    )
+  }
+
+  onLayerTypeSelect(layerName: string, selectedType: any) {
+    this.selectedLayerTypes[layerName] = selectedType
+      ? selectedType
+      : this.getLayerChoices(layerName)[0]?.value
+  }
+
+  async addLayer(layer: string, layerType: any) {
+    try {
+      const ogcEndpoint = await new OgcApiEndpoint(this.ogcUrl)
+      let layerUrl: string
+
+      if (layerType === 'vectorTiles') {
+        layerUrl = await ogcEndpoint.getVectorTilesetUrl(layer)
+      } else if (layerType === 'mapTiles') {
+        layerUrl = await ogcEndpoint.getMapTilesetUrl(layer)
+      } else {
+        layerUrl = await ogcEndpoint.getCollectionItemsUrl(layer, {
+          outputFormat: 'json',
+        })
+      }
+
+      const layerToAdd: MapContextLayerModel = {
+        name: layer,
+        url: layerUrl,
+        type: MapContextLayerTypeEnum.OGCAPI,
+        layerType: layerType,
+      }
+      this.layerAdded.emit({ ...layerToAdd, title: layer })
+    } catch (error) {
+      const err = error as Error
+      console.error('Error adding layer:', err.message)
     }
-    this.layerAdded.emit({ ...layerToAdd, title: layer })
   }
 }

package/src/libs/feature/map/src/lib/map-context/map-context.model.ts

@@ -38,6 +38,7 @@ export interface MapContextLayerOgcapiModel {
   type: 'ogcapi'
   url: string
   name: string
+  layerType: 'feature' | 'vectorTiles' | 'mapTiles' | 'record'
 }
 
 interface LayerXyzModel {

package/src/libs/feature/map/src/lib/map-context/map-context.service.ts

@@ -25,6 +25,10 @@ import WMTS from 'ol/source/WMTS'
 import { Geometry } from 'ol/geom'
 import Feature from 'ol/Feature'
 import { WfsEndpoint, WmtsEndpoint } from '@camptocamp/ogc-client'
+import OGCVectorTile from 'ol/source/OGCVectorTile.js'
+import { MVT } from 'ol/format'
+import VectorTileLayer from 'ol/layer/VectorTile'
+import OGCMapTile from 'ol/source/OGCMapTile.js'
 
 export const DEFAULT_BASELAYER_CONTEXT: MapContextLayerXyzModel = {
   type: MapContextLayerTypeEnum.XYZ,
@@ -78,14 +82,28 @@ export class MapContextService {
     const style = this.styleService.styles.default
     switch (type) {
       case MapContextLayerTypeEnum.OGCAPI:
-        return new VectorLayer({
-          source: new VectorSource({
-            format: new GeoJSON(),
-            url: layerModel.url,
-          }),
-          style,
-        })
-
+        if (layerModel.layerType === 'vectorTiles') {
+          return new VectorTileLayer({
+            source: new OGCVectorTile({
+              url: layerModel.url,
+              format: new MVT(),
+            }),
+          })
+        } else if (layerModel.layerType === 'mapTiles') {
+          return new TileLayer({
+            source: new OGCMapTile({
+              url: layerModel.url,
+            }),
+          })
+        } else {
+          return new VectorLayer({
+            source: new VectorSource({
+              format: new GeoJSON(),
+              url: layerModel.url,
+            }),
+            style,
+          })
+        }
       case MapContextLayerTypeEnum.XYZ:
         return new TileLayer({
           source: new XYZ({

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

@@ -196,7 +196,8 @@ export class MapViewComponent implements OnInit, OnDestroy {
     } else if (
       (link.type === 'service' &&
         (link.accessServiceProtocol === 'wfs' ||
-          link.accessServiceProtocol === 'esriRest')) ||
+          link.accessServiceProtocol === 'esriRest' ||
+          link.accessServiceProtocol === 'ogcFeatures')) ||
       link.type === 'download'
     ) {
       return this.dataService.readAsGeoJson(link).pipe(

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

@@ -8,7 +8,6 @@ import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/
 import {
   CatalogRecord,
   UserFeedback,
-  UserFeedbackViewModel,
 } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 

package/src/libs/ui/elements/src/lib/downloads-list/downloads-list.component.ts

@@ -95,6 +95,6 @@ export class DownloadsListComponent {
   }
 
   isFromWfs(link: DatasetDistribution) {
-    return link.type === 'service' && link.accessServiceProtocol === 'wfs'
+    return link.type === 'download' && link.accessServiceProtocol === 'wfs'
   }
 }

package/src/libs/ui/elements/src/lib/link-card/link-card.component.html

@@ -1,25 +1,43 @@
 <a
   [href]="link.url"
   target="_blank"
-  class="flex flex-col justify-between group h-40 grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden lg:w-80"
+  class="flex flex-col justify-between group grow py-5 px-5 bg-white rounded border-gray-300 filter card-shadow overflow-hidden"
+  [ngClass]="{ 'h-40': !compact }"
+  [title]="title"
 >
-  <div class="max-h-24 overflow-hidden text-ellipsis">
-    <p
-      class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
-    >
-      {{ link.name }}
-    </p>
-    <p class="font-medium text-sm break-words">
-      {{ link.description }}
-    </p>
-    <p
-      *ngIf="!link.name && !link.description"
-      class="font-medium text-sm break-words truncate"
-    >
-      {{ link.url }}
-    </p>
-  </div>
-  <div>
-    <mat-icon class="material-symbols-outlined card-icon">open_in_new</mat-icon>
-  </div>
+  <ng-container *ngIf="!compact; else compactTpl">
+    <div class="max-h-24 overflow-hidden text-ellipsis">
+      <p
+        class="font-title font-medium text-21 text-black break-words mb-1 line-clamp-2"
+      >
+        {{ link.name }}
+      </p>
+      <p class="font-medium text-sm break-words">
+        {{ link.description }}
+      </p>
+      <p
+        *ngIf="!link.name && !link.description"
+        class="font-medium text-sm break-words truncate"
+      >
+        {{ link.url }}
+      </p>
+    </div>
+    <div>
+      <mat-icon class="material-symbols-outlined card-icon"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-container>
+  <ng-template #compactTpl>
+    <div class="flex items-center justify-between gap-4">
+      <p
+        class="overflow-hidden font-title font-medium text-21 text-black text-ellipsis whitespace-nowrap"
+      >
+        {{ link.name || link.description }}
+      </p>
+      <mat-icon class="material-symbols-outlined card-icon flex-shrink-0"
+        >open_in_new</mat-icon
+      >
+    </div>
+  </ng-template>
 </a>

package/src/libs/ui/elements/src/lib/link-card/link-card.component.ts

@@ -1,12 +1,24 @@
 import { Component, ChangeDetectionStrategy, Input } from '@angular/core'
 import { DatasetDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
 
 @Component({
   selector: 'gn-ui-link-card',
   templateUrl: './link-card.component.html',
   styleUrls: ['./link-card.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule],
 })
 export class LinkCardComponent {
   @Input() link: DatasetDistribution
+  @Input() compact = false
+
+  get title() {
+    if (this.link.name && this.link.description) {
+      return `${this.link.name} | ${this.link.description}`
+    }
+    return this.link.name || this.link.description || ''
+  }
 }

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -17,9 +17,11 @@ const DEFAULT_PARAMS = {
 })
 export class RecordApiFormComponent {
   @Input() set apiLink(value: DatasetServiceDistribution) {
-    this.apiBaseUrl = value ? value.url.href : undefined
     this.outputFormats = [{ value: 'json', label: 'JSON' }]
-    this.parseOutputFormats()
+    if (value) {
+      this.apiBaseUrl = value.url.href
+      this.parseOutputFormats()
+    }
     this.resetUrl()
   }
   offset$ = new BehaviorSubject('')

package/src/libs/ui/elements/src/lib/ui-elements.module.ts

@@ -57,7 +57,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -80,7 +79,6 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,

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

@@ -19,3 +19,4 @@ export * from './lib/text-area/text-area.component'
 export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/previous-next-buttons/previous-next-buttons.component'

package/src/libs/ui/inputs/src/lib/previous-next-buttons/previous-next-buttons.component.css

@@ -0,0 +1,6 @@
+:host {
+  --gn-ui-button-rounded: 100%;
+  --gn-ui-button-width: 8px;
+  --gn-ui-button-height: 8px;
+  --gn-ui-button-padding: 12px;
+}

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

@@ -0,0 +1,26 @@
+<div class="flex flex-row gap-x-4 items-center">
+  <gn-ui-button
+    data-test="previousButton"
+    [type]="isFirst ? 'default' : 'outline'"
+    [disabled]="isFirst"
+    (buttonClick)="previousButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_back
+    </mat-icon>
+  </gn-ui-button>
+  <gn-ui-button
+    data-test="nextButton"
+    [type]="isLast ? 'default' : 'outline'"
+    [disabled]="isLast"
+    (buttonClick)="nextButtonClicked()"
+  >
+    <mat-icon
+      class="material-symbols-outlined text-[14px] text-center pt-[5px]"
+    >
+      arrow_forward
+    </mat-icon>
+  </gn-ui-button>
+</div>

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

@@ -0,0 +1,32 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'gn-ui-previous-next-buttons',
+  templateUrl: './previous-next-buttons.component.html',
+  styleUrls: ['./previous-next-buttons.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [ButtonComponent, MatIconModule],
+})
+export class PreviousNextButtonsComponent {
+  @Input() isFirst: boolean
+  @Input() isLast: boolean
+
+  @Output() directionButtonClicked: EventEmitter<string> = new EventEmitter()
+
+  previousButtonClicked() {
+    this.directionButtonClicked.next('previous')
+  }
+
+  nextButtonClicked() {
+    this.directionButtonClicked.next('next')
+  }
+}

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

@@ -6,4 +6,5 @@ export * from './lib/form-field-wrapper/form-field-wrapper.component'
 export * from './lib/interactive-table/interactive-table-column/interactive-table-column.component'
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'
+export * from './lib/block-list/block-list.component'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/block-list/block-list.component.css

@@ -0,0 +1,23 @@
+:host .block-list-container ::ng-deep > * {
+  flex-shrink: 0;
+}
+
+:host {
+  position: relative;
+}
+
+.list-page-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 6px;
+  position: relative;
+}
+
+.list-page-dot:after {
+  content: '';
+  position: absolute;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -0,0 +1,20 @@
+<div
+  class="block-list-container flex flex-col"
+  #blockContainer
+  [ngClass]="containerClass"
+  [ngStyle]="{ minHeight: minHeight + 'px' }"
+>
+  <ng-content></ng-content>
+</div>
+<div
+  *ngIf="pagesCount > 1"
+  class="absolute flex flex-row justify-center gap-[14px] p-1"
+  [ngClass]="paginationContainerClass"
+>
+  <button
+    *ngFor="let page of pages"
+    class="list-page-dot"
+    (click)="goToPage(page)"
+    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
+  ></button>
+</div>

package/src/libs/ui/layout/src/lib/block-list/block-list.component.ts

@@ -0,0 +1,84 @@
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  Input,
+  QueryList,
+  ViewChild,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-block-list',
+  templateUrl: './block-list.component.html',
+  styleUrls: ['./block-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class BlockListComponent implements AfterViewInit {
+  @Input() pageSize = 5
+  @Input() containerClass = ''
+  @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
+  @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
+    ElementRef<HTMLElement>
+  >
+  @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
+
+  protected minHeight = 0
+
+  protected currentPage = 0
+  protected get pages() {
+    return new Array(this.pagesCount).fill(0).map((_, i) => i)
+  }
+
+  get isFirstPage() {
+    return this.currentPage === 0
+  }
+  get isLastPage() {
+    return this.currentPage === this.pagesCount - 1
+  }
+  get pagesCount() {
+    return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
+  }
+
+  constructor(private changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.refreshBlocksVisibility()
+
+    // we store the first height as the min-height of the list container
+    this.minHeight = this.blockContainer.nativeElement.clientHeight
+    this.changeDetector.detectChanges()
+  }
+
+  protected refreshBlocksVisibility = () => {
+    this.blocks.forEach((block, index) => {
+      block.nativeElement.style.display =
+        index >= this.currentPage * this.pageSize &&
+        index < (this.currentPage + 1) * this.pageSize
+          ? null
+          : 'none'
+    })
+  }
+
+  public goToPage(index: number) {
+    this.currentPage = Math.max(Math.min(index, this.pagesCount - 1), 0)
+    this.changeDetector.detectChanges()
+    this.refreshBlocksVisibility()
+  }
+
+  public previousPage() {
+    if (this.isFirstPage) return
+    this.goToPage(this.currentPage - 1)
+  }
+
+  public nextPage() {
+    if (this.isLastPage) return
+    this.goToPage(this.currentPage + 1)
+  }
+}

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,20 +1,23 @@
 :host .carousel-container ::ng-deep > * {
   flex-shrink: 0;
 }
+
 :host {
   position: relative;
 }
+
 .carousel-step-dot {
   width: 6px;
   height: 6px;
   border-radius: 6px;
   position: relative;
 }
+
 .carousel-step-dot:after {
   content: '';
   position: absolute;
-  left: -4px;
-  top: -4px;
-  width: 14px;
-  height: 14px;
+  left: -7px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,17 +1,17 @@
-<div #carouselOverflowContainer class="overflow-hidden h-full w-full">
-  <div class="carousel-container flex flex-row" [ngClass]="containerClass">
+<div #carouselOverflowContainer class="w-full">
+  <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>
 </div>
 <div
   *ngIf="steps.length > 1"
-  class="absolute right-0 top-0 flex flex-row justify-center gap-[10px] p-1"
+  class="absolute flex flex-row justify-center gap-[14px] p-1"
   [ngClass]="stepsContainerClass"
 >
   <button
     *ngFor="let step of steps; let i = index"
     class="carousel-step-dot"
     (click)="scrollToStep(i)"
-    [ngClass]="selectedStep === i ? 'bg-secondary' : 'bg-gray-400'"
+    [ngClass]="currentStep === i ? 'bg-primary' : 'bg-gray-400'"
   ></button>
 </div>