geonetwork-ui 2.4.0-dev.fe59f179 → 2.4.1-dev.4e8752d34

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)"
@@ -27,6 +17,7 @@
   <!-- TITLE COLUMN -->
   <gn-ui-interactive-table-column
     [sortable]="true"
+    [grow]="true"
     [activeSort]="isSortedBy('resourceTitleObject.default.keyword')"
     (sortChange)="setSortBy('resourceTitleObject.default.keyword', $event)"
   >
@@ -34,11 +25,14 @@
       <span translate>record.metadata.title</span>
     </ng-template>
     <ng-template #cell let-item>
-      <div class="flex flex-row items-center gap-2 max-w-full">
-        <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
+      <div class="flex flex-row items-center gap-2 max-w-full font-semibold">
+        <span data-cy="resultItemTitle" class="overflow-hidden text-ellipsis">{{
+          item.title
+        }}</span>
         <gn-ui-badge
-          *ngIf="recordHasDraft(item)"
-          [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
+          *ngIf="hasDraft(item)"
+          [style.--gn-ui-badge-padding]="'0.2em 0.6em'"
+          [style.--gn-ui-badge-text-size]="'12px'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
           [style.--gn-ui-badge-rounded]="'4px'"
@@ -50,31 +44,31 @@
   </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>
     <ng-template #cell let-item>
       <div
-        class="flex justify-start items-center gap-2"
+        class="flex justify-start items-center gap-2 font-medium"
         *ngIf="getRecordFormats(item) as formats"
         [title]="formats.join(', ')"
       >
         <span
-          class="badge-btn min-w-[45px] text-sm 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-sm 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]"
         >
           {{ formats[1] }}
         </span>
-        <div class="shrink-0" *ngIf="formats.slice(2).length > 0">
+        <div class="shrink-0 text-xs" *ngIf="formats.slice(2).length > 0">
           <span>+{{ formats.slice(2).length }}</span>
         </div>
       </div>
@@ -84,40 +78,79 @@
 
   <!-- 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>{{ 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>
     <ng-template #cell let-item>
-      {{ item.status }}
+      <span class="text-xs">
+        {{
+          (isUnsavedDraft(item)
+            ? 'record.metadata.status.notPublished'
+            : 'record.metadata.status.published'
+          ) | translate
+        }}</span
+      >
     </ng-template>
   </gn-ui-interactive-table-column>
 
   <!-- 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>
-      {{ dateToString(item.recordUpdated) }}
+      <div class="flex text-left w-full text-xs">
+        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+      </div>
+    </ng-template>
+  </gn-ui-interactive-table-column>
+
+  <!-- ACTION MENU COLUMN -->
+  <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"
+      >
+        <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,23 +1,44 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList,
+  ViewChildren,
+  ViewContainerRef,
+} from '@angular/core'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import {
-  FileFormat,
-  getBadgeColor,
-  getFileFormat,
-  getFormatPriority,
-} from '../../../../../../libs/util/shared/src'
+  FieldSort,
+  SortByField,
+} from '../../../../../../libs/common/domain/src/lib/model/search'
 import { BadgeComponent, UiInputsModule } from '../../../../../../libs/ui/inputs/src'
 import {
   InteractiveTableColumnComponent,
   InteractiveTableComponent,
 } from '../../../../../../libs/ui/layout/src'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  FileFormat,
+  formatUserInfo,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
+import { NgIconComponent, provideIcons } from '@ng-icons/core'
+import { iconoirUser } from '@ng-icons/iconoir'
 import {
-  FieldSort,
-  SortByField,
-} from '../../../../../../libs/common/domain/src/lib/model/search'
+  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',
@@ -29,24 +50,94 @@ import {
     UiInputsModule,
     InteractiveTableComponent,
     InteractiveTableColumnComponent,
-    MatIconModule,
     TranslateModule,
     BadgeComponent,
+    ActionMenuComponent,
+    NgIconComponent,
+    CdkOverlayOrigin,
+    CdkConnectedOverlay,
   ],
+  providers: [provideIcons({ iconoirUser, matMoreVert })],
 })
 export class ResultsTableComponent {
   @Input() records: CatalogRecord[] = []
   @Input() selectedRecordsIdentifiers: string[] = []
   @Input() sortOrder: SortByField = null
-  @Input() recordHasDraft: (record: CatalogRecord) => boolean = () => false
+  @Input() hasDraft: (record: CatalogRecord) => boolean = () => false
+  @Input() canDuplicate: (record: CatalogRecord) => boolean = () => true
+  @Input() isUnsavedDraft: (record: CatalogRecord) => boolean = () => true
+  @Input() canDelete: (record: CatalogRecord) => boolean = () => true
 
   // emits the column (field) as well as the order
   @Output() sortByChange = new EventEmitter<[string, 'asc' | 'desc']>()
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
+  @Output() deleteRecord = new EventEmitter<CatalogRecord>()
   @Output() recordsSelectedChange = new EventEmitter<
     [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',
@@ -56,17 +147,15 @@ export class ResultsTableComponent {
     })
   }
 
