geonetwork-ui 2.11.0-dev.a5c259d9e → 2.11.0-dev.aed5b2e5b

package/src/libs/ui/inputs/src/lib/date-adapter.providers.ts

@@ -0,0 +1,30 @@
+import { inject, Provider } from '@angular/core'
+import {
+  DateAdapter,
+  MAT_DATE_FORMATS,
+  MAT_DATE_LOCALE,
+} from '@angular/material/core'
+import {
+  DateFnsAdapter,
+  MAT_DATE_FNS_FORMATS,
+} from '@angular/material-date-fns-adapter'
+import { enUS } from 'date-fns/locale/en-US'
+import { DateService } from '../../../../../libs/util/shared/src'
+
+export function provideLocalizedDateAdapter(): Provider[] {
+  return [
+    { provide: MAT_DATE_LOCALE, useValue: enUS },
+    { provide: MAT_DATE_FORMATS, useValue: MAT_DATE_FNS_FORMATS },
+    {
+      provide: DateAdapter,
+      useFactory: () => {
+        const dateService = inject(DateService)
+        const adapter = new DateFnsAdapter()
+        dateService
+          .getDateFnsLocale()
+          .then((locale) => adapter.setLocale(locale))
+        return adapter
+      },
+    },
+  ]
+}

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

@@ -2,15 +2,9 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
-  inject,
   Input,
   Output,
 } from '@angular/core'
