geonetwork-ui 2.3.0-dev.6e2b8bea → 2.3.0-dev.9f0464ae

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/feature/search/src/lib/results-table/results-table.component.html

@@ -50,20 +50,20 @@
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-sm text-white px-2 flex-shrink-0"
+          class="badge-btn min-w-[45px] text-sm text-white px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
           {{ formats[1] }}
         </span>
-        <div class="flex-shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>

package/src/libs/ui/catalog/src/lib/organisation-preview/organisation-preview.component.html

@@ -4,7 +4,7 @@
     [title]="organisation.name"
   >
     <div
-      class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
+      class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 h-36"
     >
       <gn-ui-thumbnail
         class="relative h-full w-full"
@@ -13,20 +13,20 @@
       >
       </gn-ui-thumbnail>
     </div>
-    <div class="px-3 pb-2 capitalize flex flex-col flex-grow overflow-hidden">
+    <div class="px-3 pb-2 capitalize flex flex-col grow overflow-hidden">
       <span
-        class="flex-shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
+        class="shrink-0 mb-3 mt-5 font-title text-21 text-title group-hover:text-primary line-clamp-2 sm:mt-2 transition-colors"
         data-cy="organizationName"
       >
         {{ organisation.name }}</span
       >
       <p
-        class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 flex-grow flex-shrink-1 overflow-hidden"
+        class="abstract mt-4 mb-5 sm:mb-2 sm:mt-0 grow shrink-1 overflow-hidden"
         data-cy="organizationDesc"
       >
         {{ organisation.description }}
       </p>
-      <div class="flex-shrink-0 text-primary opacity-50 flex leading-6">
+      <div class="shrink-0 text-primary opacity-50 flex leading-6">
         <mat-icon class="material-symbols-outlined text-primary opacity-50 mr-1"
           >folder_open
         </mat-icon>

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

@@ -1,24 +1,24 @@
-export * from './lib/ui-elements.module'
-export * from './lib/metadata-info/metadata-info.component'
-export * from './lib/metadata-contact/metadata-contact.component'
-export * from './lib/metadata-catalog/metadata-catalog.component'
-export * from './lib/metadata-quality/metadata-quality.component'
-export * from './lib/metadata-quality-item/metadata-quality-item.component'
-export * from './lib/search-results-error/search-results-error.component'
-export * from './lib/thumbnail/thumbnail.component'
-export * from './lib/content-ghost/content-ghost.component'
-export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/api-card/api-card.component'
 export * from './lib/avatar/avatar.component'
 export * from './lib/content-ghost/content-ghost.component'
 export * from './lib/download-item/download-item.component'
 export * from './lib/downloads-list/downloads-list.component'
+export * from './lib/image-overlay-preview/image-overlay-preview.component'
 export * from './lib/link-card/link-card.component'
+export * from './lib/markdown-editor/markdown-editor.component'
+export * from './lib/markdown-parser/markdown-parser.component'
+export * from './lib/max-lines/max-lines.component'
+export * from './lib/metadata-catalog/metadata-catalog.component'
+export * from './lib/metadata-contact/metadata-contact.component'
+export * from './lib/metadata-info/metadata-info.component'
+export * from './lib/metadata-quality-item/metadata-quality-item.component'
+export * from './lib/metadata-quality/metadata-quality.component'
+export * from './lib/pagination-buttons/pagination-buttons.component'
 export * from './lib/pagination/pagination.component'
+export * from './lib/record-api-form/record-api-form.component'
 export * from './lib/related-record-card/related-record-card.component'
 export * from './lib/search-results-error/search-results-error.component'
+export * from './lib/thumbnail/thumbnail.component'
+export * from './lib/ui-elements.module'
 export * from './lib/user-preview/user-preview.component'
-export * from './lib/max-lines/max-lines.component'
-export * from './lib/record-api-form/record-api-form.component'
-export * from './lib/markdown-parser/markdown-parser.component'
-export * from './lib/image-overlay-preview/image-overlay-preview.component'
+export * from './lib/notification/notification.component'

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/image-overlay-preview/image-overlay-preview.component.html

@@ -6,7 +6,7 @@
     *ngIf="imageUrl"
     [showContent]="imageUrl !== undefined"
     data-cy="record-thumbnail"
-    class="flex-shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
+    class="shrink-0 bg-gray-100 rounded-lg overflow-hidden w-full border border-gray-300 group-hover:shadow-xl group-hover:border-0 h-48 mb-3"
   >
     <gn-ui-thumbnail
       class="relative h-full w-full"

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/markdown-editor/markdown-editor.component.css

@@ -1,5 +0,0 @@
-.icon-small {
-  font-size: 16px;
-  height: 16px;
-  width: 16px;
-}

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.html

