geonetwork-ui 2.5.0-dev.a538998f8 → 2.5.0-dev.aed8e2abc

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

@@ -41,7 +41,7 @@ import {
   provideIcons,
   provideNgIconsConfig,
 } from '@ng-icons/core'
-import { iconoirSearch } from '@ng-icons/iconoir'
+import { iconoirLongArrowDownLeft, iconoirSearch } from '@ng-icons/iconoir'
 import { matClose } from '@ng-icons/material-icons/baseline'
 
 export type AutocompleteItem = unknown
@@ -65,9 +65,10 @@ export type AutocompleteItem = unknown
     provideIcons({
       iconoirSearch,
       matClose,
+      iconoirLongArrowDownLeft,
     }),
     provideNgIconsConfig({
-      size: '1.5rem',
+      size: '1.75rem',
     }),
   ],
 })
@@ -75,6 +76,7 @@ export class AutocompleteComponent
   implements OnInit, AfterViewInit, OnDestroy, OnChanges
 {
   @Input() placeholder: string
+  @Input() enterButton = false
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
@@ -83,9 +85,11 @@ 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>()
+  @Output() isSearchActive = new EventEmitter<boolean>()
   @ViewChild(MatAutocompleteTrigger) triggerRef: MatAutocompleteTrigger
   @ViewChild(MatAutocomplete) autocomplete: MatAutocomplete
   @ViewChild('searchInput') inputRef: ElementRef<HTMLInputElement>
@@ -98,15 +102,38 @@ export class AutocompleteComponent
   error: string | null = null
   suggestions$: Observable<AutocompleteItem[]>
   subscription = new Subscription()
+  private lastPosition: DOMRect | null = null
+  private intervalIdPosition: number | undefined
+  enterBtnPosition = 0
+  searchActive = false
 
   @Input() displayWithFn: (item: AutocompleteItem) => string = (item) =>
     item.toString()
 
+  get displayEnterBtn() {
+    return this.enterButton && this.allowSubmit && !this.searchActive
+  }
+
   displayWithFnInternal = (item?: AutocompleteItem) => {
     if (item === null || item === undefined) return null
     return this.displayWithFn(item)
   }
 
+  getExtraClass(): string {
+    if (this.allowSubmit) {
+      if (this.enterButton) {
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+var(--icon-padding))] inset-y-[--icon-padding]'
+      } else {
+        return 'border rounded-lg absolute w-8 h-8 right-[calc(var(--icon-width)+0.25*var(--icon-width))] inset-y-[calc(0.25*var(--icon-width))]'
+      }
+    } else {
+      if (!this.enterButton) {
+        return 'border rounded-lg absolute w-8 h-8 right-2 inset-y-2'
+      }
+    }
+    return 'border rounded-lg absolute w-8 h-8'
+  }
+
   constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
@@ -114,6 +141,13 @@ export class AutocompleteComponent
       const previousTextValue = this.displayWithFnInternal(value.previousValue)
       const currentTextValue = this.displayWithFnInternal(value.currentValue)
       if (previousTextValue !== currentTextValue) {
+        if (currentTextValue) {
+          this.searchActive = true
+          this.isSearchActive.emit(true)
+        } else {
+          this.searchActive = false
+          this.isSearchActive.emit(false)
+        }
         this.updateInputValue(value.currentValue)
       }
     }
@@ -147,6 +181,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 +231,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) {
@@ -208,6 +287,8 @@ export class AutocompleteComponent
 
   clear(): void {
     this.inputRef.nativeElement.value = ''
+    this.searchActive = false
+    this.isSearchActive.emit(false)
     this.inputCleared.emit()
     this.selectionSubject
       .pipe(take(1))
@@ -217,6 +298,8 @@ export class AutocompleteComponent
 
   handleEnter(any: string) {
     if (!this.cancelEnter && this.allowSubmit) {
+      this.isSearchActive.emit(true)
+      this.searchActive = true
       this.inputSubmitted.emit(any)
     }
   }
@@ -246,4 +329,10 @@ export class AutocompleteComponent
       this.control.setValue('')
     }
   }
+
+  handleInput(event: InputEvent) {
+    this.searchActive = false
+    this.isSearchActive.emit(false)
+    this.enterBtnPosition = event.target['value'].length * 8 + 80
+  }
 }

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/inputs/src/lib/url-input/url-input.component.ts

