geonetwork-ui 2.6.0-dev.b306f1194 → 2.6.0-dev.ceb4be4c1

package/src/libs/ui/inputs/src/index.ts

@@ -15,7 +15,7 @@ export * from './lib/dropdown-selector/dropdown-selector.model'
 export * from './lib/editable-label/editable-label.directive'
 export * from './lib/file-input/file-input.component'
 export * from './lib/files-drop/files-drop.directive'
-export * from './lib/navigation-button/navigation-button.component'
+export * from './lib/inline-filter/inline-filter.component'
 export * from './lib/search-input/search-input.component'
 export * from './lib/star-toggle/star-toggle.component'
 export * from './lib/switch-toggle/switch-toggle.component'
@@ -24,3 +24,4 @@ export * from './lib/text-input/text-input.component'
 export * from './lib/ui-inputs.module'
 export * from './lib/url-input/url-input.component'
 export * from './lib/viewport-intersector/viewport-intersector.component'
+export * from './lib/search-feature-catalog/search-feature-catalog.component'

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

@@ -79,7 +79,7 @@
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
-    class="p-2 suggestion"
+    class="p-2 suggestion text-start"
   >
     {{ displayWithFnInternal(suggestion) }}
   </mat-option>

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

@@ -56,14 +56,14 @@ export class ButtonComponent {
 
   @Input() disabled = false
   @Input() extraClass = ''
-  @Output() buttonClick = new EventEmitter<void>()
+  @Output() buttonClick = new EventEmitter<Event>()
 
   get classList() {
     return `${this.btnClass} ${this.extraClass}`
   }
 
   handleClick(event: MouseEvent) {
-    this.buttonClick.emit()
+    this.buttonClick.emit(event)
     event.preventDefault()
     ;(event.currentTarget as HTMLElement).blur()
     propagateToDocumentOnly(event)

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

@@ -59,7 +59,7 @@
     #overlayContainer
   >
     <div
-      class="border border-gray-300 rounded mb-2 mx-2 min-h-[44px] flex flex-row 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-[2px] flex-wrap p-2 focus-within:rounded focus-within:border-2 focus-within:border-primary"
     >
       <button
         type="button"

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

@@ -19,7 +19,7 @@
     (keydown)="handleTriggerKeydown($event)"
     [disabled]="disabled"
   >
-    <div class="grow font-medium truncate py-1 mr-2 text-left">
+    <div class="grow truncate py-1 mr-2 text-left">
       {{ getChoiceLabel() | translate }}
     </div>
     <ng-icon

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.html

@@ -0,0 +1,23 @@
+<ul class="flex flex-wrap list-none gap-2">
+  <li *ngFor="let choice of choices">
+    <label
+      class=""
+      [ngClass]="{
+        selected: isSelected(choice),
+      }"
+    >
+      <input
+        class="hidden"
+        type="checkbox"
+        #checkBox
+        [checked]="isSelected(choice)"
+        (change)="select(choice, checkBox.checked)"
+        [attr.data-cy]="'inlineFilter-' + choice.value"
+      />
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: choice }"
+      >
+      </ng-container>
+    </label>
+  </li>
+</ul>

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.component.ts

@@ -0,0 +1,44 @@
+import {
+  Component,
+  ContentChild,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+} from '@angular/core'
+import { Choice } from './inline-filter.model'
+
+@Component({
+  selector: 'gn-ui-inline-filter',
+  templateUrl: './inline-filter.component.html',
+})
+export class InlineFilterComponent {
+  @Input() choices: Choice[]
+  @Input() selected: unknown[] = []
+
+  @Output() selectValues = new EventEmitter<unknown[]>()
+
+  @ContentChild(TemplateRef) itemTemplate: TemplateRef<any>
+
+  isSelected(choice: Choice) {
+    return (
+      this.selected.indexOf(choice.value) > -1 ||
+      (this.selected.length === 0 && choice.value === 'all')
+    )
+  }
+
+  select(choice: Choice, selected: boolean) {
+    if (choice.value === 'all' && selected) {
+      this.selected = [choice.value]
+    } else {
+      this.selected = selected
+        ? [...this.selected.filter((v) => v !== choice.value), choice.value]
+        : this.selected.filter((v) => v !== choice.value)
+
+      // If any value selected, unselect all
+      this.selected = this.selected.filter((v) => v !== 'all')
+    }
+
+    this.selectValues.emit(this.selected)
+  }
+}

