geonetwork-ui 2.3.0-dev.a288b23a → 2.3.0-dev.aef43725

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/{search-results-error/search-results-error.component.html → error/error.component.html}

@@ -1,7 +1,10 @@
 <div
   class="p-[1.7em] bg-red-50 text-red-800 text-[1.5em] text-center rounded-lg"
 >
-  <div *ngIf="type === types.COULD_NOT_REACH_API">
+  <div
+    *ngIf="type === types.COULD_NOT_REACH_API"
+    data-test="could-not-reach-api-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">face</mat-icon>
       <mat-icon class="material-symbols-outlined question-mark1"
@@ -13,14 +16,26 @@
     </div>
     <div translate>search.error.couldNotReachApi</div>
   </div>
-  <div *ngIf="type === types.RECEIVED_ERROR">
+  <div
+    *ngIf="type === types.DATASET_HAS_NO_LINK"
+    data-test="dataset-has-no-link-error"
+  >
+    <div class="relative opacity-40">
+      <mat-icon class="material-symbols-outlined face">computer</mat-icon>
+    </div>
+    <div translate>search.error.recordHasnolink</div>
+  </div>
+  <div *ngIf="type === types.RECEIVED_ERROR" data-test="received-error-error">
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined face">mood_bad</mat-icon>
     </div>
     <div translate>search.error.receivedError</div>
     <div *ngIf="error">{{ error }}</div>
   </div>
-  <div *ngIf="type === types.RECORD_NOT_FOUND">
+  <div
+    *ngIf="type === types.RECORD_NOT_FOUND"
+    data-test="record-not-found-error"
+  >
     <div class="relative opacity-40">
       <mat-icon class="material-symbols-outlined computer">computer</mat-icon>
       <mat-icon class="material-symbols-outlined computer-question-mark"

package/src/libs/ui/elements/src/lib/{search-results-error/search-results-error.component.ts → error/error.component.ts}

@@ -4,15 +4,16 @@ export enum ErrorType {
   COULD_NOT_REACH_API,
   RECEIVED_ERROR,
   RECORD_NOT_FOUND,
+  DATASET_HAS_NO_LINK,
 }
 
 @Component({
-  selector: 'gn-ui-search-results-error',
-  templateUrl: './search-results-error.component.html',
-  styleUrls: ['./search-results-error.component.css'],
+  selector: 'gn-ui-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class SearchResultsErrorComponent {
+export class ErrorComponent {
   @Input() type!: ErrorType
   @Input() error?: string
   @Input() recordId?: string

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,12 +1,23 @@
 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, filter, 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',
@@ -15,39 +26,45 @@ 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.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
-  formatsList = [
-    { label: 'JSON', value: 'json' },
-    { label: 'CSV', value: 'csv' },
-  ]
-  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
-    })
+  apiFeatureType: string
+  supportOffset = true
+  accessServiceProtocol: ServiceProtocol | undefined
+  outputFormats = [{ value: 'json', label: 'JSON' }]
+  endpoint: WfsEndpoint | OgcApiEndpoint | undefined
+  firstCollection: string | undefined
+
+  apiQueryUrl$ = combineLatest([
+    this.offset$,
+    this.limit$,
+    this.format$,
+    // only compute the url if the endpoint was created
+    this.endpoint$.pipe(filter((endpoint) => !!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 : ''))
   )
@@ -57,8 +74,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) {
@@ -70,4 +86,83 @@ export class RecordApiFormComponent {
     this.limit$.next(DEFAULT_PARAMS.LIMIT)
     this.format$.next(DEFAULT_PARAMS.FORMAT)
   }
+
+  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)
+      )
+      .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: 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.allCollections)[0].name
+    }
+    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

@@ -12,13 +12,12 @@ import { ApiCardComponent } from './api-card/api-card.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { LinkCardComponent } from './link-card/link-card.component'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
 import { MetadataContactComponent } from './metadata-contact/metadata-contact.component'
 import { MetadataCatalogComponent } from './metadata-catalog/metadata-catalog.component'
 import { MetadataQualityComponent } from './metadata-quality/metadata-quality.component'
 import { MetadataQualityItemComponent } from './metadata-quality-item/metadata-quality-item.component'
-import { SearchResultsErrorComponent } from './search-results-error/search-results-error.component'
+import { ErrorComponent } from './error/error.component'
 import { PaginationComponent } from './pagination/pagination.component'
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
@@ -31,6 +30,8 @@ import { MaxLinesComponent } from './max-lines/max-lines.component'
 import { RecordApiFormComponent } from './record-api-form/record-api-form.component'
 import { MarkdownParserComponent } from './markdown-parser/markdown-parser.component'
 import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-overlay-preview.component'
