geonetwork-ui 2.6.0-dev.c4b99cdef → 2.6.0-dev.d8333ac5d

package/src/libs/ui/elements/src/lib/metadata-info/metadata-info.component.html

@@ -46,6 +46,7 @@
     metadata.otherConstraints
   "
   [title]="'record.metadata.usage' | translate"
+  data-test="usage-panel"
 >
   <div class="flex flex-col gap-[10px] mr-4 py-[12px] rounded text-gray-900">
     <ng-container *ngFor="let license of licenses">
@@ -105,6 +106,7 @@
     (metadata.kind === 'dataset' && metadata.status)
   "
   [title]="'record.metadata.details' | translate"
+  data-test="details-panel"
 >
   <div *ngIf="metadata.lineage" class="text-gray-900 flex flex-col mt-4 gap-2">
     <p class="whitespace-pre-line break-words text-gray-900" gnUiLinkify>
@@ -231,6 +233,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.kind !== 'dataset' && metadata.spatialExtents"
   [title]="'service.metadata.spatialExtent' | translate"
+  data-test="spatial-extent-panel"
 >
   <gn-ui-spatial-extent
     class="flex h-[271px] w-full rounded-lg border border-gray-100 mt-3 mb-6"
@@ -240,6 +243,7 @@
 <gn-ui-expandable-panel
   *ngIf="metadata.landingPage"
   [title]="'service.metadata.other' | translate"
+  data-test="other-panel"
 >
   <div class="flex flex-col gap-4 mr-4 py-5 rounded text-gray-700">
     <div *ngIf="metadata.recordUpdated">

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.html

@@ -0,0 +1,48 @@
+<div class="flex flex-col gap-2 py-5 px-5 h-[562px] overflow-y-auto">
+  <div
+    *ngFor="let featureType of filteredFeatureCatalog?.featureTypes"
+    class="rounded shadow bg-white"
+  >
+    <gn-ui-expandable-panel
+      [collapsed]="filteredFeatureCatalog?.featureTypes?.length !== 1"
+      iconColor="black"
+    >
+      <ng-template #titleTemplate>
+        <div class="px-2">
+          <div class="text-lg font-bold">{{ featureType.name }}</div>
+          <div class="text-sm" *ngIf="featureType.definition">
+            {{ featureType.definition }}
+          </div>
+        </div>
+      </ng-template>
+      <div
+        class="grid gap-0"
+        [style.grid-template-columns]="gridTemplateColumns"
+        data-cy="feature-type-content"
+      >
+        <div
+          class="py-1 px-2 text-sm font-bold text-left border-t"
+          [class.border-l]="i > 0"
+          [class.border-gray-300]="i > 0"
+          *ngFor="let col of columns; let i = index"
+          data-test="column-label"
+        >
+          {{ col.label | translate }}
+        </div>
+        <ng-container *ngFor="let row of featureType.attributes">
+          <div
+            class="bg-white text-sm font-normal text-left border-t"
+            [class.border-l]="i > 0"
+            [class.border-gray-300]="i > 0"
+            *ngFor="let col of columns; let i = index"
+          >
+            <gn-ui-truncated-text
+              extraClass="py-3 px-2"
+              [text]="row[col.key]"
+            ></gn-ui-truncated-text>
+          </div>
+        </ng-container>
+      </div>
+    </gn-ui-expandable-panel>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/record-feature-catalog/feature-catalog-list/feature-catalog-list.component.ts

