geonetwork-ui 2.4.0-dev.9121e5f4 → 2.4.0-dev.a1bcfe22

package/src/libs/ui/elements/src/lib/api-card/api-card.component.html

@@ -1,7 +1,5 @@
 <div
-  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden"
-  [ngClass]="{ 'cursor-pointer': displayApiFormButton }"
-  (click)="openRecordApiFormPanel()"
+  class="group flex flex-col justify-between h-40 pt-5 pb-6 px-7 rounded filter overflow-hidden cursor-default"
 >
   <div
     class="font-title font-medium text-21 text-black text-ellipsis overflow-hidden break-words pb-5 h-[4.5rem]"
@@ -17,35 +15,37 @@
         }"
         >{{ link.accessServiceProtocol }}</span
       >
-      <gn-ui-copy-text-button
-        *ngIf="!displayApiFormButton"
-        [text]="link.url.toString()"
-        [tooltipText]="'tooltip.url.copy' | translate"
-        [displayText]="false"
-      ></gn-ui-copy-text-button>
-      <button
-        *ngIf="displayApiFormButton"
-        type="button"
-        [ngClass]="{
-          'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
-            displayText
-        }"
-        mat-raised-button
-        [matTooltip]="
-          !currentlyActive
-            ? ('record.metadata.api.form.openForm' | translate)
-            : ('record.metadata.api.form.closeForm' | translate)
-        "
-        matTooltipPosition="above"
-      >
-        <mat-icon
-          class="material-symbols-outlined pointer-events-none align-middle card-icon"
+      <div class="flex flex-row gap-2 items-center">
+        <gn-ui-copy-text-button
+          [text]="link.url"
+          [tooltipText]="'tooltip.url.copy' | translate"
+          [displayText]="false"
+        ></gn-ui-copy-text-button>
+        <button
+          *ngIf="displayApiFormButton"
+          type="button"
           [ngClass]="{
-            'text-secondary opacity-100': currentlyActive
+            'py-2 px-4 rounded-r-md bg-gray-400 hover:bg-gray-600 focus:bg-gray-800 text-white':
+              displayText
           }"
-          >more_horiz</mat-icon
+          mat-raised-button
+          [matTooltip]="
+            !currentlyActive
+              ? ('record.metadata.api.form.openForm' | translate)
+              : ('record.metadata.api.form.closeForm' | translate)
+          "
+          matTooltipPosition="above"
+          (click)="openRecordApiFormPanel()"
         >
-      </button>
+          <mat-icon
+            class="material-symbols-outlined pointer-events-none align-middle card-icon"
+            [ngClass]="{
+              'text-secondary opacity-100': currentlyActive
+            }"
+            >more_horiz</mat-icon
+          >
+        </button>
+      </div>
     </div>
   </div>
 </div>

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.html

@@ -1,22 +1,16 @@
-<div
-  *ngIf="metadataQualityDisplay"
-  class="mb-6 metadata-quality"
-  (mouseenter)="showMenu()"
-  (mouseleave)="hideMenu()"
->
-  <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
-    <gn-ui-progress-bar
-      (focus)="showMenu()"
-      (blur)="hideMenu()"
-      tabindex="0"
-      [value]="qualityScore"
-      type="primary"
-    ></gn-ui-progress-bar>
-  </div>
-  <div
-    class="absolute z-10 bg-white border border-black border-opacity-35 rounded-lg shadow-lg p-5 whitespace-nowrap"
-    [class]="isMenuShown ? 'block' : 'hidden'"
-  >
+<div *ngIf="metadataQualityDisplay" class="mb-6 metadata-quality">
+  <gn-ui-popover [content]="popoverItems" theme="light-border">
+    <div class="min-w-[200px]" [class]="smaller ? 'leading-[8px]' : ''">
+      <gn-ui-progress-bar
+        tabindex="0"
+        [value]="qualityScore"
+        type="primary"
+      ></gn-ui-progress-bar>
+    </div>
+  </gn-ui-popover>
+</div>
+<ng-template #popoverItems>
+  <div class="p-2 py-4">
     <div class="mb-4 font-bold" translate>record.metadata.quality.details</div>
     <gn-ui-metadata-quality-item
       *ngFor="let e of items"
