geonetwork-ui 2.4.0-dev.fdf8f64b → 2.4.1-dev.c1a684900

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

@@ -0,0 +1,39 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+  ViewEncapsulation,
+} from '@angular/core'
+import { MapContext } from '@geospatial-sdk/core'
+import { createLegendFromLayer } from '@geospatial-sdk/legend'
+import { NgIf } from '@angular/common'
+
+@Component({
+  selector: 'gn-ui-map-legend',
+  templateUrl: './map-legend.component.html',
+  standalone: true,
+  styleUrls: ['./map-legend.component.css'],
+  encapsulation: ViewEncapsulation.None,
+  imports: [NgIf],
+})
+export class MapLegendComponent implements OnChanges {
+  @Input() context: MapContext | null
+  @Output() legendStatusChange = new EventEmitter<boolean>()
+  legendHTML: HTMLElement | false
+
+  async ngOnChanges(changes: SimpleChanges) {
+    if ('context' in changes) {
+      const mapContext = changes['context'].currentValue
+      if (mapContext.layers && mapContext.layers.length > 0) {
+        const mapContextLayer = mapContext.layers[0]
+        this.legendHTML = await createLegendFromLayer(mapContextLayer)
+        if (this.legendHTML) {
+          this.legendStatusChange.emit(true)
+        }
+      }
+    }
+  }
+}

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

@@ -16,12 +16,12 @@
       <div
         class="record-header-image border border-gray-300 bg-white rounded-full w-16 h-16 object-contain mr-4 overflow-hidden transition duration-200 shrink-0"
       >
-        <mat-icon
+        <ng-icon
           *ngIf="!hasLogo"
-          class="material-symbols-outlined text-gray-200"
+          class="text-gray-200"
+          name="{{ hasOnlyPerson ? 'matFace' : 'matHomeWorkOutline' }}"
           style="width: 42px; height: 42px; font-size: 42px; margin: 10px"
-          >{{ hasOnlyPerson ? 'face' : 'home_work' }}</mat-icon
-        >
+        ></ng-icon>
         <gn-ui-thumbnail
           *ngIf="hasLogo"
           [thumbnailUrl]="record.ownerOrganization?.logoUrl?.toString()"
@@ -61,23 +61,27 @@
       >
         {{ record.title }}
       </h1>
-      <p class="line-clamp-3">{{ abstract }}</p>
+      <p class="line-clamp-3">
+        <gn-ui-markdown-parser [textContent]="abstract" whitoutStyles="true" />
+      </p>
       <gn-ui-thumbnail
         *ngIf="record.overviews?.[0]"
         class="block mt-3 w-full h-[136px] border border-gray-100 rounded-lg overflow-hidden"
         [thumbnailUrl]="record.overviews?.[0]?.url.toString()"
       ></gn-ui-thumbnail>
       <div class="flex flex-row mt-3" *ngIf="isDownloadable || isViewable">
-        <mat-icon
+        <ng-icon
           *ngIf="isDownloadable"
-          class="material-symbols-outlined text-primary opacity-45 mr-3"
-          >cloud_download
-        </mat-icon>
-        <mat-icon
+          class="text-primary opacity-45 mr-3"
+          name="matCloudDownloadOutline"
+        >
+        </ng-icon>
+        <ng-icon
           *ngIf="isViewable"
-          class="material-symbols-outlined text-primary opacity-45 mr-3"
-          >map
-        </mat-icon>
+          class="text-primary opacity-45 mr-3"
+          name="matMapOutline"
+        >
+        </ng-icon>
       </div>
     </div>
   </a>

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

@@ -9,7 +9,10 @@
     >
       <gn-ui-thumbnail
         class="relative h-full w-full object-cover object-left-top"
-        [thumbnailUrl]="[record.overviews?.[0]?.url?.toString(), organization?.logoUrl?.toString()]"
+        [thumbnailUrl]="[
+          record.overviews?.[0]?.url?.toString(),
+          organization?.logoUrl?.toString(),
+        ]"
         [fit]="['cover', 'contain']"
       ></gn-ui-thumbnail>
     </div>