-import {
-  DateAdapter,
-  MAT_DATE_LOCALE,
-  MatNativeDateModule,
-} from '@angular/material/core'
 import { MatDatepickerModule } from '@angular/material/datepicker'
 import { ButtonComponent } from '../button/button.component'
 import {
@@ -19,7 +13,7 @@ import {
   provideNgIconsConfig,
 } from '@ng-icons/core'
 import { iconoirCalendar } from '@ng-icons/iconoir'
-import { TranslateService } from '@ngx-translate/core'
+import { provideLocalizedDateAdapter } from '../date-adapter.providers'
 
 @Component({
   selector: 'gn-ui-date-picker',
@@ -27,31 +21,16 @@ import { TranslateService } from '@ngx-translate/core'
   styleUrls: ['./date-picker.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [
-    MatNativeDateModule,
-    MatDatepickerModule,
-    ButtonComponent,
-    NgIconComponent,
-  ],
+  imports: [MatDatepickerModule, ButtonComponent, NgIconComponent],
   providers: [
     provideIcons({ iconoirCalendar }),
     provideNgIconsConfig({
       size: '1.5rem',
     }),
-    {
-      provide: MAT_DATE_LOCALE,
-      useFactory: (locale: string) => locale,
-    },
+    provideLocalizedDateAdapter(),
   ],
 })
 export class DatePickerComponent {
-  private dateAdapter = inject<DateAdapter<Date>>(DateAdapter)
-  private translate = inject(TranslateService)
-
   @Input() date: Date
   @Output() dateChange = new EventEmitter<Date>()
-
-  constructor() {
-    this.dateAdapter.setLocale(this.translate.getCurrentLang())
-  }
 }

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

@@ -1,5 +1,39 @@
-:host {
-  .mat-date-range-input-container {
-    display: none;
+mat-calendar {
+  width: 100%;
+}
+
+.calendar {
+  display: grid;
+  grid-template-rows: 1fr;
+}
+
+.calendar > mat-calendar {
+  min-height: 0;
+  overflow: hidden;
+}
+
+.calendar.expand {
+  animation: open 200ms ease-out;
+}
+
+.calendar.collapse {
+  animation: open 200ms ease-in reverse;
+}
+
+@keyframes open {
+  from {
+    grid-template-rows: 0fr;
+    opacity: 0;
+  }
+  to {
+    grid-template-rows: 1fr;
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .calendar.expand,
+  .calendar.collapse {
+    animation-duration: 1ms;
   }
 }

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

@@ -1,30 +1,149 @@
 <gn-ui-button
   type="outline"
   extraClass="bg-background w-full !p-[8px] !pl-[16px]"
-  (buttonClick)="picker.open()"
+  [title]="title"
+  (buttonClick)="openOverlay()"
+  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 (selectedDatesCount) {
+      <div
+        class="gn-ui-multiselect-counter shrink-0 rounded-full font-bold text-[12px] w-5 h-5 flex items-center justify-center mr-1 selected-count"
+      >
+        {{ selectedDatesCount }}
+      </div>
+    }
   </div>
+  <button
+    class="h-6 w-6 flex items-center justify-center"
+    data-test="dropdown-clear"
+  >
+    @if (selectedDatesCount && !overlayOpen) {
+      <ng-icon
+        class="shrink-0 opacity-40 hover:opacity-80 transition-colors clear-btn"
+        (click)="clearDates($event)"
+        name="matClose"
+      ></ng-icon>
+    }
+  </button>
   <ng-icon
-    [name]="isPickerDisplayed ? 'matExpandLess' : 'matExpandMore'"
+    data-test="dropdown-toggle"
+    [name]="overlayOpen ? 'matExpandLess' : 'matExpandMore'"
     class="shrink-0 opacity-40"
   >
   </ng-icon>
 </gn-ui-button>
-<!--date range input is just present for output events and hidden from the DOM-->
-<mat-date-range-input [rangePicker]="picker">
-  <input
-    matStartDate
-    [value]="startDate"
-    (dateInput)="startDateChange.emit($event.value)"
-  />
-  <input
-    matEndDate
-    [value]="endDate"
-    (dateInput)="endDateChange.emit($event.value)"
-  />
-</mat-date-range-input>
-<mat-date-range-picker #picker></mat-date-range-picker>
+
+<ng-template
+  cdkConnectedOverlay
+  cdkConnectedOverlayHasBackdrop
+  cdkConnectedOverlayBackdropClass="cdk-overlay-transparent-backdrop"
+  [cdkConnectedOverlayOrigin]="overlayOrigin"
+  [cdkConnectedOverlayOpen]="overlayOpen"
+  [cdkConnectedOverlayPositions]="overlayPositions"
+  [cdkConnectedOverlayScrollStrategy]="scrollStrategy"
+  (overlayOutsideClick)="closeOverlay()"
+  (detach)="closeOverlay()"
+>
+  <div
+    class="w-[296px] flex flex-col gap-2 bg-white border border-gray-400 rounded px-4 py-3 shadow-lg text-main text-[16px] leading-[24px]"
+    data-test="date-range-panel"
+  >
+    <div class="flex flex-col justify-center border-b border-gray-300 pb-1">
+      <ng-container
+        [ngTemplateOutlet]="boundRow"
+        [ngTemplateOutletContext]="{
+          bound: 'start',
+          label: 'daterange.filter.from',
+          date: startDate,
+        }"
+      ></ng-container>
+      @if (expandedBound === 'start') {
+        <div class="calendar" animate.enter="expand" animate.leave="collapse">
+          <mat-calendar
+            data-test="start-date-calendar"
+            [selected]="startDate"
+            [startAt]="startDate ?? endDate"
+            [maxDate]="endDate"
+            (selectedChange)="setStartDate($event)"
+          ></mat-calendar>
+        </div>
+      }
+    </div>
+    <div class="flex flex-col justify-center">
+      <ng-container
+        [ngTemplateOutlet]="boundRow"
+        [ngTemplateOutletContext]="{
+          bound: 'end',
+          label: 'daterange.filter.to',
+          date: endDate,
+        }"
+      ></ng-container>
+      @if (expandedBound === 'end') {
+        <div class="calendar" animate.enter="expand" animate.leave="collapse">
+          <mat-calendar
+            data-test="end-date-calendar"
+            [selected]="endDate"
+            [startAt]="endDate ?? startDate"
+            [minDate]="startDate"
+            (selectedChange)="setEndDate($event)"
+          ></mat-calendar>
+        </div>
+      }
+    </div>
+  </div>
+</ng-template>
+
+<ng-template #boundRow let-bound="bound" let-label="label" let-date="date">
+  <div class="flex items-center gap-1 w-full">
+    <span class="w-[80px] shrink-0" [translate]="label"></span>
+    <div
+      class="flex-1 min-w-0 flex items-center gap-1 border rounded-lg px-2 py-1 transition-colors"
+      [class]="
+        invalidBounds[bound]
+          ? 'border-red-400 text-red-800 focus-within:border-red-800 hover:border-red-800'
+          : 'border-gray-400 focus-within:border-main hover:border-main'
+      "
+    >
+      <ng-icon
+        name="iconoirCalendar"
+        class="shrink-0"
+        aria-hidden="true"
+      ></ng-icon>
+      <input
+        type="text"
+        inputmode="numeric"
+        autocomplete="off"
+        [gnUiAutofocus]="bound === expandedBound"
+        class="min-w-0 grow bg-transparent focus:outline-none"
+        [value]="date ? formatDate(date) : ''"
+        [placeholder]="'daterange.filter.datePlaceholder' | translate"
+        [attr.aria-label]="label | translate"
+        [attr.aria-invalid]="invalidBounds[bound] || null"
+        [attr.data-test]="bound + '-date-input'"
+        (change)="onDateInput(bound, $event)"
+        (blur)="normalizeDateInput(bound, $event)"
+        (click)="expandedBound !== bound && toggleBound(bound)"
+      />
+    </div>
+    <div class="shrink-0 flex items-center justify-end">
+      <gn-ui-button
+        type="light"
+        [style.--gn-ui-button-padding]="0"
+        [style.--gn-ui-button-width]="'24px'"
+        [style.--gn-ui-button-height]="'24px'"
+        [attr.aria-expanded]="expandedBound === bound"
+        [attr.data-test]="bound + '-date-toggle'"
+        (buttonClick)="toggleBound(bound)"
+      >
+        <ng-icon
+          [name]="expandedBound === bound ? 'matExpandLess' : 'matExpandMore'"
+        ></ng-icon>
+      </gn-ui-button>
+    </div>
+  </div>
+</ng-template>

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/dropdown-multiselect/dropdown-multiselect.component.html

@@ -20,7 +20,7 @@
       </div>
     }
   </div>
-  <button class="h-6 w-6" data-cy="clearSelection">
+  <button class="h-6 w-6" data-test="dropdown-clear">
     @if (hasSelectedChoices && !overlayOpen) {
       <ng-icon
         class="shrink-0 opacity-40 mr-1.5 hover:opacity-80 transition-colors clear-btn"

package/src/libs/util/shared/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/services'
 export * from './lib/utils'
 export * from './lib/links'
+export * from './lib/autofocus.directive'
 export * from './lib/image-fallback.directive'
 export * from './lib/gn-ui-version'
 export * from './lib/record'

package/src/libs/util/shared/src/lib/autofocus.directive.ts

@@ -0,0 +1,26 @@
+import {
+  Directive,
+  ElementRef,
+  Injector,
+  Input,
+  afterNextRender,
+  booleanAttribute,
+  inject,
+} from '@angular/core'
+
+@Directive({
+  selector: '[gnUiAutofocus]',
+  standalone: true,
+})
+export class AutofocusDirective {
+  private el = inject<ElementRef<HTMLElement>>(ElementRef)
+  private injector = inject(Injector)
+
+  @Input({ alias: 'gnUiAutofocus', transform: booleanAttribute })
+  set autofocus(active: boolean) {
+    if (!active) return
+    afterNextRender(() => this.el.nativeElement.focus(), {
+      injector: this.injector,
+    })
+  }
+}

package/src/libs/util/shared/src/lib/services/date.service.ts

@@ -35,10 +35,10 @@ export class DateService {
     return { locale, dateObj }
   }
 
-  private async getDateLocale(): Promise<Locale> {
+  async getDateFnsLocale(): Promise<Locale> {
     const lang = this.translateService.getCurrentLang() || DEFAULT_LANGUAGE
     const locales = await this.dateLocales
-    return locales[lang]
+    return locales[lang] ?? locales[DEFAULT_LANGUAGE]
   }
 
   formatDate(
@@ -61,7 +61,7 @@ export class DateService {
     const dateObj = this.getDateObject(date)
 
     const now = new Date()
-    const locale = await this.getDateLocale()
+    const locale = await this.getDateFnsLocale()
 
     return formatDistance(dateObj, now, {
       addSuffix: true,

package/translations/de.json

@@ -65,9 +65,10 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "Die Daten können nicht angezeigt werden: \"{ info }\"",
   "dataset.error.unsupportedType": "Der folgende Inhaltstyp wird nicht unterstützt: \"{ info }\"",
-  "daterange.filter.from": "Von",
+  "daterange.filter.datePlaceholder": "tt.mm.jjjj",
+  "daterange.filter.from": "Ab dem",
   "daterange.filter.period": "Zeitraum auswählen",
-  "daterange.filter.to": "Bis",
+  "daterange.filter.to": "Bis zum",
   "domain.contact.role.author": "Autor",
   "domain.contact.role.collaborator": "Mitarbeiter",
   "domain.contact.role.contributor": "Beitragender",

package/translations/en.json

@@ -65,9 +65,10 @@
   "dataset.error.restrictedAccess": "Access to this resource is restricted",
   "dataset.error.unknown": "The data cannot be displayed: \"{ info }\"",
   "dataset.error.unsupportedType": "The following content type is unsupported: \"{ info }\"",
+  "daterange.filter.datePlaceholder": "mm/dd/yyyy",
   "daterange.filter.from": "From",
   "daterange.filter.period": "Period",
-  "daterange.filter.to": "To",
+  "daterange.filter.to": "Until",
   "domain.contact.role.author": "Author",
   "domain.contact.role.collaborator": "Collaborator",
   "domain.contact.role.contributor": "Contributor",

package/translations/es.json

@@ -65,6 +65,7 @@
   "dataset.error.restrictedAccess": "",
   "dataset.error.unknown": "",
   "dataset.error.unsupportedType": "",
+  "daterange.filter.datePlaceholder": "dd/mm/aaaa",
   "daterange.filter.from": "",
   "daterange.filter.period": "",
   "daterange.filter.to": "",