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

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,
@@ -54,7 +57,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -68,6 +70,7 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     PaginationButtonsComponent,
     MaxLinesComponent,
     RecordApiFormComponent,
+    UserFeedbackItemComponent,
     ImageOverlayPreviewComponent,
   ],
   exports: [
@@ -76,7 +79,6 @@ import { ImageOverlayPreviewComponent } from './image-overlay-preview/image-over
     DownloadItemComponent,
     DownloadsListComponent,
     ApiCardComponent,
-    LinkCardComponent,
     RelatedRecordCardComponent,
     MetadataContactComponent,
     MetadataCatalogComponent,
@@ -91,6 +93,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/index.ts

@@ -1,21 +1,22 @@
-export * from './lib/dropdown-selector/dropdown-selector.component'
-export * from './lib/dropdown-selector/dropdown-selector.model'
-export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
-export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
-export * from './lib/text-input/text-input.component'
-export * from './lib/chips-input/chips-input.component'
-export * from './lib/text-area/text-area.component'
 export * from './lib/autocomplete/autocomplete.component'
-export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/button/button.component'
-export * from './lib/viewport-intersector/viewport-intersector.component'
 export * from './lib/check-toggle/check-toggle.component'
-export * from './lib/ui-inputs.module'
+export * from './lib/checkbox/checkbox.component'
+export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
+export * from './lib/date-picker/date-picker.component'
+export * from './lib/date-range-picker/date-range-picker.component'
 export * from './lib/drag-and-drop-file-input/drag-and-drop-file-input.component'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.component'
+export * from './lib/dropdown-multiselect/dropdown-multiselect.model'
+export * from './lib/dropdown-selector/dropdown-selector.component'
+export * from './lib/dropdown-selector/dropdown-selector.model'
+export * from './lib/editable-label/editable-label.directive'
 export * from './lib/navigation-button/navigation-button.component'
-export * from './lib/viewport-intersector/viewport-intersector.component'
-export * from './lib/checkbox/checkbox.component'
 export * from './lib/search-input/search-input.component'
-export * from './lib/date-range-picker/date-range-picker.component'
-export * from './lib/editable-label/editable-label.directive'
+export * from './lib/star-toggle/star-toggle.component'
+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/date-picker/date-picker.component.css

@@ -0,0 +1,3 @@
+mat-datepicker-toggle {
+  @apply text-primary;
+}

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.html

@@ -0,0 +1,11 @@
+<div
+  class="flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white"
+>
+  <input
+    [matDatepicker]="picker"
+    [value]="date"
+    (dateChange)="dateChange.emit($event.value)"
+  />
+  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+</div>
+<mat-datepicker #picker></mat-datepicker>

package/src/libs/ui/inputs/src/lib/date-picker/date-picker.component.ts

@@ -0,0 +1,16 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { MatNativeDateModule } from '@angular/material/core'
+import { MatDatepickerModule } from '@angular/material/datepicker'
+import { MatIconModule } from '@angular/material/icon'
+
+@Component({
+  selector: 'gn-ui-date-picker',
+  templateUrl: './date-picker.component.html',
+  styleUrls: ['./date-picker.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
+})
+export class DatePickerComponent {
+  @Input() date: Date
+  @Output() dateChange = new EventEmitter<Date>()
+}

package/src/libs/ui/inputs/src/lib/date-range-picker/date-range-picker.component.ts

@@ -1,10 +1,17 @@
 import { Component } from '@angular/core'
-import { MatDatepickerInputEvent } from '@angular/material/datepicker'
+import { MatNativeDateModule } from '@angular/material/core'
+import {
+  MatDatepickerInputEvent,
+  MatDatepickerModule,
+} from '@angular/material/datepicker'
+import { MatIconModule } from '@angular/material/icon'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
   templateUrl: './date-range-picker.component.html',
   styleUrls: ['./date-range-picker.component.css'],
+  standalone: true,
+  imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })
 export class DateRangePickerComponent {
   startDate: Date

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/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-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)"
@@ -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

@@ -14,14 +14,30 @@ 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
+  @Input() disabled: boolean
   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,
@@ -49,7 +48,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
     CopyTextButtonComponent,
     CheckboxComponent,
     SearchInputComponent,
-    DateRangePickerComponent,
   ],
   imports: [
     CommonModule,
@@ -73,6 +71,8 @@ import { ImageInputComponent } from './image-input/image-input.component'
     TextAreaComponent,
     ButtonComponent,
     ImageInputComponent,
+    DropdownSelectorComponent,
+    DateRangePickerComponent,
   ],
   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;
+}

package/src/libs/ui/layout/src/lib/block-list/block-list.component.html

@@ -0,0 +1,20 @@
+<div
+  class="block-list-container flex flex-col"
+  #blockContainer
+  [ngClass]="containerClass"
+  [ngStyle]="{ minHeight: minHeight + 'px' }"
+>
+  <ng-content></ng-content>
+</div>
+<div
+  *ngIf="pagesCount > 1"
+  class="absolute flex flex-row justify-center gap-[14px] p-1"
+  [ngClass]="paginationContainerClass"
+>
+  <button
+    *ngFor="let page of pages"
+    class="list-page-dot"
+    (click)="goToPage(page)"
+    [ngClass]="currentPage === page ? 'bg-primary' : 'bg-gray-400'"
+  ></button>
+</div>