geonetwork-ui 2.3.2 → 2.4.0-dev.0925104f

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -13,25 +13,29 @@ import {
   SimpleChanges,
   ViewChild,
 } from '@angular/core'
-import { UntypedFormControl } from '@angular/forms'
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms'
 import {
   MatAutocomplete,
+  MatAutocompleteModule,
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import { first, merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
 import {
   catchError,
   debounceTime,
   distinctUntilChanged,
   filter,
   finalize,
-  first,
   map,
   switchMap,
   take,
   tap,
 } from 'rxjs/operators'
+import { MatIconModule } from '@angular/material/icon'
+import { PopupAlertComponent } from '../../../../../../libs/ui/widgets/src'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
 
 export type AutocompleteItem = unknown
 
@@ -40,6 +44,15 @@ export type AutocompleteItem = unknown
   templateUrl: './autocomplete.component.html',
   styleUrls: ['./autocomplete.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    MatIconModule,
+    PopupAlertComponent,
+    MatAutocompleteModule,
+    CommonModule,
+    TranslateModule,
+    ReactiveFormsModule,
+  ],
 })
 export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
@@ -48,7 +61,10 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() preventCompleteOnSelection = false
   @Input() autoFocus = false
+  @Input() minCharacterCount? = 3
+  @Input() allowSubmit = true
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -57,22 +73,28 @@ export class AutocompleteComponent
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
 
   searching: boolean
-  suggestions$: Observable<AutocompleteItem[]>
   control = new UntypedFormControl()
-  subscription = new Subscription()
   cancelEnter = true
   selectionSubject = new ReplaySubject<MatAutocompleteSelectedEvent>(1)
   lastInputValue$ = new ReplaySubject<string>(1)
   error: string | null = null
+  suggestions$: Observable<AutocompleteItem[]>
+  subscription = new Subscription()
 
-  @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
+  @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
+    item.toString()
+
+  displayWithFnInternal = (item?: AutocompleteItem) => {
+    if (item === null || item === undefined) return null
+    return this.displayWithFn(item)
+  }
 
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
-      const previousTextValue = this.displayWithFn(value.previousValue)
-      const currentTextValue = this.displayWithFn(value.currentValue)
+      const previousTextValue = this.displayWithFnInternal(value.previousValue)
+      const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
         this.updateInputValue(value.currentValue)
       }