@@ -0,0 +1,52 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { TranslateModule } from '@ngx-translate/core'
+import { DatasetFeatureCatalog } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import {
+  ExpandablePanelComponent,
+  TruncatedTextComponent,
+} from '../../../../../../../libs/ui/layout/src'
+
+@Component({
+  selector: 'gn-ui-feature-catalog-list',
+  templateUrl: './feature-catalog-list.component.html',
+  standalone: true,
+  imports: [
+    CommonModule,
+    TranslateModule,
+    ExpandablePanelComponent,
+    TruncatedTextComponent,
+  ],
+})
+export class FeatureCatalogListComponent implements OnInit {
+  @Input() filteredFeatureCatalog: DatasetFeatureCatalog
+
+  columns = [
+    {
+      key: 'type',
+      label: 'feature.catalog.attribute.type',
+      width: '19%',
+    },
+    {
+      key: 'name',
+      label: 'feature.catalog.attribute.name',
+      width: '32%',
+    },
+    {
+      key: 'code',
+      label: 'feature.catalog.attribute.code',
+      width: '24%',
+    },
+    {
+      key: 'title',
+      label: 'feature.catalog.attribute.description',
+      width: '25%',
+    },
+  ]
+
+  gridTemplateColumns = ''
+
+  ngOnInit(): void {
+    this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ')
+  }
+}

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.html

@@ -16,17 +16,31 @@
             <div class="h-14 md:w-2/5 w-full mb-4 flex flex-row relative">
               <gn-ui-text-input
                 class="w-full"
+                [(value)]="searchQuery"
                 [extraClass]="getExtraInputClass()"
                 [placeholder]="'service.metadata.search' | translate"
                 (input)="onSearchChange($event)"
                 (keydown.enter)="onSearchEnter($event)"
               >
               </gn-ui-text-input>
+              <div
+                class="absolute right-14 h-14 w-14 flex items-center justify-center"
+              >
+                <button
+                  #inputBtn
+                  *ngIf="searchQuery"
+                  [aria-label]="'service.metadata.search.clear' | translate"
+                  (click)="clearSearch()"
+                  class="h-12 w-12 border-0 flex items-center justify-center"
+                >
+                  <ng-icon name="matClose"></ng-icon>
+                </button>
+              </div>
               <div class="border-l absolute border-gray-200 right-0 h-14 w-14">
                 <gn-ui-button
                   #inputBtn
                   type="outline"
-                  extraClass="h-12 w-12 border-0 absolute right-1 top-1"
+                  extraClass="h-12 w-12 border-0 absolute right-1 top-1 bg-white"
                   (buttonClick)="searchLayers()"
                 >
                   <ng-icon name="iconoirSearch"></ng-icon>

package/src/libs/ui/elements/src/lib/service-capabilities/service-capabilities.component.ts

@@ -16,6 +16,7 @@ import {
   WmsLayerFull,
   WmtsLayer,
 } from '@camptocamp/ogc-client'
+import { matClose } from '@ng-icons/material-icons/baseline'
 
 marker(`service.metadata.search`)
 marker(`service.metadata.capabilities.title`)
@@ -48,6 +49,7 @@ marker(`service.metadata.capabilities.attribution`)
     provideIcons({
       iconoirSearch,
       matInfoOutline,
+      matClose,
     }),
   ],
   templateUrl: './service-capabilities.component.html',
@@ -104,6 +106,12 @@ export class ServiceCapabilitiesComponent implements OnInit {
     }
   }
 
+  clearSearch() {
+    this.searchActive = false
+    this.searchQuery = ''
+    this.filteredLayers = this.availableLayers
+  }
+
   async loadLayers() {
     if (
       this.apiLinks.length > 0 &&
@@ -176,7 +184,7 @@ export class ServiceCapabilitiesComponent implements OnInit {
   }
 
   getExtraClass(layerItem) {
-    return layerItem.title === this.selectedLayer?.title
+    return layerItem === this.selectedLayer
       ? `h-8 rounded-lg bg-primary-darker text-white hover:text-primary-darker hover:bg-white`
       : `h-8 rounded-lg`
   }

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

@@ -23,7 +23,6 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
 import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 import { InternalLinkCardComponent } from './internal-link-card/internal-link-card.component'
 import { ServiceCapabilitiesComponent } from './service-capabilities/service-capabilities.component'
-
 @NgModule({
   imports: [
     CommonModule,

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

@@ -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/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/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>

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
   }
 }