geonetwork-ui 2.3.0-dev.c22cb78a → 2.3.0-dev.e07c5606

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/ui-elements.module.ts

@@ -31,6 +31,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 +49,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     NgOptimizedImage,
     MarkdownParserComponent,
     ThumbnailComponent,
+    TimeSincePipe,
   ],
   declarations: [
     MetadataInfoComponent,
@@ -68,6 +71,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -91,6 +95,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="isActiveUserEditor" 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>

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

@@ -0,0 +1,63 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnInit,
+  Output,
+} from '@angular/core'
+import {
+  UserFeedback,
+  UserFeedbackViewModel,
+} from '../../../../../../libs/common/domain/src/lib/model/record'
+import { UserModel } from '../../../../../../libs/common/domain/src/lib/model/user'
+
+@Component({
+  selector: 'gn-ui-user-feedback-item',
+  templateUrl: './user-feedback-item.component.html',
+  styleUrls: ['./user-feedback-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserFeedbackItemComponent implements OnInit {
+  @Input() userFeedbackParent: UserFeedbackViewModel
+  @Input() userFeedBacksAnswers: UserFeedbackViewModel[]
+  @Input() isActiveUserEditor: boolean
+  @Input() activeUser: UserModel
+  @Input() isLastComment: boolean
+  @Input() isAddUserFeedbackLoading: boolean
+
+  @Output() newUserFeedbackAnswer = new EventEmitter<UserFeedback>()
+
+  isAnAnswer = false
+  newAnswer = ''
+  isAnswerEmpty = true
+
+  ngOnInit(): void {
+    this.isAnAnswer = !!this.userFeedbackParent.parentUuid
+  }
+
+  onNewAnswerValueChange() {
+    this.isAnswerEmpty = this.newAnswer.length === 0
+  }
+
+  publishNewAnswer() {
+    if (this.newAnswer.trim() === '') return
+
+    const newAnswer: UserFeedback = {
+      ...this.userFeedbackParent,
+      uuid: undefined,
+      published: true,
+      comment: this.newAnswer,
+      parentUuid: this.userFeedbackParent.uuid,
+      authorUserId: this.activeUser?.id,
+      authorEmail: this.activeUser?.email,
+      date: new Date(),
+      authorName: `${this.activeUser?.name} ${this.activeUser?.surname}`,
+    }
+
+    this.newUserFeedbackAnswer.emit(newAnswer)
+
+    this.newAnswer = ''
+    this.onNewAnswerValueChange()
+  }
+}

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

@@ -2,6 +2,7 @@ import {
   CdkConnectedOverlay,
   CdkOverlayOrigin,
   ConnectedPosition,
+  OverlayModule,
 } from '@angular/cdk/overlay'
 import {
   ChangeDetectionStrategy,
@@ -17,6 +18,10 @@ import {
 } from '@angular/core'
 import { firstValueFrom } from 'rxjs'
 import { DropdownChoice } from './dropdown-selector.model'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { MatIconModule } from '@angular/material/icon'
+import { ButtonComponent } from '../button/button.component'
 
 const DEFAULT_ROW_NUMBERS = 6
 
@@ -25,6 +30,14 @@ const DEFAULT_ROW_NUMBERS = 6
   templateUrl: './dropdown-selector.component.html',
   styleUrls: ['./dropdown-selector.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    OverlayModule,
+    MatIconModule,
+    TranslateModule,
+  ],
 })
 export class DropdownSelectorComponent implements OnInit {
   @Input() title: string

package/src/libs/ui/inputs/src/lib/text-area/text-area.component.html

@@ -2,11 +2,12 @@
   <textarea
     #input
     name="textArea"
+    [disabled]="disabled"
     [placeholder]="placeholder"
     [value]="value"
     (change)="handleChange($event)"
     (input)="handleChange($event)"
-    class="w-full pt-2 pl-2 resize-none border border-gray-800 rounded italic leading-tight focus:outline-none focus:bg-background focus:border-primary"
+    [class]="classList"
     [attr.required]="required || null"
   ></textarea>
 </div>

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

@@ -15,7 +15,12 @@ import { distinctUntilChanged } from 'rxjs/operators'
   standalone: true,
 })
 export class TextAreaComponent implements AfterViewInit {
+  private readonly baseClasses: string
+  private readonly disabledClasses: string
+
   @Input() value = ''
+  @Input() disabled = false
+  @Input() extraClass = ''
   @Input() placeholder: string
   @Input() required = false
 
@@ -24,6 +29,30 @@ export class TextAreaComponent implements AfterViewInit {
 
   @ViewChild('input') input
 
+  constructor() {
+    this.baseClasses = [
+      'w-full',
+      'pt-2',
+      'pl-2',
+      'resize-none',
+      'border',
+      'border-gray-800',
+      'rounded italic',
+      'leading-tight',
+      'focus:outline-none',
+      'focus:bg-background',
+      'focus:border-primary',
+    ].join(' ')
+
+    this.disabledClasses = ['cursor-not-allowed'].join(' ')
+  }
+
+  get classList() {
+    return `${this.baseClasses} ${this.extraClass} ${
+      this.disabled ? this.disabledClasses : ''
+    }`
+  }
+
   ngAfterViewInit() {
     this.checkRequired(this.input.nativeElement.value)
   }

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

@@ -1,6 +1,6 @@
 <input
   #input
-  class="appearance-none border border-gray-300 rounded w-full p-2 text-gray-700 leading-tight focus:outline-none focus:border-primary"
+  [class]="classList"
   type="text"
   [value]="value"
   (change)="handleChange($event)"

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

@@ -14,14 +14,29 @@ import { Subject } from 'rxjs'
   styleUrls: ['./text-input.component.css'],
 })
 export class TextInputComponent implements AfterViewInit {
+  private readonly baseClass = [
+    'appearance-none',
+    'border border-gray-300',
+    'rounded w-full',
+    'p-2',
+    'text-gray-700',
+    'leading-tight',
+    'focus:outline-none',
+    'focus:border-primary',
+  ].join(' ')
+
   @Input() value = ''
+  @Input() extraClass = ''
   @Input() hint: string
   @Input() required = false
   rawChange = new Subject<string>()
   @Output() valueChange = this.rawChange.pipe(distinctUntilChanged())
-
   @ViewChild('input') input
 
+  get classList() {
+    return `${this.baseClass} ${this.extraClass}`
+  }
+
   ngAfterViewInit() {
     this.checkRequired(this.input.nativeElement.value)
   }

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

@@ -36,7 +36,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    DropdownSelectorComponent,
     AutocompleteComponent,
     TextInputComponent,
     DragAndDropFileInputComponent,
@@ -73,6 +72,7 @@ import { ImageInputComponent } from './image-input/image-input.component'
     TextAreaComponent,
     ButtonComponent,
     ImageInputComponent,
+    DropdownSelectorComponent,
   ],
   exports: [
     DropdownSelectorComponent,

package/translations/de.json

@@ -1,4 +1,5 @@
 {
+  "button.login": "",
   "catalog.figures.datasets": "{count, plural, =0{Datensätze} one{Datensatz} other{Datensätze}}",
   "catalog.figures.organisations": "{count, plural, =0{Organisationen} one{Organisation} other{Organisationen}}",
   "chart.aggregation.average": "Durchschnitt",
@@ -144,6 +145,16 @@
   "downloads.format.unknown": "unbekannt",
   "downloads.wfs.featuretype.not.found": "Der Layer wurde nicht gefunden",
   "dropFile": "Datei ablegen",
+  "editor.record.form.license": "Lizenz",
+  "editor.record.form.license.cc-by": "",
+  "editor.record.form.license.cc-by-sa": "",
+  "editor.record.form.license.cc-zero": "",
+  "editor.record.form.license.etalab": "",
+  "editor.record.form.license.etalab-v2": "",
+  "editor.record.form.license.odbl": "",
+  "editor.record.form.license.odc-by": "",
+  "editor.record.form.license.pddl": "",
+  "editor.record.form.license.unknown": "Unbekannt oder nicht vorhanden",
   "editor.record.loadError.body": "",
   "editor.record.loadError.closeMessage": "",
   "editor.record.loadError.title": "",
@@ -278,6 +289,14 @@
   "record.metadata.quality.updateFrequency.failed": "Aktualisierungsfrequenz nicht angegeben",
   "record.metadata.quality.updateFrequency.success": "Aktualisierungsfrequenz angegeben",
   "record.metadata.related": "Ähnliche Datensätze",
+  "record.metadata.userFeedbacks": "",
+  "record.metadata.userFeedbacks.anonymousUser": "",
+  "record.metadata.userFeedbacks.sortSelector.label": "",
+  "record.metadata.userFeedbacks.sortSelector.choices.newestFirst": "",
+  "record.metadata.userFeedbacks.sortSelector.choices.oldestFirst": "",
+  "record.metadata.userFeedbacks.newComment.placeholder": "",
+  "record.metadata.userFeedbacks.newAnswer.placeholder": "",
+  "record.metadata.userFeedbacks.newAnswer.buttonTitle": "",
   "record.metadata.sheet": "Weitere Informationen verfügbar unter:",
   "record.metadata.status": "Status",
   "record.metadata.technical": "Technische Informationen",
@@ -351,6 +370,12 @@
   "table.loading.data": "Daten werden geladen...",
   "table.object.count": "Objekte in diesem Datensatz",
   "table.select.data": "Datenquelle",
+  "timeSincePipe.lessThanAMinute": "",
+  "timeSincePipe.minutesAgo": "",
+  "timeSincePipe.hoursAgo": "",
+  "timeSincePipe.daysAgo": "",
+  "timeSincePipe.monthsAgo": "",
+  "timeSincePipe.yearsAgo": "",
   "tooltip.html.copy": "HTML kopieren",
   "tooltip.id.copy": "Eindeutige Kennung kopieren",
   "tooltip.url.copy": "URL kopieren",