@@ -24,4 +18,4 @@
       [value]="e.value"
     ></gn-ui-metadata-quality-item>
   </div>
-</div>
+</ng-template>

package/src/libs/ui/elements/src/lib/metadata-quality/metadata-quality.component.ts

@@ -21,8 +21,6 @@ export class MetadataQualityComponent implements OnChanges {
 
   items: MetadataQualityItem[] = []
 
-  isMenuShown = false
-
   get qualityScore() {
     const qualityScore = this.metadata?.extras?.qualityScore
     return typeof qualityScore === 'number'
@@ -36,14 +34,6 @@ export class MetadataQualityComponent implements OnChanges {
     )
   }
 
-  showMenu() {
-    this.isMenuShown = true
-  }
-
-  hideMenu() {
-    this.isMenuShown = false
-  }
-
   private add(name: string, value: boolean) {
     if (this.metadataQualityDisplay?.[name] !== false) {
       this.items.push({ name, value })

package/src/libs/ui/elements/src/lib/metadata-quality-item/metadata-quality-item.component.html

@@ -1,4 +1,4 @@
 <div class="ml-4 flex flex-row">
-  <mat-icon class="material-symbols-outlined">{{ icon }}</mat-icon>
+  <mat-icon class="material-symbols-outlined min-w-fit">{{ icon }}</mat-icon>
   <p class="ml-2 text">{{ labelKey | translate }}</p>
 </div>

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

@@ -9,7 +9,7 @@ import { ContentGhostComponent } from './content-ghost/content-ghost.component'
 import { DownloadItemComponent } from './download-item/download-item.component'
 import { DownloadsListComponent } from './downloads-list/downloads-list.component'
 import { ApiCardComponent } from './api-card/api-card.component'
-import { UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
+import { PopoverComponent, UiWidgetsModule } from '../../../../../libs/ui/widgets/src'
 import { MaxLinesComponent, UiLayoutModule } from '../../../../../libs/ui/layout/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { RelatedRecordCardComponent } from './related-record-card/related-record-card.component'
@@ -45,6 +45,7 @@ import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
     UiInputsModule,
     FormsModule,
     NgOptimizedImage,
+    PopoverComponent,
     MarkdownParserComponent,
     ThumbnailComponent,
     TimeSincePipe,

package/src/libs/ui/elements/src/lib/user-preview/user-preview.component.html

@@ -1,6 +1,6 @@
 <figure class="text-center">
   <div
-    class="w-12 h-12 border border-primary rounded-full capitalize"
+    class="w-10 h-10 border border-primary rounded-full capitalize"
     [matTooltip]="userFullName"
   >
     <gn-ui-avatar

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.css

@@ -0,0 +1,31 @@
+:host {
+  --mat-standard-button-toggle-height: 32px;
+}
+
+.mat-button-toggle-group-appearance-standard {
+  background-color: var(--color-gray-200);
+  padding: 4px;
+  display: flex;
+  gap: 4px;
+  border-radius: 8px;
+}
+
+.mat-button-toggle-appearance-standard {
+  color: var(--color-main);
+  background-color: var(--color-gray-200);
+  border-radius: 4px;
+  border-left: none;
+}
+
+.mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+  background-color: var(--color-main);
+  color: var(--color-primary-white);
+}
+
+button.mat-button-toggle-button.mat-focus-indicator.mat-button-toggle-label-content {
+  line-height: 32px;
+}
+
+.mat-button-toggle-label-content {
+  line-height: 32px;
+}

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.html

@@ -0,0 +1,15 @@
+<mat-button-toggle-group
+  #group="matButtonToggleGroup"
+  multiple="false"
+  class="flex w-full"
+>
+  <mat-button-toggle
+    *ngFor="let option of options"
+    [aria-label]="option.label"
+    [value]="option.value"
+    [checked]="option.checked"
+    (change)="onChange(option)"
+    [class]="extraClasses"
+    >{{ option.label }}</mat-button-toggle
+  >
+</mat-button-toggle-group>

package/src/libs/ui/inputs/src/lib/switch-toggle/switch-toggle.component.ts

@@ -0,0 +1,38 @@
+import { CommonModule } from '@angular/common'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { MatButtonToggleModule } from '@angular/material/button-toggle'
+
+export type SwitchToggleOption = {
+  label: string
+  value: string
+  checked: boolean
+}
+
+@Component({
+  selector: 'gn-ui-switch-toggle',
+  templateUrl: './switch-toggle.component.html',
+  styleUrls: ['./switch-toggle.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatButtonToggleModule, CommonModule],
+})
+export class SwitchToggleComponent {
+  @Input() options: SwitchToggleOption[]
+  @Input() ariaLabel? = ''
+  @Input() extraClasses? = ''
+  @Output() selectedValue = new EventEmitter<SwitchToggleOption>()
+
+  onChange(selectedOption: SwitchToggleOption) {
+    this.options.find(
+      (option) => option.value === selectedOption.value
+    ).checked = true
+
+    this.selectedValue.emit(selectedOption)
+  }
+}

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

@@ -0,0 +1,17 @@
+<gn-ui-button
+  type="outline"
+  [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
+    (click)="duplicate.emit()"
+    data-test="record-menu-duplicate-button"
+  >
+    <span translate>record.action.duplicate</span>
+  </button>
+</mat-menu>

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Output, ViewChild } from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { TranslateModule } from '@ngx-translate/core'
+
+@Component({
+  selector: 'gn-ui-action-menu',
+  templateUrl: './action-menu.component.html',
+  styleUrls: ['./action-menu.component.css'],
+  standalone: true,
+  imports: [MatIconModule, ButtonComponent, MatMenuModule, TranslateModule],
+})
+export class ActionMenuComponent {
+  @Output() duplicate = new EventEmitter<void>()
+
+  @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
+
+  openMenu() {
+    this.trigger.openMenu()
+  }
+}

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

@@ -120,4 +120,13 @@
       {{ dateToString(item.recordUpdated) }}
     </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-action-menu (duplicate)="handleDuplicate(item)">
+      </gn-ui-action-menu>
+    </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,31 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatIconModule } from '@angular/material/icon'
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu'
 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 { TranslateModule } from '@ngx-translate/core'
-import { CommonModule } from '@angular/common'
 import {
-  FieldSort,
-  SortByField,
-} from '../../../../../../libs/common/domain/src/lib/model/search'
+  FileFormat,
+  getBadgeColor,
+  getFileFormat,
+  getFormatPriority,
+} from '../../../../../../libs/util/shared/src'
+import { TranslateModule } from '@ngx-translate/core'
+import { ActionMenuComponent } from './action-menu/action-menu.component'
 
 @Component({
   selector: 'gn-ui-results-table',
@@ -32,6 +40,7 @@ import {
     MatIconModule,
     TranslateModule,
     BadgeComponent,
+    ActionMenuComponent,
   ],
 })
 export class ResultsTableComponent {
@@ -43,6 +52,7 @@ export class ResultsTableComponent {
   // 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() recordsSelectedChange = new EventEmitter<
     [CatalogRecord[], boolean]
   >()
@@ -89,6 +99,10 @@ export class ResultsTableComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicate(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
   setSortBy(col: string, order: 'asc' | 'desc') {
     this.sortByChange.emit([col, order])
   }

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/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/tailwind.base.css

@@ -115,7 +115,8 @@
     --padding: var(--gn-ui-badge-padding, 0.375em 0.75em);
     --text-color: var(--gn-ui-badge-text-color, var(--color-gray-50));
     --background-color: var(--gn-ui-badge-background-color, black);
-    @apply inline-block opacity-70 p-[--padding] rounded-[--rounded]
+    --opacity: var(--gn-ui-badge-opacity, 0.7);
+    @apply inline-block opacity-[--opacity] p-[--padding] rounded-[--rounded]
       font-medium text-[length:0.875em] leading-none text-[color:--text-color] bg-[color:--background-color];
   }
   /* makes sure icons will not make the badges grow vertically; also make size proportional */