geonetwork-ui 2.6.0-dev.5b83cdcc5 → 2.6.0-dev.6681b0ab3

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

@@ -1,9 +1,14 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  ContentChild,
   ElementRef,
   Input,
+  TemplateRef,
   ViewChild,
+  OnDestroy,
+  ChangeDetectorRef,
+  AfterViewInit,
 } from '@angular/core'
 import { NgIcon, provideIcons } from '@ng-icons/core'
 import { CommonModule } from '@angular/common'
@@ -18,20 +23,41 @@ import { matAdd, matRemove } from '@ng-icons/material-icons/baseline'
   imports: [CommonModule, NgIcon],
   viewProviders: [provideIcons({ matAdd, matRemove })],
 })
-export class ExpandablePanelComponent {
-  @Input() title: string
-  @Input() collapsed = true
-  @ViewChild('contentDiv') contentDiv: ElementRef
-  maxHeight = this.setMaxHeight()
+export class ExpandablePanelComponent implements AfterViewInit, OnDestroy {
+  @Input() title?: string
+  @Input() iconColor? = ''
+  @ContentChild('titleTemplate') titleTemplate?: TemplateRef<HTMLElement>
+  @ViewChild('contentDiv') contentDiv?: ElementRef
+
+  private _collapsed = true
+  private contentObserver?: ResizeObserver
+
+  constructor(private readonly changeDetector: ChangeDetectorRef) {}
+
+  ngAfterViewInit() {
+    if (this.contentDiv) {
+      this.contentObserver = new ResizeObserver(() => {
+        this.changeDetector.detectChanges()
+      })
+      this.contentObserver.observe(this.contentDiv.nativeElement)
+    }
+  }
+
+  @Input() set collapsed(value: boolean) {
+    this._collapsed = value
+  }
+
+  get collapsed(): boolean {
+    return this._collapsed
+  }
 
   toggle(): void {
     this.collapsed = !this.collapsed
-    this.maxHeight = this.setMaxHeight()
   }
 
-  setMaxHeight() {
-    return `${
-      this.collapsed ? '0' : this.contentDiv.nativeElement.scrollHeight
-    }px`
+  ngOnDestroy() {
+    if (this.contentObserver) {
+      this.contentObserver.disconnect()
+    }
   }
 }

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.html

@@ -1,6 +1,7 @@
 <div
   class="flex items-center justify-between w-full gap-2"
   cdkOverlayOrigin
+  [class]="extraClass"
   #trigger="cdkOverlayOrigin"
 >
   <span #textElement class="truncate">
@@ -19,18 +20,15 @@
     cdkConnectedOverlay
     [cdkConnectedOverlayOrigin]="trigger"
     [cdkConnectedOverlayOpen]="isOpen"
-    [cdkConnectedOverlayPositions]="[
-      {
-        originX: 'end',
-        originY: 'top',
-        overlayX: 'end',
-        overlayY: 'top',
-      },
-    ]"
-    (detach)="isOpen = false"
+    [cdkConnectedOverlayPositions]="[overlayPosition]"
+    cdkConnectedOverlayPush
+    [cdkConnectedOverlayWidth]="'auto'"
+    [cdkConnectedOverlayFlexibleDimensions]="true"
+    [cdkConnectedOverlayGrowAfterOpen]="true"
+    (detach)="close()"
   >
     <div class="bg-white shadow-lg border border-gray-300 flex">
-      <div class="w-64">
+      <div class="sm:w-64 xs:w-32">
         <p class="m-2">{{ text }}</p>
       </div>
       <gn-ui-button

package/src/libs/ui/layout/src/lib/truncated-text/truncated-text.component.ts

@@ -4,16 +4,22 @@ import {
   Component,
   ElementRef,
   Input,
+  OnDestroy,
   ViewChild,
+  NgZone,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { provideIcons } from '@ng-icons/core'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
 import { iconoirExpand, iconoirReduce } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
 import { MatButtonModule } from '@angular/material/button'
-import { OverlayModule } from '@angular/cdk/overlay'
+import {
+  OverlayModule,
+  ViewportRuler,
+  ConnectedPosition,
+} from '@angular/cdk/overlay'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-import { NgIconComponent } from '@ng-icons/core'
+import { Subscription } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-truncated-text',
@@ -30,24 +36,85 @@ import { NgIconComponent } from '@ng-icons/core'
   templateUrl: './truncated-text.component.html',
   styles: [],
 })