-  getStatus(isPublishedToAll: boolean | unknown) {
-    return isPublishedToAll ? 'published' : 'not published'
-  }
-
   getRecordFormats(record: CatalogRecord): FileFormat[] {
-    if (record.kind === 'service' || !('distributions' in record)) {
+    if (record.kind === 'service' || !('onlineResources' in record)) {
       return []
     }
     const formats = Array.from(
       new Set(
-        record.distributions.map((distribution) => getFileFormat(distribution))
+        record.onlineResources.map((onlineResource) =>
+          getFileFormat(onlineResource)
+        )
       )
     ).filter((format) => !!format)
     formats.sort((a, b) => getFormatPriority(b) - getFormatPriority(a))
@@ -74,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 {
@@ -89,6 +174,15 @@ export class ResultsTableComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicate(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
+  handleDelete(item: unknown) {
+    this.deleteRecord.emit(item as CatalogRecord)
+    this.closeActionMenu()
+  }
+
   setSortBy(col: string, order: 'asc' | 'desc') {
     this.sortByChange.emit([col, order])
   }
@@ -115,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
-  }
 }

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

@@ -1,5 +1,4 @@
 import { NgModule } from '@angular/core'
-import { MatIconModule } from '@angular/material/icon'
 import { RouterLink } from '@angular/router'
 import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
@@ -22,12 +21,22 @@ import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { ResultsListItemComponent } from './results-list-item/results-list-item.component'
 import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
-import { UiElementsModule } from '../../../../../libs/ui/elements/src'
+import {
+  MetadataQualityComponent,
+  UiElementsModule,
+} from '../../../../../libs/ui/elements/src'
 import { RecordPreviewFeedComponent } from './record-preview-feed/record-preview-feed.component'
 import { CommonModule } from '@angular/common'
 import { UiInputsModule } from '../../../../../libs/ui/inputs/src'
 import { MatCheckboxModule } from '@angular/material/checkbox'
 import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
+import { NgIconsModule, provideNgIconsConfig } from '@ng-icons/core'
+import {
+  matCloudDownloadOutline,
+  matHomeWorkOutline,
+  matMapOutline,
+} from '@ng-icons/material-icons/outline'
+import { matFace } from '@ng-icons/material-icons/baseline'
 
 @NgModule({
   declarations: [
@@ -55,10 +64,17 @@ import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
     UiWidgetsModule,
     UiInputsModule,
     UiElementsModule,
-    MatIconModule,
     MatCheckboxModule,
     RouterLink,
     InteractiveTableComponent,
+    // FIXME: these imports are required by non-standalone components and should be removed once all components have been made standalone
+    NgIconsModule.withIcons({
+      matMapOutline,
+      matCloudDownloadOutline,
+      matFace,
+      matHomeWorkOutline,
+    }),
+    MetadataQualityComponent,
   ],
   exports: [
     RecordPreviewListComponent,
@@ -74,6 +90,9 @@ import { InteractiveTableComponent } from '../../../../../libs/ui/layout/src'
     RecordPreviewRowComponent,
   ],
   providers: [
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
     { provide: RESULTS_LAYOUT_CONFIG, useValue: DEFAULT_RESULTS_LAYOUT_CONFIG },
   ],
 })

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

@@ -1,5 +1,6 @@
 export * from './lib/ui-widgets.module'
 export * from './lib/progress-bar/progress-bar.component'
+export * from './lib/popover/popover.component'
 export * from './lib/loading-mask/loading-mask.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'

package/src/libs/ui/widgets/src/lib/loading-mask/loading-mask.component.ts

@@ -1,15 +1,13 @@
-import {
-  Component,
-  OnInit,
-  ChangeDetectionStrategy,
-  Input,
-} from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 
 @Component({
   selector: 'gn-ui-loading-mask',
   templateUrl: './loading-mask.component.html',
   styleUrls: ['./loading-mask.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [MatProgressSpinnerModule],
+  standalone: true,
 })
 export class LoadingMaskComponent {
   @Input() message: string

package/src/libs/ui/widgets/src/lib/popover/popover.component.html

@@ -0,0 +1,3 @@
+<span #popoverContent>
+  <ng-content></ng-content>
+</span>

package/src/libs/ui/widgets/src/lib/popover/popover.component.ts

@@ -0,0 +1,85 @@
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  AfterViewInit,
+  ElementRef,
+  Input,
+  ViewChild,
+  OnDestroy,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  Renderer2,
+  ViewContainerRef,
+  EmbeddedViewRef,
+} from '@angular/core'
+import tippy, { Instance } from 'tippy.js'
+
+@Component({
+  selector: 'gn-ui-popover',
+  templateUrl: './popover.component.html',
+  styleUrls: ['./popover.component.css'],
+  standalone: true,
+  imports: [CommonModule],
+})
+export class PopoverComponent implements AfterViewInit, OnChanges, OnDestroy {
+  @ViewChild('popoverContent', { static: false }) popoverContent: ElementRef
+  @Input() content: string | TemplateRef<any>
+  @Input() theme: 'light' | 'light-border' | 'translucent' | 'material' | ''
+
+  private tippyInstance: Instance
+  private view: EmbeddedViewRef<any>
+
+  constructor(
+    private viewContainerRef: ViewContainerRef,
+    private renderer: Renderer2
+  ) {}
+
+  private getContent(): string | HTMLElement {
+    if (this.content instanceof TemplateRef) {
+      if (this.view) {
+        this.view.destroy()
+      }
+      this.view = this.viewContainerRef.createEmbeddedView(this.content)
+      this.view.detectChanges()
+      const wrapper = this.renderer.createElement('div') // Create a wrapper div
+      this.view.rootNodes.forEach((node) => {
+        this.renderer.appendChild(wrapper, node) // Append each root node to the wrapper
+      })
+      return wrapper
+    }
+    return this.content
+  }
+
+  ngAfterViewInit(): void {
+    this.tippyInstance = tippy(this.popoverContent.nativeElement as Element, {
+      content: this.getContent(),
+      allowHTML: true,
+      theme: this.theme,
+    })
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['theme']) {
+      this.theme = changes['theme'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setProps({ theme: this.theme })
+      }
+    }
+    if (changes['content']) {
+      this.content = changes['content'].currentValue
+      if (this.tippyInstance) {
+        this.tippyInstance.setContent(this.getContent())
+      }
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.tippyInstance) {
+      this.tippyInstance.destroy()
+    }
+    if (this.view) {
+      this.view.destroy()
+    }
+  }
+}

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.html

@@ -8,14 +8,12 @@
       expanded: this.expanded,
       'bg-red-500': type === 'danger',
       'bg-yellow-500': type === 'warning',
-      'bg-blue-500': type === 'info'
+      'bg-blue-500': type === 'info',
     }"
     (mouseenter)="expand()"
     (mouseleave)="expandAndClose()"
   >
-    <mat-icon class="material-symbols-outlined mr-2 shrink-0 select-none">{{
-      icon
-    }}</mat-icon>
+    <ng-icon class="mr-2 shrink-0 select-none" [name]="icon"></ng-icon>
     <div class="grow" #content [ngClass]="{ invisible: !expanded }">
       <ng-content></ng-content>
     </div>

package/src/libs/ui/widgets/src/lib/popup-alert/popup-alert.component.ts

@@ -8,7 +8,12 @@ import {
   ViewChild,
 } from '@angular/core'
 import { CommonModule } from '@angular/common'
-import { MatIconModule } from '@angular/material/icon'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import { matErrorOutlineOutline } from '@ng-icons/material-icons/outline'
 
 @Component({
   selector: 'gn-ui-popup-alert',
@@ -16,7 +21,8 @@ import { MatIconModule } from '@angular/material/icon'
   styleUrls: ['./popup-alert.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, MatIconModule],
+  imports: [CommonModule, NgIconComponent],
+  providers: [provideIcons({ matErrorOutlineOutline })],
 })
 export class PopupAlertComponent implements OnInit {
   @Input() icon: string

package/src/libs/ui/widgets/src/lib/progress-bar/progress-bar.component.ts

@@ -10,6 +10,7 @@ interface ColorScheme {
   selector: 'gn-ui-progress-bar',
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.css'],
+  standalone: true,
 })
 export class ProgressBarComponent {
   @Input() value = 0

package/src/libs/ui/widgets/src/lib/spinning-loader/spinning-loader.component.ts

@@ -4,5 +4,6 @@ import { Component } from '@angular/core'
   selector: 'gn-ui-spinning-loader',
   templateUrl: './spinning-loader.component.html',
   styleUrls: ['./spinning-loader.component.css'],
+  standalone: true,
 })
 export class SpinningLoaderComponent {}

package/src/libs/ui/widgets/src/lib/step-bar/step-bar.component.ts

@@ -45,8 +45,8 @@ export class StepBarComponent {
     return index === this.currentStep
       ? 'bg-black'
       : index < this.currentStep
-      ? 'bg-white'
-      : this.color.innerBar
+        ? 'bg-white'
+        : this.color.innerBar
   }
 
   getChecked(index: number): boolean {