@@ -30,7 +33,10 @@
       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"
     >
-      {{ abstract }}
+      <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"
@@ -42,16 +48,16 @@
     <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]"
     >
-      <mat-icon
+      <ng-icon
         *ngIf="isDownloadable"
-        class="material-symbols-outlined text-primary opacity-45 mx-1"
-        >cloud_download</mat-icon
-      >
-      <mat-icon
+        class="text-primary opacity-45 mx-1"
+        name="matCloudDownloadOutline"
+      ></ng-icon>
+      <ng-icon
         *ngIf="isViewable"
-        class="material-symbols-outlined text-primary opacity-45 mx-1"
-        >map</mat-icon
-      >
+        class="text-primary opacity-45 mx-1"
+        name="matMapOutline"
+      ></ng-icon>
     </div>
     <div
       *ngIf="metadataQualityDisplay"

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

@@ -14,7 +14,7 @@ export class ResultsLayoutConfigItem {
   constructor(
     public component: Type<RecordPreviewComponent>,
     public itemClass: string = DEFAULT_ITEM_CLS,
-    public itemStyle: string = '',
+    public itemStyle = '',
     public containerClass: string = DEFAULT_CONTAINER_CLS
   ) {}
 }

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

@@ -1,26 +1,59 @@
-<gn-ui-button
-  type="light"
-  [matMenuTriggerFor]="menu"
-  (buttonClick)="openMenu()"
-  data-test="record-menu-button"
->
-  <mat-icon class="material-symbols-outlined">more_vert</mat-icon>
-</gn-ui-button>
-<mat-menu #menu="matMenu">
-  <button
-    mat-menu-item
-    [disabled]="!canDuplicate"
-    (click)="duplicate.emit()"
-    data-test="record-menu-duplicate-button"
-  >
-    <span translate>record.action.duplicate</span>
-  </button>
-  <button
-    mat-menu-item
-    [disabled]="!canDelete"
-    (click)="openDeleteConfirmationDialog()"
-    data-test="record-menu-delete-button"
-  >
-    <span translate>record.action.delete</span>
-  </button>
-</mat-menu>
+<ng-container [ngSwitch]="sectionDisplayed">
+  <ng-container *ngSwitchCase="'mainMenu'">
+    <div
+      data-test="mainMenuSection"
+      class="mt-2 border border-gray-100 p-2 flex items-center bg-white shadow-2xl rounded-2xl"
+    >
+      <ul class="flex flex-col gap-2 w-full">
+        <gn-ui-button
+          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 translate>record.action.duplicate</span></gn-ui-button
+        >
+        <gn-ui-button
+          type="light"
+          extraClass="flex flex-row items-center gap-2 w-full justify-start"
+          (buttonClick)="displayDeleteMenu()"
+          [disabled]="!canDelete"
+          data-test="record-menu-delete-button"
+          ><span translate>record.action.delete</span></gn-ui-button
+        >
+      </ul>
+    </div>
+  </ng-container>
+  <ng-container *ngSwitchCase="'deleteMenu'">
+    <div
+      data-test="deleteMenuSection"
+      class="w-72 p-6 flex flex-col gap-3 mt-2 border border-gray-100 bg-white shadow-2xl rounded-2xl"
+    >
+      <span class="text-lg font-bold text-center">{{
+        'editor.record.delete.confirmation.title' | translate
+      }}</span>
+      <span class="text-center">{{
+        'editor.record.delete.confirmation.message' | translate
+      }}</span>
+      <div class="flex flex-row gap-8 justify-center">
+        <gn-ui-button
+          (buttonClick)="delete.emit()"
+          cdkFocusInitial
+          type="primary"
+          data-cy="confirm-button"
+          [style.--gn-ui-button-width]="'100px'"
+          >{{
+            'editor.record.delete.confirmation.confirmText' | translate
+          }}</gn-ui-button
+        >
+        <gn-ui-button
+          [style.--gn-ui-button-width]="'100px'"
+          (buttonClick)="closeActionMenu.emit()"
+          >{{
+            'editor.record.delete.confirmation.cancelText' | translate
+          }}</gn-ui-button
+        >
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -1,4 +1,6 @@
+import { CommonModule } from '@angular/common'
 import {
+  ChangeDetectorRef,
   Component,
   EventEmitter,
   Input,
@@ -6,11 +8,12 @@ import {
   ViewChild,
 } from '@angular/core'
 import { MatDialog, MatDialogModule } from '@angular/material/dialog'
-import { MatIconModule } from '@angular/material/icon'
 import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
 import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elements/src'
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
-import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { TranslateModule } from '@ngx-translate/core'
+
+type ActionMenuPage = 'mainMenu' | 'deleteMenu'
 
 @Component({
   selector: 'gn-ui-action-menu',
@@ -18,7 +21,7 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core'
   styleUrls: ['./action-menu.component.css'],
   standalone: true,
   imports: [
-    MatIconModule,
+    CommonModule,
     ButtonComponent,
     MatMenuModule,
     MatDialogModule,
@@ -31,44 +34,28 @@ export class ActionMenuComponent {
   @Input() canDelete: boolean
   @Output() duplicate = new EventEmitter<void>()
   @Output() delete = new EventEmitter<void>()
+  @Output() closeActionMenu = new EventEmitter<void>()
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
 
+  sectionDisplayed: ActionMenuPage = 'mainMenu'
+
   constructor(
     public dialog: MatDialog,
-    private translateService: TranslateService
+    private cdr: ChangeDetectorRef
   ) {}
 
   openMenu() {
     this.trigger.openMenu()
   }
 
-  openDeleteConfirmationDialog() {
-    const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: {
-        title: this.translateService.instant(
-          'editor.record.delete.confirmation.title'
-        ),
-        message: this.translateService.instant(
-          'editor.record.delete.confirmation.message'
-        ),
-        confirmText: this.translateService.instant(
-          'editor.record.delete.confirmation.confirmText'
-        ),
-        cancelText: this.translateService.instant(
-          'editor.record.delete.confirmation.cancelText'
-        ),
-      },
-      restoreFocus: false,
-    })
+  displayMainMenu() {
+    this.sectionDisplayed = 'mainMenu'
+    this.cdr.markForCheck()
+  }
 
-    // Manually restore focus to the menu trigger since the element that
-    // opens the dialog won't be in the DOM any more when the dialog closes.
-    dialogRef.afterClosed().subscribe((confirmed) => {
-      this.trigger.focus()
-      if (confirmed) {
-        this.delete.emit()
-      }
-    })
+  displayDeleteMenu() {
+    this.sectionDisplayed = 'deleteMenu'
+    this.cdr.markForCheck()
   }
 }

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

@@ -3,17 +3,7 @@
   (itemClick)="handleRecordClick($event)"
 >
   <!-- SELECTED COLUMN -->
-  <gn-ui-interactive-table-column>
-    <ng-template #header>
-      <gn-ui-checkbox
-        [checked]="isAllSelected()"
-        [indeterminate]="isSomeSelected()"
-        (changed)="toggleSelectAll()"
-        type="default"
-        class="-m-2 mr-3"
-      >
-      </gn-ui-checkbox>
-    </ng-template>
+  <gn-ui-interactive-table-column [width]="'3rem'">
     <ng-template #cell let-item>
       <gn-ui-checkbox
         [checked]="isChecked(item)"
@@ -36,7 +26,9 @@
     </ng-template>
     <ng-template #cell let-item>
       <div class="flex flex-row items-center gap-2 max-w-full font-semibold">
-        <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
+        <span data-cy="resultItemTitle" class="overflow-hidden text-ellipsis">{{
+          item.title
+        }}</span>
         <gn-ui-badge
           *ngIf="hasDraft(item)"
           [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
@@ -52,7 +44,7 @@
   </gn-ui-interactive-table-column>
 
   <!-- FORMATS COLUMN -->
-  <gn-ui-interactive-table-column>
+  <gn-ui-interactive-table-column [width]="'9rem'">
     <ng-template #header>
       <span translate>record.metadata.formats</span>
     </ng-template>
@@ -63,14 +55,14 @@
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[0])"
           *ngIf="formats[0]"
         >
           {{ formats[0] }}
         </span>
         <span
-          class="badge-btn min-w-[45px] text-xs text-white px-2 shrink-0"
+          class="badge-btn min-w-[45px] text-xs text-gray-900 px-2 shrink-0"
           [style.background-color]="getBadgeColor(formats[1])"
           *ngIf="formats[1]"
         >
@@ -86,21 +78,24 @@
 
   <!-- OWNER COLUMN -->
   <gn-ui-interactive-table-column
+    [width]="'9rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('recordOwner')"
     (sortChange)="setSortBy('recordOwner', $event)"
   >
     <ng-template #header>
-      <span translate>record.metadata.author</span>
+      <span translate>search.filters.user</span>
     </ng-template>
     <ng-template #cell let-item>
-      <mat-icon class="material-symbols-outlined">person</mat-icon>
-      <span class="text-xs">{{ formatUserInfo(item.extras?.ownerInfo) }}</span>
+      <ng-icon name="iconoirUser" size="16px"></ng-icon>
+      <span data-cy="ownerInfo" class="text-xs">{{
+        formatUserInfo(item.extras?.ownerInfo)
+      }}</span>
     </ng-template>
   </gn-ui-interactive-table-column>
 
   <!-- STATUS COLUMN -->
-  <gn-ui-interactive-table-column>
+  <gn-ui-interactive-table-column [width]="'6rem'">
     <ng-template #header>
       <span translate>record.metadata.status</span>
     </ng-template>
@@ -118,15 +113,16 @@
 
   <!-- UPDATE DATE COLUMN -->
   <gn-ui-interactive-table-column
+    [width]="'8rem'"
     [sortable]="true"
     [activeSort]="isSortedBy('changeDate')"
     (sortChange)="setSortBy('changeDate', $event)"
   >
     <ng-template #header>
-      <span translate>record.metadata.updatedOn</span>
+      <span translate>search.filters.changeDate</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex justify-center w-full text-xs">
+      <div class="flex text-left w-full text-xs">
         {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
       </div>
     </ng-template>
@@ -136,13 +132,25 @@
   <gn-ui-interactive-table-column>
     <ng-template #header> </ng-template>
     <ng-template #cell let-item>
-      <gn-ui-action-menu
-        [canDuplicate]="canDuplicate(item)"
-        [canDelete]="canDelete(item)"
-        (duplicate)="handleDuplicate(item)"
-        (delete)="handleDelete(item)"
+      <gn-ui-button
+        cdkOverlayOrigin
+        #actionMenuButton
+        (buttonClick)="openActionMenu(item, template)"
+        type="light"
+        data-test="record-menu-button"
       >
-      </gn-ui-action-menu>
+        <ng-icon name="matMoreVert"></ng-icon>
+      </gn-ui-button>
+      <ng-template #template>
+        <gn-ui-action-menu
+          [canDuplicate]="canDuplicate(item)"
+          [canDelete]="canDelete(item)"
+          (duplicate)="handleDuplicate(item)"
+          (delete)="handleDelete(item)"
+          (closeActionMenu)="closeActionMenu()"
+        >
+        </gn-ui-action-menu>
+      </ng-template>
     </ng-template>
   </gn-ui-interactive-table-column>
 </gn-ui-interactive-table>

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

@@ -1,6 +1,15 @@
 import { CommonModule } from '@angular/common'
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
   FieldSort,
@@ -13,12 +22,23 @@ import {
 } from '../../../../../../libs/ui/layout/src'
 import {
   FileFormat,
+  formatUserInfo,
   getBadgeColor,
   getFileFormat,
   getFormatPriority,
 } from '../../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { ActionMenuComponent } from './action-menu/action-menu.component'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirUser } from '@ng-icons/iconoir'
+import {
+  CdkConnectedOverlay,
+  CdkOverlayOrigin,
+  Overlay,
+  OverlayRef,
+} from '@angular/cdk/overlay'
+import { TemplatePortal } from '@angular/cdk/portal'
+import { matMoreVert } from '@ng-icons/material-icons/baseline'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -30,11 +50,14 @@ import { ActionMenuComponent } from './action-menu/action-menu.component'
     UiInputsModule,
     InteractiveTableComponent,
     InteractiveTableColumnComponent,
-    MatIconModule,
     TranslateModule,
     BadgeComponent,
     ActionMenuComponent,
+    NgIconComponent,
+    CdkOverlayOrigin,
+    CdkConnectedOverlay,
   ],
+  providers: [provideIcons({ iconoirUser, matMoreVert })],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
@@ -54,6 +77,67 @@ export class ResultsTableComponent {
     [CatalogRecord[], boolean]
   >()
 
+  @ViewChildren('actionMenuButton', { read: ElementRef })
+  actionMenuButtons!: QueryList<ElementRef>
+  private overlayRef!: OverlayRef
+
+  isActionMenuOpen = false
+
+  constructor(
+    private overlay: Overlay,
+    private viewContainerRef: ViewContainerRef,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  openActionMenu(item, template) {
+    this.isActionMenuOpen = true
+    const index = this.records.indexOf(item)
+    const buttonElement = this.actionMenuButtons.toArray()[index]
+
+    const positionStrategy = this.overlay
+      .position()
+      .flexibleConnectedTo(buttonElement)
+      .withFlexibleDimensions(true)
+      .withPush(true)
+      .withPositions([
+        {
+          originX: 'end',
+          originY: 'bottom',
+          overlayX: 'end',
+          overlayY: 'top',
+        },
+        {
+          originX: 'end',
+          originY: 'top',
+          overlayX: 'end',
+          overlayY: 'bottom',
+        },
+      ])
+
+    this.overlayRef = this.overlay.create({
+      hasBackdrop: true,
+      backdropClass: 'cdk-overlay-transparent-backdrop',
+      positionStrategy: positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+    })
+
+    const portal = new TemplatePortal(template, this.viewContainerRef)
+
+    this.overlayRef.attach(portal)
+
+    this.overlayRef.backdropClick().subscribe(() => {
+      this.closeActionMenu()
+    })
+  }
+
+  closeActionMenu() {
+    if (this.overlayRef) {
+      this.isActionMenuOpen = false
+      this.overlayRef.dispose()
+      this.cdr.markForCheck()
+    }
+  }
+
   dateToString(date: Date): string {
     return date?.toLocaleDateString(undefined, {
       year: 'numeric',
@@ -79,11 +163,7 @@ export class ResultsTableComponent {
   }
 
   formatUserInfo(userInfo: string | unknown): string {
-    const infos = (typeof userInfo === 'string' ? userInfo : '').split('|')
-    if (infos && infos.length === 4) {
-      return `${infos[2]} ${infos[1]}`
-    }
-    return undefined
+    return formatUserInfo(userInfo)
   }
 
   getBadgeColor(format: FileFormat): string {
@@ -100,6 +180,7 @@ export class ResultsTableComponent {
 
   handleDelete(item: unknown) {
     this.deleteRecord.emit(item as CatalogRecord)
+    this.closeActionMenu()
   }
 
   setSortBy(col: string, order: 'asc' | 'desc') {
@@ -128,24 +209,4 @@ export class ResultsTableComponent {
   handleRecordSelectedChange(selected: boolean, record: CatalogRecord) {
     this.recordsSelectedChange.emit([[record], selected])
   }
-
-  async toggleSelectAll() {
-    this.recordsSelectedChange.emit([this.records, !this.isAllSelected()])
-  }
-
-  isAllSelected(): boolean {
-    return this.records.every((record) =>
-      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
-    )
-  }
-
-  isSomeSelected(): boolean {
-    const allSelected = this.records.every((record) =>
-      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
-    )
-    const someSelected = this.records.some((record) =>
-      this.selectedRecordsIdentifiers.includes(record.uniqueIdentifier)
-    )
-    return !allSelected && someSelected
-  }
 }