+import { UserFeedbackItemComponent } from './user-feedback-item/user-feedback-item.component'
+import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 
 @NgModule({
   imports: [
@@ -47,6 +48,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     NgOptimizedImage,
     MarkdownParserComponent,
     ThumbnailComponent,
+    TimeSincePipe,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -54,13 +56,12 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
     MetadataQualityComponent,
     MetadataQualityItemComponent,
-    SearchResultsErrorComponent,
+    ErrorComponent,
     PaginationComponent,
     AvatarComponent,
     UserPreviewComponent,
@@ -68,6 +69,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -76,13 +78,12 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
     MetadataQualityComponent,
     MetadataQualityItemComponent,
-    SearchResultsErrorComponent,
+    ErrorComponent,
     PaginationComponent,
     ThumbnailComponent,
     AvatarComponent,
@@ -91,6 +92,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     MaxLinesComponent,
     RecordApiFormComponent,
     MarkdownParserComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
 })

package/src/libs/ui/elements/src/lib/user-feedback-item/time-since.pipe.ts

@@ -0,0 +1,54 @@
+import { Pipe, PipeTransform } from '@angular/core'
+import { TranslateService } from '@ngx-translate/core'
+import { formatDistance } from 'date-fns'
+import { de, enUS, es, fr, it, nl, pt, sk } from 'date-fns/locale'
+
+@Pipe({
+  name: 'timeSince',
+  standalone: true,
+})
+export class TimeSincePipe implements PipeTransform {
+  constructor(private translate: TranslateService) {}
+
+  transform(value: Date): string {
+    if (isNaN(value.getTime())) {
+      throw new Error('Invalid Date')
+    }
+
+    const maintenant = new Date()
+    let locale: Locale
+
+    switch (this.translate.currentLang) {
+      case 'fr':
+        locale = fr
+        break
+      case 'de':
+        locale = de
+        break
+      case 'es':
+        locale = es
+        break
+      case 'it':
+        locale = it
+        break
+      case 'nl':
+        locale = nl
+        break
+      case 'pt':
+        locale = pt
+        break
+      case 'sk':
+        locale = sk
+        break
+      case 'en':
+      default:
+        locale = enUS
+        break
+    }
+
+    return formatDistance(value, maintenant, {
+      addSuffix: true,
+      locale: locale,
+    })
+  }
+}

package/src/libs/ui/elements/src/lib/user-feedback-item/user-feedback-item.component.html

@@ -0,0 +1,75 @@
+<div
+  *ngIf="userFeedbackParent.published"
+  class="flex flex-col bg-white rounded w-full"
+  [ngClass]="[isAnAnswer ? 'ps-4 ' : 'p-4']"
+>
+  <div class="flex flex-row">
+    <div class="avatar">
+      <img
+        class="rounded-full"
+        [src]="userFeedbackParent.avatarUrl"
+        alt="avatar"
+      />
+    </div>
+    <div class="p-4 flex flex-col">
+      <span>{{ userFeedbackParent.authorName }}</span>
+      <span> {{ userFeedbackParent.date | timeSince }}</span>
+    </div>
+  </div>
+  <div data-cy="commentText" class="mt-4 whitespace-pre-line">
+    {{ userFeedbackParent.comment }}
+  </div>
+  <div
+    class="w-full"
+    *ngFor="let userFeedBacksAnswer of userFeedBacksAnswers; let last = last"
+  >
+    <hr class="-mx-4 my-6" />
+    <gn-ui-user-feedback-item
+      [userFeedbackParent]="userFeedBacksAnswer"
+      [isLastComment]="last"
+    ></gn-ui-user-feedback-item>
+  </div>
+
+  <div *ngIf="activeUser" class="mt-2 flex flex-col">
+    <hr class="-mx-4 my-4" />
+    <div
+      id="new-comment-buttons"
+      class="flex flex-row gap-2 items-center justify-end"
+    >
+      <gn-ui-text-area
+        [disabled]="isAddUserFeedbackLoading"
+        [(value)]="newAnswer"
+        (valueChange)="onNewAnswerValueChange()"
+        (keyup.control.enter)="publishNewAnswer()"
+        [placeholder]="
+          'record.metadata.userFeedbacks.newAnswer.placeholder' | translate
+        "
+        class="grow"
+        extraClass="bg-transparent border-0 placeholder-primary-darker text-primary-darker h-9"
+      ></gn-ui-text-area>
+      <div *ngIf="!isAnswerEmpty" class="flex flex-row justify-end">
+        <gn-ui-button
+          [disabled]="isAddUserFeedbackLoading"
+          [type]="'outline'"
+          (buttonClick)="publishNewAnswer()"
+          [title]="
+            'record.metadata.userFeedbacks.newAnswer.buttonTitle' | translate
+          "
+          extraClass="!p-[0.5em] text-primary-darker border-primary-darker h-9"
+        >
+          <mat-icon
+            class="material-symbols-outlined"
+            *ngIf="!isAddUserFeedbackLoading"
+          >
+            send
+          </mat-icon>
+          <ng-container *ngIf="isAddUserFeedbackLoading">
+            <div class="flex justify-center w-full">
+              <gn-ui-spinning-loader></gn-ui-spinning-loader>
+            </div>
+          </ng-container>
+        </gn-ui-button>
+      </div>
+    </div>
+  </div>
+</div>