@@ -48,6 +48,7 @@ export class UrlInputComponent implements OnChanges {
   @Input() placeholder = 'https://'
   @Input() disabled: boolean
   @Input() showValidateButton = true
+  @Input() resetUrlOnChange: number
 
   /**
    * This will emit null if the field is emptied
@@ -60,8 +61,8 @@ export class UrlInputComponent implements OnChanges {
   constructor(private cd: ChangeDetectorRef) {}
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes['value']) {
-      this.inputValue = changes['value'].currentValue
+    if (changes['resetUrlOnChange']) {
+      this.inputValue = ''
     }
   }
 

package/src/libs/ui/search/src/lib/record-preview-row/record-preview-row.component.html

@@ -64,7 +64,7 @@
       class="col-start-2 row-start-4 sm:row-start-3 absolute right-[4em] sm:right-[5em]"
     >
       <gn-ui-metadata-quality
-        smaller="true"
+        [smaller]="true"
         [metadata]="record"
         [metadataQualityDisplay]="metadataQualityDisplay"
       ></gn-ui-metadata-quality>

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'

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

@@ -1,12 +1,37 @@
-<div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
-  <div
-    [style.width.%]="progress"
-    class="flex {{
-      color.innerBar
-    }} my-1 mx-1 transition-width duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
-  >
-    <div class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4">
-      {{ progress }}%
+<ng-container [ngSwitch]="type">
+  <!-- Light Theme -->
+  <ng-container *ngSwitchCase="'light'">
+    <div class="flex items-center relative">
+      <div
+        class="flex-shrink-0 {{ color.text }} text-xs font-medium mr-2
+             text-opacity-100 !text-slate-800"
+      >
+        {{ progress }}%
+      </div>
+      <div class="flex-grow h-[6px] w-full {{ color.outerBar }} rounded-full">
+        <div
+          [style.width.%]="progress"
+          class="{{ color.innerBar }} transition-width duration-500
+               ease-in-out rounded-full shadow-sm h-full"
+        ></div>
+      </div>
     </div>
-  </div>
-</div>
+  </ng-container>
+
+  <!-- Default / Primary / Secondary Themes -->
+  <ng-container *ngSwitchDefault>
+    <div class="flex h-full {{ color.outerBar }} rounded-t-lg rounded-b-lg">
+      <div
+        [style.width.%]="progress"
+        class="flex {{ color.innerBar }} my-1 mx-1 transition-width
+               duration-500 ease-in-out rounded-t-md rounded-b-md shadow-xl"
+      >
+        <div
+          class="flex items-center pl-2 py-1 {{ color.text }} font-bold text-4"
+        >
+          {{ progress }}%
+        </div>
+      </div>
+    </div>
+  </ng-container>
+</ng-container>

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

@@ -1,4 +1,5 @@
 import { Component, Input } from '@angular/core'
+import { NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'
 
 interface ColorScheme {
   outerBar: string
@@ -11,10 +12,11 @@ interface ColorScheme {
   templateUrl: './progress-bar.component.html',
   styleUrls: ['./progress-bar.component.css'],
   standalone: true,
+  imports: [NgSwitch, NgSwitchCase, NgSwitchDefault],
 })
 export class ProgressBarComponent {
   @Input() value = 0
-  @Input() type: 'primary' | 'secondary' | 'default' = 'default'
+  @Input() type: 'primary' | 'secondary' | 'default' | 'light' = 'default'
 
   get progress() {
     return this.value > 0 ? (this.value < 100 ? this.value : 100) : 0
@@ -40,6 +42,12 @@ export class ProgressBarComponent {
           innerBar: 'bg-secondary-lighter',
           text: 'text-white',
         }
+      case 'light':
+        return {
+          outerBar: 'bg-primary-white',
+          innerBar: 'bg-primary',
+          text: 'text-main',
+        }
     }
   }
 }

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

@@ -3,14 +3,13 @@ import { UtilSharedModule } from '../../../../../libs/util/shared/src'
 import { TranslateModule } from '@ngx-translate/core'
 import { NgxDropzoneModule } from 'ngx-dropzone'
 import { ColorScaleComponent } from './color-scale/color-scale.component'
-import { StepBarComponent } from './step-bar/step-bar.component'
 import { TagInputModule } from 'ngx-chips'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'
 import { CommonModule } from '@angular/common'
 
 @NgModule({
-  declarations: [ColorScaleComponent, StepBarComponent],
+  declarations: [ColorScaleComponent],
   imports: [
     CommonModule,
     TranslateModule.forChild(),
@@ -21,6 +20,6 @@ import { CommonModule } from '@angular/common'
     UtilSharedModule,
     MatProgressSpinnerModule,
   ],
-  exports: [StepBarComponent],
+  exports: [],
 })
 export class UiWidgetsModule {}

package/src/libs/util/data-fetcher/src/lib/data-fetcher.ts

@@ -17,10 +17,17 @@ export async function openDataset(
     namespace?: string
     wfsVersion?: WfsVersion
     wfsFeatureType?: string
-  }
+  },
+  cacheActive?: boolean
 ): Promise<BaseReader> {
   const fileType = await inferDatasetType(url, typeHint)
-  let reader: BaseReader
+  let reader:
+    | CsvReader
+    | JsonReader
+    | GeojsonReader
+    | ExcelReader
+    | GmlReader
+    | WfsReader
   try {
     switch (fileType) {
       case 'csv':
@@ -42,6 +49,7 @@ export async function openDataset(
         reader = await WfsReader.createReader(url, options.wfsFeatureType)
         break
     }
+    reader.setCacheActive(cacheActive)
     reader.load()
     return reader
   } catch (e: any) {
@@ -61,9 +69,10 @@ export async function openDataset(
 export async function readDataset(
   url: string,
   typeHint?: SupportedType,
-  options?: any
+  options?: any,
+  cacheActive = true
 ): Promise<DataItem[]> {
-  const reader = await openDataset(url, typeHint, options)
+  const reader = await openDataset(url, typeHint, options, cacheActive)
   try {
     return await reader.read()
   } catch (e: any) {

package/src/libs/util/data-fetcher/src/lib/readers/base-cache.ts

@@ -0,0 +1,14 @@
+import { BaseReader } from './base'
+
+export abstract class BaseCacheReader extends BaseReader {
+  constructor(
+    protected url: string,
+    protected cacheActive = true
+  ) {
+    super(url)
+  }
+
+  setCacheActive(value: boolean) {
+    this.cacheActive = value
+  }
+}

package/src/libs/util/data-fetcher/src/lib/readers/base-file.ts

@@ -2,13 +2,14 @@ import { BaseReader } from './base'
 import { DataItem, DatasetInfo, PropertyInfo } from '../model'
 import { getJsonDataItemsProxy, jsonToGeojsonFeature } from '../utils'
 import { generateSqlQuery } from '../sql-utils'
+import { BaseCacheReader } from './base-cache'
 
 type ParseResult = {
   items: DataItem[]
   properties: PropertyInfo[]
 }
 
-export class BaseFileReader extends BaseReader {
+export class BaseFileReader extends BaseCacheReader {
   private parseResult_: Promise<ParseResult>
 
   protected getData(): Promise<ParseResult> {

package/src/libs/util/data-fetcher/src/lib/readers/base.ts

@@ -11,8 +11,8 @@ import {
 
 export class BaseReader {
   protected selected: FieldName[] = null
-  protected groupedBy: FieldGroupBy[] = null
-  protected aggregations: FieldAggregation[] = null
+  public groupedBy: FieldGroupBy[] = null
+  public aggregations: FieldAggregation[] = null
   protected filter: FieldFilter = null
   protected sort: FieldSort[] = null
   protected startIndex: number = null

package/src/libs/util/data-fetcher/src/lib/readers/csv.ts

@@ -47,6 +47,6 @@ export function parseCsv(text: string): {
 
 export class CsvReader extends BaseFileReader {
   getData() {
-    return fetchDataAsText(this.url).then(parseCsv)
+    return fetchDataAsText(this.url, this.cacheActive).then(parseCsv)
   }
 }

package/src/libs/util/data-fetcher/src/lib/readers/excel.ts

@@ -28,6 +28,6 @@ export function parseExcel(buffer: ArrayBuffer): Promise<{
 
 export class ExcelReader extends BaseFileReader {
   getData() {
-    return fetchDataAsArrayBuffer(this.url).then(parseExcel)
+    return fetchDataAsArrayBuffer(this.url, this.cacheActive).then(parseExcel)
   }
 }

package/src/libs/util/data-fetcher/src/lib/readers/geojson.ts

@@ -24,6 +24,6 @@ export function parseGeojson(text: string): {
 
 export class GeojsonReader extends BaseFileReader {
   getData() {
-    return fetchDataAsText(this.url).then(parseGeojson)
+    return fetchDataAsText(this.url, this.cacheActive).then(parseGeojson)
   }
 }

package/src/libs/util/data-fetcher/src/lib/readers/gml.ts

@@ -37,17 +37,17 @@ export function parseGml(
 }
 
 export class GmlReader extends BaseFileReader {
-  namespace: string
-  version: WfsVersion
-
-  constructor(url, namespace, version) {
+  constructor(
+    protected url: string,
+    protected namespace: string,
+    protected version: WfsVersion,
+    protected cacheActive = true
+  ) {
     super(url)
-    this.namespace = namespace
-    this.version = version
   }
 
   protected getData() {
-    return fetchDataAsText(this.url).then((text) =>
+    return fetchDataAsText(this.url, this.cacheActive).then((text) =>
       parseGml(text, this.namespace, this.version)
     )
   }

package/src/libs/util/data-fetcher/src/lib/readers/json.ts

@@ -23,6 +23,6 @@ export function parseJson(text: string): {
 
 export class JsonReader extends BaseFileReader {
   getData() {
-    return fetchDataAsText(this.url).then(parseJson)
+    return fetchDataAsText(this.url, this.cacheActive).then(parseJson)
   }
 }