geonetwork-ui 2.11.0-dev.96d0c6ce2 → 2.11.0-dev.9bd41a961

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

@@ -1,64 +1,201 @@
 import {
-  AfterViewChecked,
+  ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
-  ElementRef,
   EventEmitter,
   Input,
   Output,
   ViewChild,
   inject,
 } from '@angular/core'
-
-import { MatNativeDateModule } from '@angular/material/core'
+import { NgTemplateOutlet } from '@angular/common'
+import {
+  CdkOverlayOrigin,
+  ConnectedPosition,
+  OverlayModule,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MatDateFormats,
+} from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
+import { type Locale } from 'date-fns/locale'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
+import { iconoirCalendar } from '@ng-icons/iconoir'
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop'
+import { TranslateDirective, TranslatePipe } from '@ngx-translate/core'
+import { FieldFilterByRange } from '../../../../../../libs/common/domain/src/lib/model/search'
+import {
+  AutofocusDirective,
+  propagateToDocumentOnly,
+} from '../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../button/button.component'
-import { OverlayContainer } from '@angular/cdk/overlay'
-import { NgIconComponent, provideIcons } from '@ng-icons/core'
-import { matExpandLess, matExpandMore } from '@ng-icons/material-icons/baseline'
+import { provideLocalizedDateAdapter } from '../date-adapter.providers'
+
+export type DateRangeBound = 'start' | 'end'
 
 @Component({
   selector: 'gn-ui-date-range-dropdown',
   standalone: true,
   imports: [
-    NgIconComponent,
-    MatNativeDateModule,
-    MatDatepickerModule,
+    AutofocusDirective,
     ButtonComponent,
+    MatDatepickerModule,
+    NgIcon,
+    NgTemplateOutlet,
+    OverlayModule,
+    TranslateDirective,
+    TranslatePipe,
   ],
   providers: [
     provideIcons({
-      matExpandMore,
+      iconoirCalendar,
+      matClose,
       matExpandLess,
+      matExpandMore,
     }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+    provideLocalizedDateAdapter(),
   ],
   templateUrl: './date-range-dropdown.component.html',
   styleUrls: ['./date-range-dropdown.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DateRangeDropdownComponent implements AfterViewChecked {
-  private overlayContainer = inject(OverlayContainer)
+export class DateRangeDropdownComponent {
+  private scrollStrategies = inject(ScrollStrategyOptions)
+  private dateAdapter = inject<DateAdapter<Date, Locale>>(DateAdapter)
+  private dateFormats = inject<MatDateFormats>(MAT_DATE_FORMATS)
   private cdr = inject(ChangeDetectorRef)
 
   @Input() title: string
-  @Input() startDate: Date
-  @Input() endDate: Date
-  @Output() startDateChange = new EventEmitter<Date>()
-  @Output() endDateChange = new EventEmitter<Date>()
+  @Input() dateRange: FieldFilterByRange = {}
+  @Output() dateRangeChange = new EventEmitter<FieldFilterByRange>()
+
+  @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
+
+  overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'start',
+      originY: 'bottom',
+      overlayX: 'start',
+      overlayY: 'top',
+      offsetY: 8,
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'bottom',
+      offsetY: -8,
+    },
+  ]
+  scrollStrategy = this.scrollStrategies.reposition()
+  overlayOpen = false
+  expandedBound: DateRangeBound | null = 'start'
+  invalidBounds: Record<DateRangeBound, boolean> = { start: false, end: false }
+
+  constructor() {
+    // redraw when the lazily loaded UI locale reaches the adapter
+    this.dateAdapter.localeChanges
+      .pipe(takeUntilDestroyed())
+      .subscribe(() => this.cdr.markForCheck())
+  }
+
+  get startDate() {
+    return this.dateRange.start
+  }
+
+  get endDate() {
+    return this.dateRange.end
+  }
 
-  @ViewChild('picker') picker: ElementRef
-  isPickerDisplayed = false
+  get selectedDatesCount() {
+    return (this.startDate ? 1 : 0) + (this.endDate ? 1 : 0)
+  }
+
+  openOverlay() {
+    this.expandedBound = 'start'
+    this.overlayOpen = true
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+
+  toggleBound(bound: DateRangeBound) {
+    this.expandedBound = this.expandedBound === bound ? null : bound
+  }
+
+  formatDate(date: Date) {
+    return this.dateAdapter.format(date, this.dateFormats.display.dateInput)
+  }
+
+  onDateInput(bound: DateRangeBound, event: Event) {
+    const typedText = (event.target as HTMLInputElement).value.trim()
+    const date = typedText
+      ? this.dateAdapter.parse(typedText, this.dateFormats.parse.dateInput)
+      : null
+    if (!this.isAcceptable(bound, typedText, date)) {
+      // keep the text as typed and flag it; the filter stays on its last value
+      this.invalidBounds = { ...this.invalidBounds, [bound]: true }
+      return
+    }
+    if (bound === 'start') this.setStartDate(date)
+    else this.setEndDate(date)
+  }
+
+  normalizeDateInput(bound: DateRangeBound, event: Event) {
+    if (this.invalidBounds[bound]) return
+    const date = bound === 'start' ? this.startDate : this.endDate
+    const input = event.target as HTMLInputElement
+    input.value = date ? this.formatDate(date) : ''
+  }
+
+  private isAcceptable(
+    bound: DateRangeBound,
+    typedText: string,
+    date: Date | null
+  ) {
+    if (!typedText) return true
+    if (!date || !this.dateAdapter.isValid(date)) return false
+    return bound === 'start'
+      ? !this.endDate || date <= this.endDate
+      : !this.startDate || date >= this.startDate
+  }
+
+  setStartDate(date: Date) {
+    this.invalidBounds = { ...this.invalidBounds, start: false }
+    this.applyDateRange({ ...this.dateRange, start: date })
+    this.expandedBound = 'end'
+  }
+
+  setEndDate(date: Date) {
+    this.invalidBounds = { ...this.invalidBounds, end: false }
+    this.applyDateRange({ ...this.dateRange, end: date })
+    this.expandedBound = null
+  }
 
-  ngAfterViewChecked() {
-    this.checkPickerOverlay()
+  clearDates(event: Event) {
+    this.invalidBounds = { start: false, end: false }
+    this.expandedBound = 'start'
+    this.applyDateRange({})
+    propagateToDocumentOnly(event)
   }
 
-  checkPickerOverlay() {
-    const overlayContainerElement = this.overlayContainer.getContainerElement()
-    setTimeout(() => {
-      this.isPickerDisplayed =
-        overlayContainerElement.querySelector('.mat-datepicker-content') !==
-        null
-      this.cdr.detectChanges()
-    }, 200) // FIXME: find a better way to deal with animation delay
+  private applyDateRange(dateRange: FieldFilterByRange) {
+    this.dateRange = {
+      ...(dateRange.start && { start: dateRange.start }),
+      ...(dateRange.end && { end: dateRange.end }),
+    }
+    this.dateRangeChange.emit(this.dateRange)
   }
 }

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

@@ -5,7 +5,6 @@ import {
   Input,
   Output,
 } from '@angular/core'
-import { MatNativeDateModule } from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
 import {
@@ -14,6 +13,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirCalendar } from '@ng-icons/iconoir'
+import { provideLocalizedDateAdapter } from '../date-adapter.providers'
 
 @Component({
   selector: 'gn-ui-date-range-picker',
@@ -21,17 +21,13 @@ import { iconoirCalendar } from '@ng-icons/iconoir'
   styleUrls: ['./date-range-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    MatNativeDateModule,
-    MatDatepickerModule,
-    ButtonComponent,
-    NgIconComponent,
-  ],
+  imports: [MatDatepickerModule, ButtonComponent, NgIconComponent],
   providers: [
     provideIcons({ iconoirCalendar }),
     provideNgIconsConfig({
       size: '1.5rem',
     }),
+    provideLocalizedDateAdapter(),
   ],
 })
 export class DateRangePickerComponent {

package/src/libs/ui/inputs/src/lib/drag-and-drop-file-input/drag-and-drop-file-input.component.css

@@ -1,4 +1,5 @@
 ngx-dropzone {
   height: auto;
   border: none;
+  overflow: hidden;
 }

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

@@ -1,18 +1,31 @@
-<div class="flex h-full">
+<div
+  class="flex h-full items-center"
+  [class]="extraClass"
+  (click)="openFileSelector()"
+>
   <ngx-dropzone
-    class="flex-1"
+    class="flex-1 overflow-hidden"
     [multiple]="false"
-    (change)="selectFile($event)"
+    [disableClick]="true"
     [accept]="accept"
+    [maxFileSize]="maxFileSizeBytes"
+    [style.background-color]="dropzoneBackgroundColor"
+    (change)="selectFile($event)"
   >
-    @if (!fileName) {
-      <div class="text-gray-900 pl-2 py-2" translate="">
+    @if (!fileName || !showFileName) {
+      <div [class]="textClass">
         {{ placeholder }}
       </div>
     }
 
-    @if (fileName) {
-      <div class="text-gray-900 pl-2 py-2">{{ fileName }}</div>
+    @if (fileName && showFileName) {
+      <div [class]="textClass">
+        {{ fileName }}
+      </div>
     }
   </ngx-dropzone>
+
+  @if (icon) {
+    <ng-icon [name]="icon" class="shrink-0 text-gray-950"></ng-icon>
+  }
 </div>

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

@@ -1,30 +1,71 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
-import { NgxDropzoneModule } from 'ngx-dropzone'
+import { NgxDropzoneComponent, NgxDropzoneModule } from 'ngx-dropzone'
+import { NgIcon } from '@ng-icons/core'
+import { megabytesToBytes } from '../../../../../../libs/util/shared/src'
 
 export const placeholder = 'dropFile'
 marker('dropFile')
 
+export type DragAndDropFileInputError = 'invalid-extension' | 'file-too-large'
+
 @Component({
   selector: 'gn-ui-drag-and-drop-file-input',
   templateUrl: './drag-and-drop-file-input.component.html',
   styleUrls: ['./drag-and-drop-file-input.component.css'],
   standalone: true,
-  imports: [NgxDropzoneModule],
+  imports: [NgxDropzoneModule, NgIcon],
 })
 export class DragAndDropFileInputComponent {
   @Input() placeholder = placeholder
   @Input() accept = '*'
-  @Output() fileChange = new EventEmitter<any>()
+  @Input() maxFileSizeMb: number | null = null
+  @Input() icon: string | null = null
+  @Input() dropzoneBackgroundColor: string | null = null
+  @Input() textClass = ''
+  @Input() extraClass = ''
+  @Input() showFileName = true
+
+  @Output() fileChange = new EventEmitter<File>()
+  @Output() errorChange = new EventEmitter<DragAndDropFileInputError>()
+
   selectedFile: File = null
 
+  @ViewChild(NgxDropzoneComponent) private dropzone: NgxDropzoneComponent
+
   get fileName(): string | null {
     return this.selectedFile && this.selectedFile.name
   }
 
+  get maxFileSizeBytes(): number | null {
+    return typeof this.maxFileSizeMb === 'number'
+      ? megabytesToBytes(this.maxFileSizeMb)
+      : null
+  }
+
   selectFile(event) {
+    if (event.rejectedFiles?.length) {
+      const reason = event.rejectedFiles[0].reason
+      this.errorChange.emit(
+        reason === 'size' ? 'file-too-large' : 'invalid-extension'
+      )
+      return
+    }
     this.selectedFile = event.addedFiles[0]
-
     this.fileChange.emit(this.selectedFile)
   }
+
+  openFileSelector() {
+    this.dropzone.showFileSelector()
+  }
+
+  clear() {
+    this.selectedFile = null
+  }
 }

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.component.html

@@ -20,10 +20,13 @@
       </div>
     }
   </div>
-  <button class="h-6 w-6" data-cy="clearSelection">
+  <button
+    class="h-6 w-6 flex items-center justify-center"
+    data-test="dropdown-clear"
+  >
     @if (hasSelectedChoices && !overlayOpen) {
       <ng-icon
-        class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+        class="shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn"
         (click)="clearSelection($event)"
         name="matClose"
       ></ng-icon>
@@ -61,13 +64,13 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
+      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row gap-1 flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       @for (selected of selectedChoices; track selected) {
         <button
           type="button"
           [title]="selected.label"
-          class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity mb-1"
+          class="max-w-full bg-main text-white rounded pr-[7px] flex gap-1 items-center opacity-70 hover:opacity-100 focus:opacity-100 transition-opacity"
           (click)="select(selected, false)"
         >
           <div class="text-sm truncate leading-[26px] px-2">

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

@@ -24,7 +24,7 @@ import {
   propagateToDocumentOnly,
 } from '../../../../../../libs/util/shared/src'
 import { ButtonComponent } from '../button/button.component'
-import { NgIcon, provideIcons } from '@ng-icons/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
 import { FormsModule } from '@angular/forms'
 import { TranslatePipe } from '@ngx-translate/core'
 
@@ -46,19 +46,22 @@ import {
       matExpandMore,
       matExpandLess,
     }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
   ],
   standalone: true,
 })
-export class DropdownMultiselectComponent {
+export class DropdownMultiselectComponent<T = unknown> {
   private scrollStrategies = inject(ScrollStrategyOptions)
 
   @Input() title: string
-  @Input() choices: Choice[]
-  @Input() selected: unknown[] = []
+  @Input() choices: Choice<T>[]
+  @Input() selected: T[] = []
   @Input() allowSearch = true
   @Input() maxRows: number
   @Input() searchInputValue = ''
-  @Output() selectValues = new EventEmitter<unknown[]>()
+  @Output() selectValues = new EventEmitter<T[]>()
   @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
   @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
   @ViewChild('overlayContainer', { read: ElementRef })
@@ -115,7 +118,7 @@ export class DropdownMultiselectComponent {
 
   private setFocus() {
     setTimeout(() => {
-      this.searchFieldInput.nativeElement.focus()
+      this.searchFieldInput?.nativeElement.focus()
     }, 0)
   }
 
@@ -194,18 +197,18 @@ export class DropdownMultiselectComponent {
     this.checkboxes.get(newIndex).nativeElement.focus()
   }
 
-  isSelected(choice: Choice) {
+  isSelected(choice: Choice<T>) {
     return this.selected.indexOf(choice.value) > -1
   }
 
-  select(choice: Choice, selected: boolean) {
+  select(choice: Choice<T>, selected: boolean) {
     this.selected = selected
       ? [...this.selected.filter((v) => v !== choice.value), choice.value]
       : this.selected.filter((v) => v !== choice.value)
     this.selectValues.emit(this.selected)
   }
 
-  toggle(choice: Choice) {
+  toggle(choice: Choice<T>) {
     this.select(choice, !this.isSelected(choice))
   }
 

package/src/libs/ui/inputs/src/lib/dropdown-multiselect/dropdown-multiselect.model.ts

@@ -1,4 +1,4 @@
-export interface Choice {
-  value: unknown
+export interface Choice<T = unknown> {
+  value: T
   label: string
 }

package/src/libs/ui/inputs/src/lib/spatial-extent-dropdown/spatial-extent-dropdown.component.html

@@ -0,0 +1,111 @@
+<gn-ui-button
+  type="outline"
+  extraClass="bg-background w-full !p-[8px] !pl-[16px]"
+  [title]="title"
+  (buttonClick)="toggleOverlay()"
+  cdkOverlayOrigin
+  #overlayOrigin="cdkOverlayOrigin"
+>
+  <div class="grow flex items-center mr-2 gap-2 overflow-hidden">
+    <div class="text-left font-medium truncate py-1">
+      {{ title }}
+    </div>
+    @if (hasSelection) {
+      <div
+        class="bg-primary-lighter text-white shrink-0 rounded-full font-bold text-[12px] w-[22px] h-[22px] flex items-center justify-center"
+      >
+        1
+      </div>
+    }
+  </div>
+  <button class="h-6 w-6 flex items-center" data-cy="clearSelection">
+    @if (hasSelection && !overlayOpen) {
+      <ng-icon
+        class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"
+        (click)="removeSelection($event)"
+        name="matClose"
+      ></ng-icon>
+    }
+  </button>
+  <ng-icon
+    [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
+    class="shrink-0 opacity-40"
+  >
+  </ng-icon>
+</gn-ui-button>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+  [cdkConnectedOverlayFlexibleDimensions]="true"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="bg-white border border-gray-400 rounded shadow-lg pt-[12px] px-[16px] overlay-container w-[280px] flex flex-col gap-2"
+    [style.min-width]="overlayMinWidth"
+  >
+    <div class="text-xs text-black">
+      {{ 'search.filters.spatialExtent.helpText' | translate }}
+    </div>
+
+    <div
+      [class]="
+        (hasSelection
+          ? 'border-b-[1px] border-gray-400 pb-[20px]'
+          : 'pb-[8px]') + ' text-black'
+      "
+    >
+      <gn-ui-drag-and-drop-file-input
+        accept=".json,.geojson"
+        [placeholder]="'search.filters.spatialExtent.import' | translate"
+        [maxFileSizeMb]="maxFileSizeMb"
+        [showFileName]="false"
+        textClass="text-black truncate"
+        dropzoneBackgroundColor="transparent"
+        icon="iconoirImport"
+        extraClass="gn-ui-gray-outline-input w-full !h-[32px] px-[8px] py-[4px] justify-between"
+        (fileChange)="handleFileSelected($event)"
+        (errorChange)="handleFileError($event)"
+        data-cy="importGeojson"
+      ></gn-ui-drag-and-drop-file-input>
+    </div>
+
+    @if (hasSelection) {
+      <gn-ui-button
+        [type]="'primary-light'"
+        [title]="selectionDeleteLabelKey | translate: selectionLabelParams"
+        (buttonClick)="removeSelection($event)"
+        extraClass="group gap-x-2 w-full h-[28px] px-[8px] py-[4px] mb-[12px] bg-primary-lighter text-white"
+        data-test="spatial-extent-selected-item"
+      >
+        <ng-icon
+          name="iconoirSquareDashed"
+          class="shrink-0"
+          size="15px"
+        ></ng-icon>
+        <span class="group-hover:hidden truncate text-sm m-auto">
+          {{ selectionLabelKey | translate: selectionLabelParams }}
+        </span>
+        <span class="hidden group-hover:block truncate text-sm m-auto">
+          {{ selectionDeleteLabelKey | translate: selectionLabelParams }}
+        </span>
+        <ng-icon
+          name="iconoirCheckCircle"
+          class="group-hover:hidden shrink-0"
+          size="14px"
+        ></ng-icon>
+        <ng-icon
+          name="iconoirTrash"
+          class="!hidden group-hover:!block shrink-0"
+          size="15px"
+        ></ng-icon>
+      </gn-ui-button>
+    }
+  </div>
+</ng-template>