geonetwork-ui 2.5.0-dev.77e75b46a → 2.5.0-dev.8be73f10b

package/src/libs/ui/dataviz/src/lib/data-table/data-table.component.ts

@@ -0,0 +1,173 @@
+import { ScrollingModule } from '@angular/cdk/scrolling'
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  ViewChild,
+} from '@angular/core'
+import { MatSort, MatSortModule } from '@angular/material/sort'
+import { MatTableModule } from '@angular/material/table'
+import { TranslateModule, TranslateService } from '@ngx-translate/core'
+import { DataTableDataSource } from './data-table.data.source'
+import { BaseReader, FetchError } from '../../../../../../libs/util/data-fetcher/src'
+import {
+  MatPaginator,
+  MatPaginatorIntl,
+  MatPaginatorModule,
+} from '@angular/material/paginator'
+import { CustomMatPaginatorIntl } from './custom.mat.paginator.intl'
+import { CommonModule } from '@angular/common'
+import { BehaviorSubject, filter, firstValueFrom } from 'rxjs'
+import {
+  LoadingMaskComponent,
+  PopupAlertComponent,
+} from '../../../../../../libs/ui/widgets/src'
+import { LetDirective } from '@ngrx/component'
+
+const rowIdPrefix = 'table-item-'
+
+export type TableItemId = string | number
+type TableItemType = string | number | Date
+
+export interface TableItemModel {
+  id: TableItemId
+  [key: string]: TableItemType
+}
+
+@Component({
+  standalone: true,
+  imports: [
+    MatTableModule,
+    MatSortModule,
+    MatPaginatorModule,
+    ScrollingModule,
+    TranslateModule,
+    CommonModule,
+    LoadingMaskComponent,
+    PopupAlertComponent,
+    LetDirective,
+  ],
+  providers: [{ provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl }],
+  selector: 'gn-ui-data-table',
+  templateUrl: './data-table.component.html',
+  styleUrls: ['./data-table.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DataTableComponent implements OnInit, AfterViewInit, OnChanges {
+  @Input() set dataset(value: BaseReader) {
+    this.properties$.next(null)
+    this.dataset_ = value
+    this.dataset_.load()
+    this.dataset_.properties.then((properties) =>
+      this.properties$.next(properties.map((p) => p.name))
+    )
+    this.dataset_.info.then((info) => (this.count = info.itemsCount))
+  }
+  @Input() activeId: TableItemId
+  @Output() selected = new EventEmitter<any>()
+
+  @ViewChild(MatSort) sort: MatSort
+  @ViewChild(MatPaginator) paginator: MatPaginator
+
+  dataset_: BaseReader
+  properties$ = new BehaviorSubject<string[]>(null)
+  dataSource: DataTableDataSource
+  headerHeight: number
+  count: number
+  loading$ = new BehaviorSubject<boolean>(false)
+  error = null
+
+  constructor(
+    private eltRef: ElementRef,
+    private cdr: ChangeDetectorRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit() {
+    this.dataSource = new DataTableDataSource()
+  }
+
+  ngAfterViewInit() {
+    this.headerHeight =
+      this.eltRef.nativeElement.querySelector('thead').offsetHeight
+    this.setPagination()
+    this.cdr.detectChanges()
+  }
+
+  ngOnChanges() {
+    this.setPagination()
+  }
+
+  setSort(sort: MatSort) {
+    if (!this.dataset_) return
+    if (!sort.active) {
+      this.dataset_.orderBy()
+    } else {
+      this.dataset_.orderBy([sort.direction || 'asc', sort.active])
+    }
+    this.readData()
+  }
+
+  setPagination() {
+    if (!this.paginator) return
+    if (!this.dataset_) return
+    this.dataset_.limit(
+      this.paginator.pageIndex * this.paginator.pageSize,
+      this.paginator.pageSize
+    )
+    this.readData()
+  }
+
+  async readData() {
+    this.loading$.next(true)
+    // wait for properties to be read
+    const properties = await firstValueFrom(
+      this.properties$.pipe(filter((p) => !!p))
+    )
+    const propsWithoutGeom = properties.filter(
+      (p) => !p.toLowerCase().startsWith('geom')
+    )
+    this.dataset_.select(...propsWithoutGeom)
+    try {
+      await this.dataSource.showData(this.dataset_.read())
+      this.error = null
+    } catch (error) {
+      this.handleError(error as FetchError | Error)
+    }
+    this.loading$.next(false)
+  }
+
+  scrollToItem(itemId: TableItemId): void {
+    const row = this.eltRef.nativeElement.querySelector(
+      `#${this.getRowEltId(itemId)}`
+    )
+    this.eltRef.nativeElement.scrollTop = row.offsetTop - this.headerHeight
+  }
+
+  public getRowEltId(id: TableItemId): string {
+    return rowIdPrefix + id
+  }
+
+  handleError(error: FetchError | Error) {
+    this.dataSource.clearData()
+    if (error instanceof FetchError) {
+      this.error = this.translateService.instant(
+        `dataset.error.${error.type}`,
+        {
+          info: error.info,
+        }
+      )
+      console.warn(error.message)
+    } else {
+      this.error = this.translateService.instant(error.message)
+      console.warn(error.stack || error)
+    }
+  }
+}

package/src/libs/ui/dataviz/src/lib/data-table/data-table.data.source.ts

@@ -0,0 +1,33 @@
+import { DataSource } from '@angular/cdk/collections'
+import { BehaviorSubject, Observable } from 'rxjs'
+import { DataItem } from '../../../../../../libs/util/data-fetcher/src'
+import { map } from 'rxjs/operators'
+import { TableItemModel } from './data-table.component'
+
+export class DataTableDataSource implements DataSource<TableItemModel> {
+  private dataItems$ = new BehaviorSubject<DataItem[]>([])
+
+  connect(): Observable<TableItemModel[]> {
+    return this.dataItems$.asObservable().pipe(
+      map((items) =>
+        items.map((item) => ({
+          id: item.id,
+          ...item.properties,
+        }))
+      )
+    )
+  }
+
+  disconnect(): void {
+    this.dataItems$.complete()
+  }
+
+  async showData(itemsPromise: Promise<DataItem[]>) {
+    const items = await itemsPromise
+    this.dataItems$.next(items)
+  }
+
+  clearData() {
+    this.dataItems$.next([])
+  }
+}

package/src/libs/ui/dataviz/src/lib/data-table/data-table.fixtures.ts

@@ -0,0 +1,84 @@
+import { DataItem, PropertyInfo } from '../../../../../../libs/util/data-fetcher/src'
+
+export const tableItemsFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0001',
+        firstName: 'John',
+        lastName: 'Lennon',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0002',
+        firstName: 'Ozzy',
+        lastName: 'Osbourne',
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '0003',
+        firstName: 'Claude',
+        lastName: 'François',
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'id', type: 'string' },
+    { name: 'firstName', label: 'Firstname', type: 'string' },
+    { name: 'lastName', label: 'Lastname', type: 'string' },
+  ] as PropertyInfo[],
+}
+
+export const someHabTableItemFixture = {
+  items: [
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '1',
+        name: 'France',
+        pop: 50500000,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '2',
+        name: 'Italy',
+        pop: 155878789655,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '3',
+        name: 'UK',
+        pop: 31522456,
+      },
+    },
+    {
+      type: 'Feature',
+      geometry: null,
+      properties: {
+        id: '4',
+        name: 'US',
+        pop: 3215448888,
+      },
+    },
+  ] as DataItem[],
+  properties: [
+    { name: 'id', label: 'ID', type: 'string' },
+    { name: 'name', label: 'Name', type: 'string' },
+    { name: 'pop', label: 'Population', type: 'number' },
+  ] as PropertyInfo[],
+}

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