-export class TruncatedTextComponent implements AfterViewInit {
+export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
   @Input() text = ''
+  @Input() extraClass = ''
+
   @ViewChild('textElement') textElement: ElementRef<HTMLElement>
   isTextTruncated = false
   isOpen = false
+  overlayPosition: ConnectedPosition = {
+    originX: 'end',
+    originY: 'top',
+    overlayX: 'end',
+    overlayY: 'top',
+  }
+  private readonly resizeObserver: ResizeObserver
+  private readonly mutationObserver: MutationObserver
+  private readonly viewportSubscription: Subscription
+
+  constructor(
+    private readonly cd: ChangeDetectorRef,
+    private readonly ngZone: NgZone,
+    private readonly viewportRuler: ViewportRuler
+  ) {
+    this.resizeObserver = new ResizeObserver(() => {
+      this.ngZone.run(() => this.checkTextTruncation())
+    })
 
-  constructor(private cd: ChangeDetectorRef) {}
+    this.mutationObserver = new MutationObserver(() => {
+      this.ngZone.run(() => {
+        this.checkTextTruncation()
+        this.close()
+      })
+    })
+
+    this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
+      if (this.isOpen) {
+        this.updateOverlayPosition()
+      }
+    })
+  }
 
   ngAfterViewInit() {
+    const element = this.textElement.nativeElement
+    this.resizeObserver?.observe(element)
+    this.mutationObserver?.observe(element.parentElement, {
+      attributes: true,
+      childList: true,
+      subtree: true,
+    })
     this.checkTextTruncation()
   }
 
