geonetwork-ui 2.11.0-dev.96d0c6ce2 → 2.11.0-dev.a5c259d9e

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.html

@@ -6,33 +6,32 @@
       matSort
       (matSortChange)="setSort($event)"
       [matSortDisableClear]="true"
-      *ngrxLet="properties$ as properties"
     >
-      @for (attr of _featureAttributes; track attr) {
-        <ng-container [matColumnDef]="attr.value">
+      @for (column of columns; track column) {
+        <ng-container [matColumnDef]="column.name">
           <th
             mat-header-cell
             *matHeaderCellDef
             mat-sort-header
             class="text-sm text-black bg-white"
           >
-            {{ attr.label }}
+            {{ column.label }}
           </th>
           <td
             mat-cell
             *matCellDef="let element"
             class="whitespace-nowrap pr-1 truncate"
           >
-            {{ element[attr.value] }}
+            {{ element[column.name] }}
           </td>
         </ng-container>
       }
 
-      <tr mat-header-row *matHeaderRowDef="properties; sticky: true"></tr>
+      <tr mat-header-row *matHeaderRowDef="columnNames; sticky: true"></tr>
       <tr
         [id]="getRowEltId(row.id)"
         mat-row
-        *matRowDef="let row; columns: properties"
+        *matRowDef="let row; columns: columnNames"
         (click)="selected.emit(row)"
         [class.active]="
           activeId !== undefined && activeId !== null && row.id === activeId

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -6,14 +6,14 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  inject,
   Input,
   OnChanges,
   OnInit,
   Output,
   ViewChild,
-  inject,
 } from '@angular/core'
