geonetwork-ui 2.4.0-dev.83f48876 → 2.4.0-dev.8b395cf5

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

@@ -10,7 +10,6 @@ import { ChipsInputComponent } from './chips-input/chips-input.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
 import { DropdownSelectorComponent } from './dropdown-selector/dropdown-selector.component'
 import { TextAreaComponent } from './text-area/text-area.component'
-import { TextInputComponent } from './text-input/text-input.component'
 import { MatAutocompleteModule } from '@angular/material/autocomplete'
 import { MatIconModule } from '@angular/material/icon'
 import { NavigationButtonComponent } from './navigation-button/navigation-button.component'
@@ -36,7 +35,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
 
 @NgModule({
   declarations: [
-    TextInputComponent,
     DragAndDropFileInputComponent,
     ChipsInputComponent,
     NavigationButtonComponent,
@@ -77,7 +75,6 @@ import { ImageInputComponent } from './image-input/image-input.component'
   exports: [
     DropdownSelectorComponent,
     ButtonComponent,
-    TextInputComponent,
     DragAndDropFileInputComponent,
     TextAreaComponent,
     ChipsInputComponent,

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.css

@@ -0,0 +1,9 @@
+:host {
+  --gn-ui-button-rounded: 8px;
+  --gn-ui-button-width: 32px;
+  --gn-ui-button-padding: 0;
+
+  --side-padding: calc(var(--gn-ui-text-input-padding, 0.6em) - 6px);
+  --2x-side-padding: calc(var(--side-padding) * 2);
+  --text-padding: calc(var(--side-padding) + 40px);
+}

package/src/libs/ui/inputs/src/lib/url-input/url-input.component.html

@@ -0,0 +1,37 @@
+<span class="w-full inline-block relative">
+  <input
+    #input
+    class="gn-ui-text-input px-[var(--text-padding)]"
+    [ngClass]="extraClass"
+    type="url"
+    [value]="value"
+    (input)="handleInput()"
+    (keydown.enter)="handleChange(input)"
+    [placeholder]="placeholder"
+    [attr.aria-label]="placeholder"
+    [disabled]="disabled"
+  />
+  <div
+    class="absolute inset-y-[var(--side-padding)] left-[var(--2x-side-padding)] grid justify-center items-center pointer-events-none"
+    [ngClass]='{
+      "text-primary": !disabled,
+      "text-primary-lightest": disabled,
+    }'
+  >
+    <mat-icon
+      class="material-symbols-outlined h-[24px] !w-[26px] text-[28px] leading-[24px]"
+    >
+      link
+    </mat-icon>
+  </div>
+  <gn-ui-button
+    extraClass="absolute inset-y-[var(--side-padding)] right-[var(--side-padding)]"
+    type="primary"
+    [disabled]="disabled || input.value === ''"
+    (buttonClick)="handleChange(input)"
+  >
+    <mat-icon class="material-symbols-outlined text-[20px] leading-[26px]">
+      arrow_upward
+    </mat-icon>
+  </gn-ui-button>
+</span>

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

@@ -0,0 +1,33 @@
+import { ChangeDetectorRef, Component, Input, Output } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../button/button.component'
+import { MatIconModule } from '@angular/material/icon'
+import { filter } from 'rxjs/operators'
+import { Subject } from 'rxjs'
+
+@Component({
+  selector: 'gn-ui-url-input',
+  templateUrl: './url-input.component.html',
+  styleUrls: ['./url-input.component.css'],
+  standalone: true,
+  imports: [CommonModule, ButtonComponent, MatIconModule],
+})
+export class UrlInputComponent {
+  @Input() value = ''
+  @Input() extraClass = ''
+  @Input() placeholder = 'https://'
+  @Input() disabled: boolean
+  rawChange = new Subject<string>()
+  @Output() valueChange = this.rawChange.pipe(filter((v) => !!v))
+
+  constructor(private cd: ChangeDetectorRef) {}
+
+  handleInput() {
+    this.cd.markForCheck()
+  }
+
+  handleChange(element: HTMLInputElement) {
+    const value = element.value
+    this.rawChange.next(value)
+  }
+}

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

@@ -8,4 +8,6 @@ export * from './lib/interactive-table/interactive-table-column/interactive-tabl
 export * from './lib/interactive-table/interactive-table.component'
 export * from './lib/sticky-header/sticky-header.component'
 export * from './lib/block-list/block-list.component'
+export * from './lib/sortable-list/sortable-list.component'
+export * from './lib/modal-dialog/modal-dialog.component'
 export * from './lib/ui-layout.module'

package/src/libs/ui/layout/src/lib/form-field-wrapper/form-field-wrapper.component.html

@@ -12,7 +12,7 @@
       </span>
     </div>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 overflow-y-auto">
     <ng-content></ng-content>
   </div>
 </div>

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

@@ -30,6 +30,7 @@
     class="contents text-gray-900 cursor-pointer group"
     *ngFor="let item of items"
     (click)="handleRowClick(item)"
+    data-cy="table-row"
   >
     <div
       class="relative h-0"

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.html

@@ -0,0 +1,15 @@
+<h1 mat-dialog-title>{{ data.title }}</h1>
+<div mat-dialog-content>
+  <ng-container
+    *ngTemplateOutlet="data.body; context: { $implicit: data.bodyContext }"
+  ></ng-container>
+</div>
+<div mat-dialog-actions>
+  <gn-ui-button (buttonClick)="onCancel()">{{ data.cancelText }}</gn-ui-button>
+  <gn-ui-button
+    (buttonClick)="onConfirm()"
+    class="ml-2"
+    data-cy="confirm-button"
+    >{{ data.confirmText }}</gn-ui-button
+  >
+</div>

package/src/libs/ui/layout/src/lib/modal-dialog/modal-dialog.component.ts

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Inject,
+  TemplateRef,
+} from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog'
+import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
+
+export interface ModalDialogData {
+  title: string
+  body: TemplateRef<unknown>
+  bodyContext: unknown
+  confirmText: string
+  cancelText: string
+}
+
+@Component({
+  selector: 'gn-ui-modal-dialog',
+  standalone: true,
+  imports: [CommonModule, MatDialogModule, ButtonComponent],
+  templateUrl: './modal-dialog.component.html',
+  styleUrls: ['./modal-dialog.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModalDialogComponent {
+  constructor(
+    public dialogRef: MatDialogRef<ModalDialogComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: ModalDialogData
+  ) {}
+
+  onConfirm() {
+    this.dialogRef.close(true)
+  }
+
+  onCancel() {
+    this.dialogRef.close(false)
+  }
+}

package/src/libs/ui/layout/src/lib/sortable-list/sortable-list.component.html

@@ -0,0 +1,37 @@
+<div
+  cdkDropList
+  class="sortable-list flex flex-col gap-3 p-2"
+  (cdkDropListDropped)="drop($event)"
+>
+  <ng-container *ngFor="let item of items; index as index; trackBy: trackByFn">
+    <div class="sortable-box bg-white flex items-center" cdkDrag>
+      <span
+        cdkDragHandle
+        class="material-symbols-outlined mx-[10px] cursor-grab gn-ui-icon-medium flex-none"
+      >
+        drag_handle
+      </span>
+      <div class="flex-1">
+        <ng-container
+          *ngTemplateOutlet="
+            elementTemplate;
+            context: { $implicit: item, index }
+          "
+        ></ng-container>
+      </div>
+
+      <gn-ui-button
+        type="light"
+        style="
+          --gn-ui-button-padding: 0px;
+          --gn-ui-button-width: 24px;
+          --gn-ui-button-height: 24px;
+        "
+        class="ml-[8px] mr-[10px]"
+        (buttonClick)="removeItem(index)"
+        data-cy="remove-item"
+        ><span class="material-symbols-outlined gn-ui-icon-medium">close</span>
+      </gn-ui-button>
+    </div>
+  </ng-container>
+</div>

package/src/libs/ui/{elements → layout}/src/lib/sortable-list/sortable-list.component.ts

@@ -5,23 +5,18 @@ import {
   CdkDropList,
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
-import { NgComponentOutlet, NgFor } from '@angular/common'
+import { CommonModule } from '@angular/common'
 import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
   Output,
-  Type,
+  TemplateRef,
 } from '@angular/core'
 import { MatIconModule } from '@angular/material/icon'
 import { ButtonComponent } from '../../../../../../libs/ui/inputs/src'
 
-type DynamicElement = {
-  component: Type<any>
-  inputs: Record<string, any>
-}
-
 @Component({
   selector: 'gn-ui-sortable-list',
   templateUrl: 'sortable-list.component.html',
@@ -29,8 +24,7 @@ type DynamicElement = {
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [
-    NgFor,
-    NgComponentOutlet,
+    CommonModule,
     CdkDropList,
     CdkDrag,
     CdkDragHandle,
@@ -39,18 +33,21 @@ type DynamicElement = {
   ],
 })
 export class SortableListComponent {
-  @Input() elements: Array<DynamicElement>
-  @Input() addOptions: Array<{ buttonLabel: string; eventName: string }>
-  @Output() elementsChange = new EventEmitter<Array<DynamicElement>>()
-  @Output() add = new EventEmitter<string>()
+  @Input() elementTemplate: TemplateRef<unknown>
+  @Input() items: unknown[]
+  @Output() itemsOrderChange = new EventEmitter<unknown[]>()
 
   drop(event: CdkDragDrop<string[]>) {
-    moveItemInArray(this.elements, event.previousIndex, event.currentIndex)
-    this.elementsChange.emit(this.elements)
+    moveItemInArray(this.items, event.previousIndex, event.currentIndex)
+    this.itemsOrderChange.emit([...this.items])
+  }
+
+  removeItem(index: number) {
+    this.items = this.items.filter((_, i) => i !== index)
+    this.itemsOrderChange.emit(this.items)
   }
 
-  removeElement(index: number) {
-    this.elements = this.elements.filter((_, i) => i !== index)
-    this.elementsChange.emit(this.elements)
+  trackByFn(index: number) {
+    return index
   }
 }

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

@@ -12,7 +12,7 @@ import { MatIconModule } from '@angular/material/icon'
     CommonModule,
     HttpClientModule,
     MatIconModule,
-    TranslateModule.forRoot(),
+    TranslateModule.forChild(),
   ],
   exports: [MapComponent, FeatureDetailComponent],
 })

package/src/libs/ui/search/src/lib/facets/fixtures/aggregations-model-response.ts

@@ -1,6 +1,6 @@
 import { ModelBlock, ModelItem } from '../facets.model'
 
-export const BLOCK_MODEL_FIXTURE: ModelBlock = {
+export const blockModelFixture = (): ModelBlock => ({
   key: 'tag',
   items: [
     { value: 'Hungary', count: 20, path: ['tag', 'Hungary'] },
@@ -31,8 +31,9 @@ export const BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: true,
   excludeFilter: false,
-}
-export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
+})
+
+export const emptyBlockModelFixture = (): ModelBlock => ({
   key: 'emptytag',
   items: [],
   path: ['emptytag'],
@@ -41,12 +42,12 @@ export const EMPTY_BLOCK_MODEL_FIXTURE: ModelBlock = {
   more: true,
   includeFilter: false,
   excludeFilter: false,
-}
+})
 
-export const FACET_ITEM_FIXTURE: ModelItem = {
+export const itemModelFixture = (): ModelItem => ({
   path: ['tag.default', 'land use'],
   value: 'land use',
   count: 500,
   selected: true,
   inverted: false,
-}
+})

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

@@ -1,5 +1,5 @@
 <gn-ui-button
-  type="outline"
+  type="light"
   [matMenuTriggerFor]="menu"
   (buttonClick)="openMenu()"
   data-test="record-menu-button"
@@ -9,9 +9,18 @@
 <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>

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

@@ -1,22 +1,74 @@
-import { Component, EventEmitter, Output, ViewChild } from '@angular/core'
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  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 } from '@ngx-translate/core'
+import { TranslateModule, TranslateService } 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],
+  imports: [
+    MatIconModule,
+    ButtonComponent,
+    MatMenuModule,
+    MatDialogModule,
+    ConfirmationDialogComponent,
+    TranslateModule,
+  ],
 })
 export class ActionMenuComponent {
+  @Input() canDuplicate: boolean
+  @Input() canDelete: boolean
   @Output() duplicate = new EventEmitter<void>()
+  @Output() delete = new EventEmitter<void>()
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
 
+  constructor(
+    public dialog: MatDialog,
+    private translateService: TranslateService
+  ) {}
+
   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,
+    })
+
+    // 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()
+      }
+    })
+  }
 }

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