@@ -22,3 +22,4 @@ export * from './lib/thumbnail/thumbnail.component'
 export * from './lib/ui-elements.module'
 export * from './lib/user-feedback-item/user-feedback-item.component'
 export * from './lib/user-preview/user-preview.component'
+export * from './lib/application-banner/application-banner.component'

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.html

@@ -0,0 +1,25 @@
+<div
+  *ngIf="message && bannerOpen"
+  class="absolute left-0 right-0 text-wrap bg-white mt-4 max-h-24"
+>
+  <div
+    class="flex flex-row py-2.5 px-5 gap-5 justify-start border max-h-20"
+    [ngClass]="classList"
+  >
+    <div [ngClass]="message.length > 200 ? 'pt-5' : 'pt-1'">
+      <ng-icon [name]="icon"></ng-icon>
+    </div>
+    <div class="flex flex-col justify-start gap-2.5">
+      <span *ngIf="title" class="font-bold">{{ title }}</span>
+      <span class="font-medium max-w-2xl" [innerHTML]="message"></span>
+    </div>
+    <button
+      *ngIf="closeEnabled"
+      class="self-start"
+      type="button"
+      (click)="closeMessage()"
+    >
+      <ng-icon name="matCloseOutline"> </ng-icon>
+    </button>
+  </div>
+</div>