-  ngOnChange() {
-    this.checkTextTruncation()
+  ngOnDestroy() {
+    this.resizeObserver?.disconnect()
+    this.mutationObserver?.disconnect()
+    this.viewportSubscription?.unsubscribe()
+    this.close()
   }
 
   toggleOverlay() {
     this.isOpen = !this.isOpen
+    if (this.isOpen) {
+      this.updateOverlayPosition()
+    }
+  }
+
+  private updateOverlayPosition() {
+    const element = this.textElement.nativeElement
+    const rect = element.getBoundingClientRect()
+    const viewportWidth = this.viewportRuler.getViewportSize().width
+    const isMobile = viewportWidth < 640
+    const overlayWidth = isMobile ? 190 : 320
+    const isNearLeftEdge = rect.left < overlayWidth
+
+    this.overlayPosition = {
+      originX: isNearLeftEdge ? 'start' : 'end',
+      originY: 'top',
+      overlayX: isNearLeftEdge ? 'start' : 'end',
+      overlayY: 'top',
+    }
   }
 
   close() {
@@ -56,6 +123,7 @@ export class TruncatedTextComponent implements AfterViewInit {
 
   private checkTextTruncation() {
     const element = this.textElement.nativeElement
+
     this.isTextTruncated = element.scrollWidth > element.clientWidth
     this.cd.detectChanges()
   }

package/src/libs/ui/map/src/lib/components/feature-detail/feature-detail.component.html

@@ -1,6 +1,6 @@
 <div *ngIf="feature" class="root">
-  <div class="property" *ngFor="let propName of properties">
-    <div>{{ propName }}</div>
-    <div class="font-bold">{{ feature.properties[propName] }}</div>
+  <div class="property" *ngFor="let prop of properties | keyvalue">
+    <div>{{ prop.key }}</div>
+    <div class="font-bold">{{ prop.value }}</div>
   </div>
 </div>

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

@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import type { Feature } from 'geojson'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
 
 const geometryKeys = ['geometry', 'the_geom']
 
@@ -14,11 +15,34 @@ const geometryKeys = ['geometry', 'the_geom']
 })
 export class FeatureDetailComponent {
   @Input() feature: Feature
+  _featureAttributes = []
+  @Input() set featureCatalog(value: DatasetFeatureCatalog) {
+    if (value) this._featureAttributes = value.featureTypes[0].attributes
+  }
 
   get properties() {
     if (!this.feature) return []
-    return Object.keys(this.feature.properties).filter(
-      (prop) => !geometryKeys.includes(prop)
-    )
+    return this.setProperties()
+  }
+
+  setProperties() {
+    const properties = Object.keys(this.feature.properties)
+      .filter((p) => !geometryKeys.includes(p))
+      .reduce((acc, p) => {
+        let key = p
+        if (this._featureAttributes.length) {
+          const matchingAttribute = this._featureAttributes.find(
+            (attr) => attr.name === p
+          )
+
+          if (matchingAttribute && matchingAttribute.code) {
+            key = matchingAttribute.code
+          }
+        }
+        acc[key] = this.feature.properties[p]
+        return acc
+      }, {})
+
+    return properties
   }
 }

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

@@ -57,6 +57,7 @@ export class SpatialExtentComponent {
         style: {
           'stroke-color': 'black',
           'stroke-width': 2,
+          'fill-color': 'rgba(153, 153, 153, 0.3)',
         },
       }
       const view = await createViewFromLayer(layer)

package/src/libs/ui/search/src/lib/results-list/results-list.component.html

@@ -12,6 +12,7 @@
         (mdSelect)="mdSelect.emit($event)"
         [favoriteTemplate]="favoriteTemplate"
         [linkHref]="recordUrlGetter(record)"
+        [attr.data-cy]="record.uniqueIdentifier"
       ></gn-ui-results-list-item>
     </div>
   </div>

package/translations/de.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "Stichwort",
   "facets.block.title.th_regions_tree.default": "Regionen",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Anmelden</a>, um auf diese Funktion zuzugreifen</div>",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "",
   "input.file.orInputUrl": "",
   "input.file.selectFileLabel": "",
@@ -361,6 +365,9 @@
   "record.action.view": "Anzeigen",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "In externem Kartenviewer öffnen",
+  "record.metadata.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "Die Vorschau wurde aufgrund zu vieler Elemente deaktiviert",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "Der Datensatz mit der Kennung \"{ id }\" konnte nicht gefunden werden.",
   "search.field.any.placeholder": "Suche im katalog ...",
   "search.field.sortBy": "Sortieren nach:",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "Letzte Aktualisierung",

package/translations/en.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Regions",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> to access this feature</div>",
+  "feature.catalog.attribute.code": "Code",
+  "feature.catalog.attribute.description": "Description",
+  "feature.catalog.attribute.name": "Name",
+  "feature.catalog.attribute.type": "Type",
   "input.file.dropFileLabel": "or drop it here",
   "input.file.orInputUrl": "or create a link to an external resource",
   "input.file.selectFileLabel": "Select a file ({sizeMB} MB max.)",
@@ -361,6 +365,9 @@
   "record.action.view": "View",
   "record.card.metadata.contact": "Metadata Contact",
   "record.externalViewer.open": "Open in the external map viewer",
+  "record.metadata.feature.catalog": "Feature catalog",
+  "record.feature.catalog.number.total.attribute": "Total amount of objects",
+  "record.feature.catalog.number.total.object": "Total amount of attributes",
   "record.feature.limit": "Preview disabled due to too many elements",
   "record.kind.data": "Data",
   "record.kind.dataset": "Dataset",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "The dataset with identifier \"{ id }\" could not be found.",
   "search.field.any.placeholder": "Search in the catalog ...",
   "search.field.sortBy": "Sort by:",
+  "search.filter.into.feature.catalog": "Search a term",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "Updated",

package/translations/es.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "",
   "input.file.orInputUrl": "",
   "input.file.selectFileLabel": "",
@@ -361,6 +365,9 @@
   "record.action.view": "",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
+  "record.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "",
   "search.field.any.placeholder": "",
   "search.field.sortBy": "",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "Última actualización",

package/translations/fr.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Régions",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Connectez-vous</a> pour avoir accès à cette fonctionnalité</div>",
+  "feature.catalog.attribute.code": "Code",
+  "feature.catalog.attribute.description": "Description",
+  "feature.catalog.attribute.name": "Nom",
+  "feature.catalog.attribute.type": "Type",
   "input.file.dropFileLabel": "ou glissez-le ici",
   "input.file.orInputUrl": "ou créez un lien vers une ressource externe",
   "input.file.selectFileLabel": "Sélectionnez un fichier ({sizeMB} Mo max.)",
@@ -361,6 +365,9 @@
   "record.action.view": "Voir",
   "record.card.metadata.contact": "Contact de la métadonnée ",
   "record.externalViewer.open": "Ouvrir dans le visualiseur externe",
+  "record.metadata.feature.catalog": "Catalogue d'attributs",
+  "record.feature.catalog.number.total.attribute": "Nombre total d'attributs",
+  "record.feature.catalog.number.total.object": "Nombre total d'objets",
   "record.feature.limit": "L’aperçu a été désactivé en raison d’un trop grand nombre d'éléments",
   "record.kind.data": "Donnée",
   "record.kind.dataset": "Donnée",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "Cette donnée n'a pu être trouvée.",
   "search.field.any.placeholder": "Rechercher dans le catalogue...",
   "search.field.sortBy": "Trier par :",
+  "search.filter.into.feature.catalog": "Rechercher un terme",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "Mise à jour",

package/translations/it.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "Tag",
   "facets.block.title.th_regions_tree.default": "Regioni",
   "favorite.not.authenticated.tooltip": "<div><a href=' {link} '>Login</a> per accedere a questa funzionalità</div>",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "oppure trascinalo qui",
   "input.file.orInputUrl": "o collegamento a una risorsa esterna",
   "input.file.selectFileLabel": "Seleziona un file ({sizeMB} MB max.)",
@@ -361,6 +365,9 @@
   "record.action.view": "Visualizza",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "Aprire nel visualizzatore esterno",
+  "record.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "La visualizzazione è stata disabilitata a causa di troppi elementi ",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "Impossibile trovare questi dati.",
   "search.field.any.placeholder": "Cerca del catalogo...",
   "search.field.sortBy": "Ordina per:",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "Aggiornato",

package/translations/nl.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "",
   "input.file.orInputUrl": "",
   "input.file.selectFileLabel": "",
@@ -361,6 +365,9 @@
   "record.action.view": "",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
+  "record.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "",
   "search.field.any.placeholder": "",
   "search.field.sortBy": "",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "",

package/translations/pt.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "",
   "facets.block.title.th_regions_tree.default": "",
   "favorite.not.authenticated.tooltip": "",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "",
   "input.file.orInputUrl": "",
   "input.file.selectFileLabel": "",
@@ -361,6 +365,9 @@
   "record.action.view": "",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "",
+  "record.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "",
   "search.field.any.placeholder": "",
   "search.field.sortBy": "",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "",

package/translations/sk.json

@@ -284,6 +284,10 @@
   "facets.block.title.tag.default": "Štítok",
   "facets.block.title.th_regions_tree.default": "Regióny",
   "favorite.not.authenticated.tooltip": "<div><a href='{link}'>Prihlásiť sa</a> pre prístup k tejto funkcii</div>",
+  "feature.catalog.attribute.code": "",
+  "feature.catalog.attribute.description": "",
+  "feature.catalog.attribute.name": "",
+  "feature.catalog.attribute.type": "",
   "input.file.dropFileLabel": "",
   "input.file.orInputUrl": "",
   "input.file.selectFileLabel": "",
@@ -361,6 +365,9 @@
   "record.action.view": "Zobraziť",
   "record.card.metadata.contact": "",
   "record.externalViewer.open": "Otvoriť v externom mapovom prehliadači",
+  "record.feature.catalog": "",
+  "record.feature.catalog.number.total.attribute": "",
+  "record.feature.catalog.number.total.object": "",
   "record.feature.limit": "",
   "record.kind.data": "",
   "record.kind.dataset": "",
@@ -488,6 +495,7 @@
   "search.error.recordNotFound": "Záznam s identifikátorom \"{ id }\" sa nepodarilo nájsť.",
   "search.field.any.placeholder": "Hľadať datasety ...",
   "search.field.sortBy": "Zoradiť podľa:",
+  "search.filter.into.feature.catalog": "",
   "search.filters.availableServices.download": "",
   "search.filters.availableServices.view": "",
   "search.filters.changeDate": "",