geonetwork-ui 2.3.0-dev.f736344f → 2.3.0-dev.ff2a9db7

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>

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

@@ -0,0 +1,62 @@
+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() 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,22 +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/form-field'
+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/button/button.component.ts

@@ -15,7 +15,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
   standalone: true,
 })
 export class ButtonComponent {
-  private btnClass: string
+  private btnClass = 'gn-ui-btn-default'
 
   @Input() set type(
     value: 'primary' | 'secondary' | 'default' | 'outline' | 'light'

package/src/libs/ui/inputs/src/lib/check-toggle/check-toggle.component.ts

@@ -5,12 +5,15 @@ import {
   Input,
   Output,
 } from '@angular/core'
+import { FormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-check-toggle',
   templateUrl: './check-toggle.component.html',
   styleUrls: ['./check-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [FormsModule],
 })
 export class CheckToggleComponent {
   @Input() title: string

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.html

@@ -18,6 +18,7 @@
     cdkOverlayOrigin
     #overlayOrigin="cdkOverlayOrigin"
     (keydown)="handleTriggerKeydown($event)"
+    [disabled]="disabled"
   >
     <div class="grow font-medium truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}

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
@@ -35,6 +48,7 @@ export class DropdownSelectorComponent implements OnInit {
   @Input() maxRows: number
   @Input() extraBtnClass = ''
   @Input() minWidth = ''
+  @Input() disabled: boolean
   @Output() selectValue = new EventEmitter<DropdownChoice['value']>()
   @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
   @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay

package/src/libs/ui/inputs/src/lib/files-drop/files-drop.directive.ts

@@ -0,0 +1,45 @@
+import { Directive, HostListener, Output, EventEmitter } from '@angular/core'
+
+@Directive({
+  selector: '[gnUiFilesDrop]',
+  standalone: true,
+})
+export class FilesDropDirective {
+  @Output() dragFilesOver: EventEmitter<boolean> = new EventEmitter()
+  @Output() dropFiles: EventEmitter<File[]> = new EventEmitter()
+
+  dragEnterCounter = 0
+
+  @HostListener('dragenter', ['$event'])
+  _onDragEnter(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter++
+    this.dragFilesOver.emit(true)
+  }
+
+  @HostListener('dragover', ['$event'])
+  _onDragOver(event: DragEvent) {
+    event.preventDefault()
+  }
+
+  @HostListener('dragleave', ['$event'])
+  _onDragLeave(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = Math.max(0, this.dragEnterCounter - 1)
+    if (this.dragEnterCounter === 0) {
+      this.dragFilesOver.emit(false)
+    }
+  }
+
+  @HostListener('drop', ['$event'])
+  _onDrop(event: DragEvent) {
+    event.preventDefault()
+    this.dragEnterCounter = 0
+    this.dragFilesOver.emit(false)
+
+    const files = Array.from(event.dataTransfer.files)
+    if (files.length > 0) {
+      this.dropFiles.emit(files)
+    }
+  }
+}

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

@@ -0,0 +1,146 @@
+<ng-container *ngIf="previewUrl; then withImage; else withoutImage">
+</ng-container>
+
+<ng-template #withImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <div class="flex-1 group relative">
+      <img
+        class="w-full h-full object-cover border-2 border-gray-300 rounded-lg"
+        [alt]="altText"
+        loading="lazy"
+        [src]="previewUrl"
+      />
+      <gn-ui-button
+        [extraClass]="
+          'bg-gray-200 absolute right-2 bottom-2 invisible group-hover:visible'
+        "
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined">delete</mat-icon>
+      </gn-ui-button>
+    </div>
+    <input
+      *ngIf="showAltTextInput"
+      type="text"
+      class="py-3 px-2 border-2 border-gray-300 rounded-lg text-sm font-medium"
+      [placeholder]="'input.image.altTextPlaceholder' | translate"
+      [value]="altText"
+      (change)="handleAltTextChange($event)"
+    />
+    <div class="flex flex-row gap-2">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="handleDelete()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">delete</mat-icon>
+        {{ 'input.image.delete' | translate }}
+      </gn-ui-button>
+      <gn-ui-button
+        *ngIf="!showAltTextInput"
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="toggleAltTextInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">add</mat-icon>
+        {{ 'input.image.displayAltTextInput' | translate }}
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #withoutImage>
+  <div class="w-full h-full flex flex-col gap-2">
+    <label
+      gnUiFilesDrop
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      (dragFilesOver)="handleDragFilesOver($event)"
+      (dropFiles)="handleDropFiles($event)"
+    >
+      <div class="w-14 h-14 rounded-md bg-gray-200 grid">
+        <mat-icon
+          *ngIf="!dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >image</mat-icon
+        >
+        <mat-icon
+          *ngIf="dragFilesOver && !uploadProgress && !uploadError"
+          class="material-symbols-outlined place-self-center text-blue-500"
+          >add_box</mat-icon
+        >
+        <div *ngIf="uploadProgress">
+          <mat-progress-spinner
+            class="place-self-center"
+            [diameter]="56"
+            [mode]="'determinate'"
+            [value]="uploadProgress"
+          ></mat-progress-spinner>
+          <span
+            class="text-sm font-medium relative inline-block width-[30px] bottom-[40px] left-[15px]"
+          >
+            {{ uploadProgress }}%
+          </span>
+        </div>
+        <mat-icon
+          *ngIf="uploadError"
+          class="material-symbols-outlined place-self-center text-rose-500"
+          >broken_image</mat-icon
+        >
+      </div>
+      <div class="flex flex-col items-center gap-1">
+        <p class="font-medium">{{ getPrimaryText() | translate }}</p>
+        <p
+          class="text-sm"
+          [class]="
+            uploadProgress || uploadError
+              ? 'font-bold text-blue-500 cursor-pointer'
+              : 'font-medium text-gray-500'
+          "
+          (click)="handleSecondaryTextClick()"
+        >
+          {{ getSecondaryText() | translate }}
+        </p>
+      </div>
+      <input
+        type="file"
+        class="hidden"
+        (change)="handleFileInput($event)"
+        [disabled]="showUrlInput || uploadProgress || uploadError"
+      />
+    </label>
+    <div *ngIf="!showUrlInput" class="flex-none">
+      <gn-ui-button
+        [extraClass]="'bg-gray-200 font-bold'"
+        (buttonClick)="displayUrlInput()"
+      >
+        <mat-icon class="material-symbols-outlined me-1">link</mat-icon>
+        {{ 'input.image.displayUrlInput' | translate }}
+      </gn-ui-button>
+    </div>
+    <div *ngIf="showUrlInput" class="flex-none flex flex-col gap-2">
+      <div class="h-2"></div>
+      <div class="flex gap-2 items-center">
+        <div class="flex-1 flex rounded-lg">
+          <span
+            class="material-symbols-outlined px-4 inline-flex items-center min-w-fit rounded-s-lg border-2 border-e-0 border-gray-300"
+            >link</span
+          >
+          <input
+            type="text"
+            class="py-3 ps-1 block w-full border-2 border-s-0 border-e-0 border-gray-300 text-sm font-medium"
+            placeholder="https://exemple.com/image.jpg"
+            (change)="handleUrlChange($event)"
+          />
+          <gn-ui-button
+            class="px-1 inline-flex items-center min-w-fit rounded-e-lg border-2 border-s-0 border-gray-300 text-white"
+            [extraClass]="
+              urlInputValue && !downloadError ? 'bg-blue-500' : 'bg-gray-500'
+            "
+            [disabled]="!urlInputValue || downloadError"
+            (buttonClick)="downloadUrl()"
+          >
+            <mat-icon class="material-symbols-outlined">arrow_upward</mat-icon>
+          </gn-ui-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</ng-template>