geonetwork-ui 2.3.0-dev.139106e0 → 2.3.0-dev.22f4da74

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

@@ -5,7 +5,11 @@ import * as MdViewActions from './mdview.actions'
 import * as MdViewSelectors from './mdview.selectors'
 import { LinkClassifierService, LinkUsage } from '../../../../../../libs/util/shared/src'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  UserFeedback,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { AvatarServiceInterface } from '../../../../../../libs/api/repository/src'
 
 @Injectable()
 /**
@@ -15,19 +19,31 @@ import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/mode
  * To clear the current record use the `close()` method.
  */
 export class MdViewFacade {
+  constructor(
+    private store: Store,
+    private linkClassifier: LinkClassifierService,
+    private avatarService: AvatarServiceInterface
+  ) {}
+
   isPresent$ = this.store.pipe(
     select(MdViewSelectors.getMetadataUuid),
     map((uuid) => !!uuid)
   )
-  isLoading$ = this.store.pipe(select(MdViewSelectors.getMetadataIsLoading))
+
+  isMetadataLoading$ = this.store.pipe(
+    select(MdViewSelectors.getMetadataIsLoading)
+  )
+
   metadata$ = this.store.pipe(
     select(MdViewSelectors.getMetadata),
     filter((md) => !!md)
   )
+
   isIncomplete$ = this.store.pipe(
     select(MdViewSelectors.getMetadataIsIncomplete),
     filter((incomplete) => incomplete !== null)
   )
+
   error$ = this.store.pipe(select(MdViewSelectors.getMetadataError))
 
   related$ = this.store.pipe(select(MdViewSelectors.getRelated))
@@ -37,11 +53,13 @@ export class MdViewFacade {
   allLinks$ = this.metadata$.pipe(
     map((record) => ('distributions' in record ? record.distributions : []))
   )
+
   apiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.API))
     )
   )
+
   mapApiLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -49,6 +67,7 @@ export class MdViewFacade {
       )
     )
   )
+
   downloadLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -56,11 +75,13 @@ export class MdViewFacade {
       )
     )
   )
+
   dataLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) => this.linkClassifier.hasUsage(link, LinkUsage.DATA))
     )
   )
+
   geoDataLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -68,9 +89,11 @@ export class MdViewFacade {
       )
     )
   )
+
   landingPageLinks$ = this.metadata$.pipe(
     map((record) => ('landingPage' in record ? [record.landingPage] : []))
   )
