geonetwork-ui 2.6.0-dev.9d3ad45e2 → 2.6.0-dev.a0bd52a21

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

@@ -1,52 +1,83 @@
-import { Component, Input, OnInit } from '@angular/core'
+import { Component, ElementRef, Input, ViewChild } 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 { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import {
+  DatasetFeatureAttribute,
+  DatasetFeatureCatalog,
+} from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import {
+  CellPopinComponent,
   ExpandablePanelComponent,
   TruncatedTextComponent,
 } from '../../../../../../../libs/ui/layout/src'
+import { CdkScrollable, ScrollingModule } from '@angular/cdk/scrolling'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { iconoirList } from '@ng-icons/iconoir'
+
+marker('feature.catalog.attribute.type')
+marker('feature.catalog.attribute.name')
+marker('feature.catalog.attribute.code')
+marker('feature.catalog.attribute.definition')
+marker('feature.catalog.attribute.values')
+
+interface ColumnDefinition {
+  key: string
+  width: string
+  class?: string
+}
 
 @Component({
   selector: 'gn-ui-feature-catalog-list',
   templateUrl: './feature-catalog-list.component.html',
+  styleUrls: [],
   standalone: true,
   imports: [
+    ButtonComponent,
+    CellPopinComponent,
     CommonModule,
     TranslateModule,
     ExpandablePanelComponent,
     TruncatedTextComponent,
+    NgIconComponent,
+    ScrollingModule,
   ],
+  providers: [provideIcons({ iconoirList })],
 })
-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%',
-    },
+export class FeatureCatalogListComponent {
+  @Input() filteredFeatureCatalog!: DatasetFeatureCatalog
+
+  @ViewChild('scrollContainer') scrollContainer!: ElementRef
+  @ViewChild(CdkScrollable, { static: true }) scrollable!: CdkScrollable
+  @ViewChild('expanel', { read: ExpandablePanelComponent, static: true })
+  panelComponent: ExpandablePanelComponent
+
+  readonly COLUMNS_DEFAULT: ColumnDefinition[] = [
+    { key: 'type', width: '17%' },
+    { key: 'name', width: '32%' },
+    { key: 'code', width: '17%' },
+    { key: 'definition', width: 'minmax(0px, 1fr)' },
   ]
 
-  gridTemplateColumns = ''
+  readonly COLUMN_VALUES: ColumnDefinition = {
+    key: 'values',
+    width: '73px',
+    class: 'text-center',
+  }
+
+  getColumnsDefinition(attrs: DatasetFeatureAttribute[]): ColumnDefinition[] {
+    const hasValues = attrs.some((a) => a.values?.length > 0)
+    return [...this.COLUMNS_DEFAULT, ...(hasValues ? [this.COLUMN_VALUES] : [])]
+  }
+
+  getGridTemplateColumns(attributes: DatasetFeatureAttribute[]) {
+    return this.getColumnsDefinition(attributes)
+      .map((col) => col.width)
+      .join(' ')
+  }
 
-  ngOnInit(): void {
-    this.gridTemplateColumns = this.columns.map((col) => col.width).join(' ')
+  trackByColumn(_i: number, col: { key: string }) {
+    return col.key
   }
 }

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

@@ -24,6 +24,7 @@ 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'
+import { ScrollingModule } from '@angular/cdk/scrolling'
 @NgModule({
   imports: [
     CommonModule,
@@ -49,6 +50,7 @@ import { ServiceCapabilitiesComponent } from './service-capabilities/service-cap
     ServiceCapabilitiesComponent,
     KindBadgeComponent,
     GeoDataBadgeComponent,
+    ScrollingModule,
   ],
   providers: [
     provideNgIconsConfig({

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.html

@@ -79,7 +79,7 @@
   <mat-option
     *ngFor="let suggestion of suggestions$ | async"
     [value]="suggestion"
-    class="p-2 suggestion"
+    class="p-2 suggestion text-start"
   >
     {{ displayWithFnInternal(suggestion) }}
   </mat-option>

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

@@ -1,5 +1,6 @@
 export * from './lib/anchor-link/anchor-link.directive'
 export * from './lib/carousel/carousel.component'
+export * from './lib/cell-popin/cell-popin.component'
 export * from './lib/expandable-panel-button/expandable-panel-button.component'
 export * from './lib/expandable-panel/expandable-panel.component'
 export * from './lib/form-field-wrapper/form-field-wrapper.component'

package/src/libs/ui/layout/src/lib/cell-popin/cell-popin.component.html

@@ -0,0 +1,40 @@
+<div
+  class="h-full flex items-center justify-center"
+  cdkOverlayOrigin
+  #anchorRef
+  #trigger="cdkOverlayOrigin"
+  [class]="extraClass"
+  data-cy="cell-popin"
+>
+  <ng-content select="[cellContent]"></ng-content>
+  <ng-template
+    *ngIf="activePopin"
+    cdkConnectedOverlay
+    [cdkConnectedOverlayPush]="false"
+    [cdkConnectedOverlayOrigin]="trigger"
+    [cdkConnectedOverlayOpen]="isOpen"
+    [cdkConnectedOverlayPositions]="overlayPositions"
+    [cdkConnectedOverlayWidth]="'auto'"
+    [cdkConnectedOverlayFlexibleDimensions]="true"
+    [cdkConnectedOverlayGrowAfterOpen]="true"
+    (detach)="closeOverlay()"
+  >
+    <div
+      *ngIf="activePopin && isVisible"
+      class="bg-white shadow-lg border border-gray-300 relative"
+      data-cy="cell-popin-content"
+    >
+      <ng-content select="[popinContent]"></ng-content>
+      <gn-ui-button
+        data-cy="cell-popin-close"
+        [style.--gn-ui-button-background]="'bg-transparent'"
+        class="absolute top-2 right-2"
+        type="light"
+        (buttonClick)="closeOverlay()"
+        extraClass="w-10 h-8 px-1"
+      >
+        <ng-icon name="iconoirReduce" size="24"></ng-icon>
+      </gn-ui-button>
+    </div>
+  </ng-template>
+</div>

package/src/libs/ui/layout/src/lib/cell-popin/cell-popin.component.ts

@@ -0,0 +1,141 @@
+import {
+  AfterViewInit,
+  Component,
+  Input,
+  OnDestroy,
+  ElementRef,
+  TemplateRef,
+  ViewChild,
+  Injector,
+  ChangeDetectorRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { provideIcons, NgIconComponent } from '@ng-icons/core'
+import { iconoirReduce } from '@ng-icons/iconoir'
+import { MatButtonModule } from '@angular/material/button'
+import {
+  OverlayModule,
+  ConnectedPosition,
+  ScrollDispatcher,
+  CdkScrollable,
+  CdkConnectedOverlay,
+  OverlayContainer,
+} from '@angular/cdk/overlay'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+@Component({
+  selector: 'gn-ui-cell-popin',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    OverlayModule,
+    ButtonComponent,
+    NgIconComponent,
+  ],
+  providers: [provideIcons({ iconoirReduce })],
+  templateUrl: './cell-popin.component.html',
+  styleUrls: [],
+})
+export class CellPopinComponent implements AfterViewInit, OnDestroy {
+  @Input() extraClass = ''
+  @Input() cdkScrollContainer!: CdkScrollable
+  @Input() scrollContainer!: ElementRef
+
+  @ViewChild('anchorRef') anchorRef!: ElementRef
+
+  protected isOpen = false
+  protected isVisible = true
+  protected overlayPositions: ConnectedPosition[] = [
+    {
+      originX: 'end',
+      originY: 'top',
+      overlayX: 'end',
+      overlayY: 'top',
+    },
+    {
+      originX: 'start',
+      originY: 'top',
+      overlayX: 'start',
+      overlayY: 'top',
+    },
+  ]
+
+  private firstCheck = true
+  private intersectionObserver: IntersectionObserver
+
+  private _activePopin = true
+
+  @Input()
+  set activePopin(active: boolean | undefined) {
+    this._activePopin = !!active
+    this.updateIntersectionObserver()
+  }
+  get activePopin(): boolean {
+    return this._activePopin
+  }
+
+  constructor(
+    private scrollDispatcher: ScrollDispatcher,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngAfterViewInit() {
+    if (!this.activePopin) {
+      return
+    }
+
+    if (this.cdkScrollContainer) {
+      this.scrollDispatcher.register(this.cdkScrollContainer)
+    }
+
+    this.updateIntersectionObserver()
+  }
+
+  ngOnDestroy() {
+    this.intersectionObserver?.disconnect()
+    this.scrollDispatcher.deregister(this.cdkScrollContainer)
+  }
+
+  updateIntersectionObserver() {
+    if (!this.scrollContainer || !this.anchorRef) {
+      return
+    }
+
+    if (this.intersectionObserver) {
+      this.intersectionObserver?.disconnect()
+    }
+
+    this.intersectionObserver = new IntersectionObserver(
+      ([entry]) => {
+        const visible = entry.intersectionRatio >= 1
+
+        // Ignore first visibility if first time opening it
+        if (this.firstCheck && !visible) {
+          this.firstCheck = false
+          return
+        }
+
+        this.firstCheck = false
+
+        if (this.isVisible !== visible) {
+          this.isVisible = visible
+          this.cdr.detectChanges()
+        }
+      },
+      {
+        root: this.scrollContainer.nativeElement,
+        threshold: 1.0,
+      }
+    )
+
+    this.intersectionObserver.observe(this.anchorRef.nativeElement)
+  }
+
+  openOverlay() {
+    this.isOpen = true
+  }
+
+  closeOverlay() {
+    this.isOpen = false
+  }
+}

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
@@ -48,9 +49,9 @@
         class="table-row-cell px-3 py-1.5 flex items-center bg-white transition-colors duration-75 truncate border-b border-gray-200"
         [ngClass]="{
           'text-purple-light cursor-default':
-            (!item.extras?.edit && !isDraftPage) || item.kind !== 'dataset',
+            (canEditItem(item) | async) === false,
           'group-hover:text-main group-hover:bg-gray-50':
-            (item.extras?.edit || isDraftPage) && item.kind === 'dataset',
+            canEditItem(item) | async,
         }"
       >
         <ng-container

package/src/libs/ui/layout/src/lib/interactive-table/interactive-table.component.ts

@@ -14,9 +14,11 @@ import { iconoirNavArrowDown, iconoirNavArrowUp } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
+import { Observable, of } from 'rxjs'
 
-marker('editor.record.lock.reason')
-marker('editor.record.lock.format')
+marker('editor.record.lock.resourceType')
+marker('editor.record.lock.harvested')
+marker('editor.record.lock.owner')
 @Component({
   selector: 'gn-ui-interactive-table',
   templateUrl: './interactive-table.component.html',
@@ -31,6 +33,7 @@ export class InteractiveTableComponent {
   columns: QueryList<InteractiveTableColumnComponent>
 
   @Input() items: unknown[] = []
+  @Input() canEditItem: (item: unknown) => Observable<boolean> = () => of(true)
   @Input() isDraftPage = false
   @Output() itemClick = new EventEmitter<unknown>()
 
@@ -49,10 +52,14 @@ export class InteractiveTableComponent {
   }
 
   getItemTitle(item: CatalogRecord) {
-    if (!item.extras?.edit && !this.isDraftPage && item.kind === 'dataset') {
-      return 'editor.record.lock.reason'
-    } else if (item.kind !== 'dataset') {
-      return 'editor.record.lock.format'
+    if (!this.isDraftPage) {
+      if (item.kind !== 'dataset') {
+        return 'editor.record.lock.resourceType'
+      } else if (item.extras?.isHarvested) {
+        return 'editor.record.lock.harvested'
+      } else if (!item.extras?.edit) {
+        return 'editor.record.lock.owner'
+      }
     }
     return ''
   }

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

@@ -1,44 +1,27 @@
-<div
-  class="flex items-center justify-between w-full gap-2"
-  cdkOverlayOrigin
-  [class]="extraClass"
-  #trigger="cdkOverlayOrigin"
+<gn-ui-cell-popin
+  #popinRef
+  [activePopin]="isTextTruncated"
+  [scrollContainer]="scrollContainer"
+  [cdkScrollContainer]="cdkScrollContainer"
 >
-  <span #textElement class="truncate">
-    {{ text }}
-  </span>
-  <gn-ui-button
-    *ngIf="isTextTruncated"
-    type="outline"
-    extraClass="w-10 h-8 border rounded-lg"
-    (buttonClick)="toggleOverlay()"
+  <div
+    cellContent
+    class="flex items-center justify-between w-full gap-2"
+    [class]="extraClass"
   >
-    <ng-icon name="iconoirExpand" size="24"> </ng-icon>
-  </gn-ui-button>
-
-  <ng-template
-    cdkConnectedOverlay
-    [cdkConnectedOverlayOrigin]="trigger"
-    [cdkConnectedOverlayOpen]="isOpen"
-    [cdkConnectedOverlayPositions]="[overlayPosition]"
-    cdkConnectedOverlayPush
-    [cdkConnectedOverlayWidth]="'auto'"
-    [cdkConnectedOverlayFlexibleDimensions]="true"
-    [cdkConnectedOverlayGrowAfterOpen]="true"
-    (detach)="close()"
-  >
-    <div class="bg-white shadow-lg border border-gray-300 flex">
-      <div class="sm:w-64 xs:w-32">
-        <p class="m-2">{{ text }}</p>
-      </div>
-      <gn-ui-button
-        class="m-2 flex-shrink-0"
-        type="light"
-        (buttonClick)="close()"
-        extraClass="w-10 h-8 px-1 bg-white"
-      >
-        <ng-icon name="iconoirReduce" size="24"> </ng-icon>
-      </gn-ui-button>
-    </div>
-  </ng-template>
-</div>
+    <span #textElement class="truncate py-3 px-2">
+      {{ text }}
+    </span>
+    <gn-ui-button
+      *ngIf="isTextTruncated"
+      type="outline"
+      extraClass="w-10 h-8 border rounded-lg mr-2"
+      (buttonClick)="popinRef.openOverlay()"
+    >
+      <ng-icon name="iconoirExpand" size="24"> </ng-icon>
+    </gn-ui-button>
+  </div>
+  <div popinContent class="sm:w-64 xs:w-32 py-4 pl-6 pr-9">
+    <p>{{ text }}</p>
+  </div>
+</gn-ui-cell-popin>

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

@@ -10,16 +10,17 @@ import {
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { provideIcons, NgIconComponent } from '@ng-icons/core'
-import { iconoirExpand, iconoirReduce } from '@ng-icons/iconoir'
+import { iconoirExpand } from '@ng-icons/iconoir'
 import { TranslateModule } from '@ngx-translate/core'
 import { MatButtonModule } from '@angular/material/button'
 import {
+  CdkScrollable,
   OverlayModule,
   ViewportRuler,
   ConnectedPosition,
 } from '@angular/cdk/overlay'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
-import { Subscription } from 'rxjs'
+import { CellPopinComponent } from '../cell-popin/cell-popin.component'
 
 @Component({
   selector: 'gn-ui-truncated-text',
@@ -30,33 +31,29 @@ import { Subscription } from 'rxjs'
     MatButtonModule,
     OverlayModule,
     ButtonComponent,
+    CellPopinComponent,
     NgIconComponent,
   ],
-  providers: [provideIcons({ iconoirExpand, iconoirReduce })],
+  providers: [provideIcons({ iconoirExpand })],
   templateUrl: './truncated-text.component.html',
   styles: [],
 })
 export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
   @Input() text = ''
   @Input() extraClass = ''
+  @Input() scrollContainer!: ElementRef
+  @Input() cdkScrollContainer!: CdkScrollable
 
   @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
+    private readonly ngZone: NgZone
   ) {
     this.resizeObserver = new ResizeObserver(() => {
       this.ngZone.run(() => this.checkTextTruncation())
@@ -65,15 +62,8 @@ export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
     this.mutationObserver = new MutationObserver(() => {
       this.ngZone.run(() => {
         this.checkTextTruncation()
-        this.close()
       })
     })
-
-    this.viewportSubscription = this.viewportRuler.change().subscribe(() => {
-      if (this.isOpen) {
-        this.updateOverlayPosition()
-      }
-    })
   }
 
   ngAfterViewInit() {
@@ -90,35 +80,6 @@ export class TruncatedTextComponent implements AfterViewInit, OnDestroy {
   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() {
-    this.isOpen = false
   }
 
   private checkTextTruncation() {

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

@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core'
 import { CommonModule } from '@angular/common'
 import { TranslateModule } from '@ngx-translate/core'
+import { NgIconComponent } from '@ng-icons/core'
 import { StickyHeaderComponent } from './sticky-header/sticky-header.component'
 import { AnchorLinkDirective } from './anchor-link/anchor-link.directive'
-import { NgIconComponent, provideNgIconsConfig } from '@ng-icons/core'
 
 @NgModule({
   imports: [CommonModule, TranslateModule.forChild(), NgIconComponent],

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