package/src/libs/ui/inputs/src/lib/inline-filter/inline-filter.model.ts

@@ -0,0 +1,5 @@
+export interface Choice {
+  value: unknown
+  label: string
+  icon?: string
+}

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.html

@@ -0,0 +1,43 @@
+<div
+  class="flex items-center justify-between p-3 mt-8 bg-white rounded-lg border-b solid border-gray-300"
+>
+  <div
+    class="relative shrink-0"
+    *ngIf="featureCatalog?.featureTypes?.length > 1"
+  >
+    <input
+      type="text"
+      [placeholder]="'search.filter.into.feature.catalog' | translate"
+      class="w-[220px] h-8 pl-3 pr-10 py-2 border rounded-md"
+      [(ngModel)]="searchTerm"
+      (ngModelChange)="filterAction(searchTerm)"
+    />
+    <ng-icon
+      class="absolute right-2.5 top-1 w-6 h-6 text-black"
+      name="iconoirSearch"
+    ></ng-icon>
+  </div>
+  <div class="text-sm px-1 ml-auto hidden sm:inline">
+    <ng-container *ngIf="featureCatalog?.featureTypes?.length > 1">
+      <span
+        class="text-sm font-medium text-gray-900"
+        data-cy="total-objects-label"
+        translate
+        >record.feature.catalog.number.total.object</span
+      ><span
+        class="text-sm font-bold px-1 text-gray-900"
+        data-cy="total-objects"
+        >{{ totalObjects }}</span
+      >
+      <span class="px-1.5">|</span>
+    </ng-container>
+    <span
+      class="text-sm font-medium px-1 text-gray-900"
+      data-cy="total-attributes-label"
+      translate
+      >record.feature.catalog.number.total.attribute</span
+    ><span class="text-sm font-bold text-gray-900" data-cy="total-attributes">{{
+      totalAttributes
+    }}</span>
+  </div>
+</div>

package/src/libs/ui/inputs/src/lib/search-feature-catalog/search-feature-catalog.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { NgIcon, provideIcons, provideNgIconsConfig } from '@ng-icons/core'
+import { DatasetFeatureCatalog } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { FormsModule } from '@angular/forms'
+import { of } from 'rxjs'
+import { debounceTime, distinctUntilChanged, tap } from 'rxjs/operators'
+import { createFuzzyFilter } from '../../../../../../libs/util/shared/src'
+import { iconoirSearch } from '@ng-icons/iconoir'
+
+@Component({
+  selector: 'gn-ui-search-feature-catalog',
+  templateUrl: './search-feature-catalog.component.html',
+  styleUrls: ['./search-feature-catalog.component.css'],
+  standalone: true,
+  imports: [CommonModule, NgIcon, TranslateModule, FormsModule],
+  viewProviders: [
+    provideIcons({ iconoirSearch }),
+    provideNgIconsConfig({
+      size: '1.5rem',
+    }),
+  ],
+})
+export class SearchFeatureCatalogComponent {
+  private _featureCatalog: DatasetFeatureCatalog
+  searchTerm: any
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    this._featureCatalog = value
+    this.filteredFeatureCatalog = value
+  }
+  get featureCatalog(): DatasetFeatureCatalog {
+    return this._featureCatalog
+  }
+
+  @Output() filteredFeatureCatalogChange =
+    new EventEmitter<DatasetFeatureCatalog>()
+  filteredFeatureCatalog: DatasetFeatureCatalog
+
+  filterAction = (searchTerm: string): void => {
+    of(searchTerm)
+      .pipe(
+        debounceTime(300),
+        distinctUntilChanged(),
+        tap(() => {
+          const filtered = (this.featureCatalog?.featureTypes || []).filter(
+            (featureType) => {
+              const fuzzyFilter = createFuzzyFilter(searchTerm)
+              return (
+                fuzzyFilter(featureType.name) ||
+                (featureType.definition && fuzzyFilter(featureType.definition))
+              )
+            }
+          )
+          this.filteredFeatureCatalog = {
+            ...this.featureCatalog,
+            featureTypes: filtered,
+          }
+          this.filteredFeatureCatalogChange.emit(this.filteredFeatureCatalog)
+        })
+      )
+      .subscribe()
+  }
+
+  get totalObjects(): number {
+    return this.filteredFeatureCatalog?.featureTypes?.length || 0
+  }
+
+  get totalAttributes(): number {
+    return (
+      this.filteredFeatureCatalog?.featureTypes?.reduce(
+        (total, featureType) => total + (featureType.attributes?.length || 0),
+        0
+      ) || 0
+    )
+  }
+}

