geonetwork-ui 2.6.0-dev.26001d617 → 2.6.0-dev.2883b2a32

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/index.ts

@@ -19,3 +19,4 @@ export * from './lib/results-list-item/results-list-item.component'
 export * from './lib/results-hits-search-kind/results-hits-search-kind.component'
 export * from './lib/results-hits-number/results-hits-number.component'
 export * from './lib/results-table/results-table.component'
+export * from './lib/results-table/action-menu/action-menu.component'

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -1,82 +1,10 @@
-<a
-  class="group container-lg mx-auto flex cursor-pointer flex-wrap sm:flex-nowrap"
-  [title]="record.title"
-  [attr.href]="linkHref"
+<gn-ui-internal-link-card
+  [linkHref]="linkHref"
+  [linkTarget]="linkTarget"
+  [record]="record"
+  [favoriteTemplate]="favoriteTemplate"
+  [metadataQualityDisplay]="metadataQualityDisplay"
+  (mdSelect)="mdSelect.emit($event)"
+  size="L"
 >
-  <div class="shrink-0 w-full sm:w-52">
-    <div
-      class="overflow-hidden bg-gray-100 rounded-lg w-full border border-gray-300 h-36"
-    >
-      <gn-ui-thumbnail
-        class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="[
-          record.overviews?.[0]?.url?.toString(),
-          organization?.logoUrl?.toString(),
-        ]"
-        [fit]="['cover', 'contain']"
-      ></gn-ui-thumbnail>
-    </div>
-  </div>
-  <div
-    class="content grid grow relative sm:pl-6 sm:pr-12"
-    style="grid-template-columns: auto 70px"
-  >
-    <div class="mb-3 mt-5 sm:mt-2">
-      <div
-        class="font-title text-21 text-title line-clamp-2 col-start-1 col-span-2 sm:line-clamp-1 group-hover:text-primary transition-colors"
-        data-cy="recordTitle"
-      >
-        {{ record.title }}
-      </div>
-    </div>
-    <div
-      class="abstract mt-4 mb-5 h-36 line-clamp-6 col-start-1 col-span-2 row-start-3 sm:mb-2 sm:h-[4.5rem] sm:line-clamp-3 sm:row-start-2 sm:mt-0"
-      data-cy="recordAbstract"
-    >
-      <gn-ui-markdown-parser
-        [textContent]="abstract"
-        whitoutStyles="true"
-      ></gn-ui-markdown-parser>
-    </div>
-    <div
-      class="text-primary opacity-45 uppercase col-start-1 col-span-2 row-start-2 sm:truncate sm:row-start-3 sm:col-span-1"
-      data-cy="recordOrg"
-      [class]="metadataQualityDisplay ? 'limit-organisation-with-quality' : ''"
-    >
-      {{ organization?.name }}
-    </div>
-    <div
-      class="icons flex flex-row col-start-1 row-start-4 sm:col-start-2 sm:row-start-3 sm:absolute sm:right-[0.4em]"
-    >
-      <ng-icon
-        *ngIf="isDownloadable"
-        class="text-primary opacity-45 mx-1"
-        name="matCloudDownloadOutline"
-      ></ng-icon>
-      <ng-icon
-        *ngIf="isViewable"
-        class="text-primary opacity-45 mx-1"
-        name="matMapOutline"
-      ></ng-icon>
-    </div>
-    <div
-      *ngIf="metadataQualityDisplay"
-      class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
-    >
-      <gn-ui-metadata-quality
-        [smaller]="true"
-        [metadata]="record"
-        [metadataQualityDisplay]="metadataQualityDisplay"
-      ></gn-ui-metadata-quality>
-    </div>
-    <div
-      class="text-right col-start-3 row-start-4 sm:absolute sm:col-start-2 sm:row-start-1 sm:top-[-1.125em] sm:right-[0.4em]"
-      data-cy="recordFav"
-    >
-      <ng-container
-        [ngTemplateOutlet]="favoriteTemplate"
-        [ngTemplateOutletContext]="{ $implicit: record }"
-      ></ng-container>
-    </div>
-  </div>
-</a>
+</gn-ui-internal-link-card>

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