@@ -37,7 +37,7 @@
       <div class="flex flex-row items-center gap-2 max-w-full">
         <span class="overflow-hidden text-ellipsis">{{ item.title }}</span>
         <gn-ui-badge
-          *ngIf="recordHasDraft(item)"
+          *ngIf="hasDraft(item)"
           [style.--gn-ui-badge-padding]="'0.4em 0.6em'"
           [style.--gn-ui-badge-text-color]="'#3d2006'"
           [style.--gn-ui-badge-background-color]="'#ffbc7b'"
@@ -103,7 +103,12 @@
       <span translate>record.metadata.status</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ item.status }}
+      {{
+        (isUnsavedDraft(item)
+          ? 'record.metadata.status.notPublished'
+          : 'record.metadata.status.published'
+        ) | translate
+      }}
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -117,7 +122,9 @@
       <span translate>record.metadata.updatedOn</span>
     </ng-template>
     <ng-template #cell let-item>
-      {{ dateToString(item.recordUpdated) }}
+      <div class="flex justify-center w-full">
+        {{ isUnsavedDraft(item) ? '-' : dateToString(item.recordUpdated) }}
+      </div>
     </ng-template>
   </gn-ui-interactive-table-column>
 
@@ -125,7 +132,12 @@
   <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
+        [canDuplicate]="canDuplicate(item)"
+        [canDelete]="canDelete(item)"
+        (duplicate)="handleDuplicate(item)"
+        (delete)="handleDelete(item)"
+      >
       </gn-ui-action-menu>
     </ng-template>
   </gn-ui-interactive-table-column>

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

@@ -1,13 +1,6 @@
 import { CommonModule } from '@angular/common'
-import {
-  Component,
-  EventEmitter,
-  Input,
-  Output,
-  ViewChild,
-} from '@angular/core'
+import { Component, EventEmitter, Input, Output } 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 {
   FieldSort,
@@ -47,12 +40,16 @@ 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]
   >()
@@ -66,17 +63,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))
@@ -103,6 +98,10 @@ export class ResultsTableComponent {
     this.duplicateRecord.emit(item as CatalogRecord)
   }
 
+  handleDelete(item: unknown) {
+    this.deleteRecord.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()
+    }
+  }
+}