+
   otherLinks$ = this.allLinks$.pipe(
     map((links) =>
       links.filter((link) =>
@@ -79,10 +102,13 @@ export class MdViewFacade {
     )
   )
 
-  constructor(
-    private store: Store,
-    private linkClassifier: LinkClassifierService
-  ) {}
+  userFeedbacks$ = this.store.pipe(select(MdViewSelectors.getUserFeedbacks))
+  isAllUserFeedbackLoading$ = this.store.pipe(
+    select(MdViewSelectors.getAllUserFeedbacksLoading)
+  )
+  isAddUserFeedbackLoading$ = this.store.pipe(
+    select(MdViewSelectors.getAddUserFeedbacksLoading)
+  )
 
   /**
    * This will show an incomplete record (e.g. from a search result) as a preview
@@ -91,16 +117,30 @@ export class MdViewFacade {
   setIncompleteMetadata(incomplete: CatalogRecord) {
     this.store.dispatch(MdViewActions.setIncompleteMetadata({ incomplete }))
   }
+
   /**
    * This will trigger the load of a full metadata record
    */
   loadFull(uuid: string) {
     this.store.dispatch(MdViewActions.loadFullMetadata({ uuid }))
   }
-  close() {
-    this.store.dispatch(MdViewActions.close())
+
+  closeMetadata() {
+    this.store.dispatch(MdViewActions.closeMetadata())
   }
+
   setChartConfig(chartConfig: DatavizConfigurationModel) {
     this.store.dispatch(MdViewActions.setChartConfig({ chartConfig }))
   }
+
+  /**
+   * UserFeedbacks
+   */
+  addUserFeedback(userFeedback: UserFeedback) {
+    this.store.dispatch(MdViewActions.addUserFeedback({ userFeedback }))
+  }
+
+  loadUserFeedbacks(datasetUuid: string) {
+    this.store.dispatch(MdViewActions.loadUserFeedbacks({ datasetUuid }))
+  }
 }

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

@@ -1,61 +1,118 @@
 import { Action, createReducer, on } from '@ngrx/store'
-import * as MdViewActions from './mdview.actions'
+import * as MetadataViewActions from './mdview.actions'
 import { DatavizConfigurationModel } from '../../../../../../libs/common/domain/src/lib/model/dataviz/dataviz-configuration.model'
-import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  CatalogRecord,
+  UserFeedback,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
 
-export const MD_VIEW_FEATURE_STATE_KEY = 'mdView'
+export const METADATA_VIEW_FEATURE_STATE_KEY = 'metadataView'
 
-export interface MdViewState {
+export interface MetadataViewState {
   loadingFull: boolean
   error: { notFound?: boolean; otherError?: string } | null
   metadata?: Partial<CatalogRecord>
   related?: CatalogRecord[]
+  userFeedbacks?: UserFeedback[]
+  allUserFeedbacksLoading: boolean
+  addUserFeedbackLoading: boolean
   chartConfig?: DatavizConfigurationModel
 }
 
-export const initialMdviewState: MdViewState = {
+export const initialMetadataViewState: MetadataViewState = {
   error: null,
   loadingFull: false,
+  allUserFeedbacksLoading: false,
+  addUserFeedbackLoading: false,
 }
 
-const mdViewReducer = createReducer(
-  initialMdviewState,
-  on(MdViewActions.loadFullMetadata, (state) => ({
+const metadataViewReducer = createReducer(
+  initialMetadataViewState,
+
+  /*
+    Metadata reducers
+  */
+  on(MetadataViewActions.loadFullMetadata, (state) => ({
     ...state,
     error: null,
     loadingFull: true,
   })),
-  on(MdViewActions.setIncompleteMetadata, (state, { incomplete }) => ({
+  on(MetadataViewActions.setIncompleteMetadata, (state, { incomplete }) => ({
     ...state,
     error: null,
     metadata: incomplete,
   })),
-  on(MdViewActions.loadFullSuccess, (state, { full }) => ({
+  on(MetadataViewActions.loadFullMetadataSuccess, (state, { full }) => ({
     ...state,
     error: null,
     metadata: full,
     loadingFull: false,
   })),
-  on(MdViewActions.loadFullFailure, (state, { otherError, notFound }) => ({
-    ...state,
-    error: { otherError, notFound },
-    loadingFull: false,
-  })),
-  on(MdViewActions.setRelated, (state, { related }) => ({
+  on(
+    MetadataViewActions.loadFullMetadataFailure,
+    (state, { otherError, notFound }) => ({
+      ...state,
+      error: { otherError, notFound },
+      loadingFull: false,
+    })
+  ),
+  on(MetadataViewActions.closeMetadata, (state) => {
+    const { metadata, related, userFeedbacks, ...stateWithoutMetadata } = state
+    return stateWithoutMetadata
+  }),
+
+  /*
+    Related reducers
+  */
+  on(MetadataViewActions.setRelated, (state, { related }) => ({
     ...state,
     related,
   })),
-  on(MdViewActions.setChartConfig, (state, { chartConfig }) => ({
+
+  /*
+    ChartConfig reducers
+  */
+  on(MetadataViewActions.setChartConfig, (state, { chartConfig }) => ({
     ...state,
     chartConfig,
   })),
-  on(MdViewActions.close, (state) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { metadata, related, ...stateWithoutMd } = state
-    return stateWithoutMd
-  })
+
+  /*
+    UserFeedbacks reducers
+  */
+  on(MetadataViewActions.loadUserFeedbacks, (state) => ({
+    ...state,
+    error: null,
+    allUserFeedbacksLoading: true,
+  })),
+  on(MetadataViewActions.addUserFeedback, (state) => ({
+    ...state,
+    addUserFeedbackLoading: true,
+  })),
+  on(
+    MetadataViewActions.loadUserFeedbacksSuccess,
+    (state, { userFeedbacks }) => ({
+      ...state,
+      error: null,
+      userFeedbacks: userFeedbacks,
+      addUserFeedbackLoading: false,
+      allUserFeedbacksLoading: false,
+    })
+  ),
+  on(
+    MetadataViewActions.loadUserFeedbacksFailure,
+    (state, { otherError, notFound }) => ({
+      ...state,
+      error: { otherError, notFound },
+      addUserFeedbackLoading: false,
+      allUserFeedbacksLoading: false,
+    })
+  )
 )
 
-export function reducer(state: MdViewState | undefined, action: Action) {
-  return mdViewReducer(state, action)
+export function reducer(
+  metadataViewState: MetadataViewState | undefined,
+  action: Action
+) {
+  return metadataViewReducer(metadataViewState, action)
 }

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

@@ -1,36 +1,66 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store'
-import { MD_VIEW_FEATURE_STATE_KEY, MdViewState } from './mdview.reducer'
+import {
+  METADATA_VIEW_FEATURE_STATE_KEY,
+  MetadataViewState,
+} from './mdview.reducer'
 
-export const getMdViewState = createFeatureSelector<MdViewState>(
-  MD_VIEW_FEATURE_STATE_KEY
+export const getMdViewState = createFeatureSelector<MetadataViewState>(
+  METADATA_VIEW_FEATURE_STATE_KEY
 )
 
+/*
+  Metadata selectors
+*/
 export const getMetadataUuid = createSelector(
   getMdViewState,
-  (state: MdViewState) =>
+  (state: MetadataViewState) =>
     state.metadata ? state.metadata.uniqueIdentifier : null
 )
 export const getMetadata = createSelector(
   getMdViewState,
-  (state: MdViewState) => state.metadata
+  (state: MetadataViewState) => state.metadata
 )
 export const getMetadataIsIncomplete = createSelector(
   getMdViewState,
-  (state: MdViewState) => (state.metadata ? state.loadingFull : null)
+  (state: MetadataViewState) => (state.metadata ? state.loadingFull : null)
 )
 export const getMetadataIsLoading = createSelector(
   getMdViewState,
-  (state: MdViewState) => state.loadingFull
+  (state: MetadataViewState) => state.loadingFull
 )
 export const getMetadataError = createSelector(
   getMdViewState,
-  (state: MdViewState) => state.error
+  (state: MetadataViewState) => state.error
 )
+
+/*
+  Related selectors
+*/
 export const getRelated = createSelector(
   getMdViewState,
-  (state: MdViewState) => state.related
+  (state: MetadataViewState) => state.related
 )
+
+/*
+  Metadata selectors
+*/
 export const getChartConfig = createSelector(
   getMdViewState,
-  (state: MdViewState) => state.chartConfig
+  (state: MetadataViewState) => state.chartConfig
+)
+
+/*
+  UserFeedback selectors
+*/
+export const getUserFeedbacks = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.userFeedbacks
+)
+export const getAllUserFeedbacksLoading = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.allUserFeedbacksLoading
+)
+export const getAddUserFeedbacksLoading = createSelector(
+  getMdViewState,
+  (state: MetadataViewState) => state.addUserFeedbackLoading
 )

package/src/libs/feature/router/src/lib/default/state/router.effects.ts

@@ -15,7 +15,7 @@ import {
 } from '../../../../../../../libs/common/domain/src/lib/model/search'
 import { Actions, createEffect, ofType } from '@ngrx/effects'
 import { navigation } from '@ngrx/router-store/data-persistence'
-import { of, pairwise, startWith, withLatestFrom } from 'rxjs'
+import { of, pairwise, startWith } from 'rxjs'
 import { map, mergeMap, tap } from 'rxjs/operators'
 import * as RouterActions from './router.actions'
 import { RouterFacade } from './router.facade'
@@ -141,7 +141,7 @@ export class RouterEffects {
   navigateToSearch$ = createEffect(() =>
     this._actions$.pipe(
       navigation(this.routerConfig.searchRouteComponent, {
-        run: () => MdViewActions.close(),
+        run: () => MdViewActions.closeMetadata(),
       })
     )
   )

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>
@@ -55,7 +71,7 @@
           extraBtnClass="secondary min-w-full !w-40 !text-black"
           [showTitle]="false"
           class="text-black"
-          [choices]="formatsList"
+          [choices]="outputFormats"
           (selectValue)="setFormat($event)"
           [selected]="format$ | async"
         ></gn-ui-dropdown-selector>

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

@@ -1,6 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
-import { DatasetServiceDistribution } from '../../../../../../libs/common/domain/src/lib/model/record'
-import { BehaviorSubject, combineLatest, map } from 'rxjs'
+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, switchMap } from 'rxjs'
 
 const DEFAULT_PARAMS = {
   OFFSET: '',
@@ -15,19 +20,27 @@ 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.accessServiceProtocol = value ? value.accessServiceProtocol : undefined
+    this.apiFeatureType = value ? value.name : undefined
+    if (value) {
+      this.apiBaseUrl = value.url.href
+      this.parseOutputFormats()
+    }
     this.resetUrl()
   }
+
   offset$ = new BehaviorSubject('')
   limit$ = new BehaviorSubject('')
   format$ = new BehaviorSubject('')
   apiBaseUrl: string
-  formatsList = [
-    { label: 'JSON', value: 'json' },
-    { label: 'CSV', value: 'csv' },
-  ]
+  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]) => {
+    switchMap(async ([offset, limit, format]) => {
       let outputUrl
       if (this.apiBaseUrl) {
         const url = new URL(this.apiBaseUrl)
@@ -41,6 +54,20 @@ export class RecordApiFormComponent {
         }
         outputUrl = url.toString()
       }
+
+      if (this.accessServiceProtocol === 'wfs') {
+        const wfsEndpoint = new WfsEndpoint(this.apiBaseUrl)
+        if (await wfsEndpoint.isReady()) {
+          const options = {
+            outputFormat: format,
+            startIndex: Number(offset),
+          }
+          if (limit !== '-1') {
+            options['maxFeatures'] = Number(limit)
+          }
+          outputUrl = wfsEndpoint.getFeatureUrl(this.apiFeatureType, options)
+        }
+      }
       return outputUrl
     })
   )
@@ -70,4 +97,56 @@ export class RecordApiFormComponent {
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
+
+  parseOutputFormats() {
+    const apiUrl =
+      this.apiBaseUrl.slice(-1) === '?'
+        ? this.apiBaseUrl.slice(0, -1)
+        : this.apiBaseUrl
+
+    this.getOutputFormats(apiUrl, this.accessServiceProtocol).then(
+      (outputFormats) => {
+        let formatsList = []
+        if ('itemFormats' in outputFormats) {
+          formatsList = this.mapFormats(outputFormats.itemFormats)
+        } else if ('outputFormats' in outputFormats) {
+          formatsList = this.mapFormats(outputFormats.outputFormats)
+        }
+        this.outputFormats = this.outputFormats.concat(
+          formatsList.filter(Boolean)
+        )
+        this.outputFormats = this.outputFormats
+          .filter(
+            (format, index, self) =>
+              index === self.findIndex((t) => t.value === format.value)
+          )
+          .sort((a, b) => a.label.localeCompare(b.label))
+      }
+    )
+  }
+
+  mapFormats(formats: any[]) {
+    return formats.map((format) => {
+      const normalizedFormat = mimeTypeToFormat(format)
+      if (normalizedFormat) {
+        return {
+          label: normalizedFormat.toUpperCase(),
+          value: normalizedFormat,
+        }
+      }
+      return null
+    })
+  }
+
+  async getOutputFormats(url: string, accessServiceProtocol: string) {
+    if (accessServiceProtocol === 'wfs') {
+      const endpoint = await new WfsEndpoint(url).isReady()
+      this.supportOffset = endpoint.supportsStartIndex()
+      return endpoint.getServiceInfo()
+    } else {
+      const endpoint = await new OgcApiEndpoint(url)
+      const firstCollection = (await endpoint.featureCollections)[0]
+      return endpoint.getCollectionInfo(firstCollection)
+    }
+  }
 }