geonetwork-ui 2.4.0-dev.cec60ff1 → 2.4.0-dev.e079151e

package/src/libs/feature/record/src/lib/data-view-web-component/data-view-web-component.component.ts

@@ -1,7 +1,12 @@
-import { ChangeDetectionStrategy, Component, Inject } from '@angular/core'
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  Input,
+} from '@angular/core'
 import { Configuration } from '../../../../../../libs/data-access/gn4/src'
 import { MdViewFacade } from '../state'
-import { combineLatest, map } from 'rxjs'
+import { BehaviorSubject, combineLatest, map } from 'rxjs'
 import { GN_UI_VERSION } from '../gn-ui-version.token'
 
 @Component({
@@ -11,35 +16,77 @@ import { GN_UI_VERSION } from '../gn-ui-version.token'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DataViewWebComponentComponent {
+  viewType$ = new BehaviorSubject<string>('map')
+  @Input()
+  set viewType(value: string) {
+    this.viewType$.next(value)
+  }
   webComponentHtml$ = combineLatest(
+    this.viewType$,
     this.facade.chartConfig$,
     this.facade.metadata$
   ).pipe(
-    map(([config, metadata]) => {
-      if (config) {
-        const { aggregation, xProperty, yProperty, chartType } = config
+    map(([viewType, config, metadata]) => {
+      if (viewType === 'chart') {
+        if (config) {
+          const { aggregation, xProperty, yProperty, chartType } = config
+          return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+            this.version
+          }/gn-wc.js"></script>
+  <gn-dataset-view-chart
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          aggregation="${aggregation}"
+          x-property="${xProperty}"
+          y-property="${yProperty}"
+          chart-type="${chartType}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-chart>`
+        }
+        return ''
+      } else if (viewType === 'table') {
         return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
           this.version
         }/gn-wc.js"></script>
-<gn-dataset-view-chart
+  <gn-dataset-view-table
+          api-url="${new URL(
+            this.config.basePath,
+            window.location.origin
+          ).toString()}"
+          dataset-id="${metadata.uniqueIdentifier}"
+          primary-color="#0f4395"
+          secondary-color="#8bc832"
+          main-color="#555"
+          background-color="#fdfbff"
+          main-font="'Inter', sans-serif"
+          title-font="'DM Serif Display', serif"
+  ></gn-dataset-view-table>`
+      } else {
+        return `<script src="https://cdn.jsdelivr.net/gh/geonetwork/geonetwork-ui@wc-dist-${
+          this.version
+        }/gn-wc.js"></script>
+<gn-dataset-view-map
         api-url="${new URL(
           this.config.basePath,
           window.location.origin
         ).toString()}"
         dataset-id="${metadata.uniqueIdentifier}"
-        aggregation="${aggregation}"
-        x-property="${xProperty}"
-        y-property="${yProperty}"
-        chart-type="${chartType}"
         primary-color="#0f4395"
         secondary-color="#8bc832"
         main-color="#555"
         background-color="#fdfbff"
         main-font="'Inter', sans-serif"
         title-font="'DM Serif Display', serif"
-></gn-dataset-view-chart>`
+></gn-dataset-view-map>`
       }
-      return ''
     })
   )
 

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

@@ -4,6 +4,7 @@
   [selectedRecordsIdentifiers]="selectedRecords$ | async"
   [sortOrder]="sortBy$ | async"
   (recordClick)="handleRecordClick($event)"
+  (duplicateRecord)="handleDuplicateRecord($event)"
   (recordsSelectedChange)="handleRecordsSelectedChange($event[0], $event[1])"
   (sortByChange)="handleSortByChange($event[0], $event[1])"
 ></gn-ui-results-table>

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

@@ -16,6 +16,7 @@ import { CommonModule } from '@angular/common'
 })
 export class ResultsTableContainerComponent {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
+  @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
 
   records$ = this.searchFacade.results$
   selectedRecords$ = this.selectionService.selectedRecordsIdentifiers$
@@ -35,6 +36,10 @@ export class ResultsTableContainerComponent {
     this.recordClick.emit(item as CatalogRecord)
   }
 
+  handleDuplicateRecord(item: unknown) {
+    this.duplicateRecord.emit(item as CatalogRecord)
+  }
+
   handleSortByChange(col: string, order: 'asc' | 'desc') {
     this.searchService.setSortBy([order, col])
   }

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/image-input/image-input.component.html

@@ -51,7 +51,7 @@
   <div class="w-full h-full flex flex-col gap-2">
     <label
       gnUiFilesDrop
-      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4"
+      class="block flex-1 border-2 border-dashed border-gray-300 rounded-lg p-6 flex flex-col items-center justify-center gap-4 hover:cursor-pointer"
       (dragFilesOver)="handleDragFilesOver($event)"
       (dropFiles)="handleDropFiles($event)"
     >

package/src/libs/ui/inputs/src/lib/image-input/image-input.component.ts

@@ -16,6 +16,7 @@ import { ButtonComponent } from '../button/button.component'
 import { FilesDropDirective } from '../files-drop/files-drop.directive'
 import { TranslateModule } from '@ngx-translate/core'
 import { marker } from '@biesbjerg/ngx-translate-extract-marker'
+import { FormControl, ReactiveFormsModule } from '@angular/forms'
 
 @Component({
   selector: 'gn-ui-image-input',
@@ -30,11 +31,13 @@ import { marker } from '@biesbjerg/ngx-translate-extract-marker'
     FilesDropDirective,
     MatProgressSpinnerModule,
     TranslateModule,
+    ReactiveFormsModule,
   ],
 })
 export class ImageInputComponent {
+  @Input() formControl!: FormControl
   @Input() maxSizeMB: number
-  @Input() previewUrl?: string
+  @Input() previewUrl?: URL
   @Input() altText?: string
   @Input() uploadProgress?: number
   @Input() uploadError?: boolean
@@ -127,7 +130,8 @@ export class ImageInputComponent {
             const file = new File([blob], name)
             this.fileChange.emit(file)
           },
-          error: () => {
+          error: (error) => {
+            console.error(error)
             this.downloadError = true
             this.cd.markForCheck()
             this.urlChange.emit(this.urlInputValue)
@@ -165,6 +169,7 @@ export class ImageInputComponent {
   }
 
   handleDelete() {
+    this.formControl.markAsDirty()
     this.delete.emit()
   }
 

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>