@@ -80,20 +102,33 @@ export class AutocompleteComponent
   }
 
   ngOnInit(): void {
-    this.suggestions$ = merge(
+    const newValue$ = merge(
+      of(''),
+      this.inputCleared.pipe(map(() => '')),
       this.control.valueChanges.pipe(
         filter((value) => typeof value === 'string'),
-        filter((value: string) => value.length > 2),
-        debounceTime(400),
         distinctUntilChanged(),
-        tap(() => (this.searching = true))
-      ),
-      this.control.valueChanges.pipe(
-        filter((value) => typeof value === 'object' && value.title),
-        map((item) => item.title)
+        debounceTime(400)
       )
+    )
+
+    const externalValueChange$ = this.control.valueChanges.pipe(
+      filter((value) => typeof value === 'object' && value.title),
+      map((item) => item.title)
+    )
+
+    // this observable emits arrays of suggestions loaded using the given action
+    const suggestionsFromAction = merge(
+      newValue$.pipe(
+        filter((value: string) => value.length >= this.minCharacterCount)
+      ),
+      externalValueChange$
     ).pipe(
-      switchMap((value) => (value ? this.action(value) : of([]))),
+      tap(() => {
+        this.searching = true
+        this.error = null
+      }),
+      switchMap((value) => this.action(value)),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
@@ -101,11 +136,32 @@ export class AutocompleteComponent
       finalize(() => (this.searching = false))
     )
 
-    this.subscription = this.control.valueChanges.subscribe((any) => {
-      if (any !== '') {
-        this.cancelEnter = false
-      }
-    })
+    this.suggestions$ = merge(
+      suggestionsFromAction,
+      // if a new value is under the min char count, clear suggestions
+      newValue$.pipe(
+        filter((value: string) => value.length < this.minCharacterCount),
+        map(() => [])
+      )
+    )
+
+    // close the panel whenever suggestions are cleared
+    this.subscription.add(
+      this.suggestions$
+        .pipe(filter((suggestions) => suggestions.length === 0))
+        .subscribe(() => {
+          this.triggerRef?.closePanel()
+        })
+    )
+
+    this.subscription.add(
+      this.control.valueChanges.subscribe((any) => {
+        if (any !== '') {
+          this.cancelEnter = false
+        }
+      })
+    )
+
     this.control.valueChanges
       .pipe(filter((value) => typeof value === 'string'))
       .subscribe(this.lastInputValue$)
@@ -120,7 +176,7 @@ export class AutocompleteComponent
   }
 
   ngOnDestroy(): void {
-    this.subscription.unsubscribe()
+    this.subscription?.unsubscribe()
   }
 
   updateInputValue(value: AutocompleteItem) {
@@ -139,28 +195,36 @@ export class AutocompleteComponent
       .pipe(take(1))
       .subscribe((selection) => selection && selection.option.deselect())
     this.inputRef.nativeElement.focus()
-    this.triggerRef.closePanel()
   }
 
   handleEnter(any: string) {
-    if (!this.cancelEnter) {
+    if (!this.cancelEnter && this.allowSubmit) {
       this.inputSubmitted.emit(any)
-      this.triggerRef.closePanel()
     }
   }
 
   handleClickSearch() {
     this.inputSubmitted.emit(this.inputRef.nativeElement.value)
-    this.triggerRef.closePanel()
   }
 
+  /**
+   * This function is triggered when an item is selected in the list of displayed items.
+   * If preventCompleteOnSelection is true then the input will be left as entered by the user.
+   * If preventCompleteOnSelection is false (by default) then the input will be completed with the item selected by the user.
+   * If clearOnSelection is true then the input will be cleared upon selection.
+   * @param event
+   */
   handleSelection(event: MatAutocompleteSelectedEvent) {
     this.cancelEnter = true
     this.itemSelected.emit(event.option.value)
-    if (this.clearOnSelection) {
-      this.lastInputValue$.pipe(first()).subscribe((any) => {
-        this.inputRef.nativeElement.value = any
+    if (this.preventCompleteOnSelection) {
+      this.lastInputValue$.pipe(first()).subscribe((lastInputValue) => {
+        this.inputRef.nativeElement.value = lastInputValue
       })
+      return
+    }
+    if (this.clearOnSelection) {
+      this.inputRef.nativeElement.value = ''
     }
   }
 }

package/src/libs/ui/inputs/src/lib/badge/badge.component.html

@@ -0,0 +1,18 @@
+<div
+  class="gn-ui-badge flex items-center gap-1.5"
+  [ngClass]="
+    clickable
+      ? 'hover:bg-primary cursor-pointer transition-colors duration-100'
+      : ''
+  "
+>
+  <span><ng-content></ng-content></span>
+  <gn-ui-button
+    class="material-symbols-outlined cursor-pointer text-xs"
+    *ngIf="removable"
+    (buttonClick)="removeBadge()"
+    extraClass="p-1 bg-transparent border-0 border-transparent "
+  >
+    close
+  </gn-ui-button>
+</div>

package/src/libs/ui/inputs/src/lib/badge/badge.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { ButtonComponent } from '../button/button.component'
+
+@Component({
+  selector: 'gn-ui-badge',
+  templateUrl: './badge.component.html',
+  styleUrls: ['./badge.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, ButtonComponent],
+})
+export class BadgeComponent {
+  @Input() clickable? = false
+  @Input() removable? = false
+  @Output() badgeRemoveClicked = new EventEmitter<void>()
+
+  removeBadge() {
+    this.badgeRemoveClicked.emit()
+  }
+}

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

@@ -1,7 +1,8 @@
 <div
-  class="flex items-center justify-between pl-3 rounded-lg border border-gray-300 bg-white"
+  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
 >
   <input
+    class="pl-3"
     [matDatepicker]="picker"
     [value]="date"
     (dateChange)="dateChange.emit($event.value)"

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

@@ -1,4 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  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'
@@ -7,6 +13,7 @@ import { MatIconModule } from '@angular/material/icon'
   selector: 'gn-ui-date-picker',
   templateUrl: './date-picker.component.html',
   styleUrls: ['./date-picker.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })

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

@@ -1,24 +1,24 @@
 <div
-  class="flex items-center justify-center w-64 h-11 rounded-lg border border-gray-300 bg-white"
+  class="flex items-center justify-between rounded-lg border border-gray-300 bg-white"
 >
-  <div class="w-48 flex justify-between">
+  <div class="pl-3 flex justify-center">
     <mat-date-range-input [rangePicker]="picker" class="w-full">
       <input
-        class="w-24 text-black font-basierCircle text-base font-medium text-center"
         matStartDate
         placeholder="Start date"
-        (dateInput)="startDateSelected($event)"
+        [value]="startDate"
+        (dateInput)="startDateChange.emit($event.value)"
       />
       <input
-        class="w-24 text-black font-basierCircle text-base font-medium text-center"
         matEndDate
         placeholder="End date"
-        (dateInput)="endDateSelected($event)"
+        [value]="endDate"
+        (dateInput)="endDateChange.emit($event.value)"
       />
     </mat-date-range-input>
   </div>
   <mat-datepicker-toggle matSuffix [for]="picker">
     <mat-icon>calendar_today</mat-icon>
   </mat-datepicker-toggle>
-  <mat-date-range-picker #picker></mat-date-range-picker>
 </div>
+<mat-date-range-picker #picker></mat-date-range-picker>

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

@@ -1,27 +1,25 @@
-import { Component } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
 import {
-  MatDatepickerInputEvent,
-  MatDatepickerModule,
-} from '@angular/material/datepicker'
+  ChangeDetectionStrategy,
+  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-range-picker',
   templateUrl: './date-range-picker.component.html',
   styleUrls: ['./date-range-picker.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatIconModule, MatNativeDateModule, MatDatepickerModule],
 })
 export class DateRangePickerComponent {
-  startDate: Date
-  endDate: Date
-
-  startDateSelected(event: MatDatepickerInputEvent<Date>) {
-    this.startDate = event.value
-  }
-
-  endDateSelected(event: MatDatepickerInputEvent<Date>) {
-    this.endDate = event.value
-  }
+  @Input() startDate: Date
+  @Input() endDate: Date
+  @Output() startDateChange = new EventEmitter<Date>()
+  @Output() endDateChange = new EventEmitter<Date>()
 }

package/src/libs/ui/inputs/src/lib/editable-label/editable-label.directive.ts

@@ -1,48 +1,62 @@
 import {
+  AfterViewInit,
   Directive,
   ElementRef,
-  Renderer2,
-  AfterViewInit,
   EventEmitter,
-  Output,
   Input,
+  OnChanges,
+  Output,
+  Renderer2,
 } from '@angular/core'
 
 @Directive({
   selector: '[gnUiEditableLabel]',
   standalone: true,
 })
-export class EditableLabelDirective implements AfterViewInit {
+export class EditableLabelDirective implements OnChanges, AfterViewInit {
+  @Input() gnUiEditableLabel?: string
   @Output() editableLabelChanged = new EventEmitter<string>()
-  @Input() gnUiEditableLabel?: boolean
+
+  appendedInput: HTMLInputElement
 
   constructor(private el: ElementRef, private renderer: Renderer2) {}
 
+  ngOnChanges() {
+    if (this.appendedInput) {
+      this.renderer.setProperty(
+        this.appendedInput,
+        'value',
+        this.gnUiEditableLabel
+      )
+    }
+  }
+
   ngAfterViewInit() {
-    if (this.gnUiEditableLabel !== false) {
-      const appendedInput = this.renderer.createElement('input')
-
-      this.renderer.setStyle(appendedInput, 'background', 'inherit')
-      this.renderer.setStyle(appendedInput, 'color', 'inherit')
-      this.renderer.setStyle(appendedInput, 'font', 'inherit')
-      this.renderer.setStyle(appendedInput, 'border', 'inherit')
-      this.renderer.setStyle(appendedInput, 'width', '100%')
-      this.renderer.setStyle(appendedInput, 'padding', 'inherit')
-      this.renderer.setStyle(appendedInput, 'margin', '0')
-      this.renderer.setStyle(appendedInput, 'height', 'inherit')
-      this.renderer.setStyle(appendedInput, 'line-height', 'inherit')
-      this.renderer.setStyle(appendedInput, 'text-decoration', 'inherit')
-
-      const hostContent = this.el.nativeElement.textContent || ''
-      const formattedContent = hostContent.replace(/\s+/g, ' ').trim()
-      this.renderer.setProperty(appendedInput, 'value', formattedContent)
-      this.renderer.setProperty(this.el.nativeElement, 'innerHTML', '')
-
-      this.renderer.listen(appendedInput, 'input', (event) => {
+    if (this.gnUiEditableLabel !== undefined) {
+      this.appendedInput = this.renderer.createElement('input')
+
+      this.renderer.setStyle(this.appendedInput, 'background', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'color', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'font', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'border', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'width', '100%')
+      this.renderer.setStyle(this.appendedInput, 'padding', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'margin', '0')
+      this.renderer.setStyle(this.appendedInput, 'height', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'line-height', 'inherit')
+      this.renderer.setStyle(this.appendedInput, 'text-decoration', 'inherit')
+
+      this.renderer.setProperty(
+        this.appendedInput,
+        'value',
+        this.gnUiEditableLabel
+      )
+
+      this.renderer.listen(this.appendedInput, 'input', (event) => {
         this.editableLabelChanged.emit(event.target.value)
       })
 
-      this.renderer.appendChild(this.el.nativeElement, appendedInput)
+      this.renderer.appendChild(this.el.nativeElement, this.appendedInput)
     }
   }
 }

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

@@ -0,0 +1,85 @@
+<div class="w-full flex flex-col gap-[16px]">
+  <label
+    gnUiFilesDrop
+    class="flex-1 border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-4 transition-colors duration-100"
+    [ngClass]="{
+      'border-primary-lighter bg-primary-white': dragFilesOver,
+      'border-gray-300': !dragFilesOver
+    }"
+    (dragFilesOver)="handleDragFilesOver($event)"
+    (dropFiles)="handleDropFiles($event)"
+  >
+    <div
+      class="w-14 h-14 rounded-md bg-gray-50 grid"
+      *ngIf="!isUploadInProgress"
+    >
+      <mat-icon
+        *ngIf="!dragFilesOver"
+        class="material-symbols-outlined place-self-center text-primary"
+        >cloud_upload</mat-icon
+      >
+      <mat-icon
+        *ngIf="dragFilesOver"
+        class="material-symbols-outlined place-self-center text-primary"
+        >add_box</mat-icon
+      >
+    </div>
+    <div
+      *ngIf="isUploadInProgress"
+      class="w-14 h-14 grid items-center justify-center"
+    >
+      <div class="text-gray-100 absolute">
+        <mat-progress-spinner
+          class="place-self-center"
+          [diameter]="56"
+          mode="determinate"
+          [value]="100"
+        ></mat-progress-spinner>
+      </div>
+      <div class="text-primary absolute">
+        <mat-progress-spinner
+          class="place-self-center"
+          [diameter]="56"
+          mode="determinate"
+          [value]="uploadProgress"
+        ></mat-progress-spinner>
+      </div>
+      <span class="text-sm text-main font-bold">{{ uploadProgress }}%</span>
+    </div>
+    <div class="flex flex-col items-center gap-1">
+      <p class="font-medium">
+        {{ getPrimaryText() | translate: { sizeMB: maxSizeMB.toFixed(0) } }}
+      </p>
+      <p
+        class="text-sm"
+        [class]="
+          isUploadInProgress
+            ? 'font-bold text-primary cursor-pointer'
+            : 'font-medium text-gray-500'
+        "
+        (click)="handleSecondaryTextClick()"
+      >
+        {{ getSecondaryText() | translate }}
+      </p>
+    </div>
+    <p class="w-full flex flex-row items-center justify-stretch gap-[16px]">
+      <span class="border-b border-gray-300 grow"></span>
+      <span class="text-sm font-medium text-gray-500 or-input-url" translate>
+        input.file.orInputUrl</span
+      >
+      <span class="border-b border-gray-300 grow"></span>
+    </p>
+    <input
+      type="file"
+      class="hidden"
+      (change)="handleFileInput($event)"
+      [disabled]="isUploadInProgress"
+    />
+
+    <gn-ui-url-input
+      class="w-full"
+      [disabled]="isUploadInProgress"
+      (valueChange)="handleUrlChange($event)"
+    ></gn-ui-url-input>
+  </label>
+</div>

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

@@ -0,0 +1,91 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
+import { ButtonComponent } from '../button/button.component'
+import { FilesDropDirective } from '../files-drop/files-drop.directive'
+import { TranslateModule } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { UrlInputComponent } from '../url-input/url-input.component'
+
+@Component({
+  selector: 'gn-ui-file-input',
+  templateUrl: './file-input.component.html',
+  styleUrls: ['./file-input.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [
+    CommonModule,
+    ButtonComponent,
+    MatIconModule,
+    FilesDropDirective,
+    MatProgressSpinnerModule,
+    TranslateModule,
+    UrlInputComponent,
+  ],
+})
+export class FileInputComponent {
+  @Input() maxSizeMB: number
+  @Input() uploadProgress?: number
+  @Output() fileChange: EventEmitter<File> = new EventEmitter()
+  @Output() urlChange: EventEmitter<string> = new EventEmitter()
+  @Output() uploadCancel: EventEmitter<void> = new EventEmitter()
+
+  dragFilesOver = false
+
+  get isUploadInProgress() {
+    return this.uploadProgress !== undefined
+  }
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  getPrimaryText() {
+    if (this.uploadProgress) {
+      return marker('input.file.uploadProgressLabel')
+    }
+    return marker('input.file.selectFileLabel')
+  }
+
+  getSecondaryText() {
+    if (this.uploadProgress) {
+      return marker('input.file.uploadProgressCancel')
+    }
+    return marker('input.file.dropFileLabel')
+  }
+
+  handleDragFilesOver(dragFilesOver: boolean) {
+    this.dragFilesOver = dragFilesOver
+    this.cd.markForCheck()
+  }
+
+  handleDropFiles(files: File[]) {
+    if (files.length > 0) {
+      this.fileChange.emit(files[0])
+    }
+  }
+
+  handleFileInput(event: Event) {
+    this.handleDropFiles(Array.from((event.target as HTMLInputElement).files))
+  }
+
+  handleUrlChange(url: string) {
+    this.urlChange.emit(url)
+  }
+
+  handleSecondaryTextClick() {
+    if (this.uploadProgress) {
+      this.handleCancel()
+    }
+  }
+
+  handleCancel() {
+    this.uploadCancel.emit()
+  }
+}