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

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,8 +1,7 @@
-<div class="inline-block relative align-middle" style="line-height: 0.7em">
+<div class="inline-block relative align-middle">
   <gn-ui-button
     [type]="'outline'"
     [disabled]="disabled"
-    class="-m-[8px] p-[8px]"
     (buttonClick)="toggle($event)"
     [ngClass]="{
       enabled: toggled,

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/interactive-table/interactive-table.component.html

@@ -31,6 +31,7 @@
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
     data-cy="table-row"
+    [attr.data-cy-title]="item.title"
     [title]="getItemTitle(item) | translate"
   >
     <div

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

@@ -143,24 +143,34 @@
   <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"
+          [disabled]="
+            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset'
+          "
+        >
+          <ng-icon
+            [ngClass]="{
+              'text-purple-light':
+                (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
+            }"
+            name="matMoreVert"
+          ></ng-icon>
+        </gn-ui-button>
+      </div>
       <ng-template #template>
         <gn-ui-action-menu
           [canDuplicate]="canDuplicate(item) && !isDuplicating"

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

@@ -28,16 +28,11 @@ 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'
 
@@ -57,7 +52,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[] = []
@@ -89,7 +86,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) {
@@ -219,4 +217,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(
+        ', '
+      ),
+    })
+  }
 }