package/src/libs/ui/elements/src/lib/application-banner/application-banner.component.ts

@@ -0,0 +1,70 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { CommonModule } from '@angular/common'
+import {
+  NgIconComponent,
+  provideIcons,
+  provideNgIconsConfig,
+} from '@ng-icons/core'
+import {
+  matCloseOutline,
+  matInfoOutline,
+  matWarningAmberOutline,
+} from '@ng-icons/material-icons/outline'
+import { matWarning } from '@ng-icons/material-icons/baseline'
+
+@Component({
+  selector: 'gn-ui-application-banner',
+  standalone: true,
+  imports: [CommonModule, NgIconComponent],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './application-banner.component.html',
+  styleUrl: './application-banner.component.css',
+  providers: [
+    provideIcons({
+      matWarningAmberOutline,
+      matInfoOutline,
+      matCloseOutline,
+      matWarning,
+    }),
+    provideNgIconsConfig({ size: '1.5em' }),
+  ],
+})
+export class ApplicationBannerComponent {
+  @Input() message: string
+  @Input() title: string
+  @Input() closeEnabled = false
+  @Input() extraClass = ''
+  @Input() icon = ''
+  msgClass = ''
+  bannerOpen = true
+
+  @Input() set type(value: 'primary' | 'secondary' | 'light') {
+    switch (value) {
+      case 'primary':
+        this.msgClass = 'bg-primary-darkest border-primary text-white'
+        this.icon = 'matWarning'
+        break
+      case 'light':
+        this.msgClass =
+          'bg-primary-opacity-10 border-primary-lightest text-black'
+        this.icon = 'matInfoOutline'
+        break
+      case 'secondary':
+      default:
+        this.msgClass = 'bg-primary-opacity-50 border-primary-darker text-black'
+        this.icon = 'matWarningAmberOutline'
+        break
+    }
+  }
+
+  get classList() {
+    if (this.message.length > 200) {
+      return `${this.msgClass} ${this.extraClass} overflow-y-scroll items-start`
+    }
+    return `${this.msgClass} ${this.extraClass} items-center`
+  }
+
+  closeMessage() {
+    this.bannerOpen = false
+  }
+}