package/src/libs/ui/inputs/src/lib/star-toggle/star-toggle.component.html

@@ -1,17 +1,16 @@
-<div class="inline-block relative align-middle" style="line-height: 0.7em">
-  <button
-    type="button"
-    class="-m-[8px] p-[8px]"
-    (click)="toggle($event)"
+<div class="inline-block relative align-middle">
+  <gn-ui-button
+    [type]="'outline'"
+    [disabled]="disabled"
+    (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,
-      'disabled opacity-45': !toggled,
+      disabled: !toggled || disabled,
       'transition hover:scale-125 will-change-transform': !disabled,
-      'cursor-default': disabled,
     }"
   >
     <ng-icon [name]="toggled ? 'matStar' : 'matStarBorder'"></ng-icon>
-  </button>
+  </gn-ui-button>
   <svg
     #starOverlay
     class="star-toggle-overlay"

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

@@ -11,6 +11,7 @@ import { propagateToDocumentOnly } from '../../../../../../libs/util/shared/src'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
 import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
+import { ButtonComponent } from '../button/button.component'
 
 @Component({
   selector: 'gn-ui-star-toggle',
@@ -18,7 +19,7 @@ import { matStar, matStarBorder } from '@ng-icons/material-icons/baseline'
   styleUrls: ['./star-toggle.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, NgIcon],
+  imports: [CommonModule, NgIcon, ButtonComponent],
   viewProviders: [provideIcons({ matStar, matStarBorder })],
 })
 export class StarToggleComponent {

package/src/libs/ui/inputs/src/lib/ui-inputs.module.ts

@@ -33,6 +33,7 @@ import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-a
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 import { EditableLabelDirective } from './editable-label/editable-label.directive'
+import { InlineFilterComponent } from './inline-filter/inline-filter.component'
 import { TextAreaComponent } from './text-area/text-area.component'
 import { ViewportIntersectorComponent } from './viewport-intersector/viewport-intersector.component'
 
@@ -42,6 +43,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckboxComponent,
+    InlineFilterComponent,
   ],
   imports: [
     CommonModule,
@@ -75,9 +77,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
       matExpandMore,
       matExpandLess,
     }),
-    provideNgIconsConfig({
-      size: '0.9em',
-    }),
   ],
   exports: [
     DropdownSelectorComponent,
@@ -90,6 +89,7 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     CheckboxComponent,
     DateRangePickerComponent,
     EditableLabelDirective,
+    InlineFilterComponent,
     BadgeComponent,
   ],
 })

package/src/libs/ui/layout/src/index.ts

@@ -16,3 +16,4 @@ export * from './lib/pagination-dots/pagination-dots.component'
 export * from './lib/previous-next-buttons/previous-next-buttons.component'
 export * from './lib/paginable.interface'
 export * from './lib/ui-layout.module'
+export * from './lib/truncated-text/truncated-text.component'

package/src/libs/ui/layout/src/lib/anchor-link/anchor-link.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewChecked,
   ChangeDetectorRef,
   Directive,
   HostBinding,
