geonetwork-ui 2.3.0-dev.287bf00c → 2.3.0-dev.2b3239d3

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/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/feature/search/src/index.ts

@@ -8,6 +8,7 @@ export * from './lib/state/effects'
 export * from './lib/state/reducer'
 export * from './lib/utils/service/search.service'
 export * from './lib/utils/service/fields.service'
+export * from './lib/utils/service/fields'
 export * from './lib/results-list/results-list.container.component'
 export * from './lib/filter-dropdown/filter-dropdown.component'
 export * from './lib/constants'

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

@@ -36,7 +36,7 @@ marker('search.filters.contact')
   providedIn: 'root',
 })
 export class FieldsService {
-  private fields = {
+  protected fields = {
     publisher: new OrganizationSearchField(this.injector),
     format: new SimpleSearchField('format', this.injector, 'asc'),
     resourceType: new TranslatedSearchField(
@@ -76,7 +76,7 @@ export class FieldsService {
     return Object.keys(this.fields)
   }
 
-  constructor(private injector: Injector) {}
+  constructor(protected injector: Injector) {}
 
   getAvailableValues(fieldName: string) {
     if (this.supportedFields.indexOf(fieldName) === -1)

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

@@ -26,7 +26,8 @@ export class ApiCardComponent implements OnInit, OnChanges {
 
   ngOnInit() {
     this.displayApiFormButton =
-      this.link.accessServiceProtocol === 'ogcFeatures' ? true : false
+      this.link.accessServiceProtocol === 'ogcFeatures' ||
+      this.link.accessServiceProtocol === 'wfs'
   }
 
   ngOnChanges(changes: SimpleChanges) {

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

@@ -37,15 +37,31 @@
           </div>
         </div>
       </div>
-      <div class="flex flex-col gap-3">
-        <p class="text-sm" translate>record.metadata.api.form.offset</p>
-        <gn-ui-text-input
-          class="w-20"
-          [value]="offset$ | async"
-          (valueChange)="setOffset($event)"
-          hint=""
-        >
-        </gn-ui-text-input>
+      <div class="flex flex-col gap-3 relative">
+        <p class="text-sm" [class.text-gray-600]="!supportOffset" translate>
+          record.metadata.api.form.offset
+        </p>
+        <div class="flex items-center">
+          <gn-ui-text-input
+            class="w-20"
+            [value]="offset$ | async"
+            [disabled]="!supportOffset"
+            (valueChange)="supportOffset ? setOffset($event) : null"
+            hint=""
+          >
+          </gn-ui-text-input>
+          <div
+            *ngIf="!supportOffset"
+            class="flex items-center gap-2 text-orange-500 z-10 ml-3"
+          >
+            <span
+              class="material-symbols-outlined"
+              matTooltip="Not supported on this service"
+            >
+              warning
+            </span>
+          </div>
+        </div>
       </div>
       <div class="flex flex-col gap-3">
         <p class="text-sm" translate>record.metadata.api.form.type</p>

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

@@ -1,14 +1,23 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { OgcApiEndpoint } from '@camptocamp/ogc-client'
-import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { OgcApiEndpoint, WfsEndpoint } from '@camptocamp/ogc-client'
+import {
+  DatasetServiceDistribution,
+  ServiceProtocol,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 import { mimeTypeToFormat } from '../../../../../../libs/util/shared/src'
-import { BehaviorSubject, combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map, switchMap } from 'rxjs'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
   LIMIT: '-1',
   FORMAT: 'json',
 }
+
+interface OutputFormats {
+  itemFormats?: any[]
+  outputFormats?: any[]
+}
+
 @Component({
   selector: 'gn-ui-record-api-form',
   templateUrl: './record-api-form.component.html',
@@ -17,38 +26,44 @@ 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()
+    this.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
+    this.apiFeatureType = value ? value.name : undefined
+    if (value) {
+      this.apiBaseUrl = value.url.href
+      this.createEndpoint().then(() => this.parseOutputFormats())
+    }
     this.resetUrl()
   }
-  offset$ = new BehaviorSubject('')
-  limit$ = new BehaviorSubject('')
-  format$ = new BehaviorSubject('')
+
+  offset$ = new BehaviorSubject(DEFAULT_PARAMS.OFFSET)
+  limit$ = new BehaviorSubject(DEFAULT_PARAMS.LIMIT)
+  format$ = new BehaviorSubject(DEFAULT_PARAMS.FORMAT)
+  endpoint$ = new BehaviorSubject<WfsEndpoint | OgcApiEndpoint | undefined>(
+    undefined
+  )
   apiBaseUrl: string
+  apiFeatureType: string
+  supportOffset = true
+  accessServiceProtocol: ServiceProtocol | undefined
   outputFormats = [{ value: 'json', label: 'JSON' }]
-  apiQueryUrl$ = combineLatest([this.offset$, this.limit$, this.format$]).pipe(
-    map(([offset, limit, format]) => {
-      let outputUrl
-      if (this.apiBaseUrl) {
-        const url = new URL(this.apiBaseUrl)
-        const params = { offset: offset, limit: limit, f: format }
-        for (const [key, value] of Object.entries(params)) {
-          if (value && value !== '0') {
-            url.searchParams.set(key, value)
-          } else {
-            url.searchParams.delete(key)
-          }
-        }
-        outputUrl = url.toString()
-      }
-      return outputUrl
-    })
+  endpoint: WfsEndpoint | OgcApiEndpoint | undefined
+  firstCollection: string | undefined
+
+  apiQueryUrl$ = combineLatest([
+    this.offset$,
+    this.limit$,
+    this.format$,
+    this.endpoint$,
+  ]).pipe(
+    switchMap(([offset, limit, format]) =>
+      this.generateApiQueryUrl(offset, limit, format)
+    )
   )
+
   noLimitChecked$ = this.limit$.pipe(
     map((limit) => limit === '-1' || limit === '')
   )
-
   displayLimit$ = this.limit$.pipe(
     map((limit) => (limit !== '-1' ? limit : ''))
   )
@@ -58,8 +73,7 @@ export class RecordApiFormComponent {
   }
 
   setLimit(value: string) {
-    const newLimit = value === '' ? '-1' : value
-    this.limit$.next(newLimit)
+    this.limit$.next(value === '' ? '-1' : value)
   }
 
   setFormat(value: string | unknown) {
@@ -72,38 +86,84 @@ export class RecordApiFormComponent {
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
 
-  parseOutputFormats() {
-    const apiUrl =
-      this.apiBaseUrl.slice(-1) === '?'
-        ? this.apiBaseUrl.slice(0, -1)
-        : this.apiBaseUrl
-
-    this.getOutputFormats(apiUrl).then((outputFormats) => {
-      const formatsList = outputFormats.itemFormats.map((format) => {
-        const normalizedFormat = mimeTypeToFormat(format)
-        if (normalizedFormat) {
-          return {
-            label: normalizedFormat?.toUpperCase(),
-            value: normalizedFormat,
-          }
-        }
-        return null
-      })
-      this.outputFormats = this.outputFormats.concat(
-        formatsList.filter(Boolean)
+  async parseOutputFormats() {
+    if (!this.endpoint) return
+    const apiUrl = this.apiBaseUrl.endsWith('?')
+      ? this.apiBaseUrl.slice(0, -1)
+      : this.apiBaseUrl
+    const outputFormats = await this.getOutputFormats(apiUrl)
+
+    const formatsList = outputFormats.itemFormats
+      ? this.mapFormats(outputFormats.itemFormats)
+      : this.mapFormats(outputFormats.outputFormats || [])
+
+    this.outputFormats = this.outputFormats
+      .concat(formatsList.filter(Boolean))
+      .filter(
+        (format, index, self) =>
+          index === self.findIndex((t) => t.value === format.value)
       )
-      this.outputFormats = this.outputFormats
-        .filter(
-          (format, index, self) =>
-            index === self.findIndex((t) => t.value === format.value)
-        )
-        .sort((a, b) => a.label.localeCompare(b.label))
+      .sort((a, b) => a.label.localeCompare(b.label))
+  }
+
+  mapFormats(formats: any[]) {
+    return formats.map((format) => {
+      const normalizedFormat = mimeTypeToFormat(format)
+      return normalizedFormat
+        ? { label: normalizedFormat.toUpperCase(), value: normalizedFormat }
+        : null
     })
   }
 
-  async getOutputFormats(url) {
-    const endpoint = await new OgcApiEndpoint(url)
-    const firstCollection = (await endpoint.featureCollections)[0]
-    return endpoint.getCollectionInfo(firstCollection)
+  async getOutputFormats(url: string): Promise<OutputFormats> {
+    if (!this.endpoint) return {}
+    if (this.endpoint instanceof WfsEndpoint) {
+      this.supportOffset = this.endpoint.supportsStartIndex()
+      return this.endpoint.getServiceInfo() as OutputFormats
+    } else {
+      {
+        return (await this.endpoint.getCollectionInfo(
+          this.firstCollection
+        )) as OutputFormats
+      }
+    }
+  }
+
+  async createEndpoint() {
+    if (!this.apiBaseUrl || !this.accessServiceProtocol) return
+    if (this.accessServiceProtocol === 'wfs') {
+      this.endpoint = new WfsEndpoint(this.apiBaseUrl)
+      await (this.endpoint as WfsEndpoint).isReady()
+    } else {
+      this.endpoint = new OgcApiEndpoint(this.apiBaseUrl)
+      this.firstCollection = (await this.endpoint.featureCollections)[0]
+    }
+    this.endpoint$.next(this.endpoint)
+  }
+
+  async generateApiQueryUrl(
+    offset: string,
+    limit: string,
+    format: string
+  ): Promise<string> {
+    if (!this.apiBaseUrl || !this.endpoint || !this.apiFeatureType) return ''
+
+    const options = {
+      outputFormat: format,
+      startIndex: offset ? Number(offset) : undefined,
+      maxFeatures: limit !== '-1' ? Number(limit) : undefined,
+      limit: limit !== '-1' ? Number(limit) : limit === '-1' ? -1 : undefined,
+      offset: offset !== '' ? Number(offset) : undefined,
+    }
+
+    if (this.endpoint instanceof WfsEndpoint) {
+      options.maxFeatures = limit !== '-1' ? Number(limit) : undefined
+      return this.endpoint.getFeatureUrl(this.apiFeatureType, options)
+    } else {
+      return await this.endpoint.getCollectionItemsUrl(
+        this.firstCollection,
+        options
+      )
+    }
   }
 }

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/check-toggle/check-toggle.component.ts

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-check-toggle',
   templateUrl: './check-toggle.component.html',
   styleUrls: ['./check-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [FormsModule],
 })
 export class CheckToggleComponent {
   @Input() title: string

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.html

@@ -18,6 +18,7 @@
     cdkOverlayOrigin
     #overlayOrigin="cdkOverlayOrigin"
     (keydown)="handleTriggerKeydown($event)"
+    [disabled]="disabled"
   >
     <div class="grow font-medium truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}

package/src/libs/ui/inputs/src/lib/dropdown-selector/dropdown-selector.component.ts

@@ -48,6 +48,7 @@ export class DropdownSelectorComponent implements OnInit {
   @Input() maxRows: number
   @Input() extraBtnClass = ''
   @Input() minWidth = ''
+  @Input() disabled: boolean
   @Output() selectValue = new EventEmitter<DropdownChoice['value']>()
   @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
   @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay

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/inputs/src/lib/text-input/text-input.component.html

@@ -8,4 +8,5 @@
   [placeholder]="hint"
   [attr.aria-label]="hint"
   [attr.required]="required || null"
+  [disabled]="disabled"
 />

package/src/libs/ui/inputs/src/lib/text-input/text-input.component.ts

@@ -29,6 +29,7 @@ export class TextInputComponent implements AfterViewInit {
   @Input() extraClass = ''
   @Input() hint: string
   @Input() required = false
+  @Input() disabled: boolean
   rawChange = new Subject<string>()
   @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
   @ViewChild('input') input

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

@@ -44,7 +44,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     StarToggleComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
-    CheckToggleComponent,
     CopyTextButtonComponent,
     CheckboxComponent,
     SearchInputComponent,
@@ -73,6 +72,7 @@ import { ImageInputComponent } from './image-input/image-input.component'
     ImageInputComponent,
     DropdownSelectorComponent,
     DateRangePickerComponent,
+    CheckToggleComponent,
   ],
   exports: [
     DropdownSelectorComponent,

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