@@ -1,25 +1,4 @@
 <div class="h-full flex flex-col">
-  <div class="flex-none w-full flex flex-row items-center">
-    <p class="flex-none font-bold">{{ label }}</p>
-    <div class="flex-1 flex justify-end items-center">
-      <gn-ui-button
-        [extraClass]="getButtonExtraClass()"
-        (buttonClick)="togglePreview()"
-      >
-        <span class="material-symbols-outlined mr-1 icon-small">{{
-          preview ? 'visibility' : 'visibility_off'
-        }}</span>
-        {{ preview ? 'WYSIWYG' : 'Markdown' }}
-      </gn-ui-button>
-      <span
-        class="material-symbols-outlined m-2 icon-small"
-        [matTooltip]="tooltip"
-        matTooltipPosition="above"
-      >
-        help
-      </span>
-    </div>
-  </div>
   <p class="flex-none mb-2 font-medium text-sm text-gray-900">
     {{ helperText }}
   </p>

package/src/libs/ui/elements/src/lib/markdown-editor/markdown-editor.component.ts

@@ -31,26 +31,13 @@ import { MatTooltipModule } from '@angular/material/tooltip'
   ],
 })
 export class MarkdownEditorComponent {
-  @Input() label: string
-  @Input() tooltip?: string
+  @Input() preview = false
   @Input() helperText?: string
   @Input() placeholder: string
   @Input() textContent: string
   @Output() textContentChanged: EventEmitter<string> =
     new EventEmitter<string>()
 
-  preview = false
-
-  getButtonExtraClass() {
-    return `${
-      this.preview ? 'text-gray-200 bg-gray-900' : 'text-gray-900 bg-gray-200'
-    } rounded-[1.25rem] p-[0.375rem] text-xs font-medium w-24`
-  }
-
-  togglePreview() {
-    this.preview = !this.preview
-  }
-
   textContentChangedHandler(textContent: string) {
     this.textContent = textContent
     this.textContentChanged.emit(this.textContent)

package/src/libs/ui/elements/src/lib/notification/notification.component.html

@@ -0,0 +1,52 @@
+<div
+  class="p-[16px] flex flex-row gap-[16px] items-start border border-gray-200 shadow-md rounded bg-background"
+>
+  <div
+    role="alert"
+    class="rounded-full text-white p-[6px] w-[32px] h-[32px] flex shrink-0"
+    [ngClass]="{
+      'bg-red-500': type === 'error',
+      'bg-yellow-500': type === 'warning',
+      'bg-green-500': type === 'success',
+      'bg-blue-500': type === 'info'
+    }"
+    [ngSwitch]="type"
+  >
+    <mat-icon class="material-symbols-outlined !w-[18px] !h-[18px] text-[20px]">
+      <ng-container *ngSwitchCase="'success'">check_circle</ng-container>
+      <ng-container *ngSwitchCase="'info'">info</ng-container>
+      <ng-container *ngSwitchCase="'warning'">warning</ng-container>
+      <ng-container *ngSwitchCase="'error'">error</ng-container>
+    </mat-icon>
+  </div>
+  <div
+    class="flex flex-col items-start gap-[4px] pt-[3px] grow shrink overflow-hidden"
+  >
+    <div class="font-bold text-[16px] text-gray-900">
+      {{ title }}
+    </div>
+    <div class="text-[14px] text-gray-800">
+      {{ text }}
+    </div>
+    <a
+      href
+      *ngIf="closeMessage"
+      class="text-[14px] gn-ui-link"
+      (click)="handleClose($event)"
+    >
+      {{ closeMessage }}
+    </a>
+  </div>
+  <gn-ui-button
+    type="light"
+    class="shrink-0"
+    (buttonClick)="handleClose()"
+    [style.--gn-ui-button-padding]="0"
+    [style.--gn-ui-button-width]="'21px'"
+    [style.--gn-ui-button-height]="'21px'"
+  >
+    <mat-icon class="material-symbols-outlined text-[22px] !w-[21px] !h-[21px]"
+      >close</mat-icon
+    >
+  </gn-ui-button>
+</div>

package/src/libs/ui/elements/src/lib/notification/notification.component.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+@Component({
+  selector: 'gn-ui-notification',
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent],
+  templateUrl: './notification.component.html',
+  styleUrls: ['./notification.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NotificationComponent {
+  @Input() type: 'info' | 'warning' | 'error' | 'success' = 'info'
+  @Input() title: string
+  @Input() text: string
+  @Input() closeMessage?: string
+  @Output() notificationClose = new EventEmitter<void>()
+
+  handleClose(event?: Event) {
+    event?.preventDefault()
+    this.notificationClose.emit()
+  }
+}