@@ -11,20 +12,34 @@ import {
 @Directive({
   selector: '[gnUiAnchorLink]',
 })
-export class AnchorLinkDirective implements OnInit, OnDestroy {
+export class AnchorLinkDirective
+  implements OnInit, AfterViewChecked, OnDestroy
+{
   @Input('gnUiAnchorLink') targetId: string
   @Input('gnUiAnchorLinkDisabledClass') disabledClass: string
   @Input('gnUiAnchorLinkEnabledClass') enabledClass: string
+  @Input('gnUiAnchorLinkInViewClass') inViewClass: string
+  @Input('gnUiAnchorLinkOutOfViewClass') outOfViewClass: string
 
   @HostBinding('class')
   get elementClass(): string {
-    return this.disabled ? this.disabledClass : this.enabledClass
+    if (this.disabled) {
+      return this.disabledClass
+    }
+    if (this.inView) {
+      return `${this.inViewClass} ${this.enabledClass}`
+    } else {
+      return `${this.outOfViewClass} ${this.enabledClass}`
+    }
   }
 
   disabled = false
   observer = new MutationObserver(() => {
     this.refreshDisabledState()
   })
+  inView = false
+  intersectionObserver: IntersectionObserver
+  initialized = false
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
@@ -36,8 +51,37 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
     this.refreshDisabledState()
   }
 
+  ngAfterViewChecked() {
+    if (!this.initialized && !this.disabled) {
+      const target = document.getElementById(this.targetId)
+      if (target) {
+        this.initializeIntersectionObserver(target)
+        this.initialized = true
+      }
+    }
+  }
+
+  initializeIntersectionObserver(target: HTMLElement) {
+    this.intersectionObserver = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          this.inView = entry.isIntersecting
+          this.changeDetector.detectChanges()
+        })
+      },
+      {
+        root: null,
+        rootMargin: '-30% 0% -60% 0%',
+      }
+    )
+    this.intersectionObserver.observe(target)
+  }
+
   ngOnDestroy() {
     this.observer.disconnect()
+    if (this.intersectionObserver) {
+      this.intersectionObserver.disconnect()
+    }
   }
 
   refreshDisabledState() {

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

@@ -5,3 +5,25 @@
 :host {
   position: relative;
 }
+
+@media screen and (min-width: 769px) {
+  .size-L {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-M {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-S {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+
+  .size-XS {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-auto-rows: minmax(0, min-content);
+  }
+}

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

@@ -1,7 +1,7 @@
 <div
-  class="block-list-container flex flex-col"
+  class="grid gap-4 w-full md:grid-cols-2"
   #blockContainer
-  [ngClass]="containerClass"
+  [ngClass]="[containerClass, 'size-' + subComponentSize]"
   [ngStyle]="{ minHeight: minHeight + 'px' }"
 >
   <ng-content></ng-content>

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

@@ -5,7 +5,9 @@ import {
   Component,
   ContentChildren,
   ElementRef,
+  EventEmitter,
   Input,
+  Output,
   QueryList,
   ViewChild,
 } from '@angular/core'
@@ -13,6 +15,7 @@ import { CommonModule } from '@angular/common'
 import { Paginable } from '../paginable.interface'
 import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.component'
 
+type ComponentSize = 'L' | 'M' | 'S' | 'XS'
 @Component({
   selector: 'gn-ui-block-list',
   templateUrl: './block-list.component.html',
@@ -22,15 +25,16 @@ import { PaginationDotsComponent } from '../pagination-dots/pagination-dots.comp
   imports: [CommonModule, PaginationDotsComponent],
 })
 export class BlockListComponent implements AfterViewInit, Paginable {
-  @Input() pageSize = 5
+  pageSize = 4
   @Input() containerClass = ''
   @Input() paginationContainerClass = 'w-full bottom-0 top-auto'
   @ContentChildren('block', { read: ElementRef }) blocks: QueryList<
     ElementRef<HTMLElement>
   >
   @ViewChild('blockContainer') blockContainer: ElementRef<HTMLElement>
-
   protected minHeight = 0
+  @Output() listChanges = new EventEmitter<BlockListComponent>()
+  subComponentSize: ComponentSize = 'M'
 
   protected currentPage_ = 0
   protected get pages() {
@@ -47,18 +51,26 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     return this.blocks ? Math.ceil(this.blocks.length / this.pageSize) : 1
   }
   get currentPage() {
-    return this.currentPage_ + 1 // this is 1-based
+    return this.currentPage_ + 1
   }
 
   constructor(private changeDetector: ChangeDetectorRef) {}
 
   ngAfterViewInit() {
-    this.blocks.changes.subscribe(this.refreshBlocksVisibility)
+    this.blocks.changes.subscribe(() => {
+      this.updateSizes()
+      this.refreshBlocksVisibility()
+      this.goToPage(1)
+      this.changeDetector.detectChanges()
+      this.listChanges.emit(this)
+    })
+    this.updateSizes()
     this.refreshBlocksVisibility()
 
     // we store the first height as the min-height of the list container
     this.minHeight = this.blockContainer.nativeElement.clientHeight
     this.changeDetector.detectChanges()
+    this.listChanges.emit(this)
   }
 
   protected refreshBlocksVisibility = () => {
@@ -71,7 +83,33 @@ export class BlockListComponent implements AfterViewInit, Paginable {
     })
   }
 
-  // pageIndex is 1-based
+  protected updateSizes() {
+    this.subComponentSize = this.computeSubComponentSize()
+    this.pageSize = this.computePageSize()
+  }
+
+  protected computeSubComponentSize(): ComponentSize {
+    if (!this.blocks) return 'M'
+    const subComponentsCount = this.blocks.length
+    if (subComponentsCount <= 3) return 'L'
+    if (subComponentsCount <= 12) return 'M'
+    if (subComponentsCount <= 18) return 'S'
+    return 'XS'
+  }
+
+  protected computePageSize(): number {
+    switch (this.subComponentSize) {
+      case 'L':
+        return 3
+      case 'S':
+        return 6
+      case 'XS':
+        return 8
+      default:
+        return 4
+    }
+  }
+
   public goToPage(pageIndex: number) {
     this.currentPage_ = Math.max(
       Math.min(pageIndex - 1, this.pagesCount - 1),

package/src/libs/ui/layout/src/lib/carousel/carousel.component.css

@@ -1,4 +1,3 @@
 :host {
   position: relative;
-  display: block;
 }

package/src/libs/ui/layout/src/lib/carousel/carousel.component.html

@@ -1,4 +1,4 @@
-<div #carouselOverflowContainer class="w-full">
+<div #carouselOverflowContainer class="w-full block">
   <div class="carousel-container flex" [ngClass]="containerClass">
     <ng-content></ng-content>
   </div>

package/src/libs/ui/layout/src/lib/expandable-panel/expandable-panel.component.html

@@ -1,22 +1,38 @@
 <div
-  class="group flex align-middle title border-b border-gray-100 cursor-pointer pt-2.5"
+  class="group flex items-center justify-between title border-b border-gray-100 cursor-pointer"
   (click)="toggle()"
+  data-cy="expandable-panel-header"
 >
-  <div class="grow font-medium text-black text-sm">
-    {{ title }}
+  <div class="grow py-2.5">
+    <ng-container *ngIf="titleTemplate; else simpleTitle">
+      <div data-cy="expandable-panel-custom-title">
+        <ng-container *ngTemplateOutlet="titleTemplate"></ng-container>
+      </div>
+    </ng-container>
+    <ng-template #simpleTitle>
+      <div
+        class="font-medium text-black text-sm"
+        data-cy="expandable-panel-title"
+      >
+        {{ title }}
+      </div>
+    </ng-template>
   </div>
   <div
-    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity"
+    class="w-8 opacity-25 text-primary group-hover:opacity-100 transition-opacity flex items-center shrink-0"
   >
-    <ng-icon name="matAdd" *ngIf="collapsed"></ng-icon>
-    <ng-icon name="matRemove" *ngIf="!collapsed"></ng-icon>
+    <ng-icon
+      [name]="collapsed ? 'matAdd' : 'matRemove'"
+      [style.color]="iconColor"
+    ></ng-icon>
   </div>
 </div>
 <div
-  class="content overflow-hidden transition-[max-height] duration-300"
+  class="content overflow-hidden transition-all duration-300"
   [ngClass]="collapsed ? 'ease-out' : 'ease-in'"
-  [style.maxHeight]="maxHeight"
   #contentDiv
+  *ngIf="!collapsed"
+  data-cy="expandable-panel-content"
 >
   <ng-content></ng-content>
 </div>