-import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatSort, MatSortModule, Sort } from '@angular/material/sort'
 import { MatTableModule } from '@angular/material/table'
 import {
   TranslateDirective,
@@ -29,12 +29,11 @@ import {
 } from '@angular/material/paginator'
 import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
 import { CommonModule } from '@angular/common'
-import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import { BehaviorSubject } from 'rxjs'
 import {
   LoadingMaskComponent,
   PopupAlertComponent,
 } from '../../../../../../libs/ui/widgets/src'
-import { LetDirective } from '@ngrx/component'
 
 const rowIdPrefix = 'table-item-'
 
@@ -46,6 +45,11 @@ export interface TableItemModel {
   [key: string]: TableItemType
 }
 
+interface TableColumn {
+  name: string
+  label: string
+}
+
 @Component({
   standalone: true,
   imports: [
@@ -56,7 +60,6 @@ export interface TableItemModel {
     CommonModule,
     LoadingMaskComponent,
     PopupAlertComponent,
-    LetDirective,
     TranslatePipe,
     TranslateDirective,
   ],
@@ -71,15 +74,21 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   private cdr = inject(ChangeDetectorRef)
   private translateService = inject(TranslateService)
 
-  _featureAttributes = []
+  columnsFromFeatureCatalog: TableColumn[] = null
   @Input() set featureAttributes(value: { value: string; label: string }[]) {
-    this._featureAttributes = value
-    this.properties$.next(value.map((attr) => attr.value))
+    this.columnsFromFeatureCatalog = value.map((attrs) => ({
+      name: attrs.value,
+      label: attrs.label,
+    }))
   }
+  columnsFromDataset: TableColumn[] = []
   @Input() set dataset(value: BaseReader) {
     this.dataset_ = value
     this.dataset_.load()
-    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+    this.dataset_.info.then((info) => {
+      this.count = info.itemsCount
+      this.cdr.detectChanges()
+    })
   }
   @Input() activeId: TableItemId
   @Output() selected = new EventEmitter<any>()
@@ -88,13 +97,19 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
   @ViewChild(MatPaginator) paginator: MatPaginator
 
   dataset_: BaseReader
-  properties$ = new BehaviorSubject<string[]>(null)
   dataSource: DataTableDataSource
   headerHeight: number
   count: number
   loading$ = new BehaviorSubject<boolean>(false)
   error = null
 
+  get columns() {
+    return this.columnsFromFeatureCatalog ?? this.columnsFromDataset
+  }
+  get columnNames() {
+    return this.columns.map((c) => c.name)
+  }
+
   ngOnInit() {
     this.dataSource = new DataTableDataSource()
   }
@@ -110,7 +125,7 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
     this.setPagination()
   }
 
-  setSort(sort: MatSort) {
+  setSort(sort: Sort) {
     if (!this.dataset_) return
     if (!sort.active) {
       this.dataset_.orderBy()
@@ -132,15 +147,12 @@ export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
 
   async readData() {
     this.loading$.next(true)
-    // wait for properties to be read
-    const properties = await firstValueFrom(
-      this.properties$.pipe(filter((p) => !!p))
-    )
-    const propsWithoutGeom = properties.filter(
-      (p) => !p.toLowerCase().startsWith('geom')
-    )
-    this.dataset_.select(...propsWithoutGeom)
     try {
+      // wait for properties to be read
+      if (!this.columnsFromFeatureCatalog) {
+        this.columnsFromDataset = await this.dataset_.properties
+      }
+      this.dataset_.select(...this.columnNames)
       await this.dataSource.showData(this.dataset_.read())
       this.error = null
     } catch (error) {

package/src/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts

@@ -25,8 +25,8 @@ export const tableItemsFixture = {
       geometry: null,
       properties: {
         id: '0003',
-        firstName: 'Claude',
-        lastName: 'François',
+        firstName: 'Lady',
+        lastName: 'Gaga',
       },
     },
   ] as DataItem[],

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

@@ -25,3 +25,4 @@ 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'
 export * from './lib/date-range-inputs/date-range-inputs.component'
+export * from './lib/spatial-extent-dropdown/spatial-extent-dropdown.component'

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

@@ -0,0 +1,117 @@
+<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]="
+          ('search.filters.spatialExtent.bboxDelete' | translate) +
+          ' ' +
+          fileName
+        "
+        (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">
+          {{ 'search.filters.spatialExtent.bboxPrefix' | translate }}
+          {{ fileName }}
+        </span>
+        <span class="hidden group-hover:block truncate text-sm m-auto">
+          {{ 'search.filters.spatialExtent.bboxDelete' | translate }}
+          {{ fileName }}
+        </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>

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

@@ -0,0 +1,191 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  inject,
+} from '@angular/core'
+import {
+  CdkConnectedOverlay,
+  CdkOverlayOrigin,
+  ConnectedPosition,
+  OverlayModule,
+  ScrollStrategyOptions,
+} from '@angular/cdk/overlay'
+
+import { ButtonComponent } from '../button/button.component'
+import { NgIcon, provideIcons } from '@ng-icons/core'
+import {
+  iconoirCheckCircle,
+  iconoirImport,
+  iconoirSquareDashed,
+  iconoirTrash,
+} from '@ng-icons/iconoir'
+import {
+  matClose,
+  matExpandLess,
+  matExpandMore,
+} from '@ng-icons/material-icons/baseline'
+import { TranslatePipe } from '@ngx-translate/core'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import {
+  BoundingBox,
+  getGeometryBoundingBox,
+  getGeometryFromGeoJSON,
+  propagateToDocumentOnly,
+  readFileAsText,
+} from '../../../../../../libs/util/shared/src'
+import {
+  DragAndDropFileInputComponent,
+  DragAndDropFileInputError,
+} from '../drag-and-drop-file-input/drag-and-drop-file-input.component'
+
+marker('search.filters.spatialExtent.import')
+marker('search.filters.spatialExtent.helpText')
+marker('search.filters.spatialExtent.error.title')
+marker('search.filters.spatialExtent.bboxPrefix')
+
+export interface SpatialExtentDropdownError {
+  key: string
+  params?: Record<string, string | number>
+}
+marker('search.filters.spatialExtent.bboxDelete')
+
+@Component({
+  selector: 'gn-ui-spatial-extent-dropdown',
+  standalone: true,
+  imports: [
+    ButtonComponent,
+    NgIcon,
+    OverlayModule,
+    TranslatePipe,
+    DragAndDropFileInputComponent,
+  ],
+  providers: [
+    provideIcons({
+      iconoirCheckCircle,
+      iconoirImport,
+      iconoirSquareDashed,
+      iconoirTrash,
+      matClose,
+      matExpandLess,
+      matExpandMore,
+    }),
+  ],
+  templateUrl: './spatial-extent-dropdown.component.html',
+  styleUrls: ['./spatial-extent-dropdown.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class SpatialExtentDropdownComponent {
+  private cd = inject(ChangeDetectorRef)
+  private scrollStrategies = inject(ScrollStrategyOptions)
+
+  @Input() title: string
+  @Input() maxFileSizeMb: number | null = null
+
+  @Output() bboxChange = new EventEmitter<BoundingBox | null>()
+  @Output() errorChange = new EventEmitter<SpatialExtentDropdownError>()
+
+  bbox: BoundingBox | null = null
+  fileName = ''
+
+  @ViewChild('overlayOrigin') overlayOrigin: CdkOverlayOrigin
+  @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay
+  @ViewChild(DragAndDropFileInputComponent)
+  fileInput: DragAndDropFileInputComponent
+
+  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
+  overlayMinWidth = 'none'
+
+  errorKey: string | null = null
+
+  get hasSelection() {
+    return !!this.bbox
+  }
+
+  openOverlay() {
+    this.overlayMinWidth =
+      this.overlayOrigin.elementRef.nativeElement.getBoundingClientRect()
+        .width + 'px'
+    this.overlayOpen = true
+  }
+
+  closeOverlay() {
+    this.overlayOpen = false
+  }
+
+  toggleOverlay() {
+    if (this.overlayOpen) {
+      this.closeOverlay()
+    } else {
+      this.openOverlay()
+    }
+  }
+
+  async handleFileSelected(file: File) {
+    this.errorKey = null
+    let content: string
+    try {
+      content = await readFileAsText(file)
+      const parsed = JSON.parse(content)
+      const geometry = getGeometryFromGeoJSON(parsed)
+      if (!geometry) {
+        this.setError(marker('search.filters.spatialExtent.error.noGeometry'))
+        return
+      }
+      const bbox = getGeometryBoundingBox(geometry)
+      this.bbox = bbox
+      this.fileName = file.name
+      this.bboxChange.emit(bbox)
+      this.cd.markForCheck()
+    } catch {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+      return
+    }
+  }
+
+  handleFileError(error: DragAndDropFileInputError) {
+    if (error === 'file-too-large') {
+      this.setError(marker('search.filters.spatialExtent.error.fileTooLarge'), {
+        maxSize: this.maxFileSizeMb,
+      })
+    } else {
+      this.setError(marker('search.filters.spatialExtent.error.invalidFormat'))
+    }
+  }
+
+  private setError(errorKey: string, params?: Record<string, string | number>) {
+    this.errorKey = errorKey
+    this.errorChange.emit({ key: errorKey, params })
+    this.cd.markForCheck()
+  }
+
+  removeSelection(event: Event) {
+    this.bbox = null
+    this.fileName = ''
+    this.errorKey = null
+    this.fileInput?.clear()
+    this.bboxChange.emit(null)
+    propagateToDocumentOnly(event)
+  }
+}

package/src/libs/ui/map/src/lib/components/map-container/map-container.component.ts

@@ -29,11 +29,11 @@ import {
   MapExtentChangeEvent,
   MapExtentChangeEventType,
   MapContext,
-  MapContextLayerXyz,
   MapContextView,
   MapEventsByType,
   SourceLoadErrorEvent,
   SourceLoadErrorType,
+  MapContextLayerMapLibreStyle,
 } from '@geospatial-sdk/core'
 import {
   applyContextDiffToMap,
@@ -55,10 +55,9 @@ import {
 import { matSwipeOutline } from '@ng-icons/material-icons/outline'
 import { transformExtent } from 'ol/proj.js'
 
-const DEFAULT_BASEMAP_LAYER: MapContextLayerXyz = {
-  type: 'xyz',
-  url: `https://{a-c}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}.png`,
-  attributions: `<span>© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/">Carto</a></span>`,
+export const DEFAULT_BASEMAP_LAYER: MapContextLayerMapLibreStyle = {
+  type: 'maplibre-style',
+  styleUrl: `https://basemaps.cartocdn.com/gl/positron-gl-style/style.json`,
 }
 
 const DEFAULT_VIEW: MapContextView = {

package/src/libs/util/app-config/src/lib/app-config.ts

@@ -252,6 +252,7 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
           'search_preset',
           'advanced_filters',
           'limit',
+          'spatial_extent_max_file_size',
         ],
         warnings,
         errors
@@ -281,6 +282,8 @@ export function loadAppConfig(configUrl = 'assets/configuration/default.toml') {
               })),
               ADVANCED_FILTERS: parsedSearchSection.advanced_filters,
               LIMIT: parsedSearchSection.limit,
+              SPATIAL_EXTENT_MAX_FILE_SIZE:
+                parsedSearchSection.spatial_extent_max_file_size,
             } as SearchConfig)
 
       const parsedMetadataQualitySection = parseConfigSection(

package/src/libs/util/app-config/src/lib/model.ts

@@ -63,6 +63,7 @@ export interface SearchConfig {
   SEARCH_PRESET?: SearchPreset[]
   ADVANCED_FILTERS?: []
   LIMIT?: number
+  SPATIAL_EXTENT_MAX_FILE_SIZE?: number
 }
 
 export interface MetadataQualityConfig {