package/src/libs/ui/elements/src/lib/markdown-parser/markdown-parser.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { marked } from 'marked'
 
 @Component({
@@ -13,6 +13,6 @@ export class MarkdownParserComponent {
   @Input() whitoutStyles?: boolean
 
   get parsedMarkdown() {
-    return marked.parse(this.textContent)
+    return marked.parse(this.textContent ?? '')
   }
 }

package/src/libs/ui/elements/src/lib/record-api-form/record-api-form.component.ts

@@ -161,6 +161,8 @@ export class RecordApiFormComponent {
       maxFeatures: limit !== '-1' ? Number(limit) : undefined,
       limit: limit !== '-1' ? Number(limit) : -1,
       offset: offset !== '' ? Number(offset) : undefined,
+      outputCrs:
+        format === ('application/json' || 'geojson') ? 'EPSG:4326' : undefined,
     }
 
     if (this.endpoint instanceof WfsEndpoint) {

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

@@ -19,6 +19,7 @@ import { MarkdownParserComponent } from './markdown-parser/markdown-parser.compo
 import { ThumbnailComponent } from './thumbnail/thumbnail.component'
 import { TimeSincePipe } from './user-feedback-item/time-since.pipe'
 import { UserPreviewComponent } from './user-preview/user-preview.component'
+import { ApplicationBannerComponent } from './application-banner/application-banner.component'
 
 @NgModule({
   imports: [
@@ -40,6 +41,7 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
     MaxLinesComponent,
     TextInputComponent,
     ImageInputComponent,
+    ApplicationBannerComponent,
   ],
   providers: [
     provideNgIconsConfig({
@@ -53,6 +55,7 @@ import { UserPreviewComponent } from './user-preview/user-preview.component'
     UserPreviewComponent,
     MarkdownParserComponent,
     ImageInputComponent,
+    ApplicationBannerComponent,
   ],
 })
 export class UiElementsModule {}

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

@@ -3,7 +3,6 @@ export * from './lib/badge/badge.component'
 export * from './lib/button/button.component'
 export * from './lib/check-toggle/check-toggle.component'
 export * from './lib/checkbox/checkbox.component'
-export * from './lib/chips-input/chips-input.component'
 export * from './lib/copy-text-button/copy-text-button.component'
 export * from './lib/date-picker/date-picker.component'
 export * from './lib/date-range-dropdown/date-range-dropdown.component'

package/src/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -83,6 +83,7 @@ export class AutocompleteComponent
   @Input() minCharacterCount? = 3
   // this will show a submit button next to the input; if false, a search icon will appear on the left
   @Input() allowSubmit = false
+  @Input() forceTrackPosition = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -98,6 +99,8 @@ export class AutocompleteComponent
   error: string | null = null
   suggestions$: Observable<AutocompleteItem[]>
   subscription = new Subscription()
+  private lastPosition: DOMRect | null = null
+  private intervalIdPosition: number | undefined
 
   @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
     item.toString()
@@ -147,6 +150,12 @@ export class AutocompleteComponent
         this.error = null
       }),
       switchMap((value) => this.action(value)),
+      tap((suggestions) => {
+        // forcing the panel to open if there are suggestions
+        if (suggestions.length > 0) {
+          this.triggerRef?.openPanel()
+        }
+      }),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
@@ -191,10 +200,49 @@ export class AutocompleteComponent
       this.inputRef.nativeElement.focus()
       this.cdRef.detectChanges()
     }
+
+    this.startTrackingPosition()
+  }
+
+  /**
+   * !!! This function is used only for web component mode,
+   * the autocomplete dropdown may not update its position
+   * if the page or container is disabling wind scroll.
+   */
+  private trackPosition = () => {
+    const dropdownOpened = this.triggerRef && this.triggerRef.panelOpen
+    const rect = this.inputRef.nativeElement.getBoundingClientRect()
+
+    if (
+      dropdownOpened &&
+      (!this.lastPosition ||
+        rect.top !== this.lastPosition.top ||
+        rect.left !== this.lastPosition.left)
+    ) {
+      this.triggerRef.updatePosition()
+    }
+
+    this.lastPosition = rect
+    requestAnimationFrame(this.trackPosition)
+  }
+
+  /**
+   * !!! This function is used only for web component mode,
+   * the autocomplete dropdown may not update its position
+   * if the page or container is disabling wind scroll.
+   */
+  startTrackingPosition() {
+    if (this.forceTrackPosition) {
+      requestAnimationFrame(this.trackPosition)
+    }
   }
 
   ngOnDestroy(): void {
     this.subscription?.unsubscribe()
+
+    if (this.intervalIdPosition) {
+      clearInterval(this.intervalIdPosition)
+    }
   }
 
   updateInputValue(value: AutocompleteItem) {

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

@@ -28,7 +28,6 @@ import { BadgeComponent } from './badge/badge.component'
 import { ButtonComponent } from './button/button.component'
 import { CheckToggleComponent } from './check-toggle/check-toggle.component'
 import { CheckboxComponent } from './checkbox/checkbox.component'
-import { ChipsInputComponent } from './chips-input/chips-input.component'
 import { DateRangePickerComponent } from './date-range-picker/date-range-picker.component'
 import { DragAndDropFileInputComponent } from './drag-and-drop-file-input/drag-and-drop-file-input.component'
 import { DropdownMultiselectComponent } from './dropdown-multiselect/dropdown-multiselect.component'
@@ -40,7 +39,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
 @NgModule({
   declarations: [
     DragAndDropFileInputComponent,
-    ChipsInputComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckboxComponent,
@@ -86,7 +84,6 @@ import { ViewportIntersectorComponent } from './viewport-intersector/viewport-in
     ButtonComponent,
     DragAndDropFileInputComponent,
     TextAreaComponent,
-    ChipsInputComponent,
     DropdownMultiselectComponent,
     ViewportIntersectorComponent,
     CheckToggleComponent,

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

@@ -6,6 +6,7 @@
     >
       <ul class="flex flex-col gap-2 w-full">
         <gn-ui-button
+          *ngIf="!isDraftPage"
           type="light"
           extraClass="flex flex-row items-center gap-2 w-full justify-start"
           (buttonClick)="duplicate.emit()"
@@ -23,7 +24,10 @@
           (buttonClick)="displayDeleteMenu()"
           [disabled]="!canDelete"
           data-test="record-menu-delete-button"
-          ><span translate>record.action.delete</span></gn-ui-button
+          ><span *ngIf="!isDraftPage" translate>record.action.delete</span>
+          <span *ngIf="isDraftPage" translate
+            >record.action.rollback</span
+          ></gn-ui-button
         >
       </ul>
     </div>
@@ -60,4 +64,36 @@
       </div>
     </div>
   </ng-container>
+  <ng-container *ngSwitchCase="'rollbackMenu'">
+    <div
+      data-test="rollbackMenuSection"
+      class="w-80 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.undo.confirmation.title' | translate
+      }}</span>
+      <span class="text-center">{{
+        'editor.record.undo.confirmation.message' | translate
+      }}</span>
+      <div class="flex flex-row gap-8 justify-center">
+        <gn-ui-button
+          (buttonClick)="rollback.emit()"
+          cdkFocusInitial
+          type="primary"
+          data-cy="confirm-button"
+          [style.--gn-ui-button-width]="'120px'"
+          >{{
+            'editor.record.undo.confirmation.confirmText' | translate
+          }}</gn-ui-button
+        >
+        <gn-ui-button
+          [style.--gn-ui-button-width]="'120px'"
+          (buttonClick)="closeActionMenu.emit()"
+          >{{
+            'editor.record.undo.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

@@ -13,7 +13,7 @@ import { ConfirmationDialogComponent } from '../../../../../../../libs/ui/elemen
 import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
 import { TranslateModule } from '@ngx-translate/core'
 
-type ActionMenuPage = 'mainMenu' | 'deleteMenu'
+type ActionMenuPage = 'mainMenu' | 'deleteMenu' | 'rollbackMenu'
 
 @Component({
   selector: 'gn-ui-action-menu',
@@ -32,9 +32,11 @@ type ActionMenuPage = 'mainMenu' | 'deleteMenu'
 export class ActionMenuComponent {
   @Input() canDuplicate: boolean
   @Input() canDelete: boolean
+  @Input() isDraftPage: boolean
   @Output() duplicate = new EventEmitter<void>()
   @Output() delete = new EventEmitter<void>()
   @Output() closeActionMenu = new EventEmitter<void>()
+  @Output() rollback = new EventEmitter<void>()
 
   @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger
 
@@ -55,7 +57,11 @@ export class ActionMenuComponent {
   }
 
   displayDeleteMenu() {
-    this.sectionDisplayed = 'deleteMenu'
+    if (this.isDraftPage) {
+      this.sectionDisplayed = 'rollbackMenu'
+    } else {
+      this.sectionDisplayed = 'deleteMenu'
+    }
     this.cdr.markForCheck()
   }
 }

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

@@ -162,9 +162,11 @@
         <gn-ui-action-menu
           [canDuplicate]="canDuplicate(item) && !isDuplicating"
           [canDelete]="canDelete(item)"
+          [isDraftPage]="isDraftPage"
           (duplicate)="handleDuplicate(item)"
           (delete)="handleDelete(item)"
           (closeActionMenu)="closeActionMenu()"
+          (rollback)="handleRollback(item)"
         >
         </gn-ui-action-menu>
       </ng-template>

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

@@ -74,6 +74,7 @@ export class ResultsTableComponent {
   @Output() recordClick = new EventEmitter<CatalogRecord>()
   @Output() duplicateRecord = new EventEmitter<CatalogRecord>()
   @Output() deleteRecord = new EventEmitter<CatalogRecord>()
+  @Output() rollbackDraft = new EventEmitter<CatalogRecord>()
   @Output() recordsSelectedChange = new EventEmitter<
     [CatalogRecord[], boolean]
   >()
@@ -186,6 +187,11 @@ export class ResultsTableComponent {
     this.closeActionMenu()
   }
 
+  handleRollback(item: unknown) {
+    this.rollbackDraft.emit(item as CatalogRecord)
+    this.closeActionMenu()
+  }
+
   setSortBy(col: string, order: 'asc' | 'desc') {
     this.sortByChange.emit([col, order])
   }

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

@@ -5,4 +5,3 @@ export * from './lib/loading-mask/loading-mask.component'
 export * from './lib/color-scale/color-scale.component'
 export * from './lib/popup-alert/popup-alert.component'
 export * from './lib/spinning-loader/spinning-loader.component'
-export * from './lib/step-bar/step-bar.component'