@@ -5,6 +5,7 @@
 >
   <ng-template let-choice>
     <gn-ui-kind-badge
+      [styling]="'custom'"
       [kind]="choice.value"
       [contentTemplate]="customTemplate"
       class="gn-ui-btn-outline rounded-md py-2 px-2 border-gray-400 cursor-pointer focus-within:text-primary-darkest focus-within:bg-gray-50 transition-colors bg-transparent hover:text-primary-darker focus:text-primary-darker active:text-primary-black"

package/src/libs/ui/search/src/lib/results-list/results-layout.config.ts

@@ -32,9 +32,9 @@ export const DEFAULT_RESULTS_LAYOUT_CONFIG: ResultsLayoutConfigModel = {
   ),
   ROW: new ResultsLayoutConfigItem(
     RecordPreviewRowComponent,
-    'pt-4 pb-5 sm:py-7',
+    'py-2',
     '',
-    'grid grid-cols-1 divide-y divide-gray-300'
+    'grid grid-cols-1 divide-y divide-gray-100'
   ),
   FEED: new ResultsLayoutConfigItem(
     RecordPreviewFeedComponent,

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

@@ -6,6 +6,7 @@
       *ngFor="let record of records"
     >
       <gn-ui-results-list-item
+        [attr.data-cy]="record.uniqueIdentifier"
         [record]="record"
         [layoutConfig]="layoutConfig"
         [metadataQualityDisplay]="metadataQualityDisplay"

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

@@ -3,7 +3,6 @@ import {
   Component,
   EventEmitter,
   Input,
-  OnInit,
   Output,
   TemplateRef,
 } from '@angular/core'

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.html

@@ -6,17 +6,27 @@
     >
       <ul class="flex flex-col gap-2 w-full">
         <gn-ui-button
-          *ngIf="!isDraftPage"
+          *ngIf="page === 'main'"
           type="light"
           extraClass="flex flex-row items-center gap-2 w-full justify-start"
           (buttonClick)="duplicate.emit()"
           [disabled]="!canDuplicate"
           data-test="record-menu-duplicate-button"
         >
-          <span *ngIf="canDuplicate" translate>record.action.duplicate</span>
-          <span *ngIf="!canDuplicate" translate
+          <span *ngIf="isDuplicating; else notDuplicating" translate
             >record.action.duplicating</span
-          ></gn-ui-button
+          >
+          <ng-template #notDuplicating>
+            <span translate>record.action.duplicate</span>
+          </ng-template>
+        </gn-ui-button>
+        <gn-ui-button
+          *ngIf="page === 'record'"
+          type="light"
+          extraClass="flex flex-row items-center gap-2 w-full justify-start"
+          (buttonClick)="switch.emit()"
+          data-test="record-menu-switch-button"
+          ><span translate>record.action.switchLang</span></gn-ui-button
         >
         <gn-ui-button
           type="light"
@@ -24,8 +34,8 @@
           (buttonClick)="displayDeleteMenu()"
           [disabled]="!canDelete"
           data-test="record-menu-delete-button"
-          ><span *ngIf="!isDraftPage" translate>record.action.delete</span>
-          <span *ngIf="isDraftPage" translate
+          ><span *ngIf="page !== 'draft'" translate>record.action.delete</span>
+          <span *ngIf="page === 'draft'" translate
             >record.action.rollback</span
           ></gn-ui-button
         >

package/src/libs/ui/search/src/lib/results-table/action-menu/action-menu.component.ts

@@ -30,13 +30,15 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
   ],
 })
 export class ActionMenuComponent {
-  @Input() canDuplicate: boolean
-  @Input() canDelete: boolean
-  @Input() isDraftPage: boolean
+  @Input() canDuplicate = true
+  @Input() isDuplicating: boolean
+  @Input() canDelete = true
+  @Input() page: 'draft' | 'main' | 'record'
   @Output() duplicate = new EventEmitter<void>()
   @Output() delete = new EventEmitter<void>()
   @Output() closeActionMenu = new EventEmitter<void>()
   @Output() rollback = new EventEmitter<void>()
+  @Output() switch = new EventEmitter<void>()
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
 
@@ -47,20 +49,22 @@ export class ActionMenuComponent {
     private cdr: ChangeDetectorRef
   ) {}
 
-  openMenu() {
-    this.trigger.openMenu()
-  }
-
   displayMainMenu() {
     this.sectionDisplayed = 'mainMenu'
     this.cdr.markForCheck()
   }
 
   displayDeleteMenu() {
-    if (this.isDraftPage) {
-      this.sectionDisplayed = 'rollbackMenu'
-    } else {
-      this.sectionDisplayed = 'deleteMenu'
+    switch (this.page) {
+      case 'draft':
+        this.sectionDisplayed = 'rollbackMenu'
+        break
+      case 'record':
+        this.delete.emit()
+        break
+      case 'main':
+      default:
+        this.sectionDisplayed = 'deleteMenu'
     }
     this.cdr.markForCheck()
   }

package/src/libs/ui/search/src/lib/results-table/results-table.component.css

@@ -0,0 +1,4 @@
+:host {
+  --gn-ui-button-height: 40px;
+  --gn-ui-button-width: 40px;
+}

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

@@ -1,5 +1,6 @@
 <gn-ui-interactive-table
   [items]="records"
+  [canEditItem]="canEdit"
   [isDraftPage]="isDraftPage"
   (itemClick)="handleRecordClick($event)"
 >
@@ -9,15 +10,16 @@
       <ng-icon
         name="iconoirLock"
         class="text-purple"
-        *ngIf="(!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'"
+        *ngIf="(canEdit(item) | async) === false; else selectCheckbox"
       ></ng-icon>
-      <gn-ui-checkbox
-        *ngIf="(item.extras?.edit || isDraftPage) && item.kind === 'dataset'"
-        [checked]="isChecked(item)"
-        (changed)="handleRecordSelectedChange($event, item)"
-        class="-m-2"
-        type="default"
-      ></gn-ui-checkbox>
+      <ng-template #selectCheckbox>
+        <gn-ui-checkbox
+          [checked]="isChecked(item)"
+          (changed)="handleRecordSelectedChange($event, item)"
+          class="-m-2"
+          type="default"
+        ></gn-ui-checkbox>
+      </ng-template>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -143,29 +145,31 @@
   <gn-ui-interactive-table-column>
     <ng-template #header> </ng-template>
     <ng-template #cell let-item>
-      <gn-ui-button
-        cdkOverlayOrigin
-        #actionMenuButton
-        (buttonClick)="openActionMenu(item, template)"
-        type="light"
-        data-test="record-menu-button"
-        [disabled]="
-          (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'
-        "
-      >
+      <div class="flex justify-end items-center gap-4 w-full">
+        <!-- IS MULTILINGUAL -->
         <ng-icon
-          [ngClass]="{
-            'text-purple-light':
-              (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
-          }"
-          name="matMoreVert"
+          *ngIf="isMultilingual(item)"
+          data-cy="multilingual-indicator"
+          name="iconoirTranslate"
+          [attr.title]="getTxtHoverMultilingual(item)"
         ></ng-icon>
-      </gn-ui-button>
+        <!-- MORE ACTIONS MENU BUTTON -->
+        <gn-ui-button
+          cdkOverlayOrigin
+          #actionMenuButton
+          (buttonClick)="openActionMenu(item, template)"
+          type="light"
+          data-test="record-menu-button"
+        >
+          <ng-icon name="matMoreVert"></ng-icon>
+        </gn-ui-button>
+      </div>
       <ng-template #template>
         <gn-ui-action-menu
-          [canDuplicate]="canDuplicate(item) && !isDuplicating"
-          [canDelete]="canDelete(item)"
-          [isDraftPage]="isDraftPage"
+          [canDuplicate]="canDuplicate(item)"
+          [isDuplicating]="isDuplicating"
+          [canDelete]="canDelete(item) | async"
+          [page]="isDraftPage ? 'draft' : 'main'"
           (duplicate)="handleDuplicate(item)"
           (delete)="handleDelete(item)"
           (closeActionMenu)="closeActionMenu()"

package/src/libs/ui/search/src/lib/results-table/results-table.component.ts

@@ -28,18 +28,14 @@ import {
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
-import { TranslateModule } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
 import { ActionMenuComponent } from './action-menu/action-menu.component'
 import { NgIconComponent, provideIcons } from '@ng-icons/core'
-import { iconoirUser, iconoirLock } from '@ng-icons/iconoir'
-import {
-  CdkConnectedOverlay,
-  CdkOverlayOrigin,
-  Overlay,
-  OverlayRef,
-} from '@angular/cdk/overlay'
+import { iconoirUser, iconoirLock, iconoirTranslate } from '@ng-icons/iconoir'
+import { CdkOverlayOrigin, Overlay, OverlayRef } from '@angular/cdk/overlay'
 import { TemplatePortal } from '@angular/cdk/portal'
 import { matMoreVert } from '@ng-icons/material-icons/baseline'
+import { Observable, of, take } from 'rxjs'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -57,7 +53,9 @@ import { matMoreVert } from '@ng-icons/material-icons/baseline'
     NgIconComponent,
     CdkOverlayOrigin,
   ],
-  providers: [provideIcons({ iconoirUser, iconoirLock, matMoreVert })],
+  providers: [
+    provideIcons({ iconoirUser, iconoirLock, iconoirTranslate, matMoreVert }),
+  ],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
@@ -65,7 +63,10 @@ export class ResultsTableComponent {
   @Input() sortOrder: SortByField = null
   @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
   @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
-  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => Observable<boolean> = () =>
+    of(true)
+  @Input() canEdit: (record: CatalogRecord) => Observable<boolean> = () =>
+    of(true)
   @Input() isDraftPage = false
   @Input() isDuplicating = false
 
@@ -89,7 +90,8 @@ export class ResultsTableComponent {
     private overlay: Overlay,
     private viewContainerRef: ViewContainerRef,
     private cdr: ChangeDetectorRef,
-    private dateService: DateService
+    private dateService: DateService,
+    private translateService: TranslateService
   ) {}
 
   openActionMenu(item, template) {
@@ -173,10 +175,14 @@ export class ResultsTableComponent {
     return getBadgeColor(format)
   }
 
-  handleRecordClick(item: CatalogRecord) {
-    if ((item?.extras?.edit || this.isDraftPage) && item.kind === 'dataset') {
-      this.recordClick.emit(item as CatalogRecord)
-    }
+  handleRecordClick(item: unknown) {
+    this.canEdit(item as CatalogRecord)
+      .pipe(take(1))
+      .subscribe((canEdit) => {
+        if (canEdit) {
+          this.recordClick.emit(item as CatalogRecord)
+        }
+      })
   }
 
   handleDuplicate(item: unknown) {
@@ -219,4 +225,16 @@ export class ResultsTableComponent {
   handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
     this.recordsSelectedChange.emit([[record], selected])
   }
+
+  isMultilingual(record: CatalogRecord): boolean {
+    return record.otherLanguages.length > 0
+  }
+
+  getTxtHoverMultilingual(record: CatalogRecord) {
+    return this.translateService.instant('dashboard.records.isMultilingual', {
+      languages: [...[record.defaultLanguage], ...record.otherLanguages].join(
+        ', '
+      ),
+    })
+  }
 }

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

@@ -39,6 +39,7 @@ import {
   matMapOutline,
 } from '@ng-icons/material-icons/outline'
 import { matFace } from '@ng-icons/material-icons/baseline'
+import { ActionMenuComponent } from './results-table/action-menu/action-menu.component'
 
 @NgModule({
   declarations: [
@@ -79,6 +80,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     }),
     KindBadgeComponent,
     MetadataQualityComponent,
+    ActionMenuComponent,
   ],
   exports: [
     RecordPreviewListComponent,
@@ -93,6 +95,7 @@ import { matFace } from '@ng-icons/material-icons/baseline'
     ResultsHitsSearchKindComponent,
     RecordPreviewFeedComponent,
     RecordPreviewRowComponent,
+    ActionMenuComponent,
   ],
   providers: [
     provideNgIconsConfig({

package/src/libs/util/i18n/src/lib/i18n.constants.ts

@@ -19,12 +19,54 @@ marker('language.pt')
 marker('language.ru')
 marker('language.zh')
 marker('language.sk')
+marker('language.rm')
+marker('language.ar')
+marker('language.da')
+marker('language.no')
+marker('language.pl')
+marker('language.sv')
+marker('language.tr')
+marker('language.hy')
+marker('language.az')
+marker('language.ka')
+marker('language.uk')
+marker('language.cy')
 
 export const DEFAULT_LANG = 'en'
 
 // Caution: changing this can break language selection from third parties!
 export const LANGUAGE_STORAGE_KEY = 'geonetwork-ui-language'
 
+export const SUPPORTED_LANGUAGES = [
+  'en',
+  'nl',
+  'fr',
+  'de',
+  'ko',
+  'es',
+  'cs',
+  'ca',
+  'fi',
+  'is',
+  'it',
+  'pt',
+  'ru',
+  'zh',
+  'sk',
+  'rm',
+  'ar',
+  'da',
+  'no',
+  'pl',
+  'sv',
+  'tr',
+  'hy',
+  'az',
+  'ka',
+  'uk',
+  'cy',
+]
+
 export function HttpLoaderFactory(http: HttpClient) {
   return new FileTranslateLoader(http, './assets/i18n/')
 }

package/src/libs/util/i18n/src/lib/language-codes.ts

@@ -15,6 +15,17 @@ export const LANG_3_TO_2_MAPPER = {
   chi: 'zh',
   slo: 'sk',
   roh: 'rm',
+  ara: 'ar',
+  dan: 'da',
+  nor: 'no',
+  pol: 'pl',
+  swe: 'sv',
+  tur: 'tr',
+  arm: 'hy',
+  aze: 'az',
+  geo: 'ka',
+  ukr: 'uk',
+  wel: 'cy',
 }
 
 export const LANGUAGE_NAMES = {
@@ -33,7 +44,18 @@ export const LANGUAGE_NAMES = {
   ru: 'Русский',
   zh: '中文',
   sk: 'Slovenčina',
-  roh: 'Rumantsch',
+  rm: 'Rumantsch',
+  ar: 'العربية',
+  da: 'Dansk',
+  no: 'Norsk',
+  pl: 'Polski',
+  sv: 'Swedish',
+  tr: 'Türkçe',
+  hy: 'հայերեն',
+  az: 'Azərbaycan dili',
+  ka: 'ქართული',
+  uk: 'українська',
+  wel: 'Cymraeg',
 }
 
 export const LANG_2_TO_3_MAPPER = Object.entries(LANG_3_TO_2_MAPPER).reduce(

package/src/libs/util/shared/src/lib/links/link-classifier.service.ts

@@ -31,7 +31,10 @@ export class LinkClassifierService {
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
           case 'wms':
           case 'wmts':
+          case 'tms':
             return [LinkUsage.API, LinkUsage.MAP_API]
+          case 'maplibre-style':
+            return [LinkUsage.GEODATA]
           case 'ogcFeatures':
             return [LinkUsage.API, LinkUsage.DOWNLOAD, LinkUsage.GEODATA]
           case 'GPFDL':

package/src/libs/util/shared/src/lib/links/link-utils.ts

@@ -247,6 +247,9 @@ export function getLinkLabel(
           case 'wmts':
             format = 'WMTS'
             break
+          case 'tms':
+            format = 'TMS'
+            break
           case 'esriRest':
             format = 'REST'
             break

package/tailwind.base.css

@@ -131,7 +131,7 @@
   .gn-ui-btn-light {
     @apply gn-ui-btn
       hover:bg-gray-50 focus:bg-gray-50 active:bg-gray-100
-      border-white focus:ring-4 focus:ring-gray-300;
+      bg-white border-white focus:ring-4 focus:ring-gray-300;
   }
 
   .gn-ui-card-s {